Understanding Web-Safe Fonts / Web Friendly Fonts

imageWe have often receive lots of questions about Web-safe fonts, or web friendly fonts. We have products that work with technologies like Microsoft Word, and publish back to websites like DotNetNuke. (DNN Word Editor)

The issue is that not all fonts will work on all browsers on all computers. Here is the reason why.

Web-Safe Fonts

There are an awful lot of fonts in the world! For years, no doubt, you’ve been using a ton of them in word processing documents, party invitations, banners, etc. But have you ever noticed how few of them are used on the web?

There’s a really good reason for this. When a web page loads, the browser is told to write text onto the screen using a specified font—one that is stored on the computer that the browser is running on. Therefore, if the web page’s code is calling for a font that a user does not have installed on their computer, it won’t show up! What that person will instead see is a default font, which might look a little ugly.

Now you might be wondering why this will happen so often if there are so many fonts installed on your computer. Well, here’s the problem: the two most widely-used operating systems—Windows and Mac OS X—each come installed with a different set of fonts. Awesome!

To illustrate this point, here’s where the fonts are stored in Windows 7:

image

And here’s where they’re stored on Mac OS 10.6:

image

Right away, we can see that only one of the displayed fonts overlaps: Arial. None of the Calibri orCambria fonts are available on the Mac, and the Mac has at least a dozen just on this page that aren’t available in Windows!

In fact, between these two systems, there are only ten fonts that overlap:

image

Those fonts that fall into that middle area, covered by both operating systems, are what we callweb-safe fonts. If you use Calibri on your webpage, Mac users won’t see it; if you use Andale, Windows users won’t see it; but if you use Georgia, you can rest assured that users of both systems will see the it.

Now there’s a bit of grey area here. Users of older operating systems don’t have some of these fonts we’ve declared web-safe. For example, Windows XP users don’t have Palatino or Trebuchet MS. Even worse, users of Android mobile phones don’t have any of these fonts.

So to be clear, there are only five fonts that are considered universal:

  • Arial
  • Courier New
  • Georgia
  • Times New Roman
  • Verdana

Feel free to use these fonts all you want! Even if you dug up that old Packard Bell you had back in 1997 and it didn’t explode when connected to the modern web, you’d be able to see these fonts rendered as intended. Those Android users will just have to fight for themselves.

Web Safe Fonts Table

image

*The green marks show very common fonts, the yellow shows not so common but all are generally accepted as web safe.

So, what happens when the font fails?

Your text will still be visible, but the browser will use whatever default font it supplies for situations like this. This means that you may have intended to use a cute, scripty font, but what you get is

Your text typed in a regular serif font.

This is good because your content still goes through, but your design might be compromised. Therefore, you should always specify fallback fonts and a category that the font falls into. Let’s say that you want to use Helvetica, but you’ll settle for Arial. Since both of these fonts are considered to be sans-serif fonts, you can write a CSS declaration like this:

{ font-family: Helvetica, Arial, sans-serif; }

The browser will first try to use Helvetica, and if it’s not installed, it’ll attempt to use Arial. If even that font is not available, it’ll use whatever default sans-serif font the browser likes, but at least it’ll be the correct type of font!

For more information about coding fallbacks, alternative methods to using non-web-safe fonts, and everything typography related, you can pick up a copy of our Web Typography Handbook. It’ll tell you everything you need to know.

Veranda’s | Pergolas | Patios | Alfresco | Designs Kits Melbourne Builders

imageWe are please to announce the launch of one of Melbourne’s premier builders websites. The site for TotallyOutdoors.com.au focuses on:

Verandahs | Pergolas | Patios | Alfresco | Designs Kits Melbourne Builders

As a supplier of:

Centenary Pergolas & Carports

Eclipse – Louver Roofs

Solarspan Roofing

Totally Outdoors are one of Australia’s premier supplier and builder of outdoor roofing needs.

We are please to be providing services to them, and welcome them on board the InteractiveWebs team.

Microsoft CRM 2011 and Custom Silverlight Development

imageI noticed a question today on a Microsoft Dynamics CRM discussion site asking

“is there anyone who is not trying to sell me their product, that has done something interesting with CRM and Silverlight?”

Well yes there is…

InteractiveWebs have done several interesting projects with Silverlight as an interface to Microsoft CRM.

One of the most interesting of these is a Silverlight membership login system for a grain trading company based in Australia. The business is an organisation that trades produce in a similar way to how shares are traded in the stock market. The difference being that the commodity being traded has been grown by “growers” (farmers) and represents the produce that their farm has for sale in the open grain trade market.

Interestingly, Microsoft CRM is being used entirely for the backend management of this trading. This is quite complex in it’s design as you can imagine would be the case if you were running a stock exchange using CRM.

Entities are being used to track the bidding for sales and purchasing of hundreds of different qualities of different grains, at different locations over an entire country.

Of note to the Silverlight interface, is the fact that there are an ever increasing number of records within this system in the order of 65,000,000 records of some CRM Entities.

 

About the Silverlight Interface

In it’s simplest function, the Silverlight interface is a membership system.

image

Allowing users to login and manage the buying and selling of commodities. Very similar to how users of a Stockbroking system would login and buy and sell their shares. But of course the user data is all being driven from a CRM backend running CRM 2011 with IFD.

The membership login is using custom attributes within CRM Contacts to authenticate and allow login.

Once logged in the user can modify personal details that are saved back to the CRM Contact entity.

imageimage

Data is retrieved live using XRM to interface with CRM on the fly. Silverlight gives a clean and robust interface for users.

 

Other Types of Data Retrieval

Just like with the sale of share, there is some paperwork generated with the buying and selling of commodities. Broker Notes, Freight Invoices, and Monthly trade Statements are example of just a few. Originally the thought was to interface with a Microsoft SharePoint server to store the related .PDF documents generated for these items. Instead we took the simpler approach of attaching the .PDF documents to the relevant records in the custom entities that are used to track each trade.

This data is simply stored as CRM Notes with Attached Files (.pdf) to the custom Entities.

Then in the Silverlight interface we allow users to open (on the fly) these notes and attached .pdf files to view the “paperwork” associated with each sale.

image

Summary data is presented that is referencing custom attribute data, and able to be exported live from Silverlight to Excel.

image

Or clicking on the PDF icon, will open the associated attached note from CRM and open the .pdf record live.

image
Example of PDF data.

 

Creating CRM Records from Silverlight with XRM

Growers of commodities can create new stock records, listing the gran they have, quality, quantity, location etc in a simple user interface.

image

Listing too the price they wish to achieve in order to sell the produce.

Doing this creates a new record in a custom Entity in CRM directly, and this data is used in the bidding and selling process.

The data is available to Silverlight users in their record of stock.

image
Similar in concept to a statement of shares for a stock market trader.

 

Where is Gets Cool

So far, these are reasonably simple interfaces using XRM to CRM. Reading, writing, opening attached files etc. Where it gets interesting is in some real time graphing that we do to show bids on stocks / commodities.

For this we are needing to access tens of thousands of records that represent different bids for different commodities and work out on the fly the best or highest bid, and show that to the client in a fast loading graph.

image

This is where Silverlight and some cleaver XRM calls to some cleaver processes in CRM delivers a great result.

With the great graphing tools in Silverlight, the graph draws in real time and animates the loading of data. It has a full screen mode:

image

And is really a great use of Silverlight for this particular task.

 

Best of All it Runs Out of Browser

One of the features we built on this interface is the ability to “Run Out of Browser”. So the client can right click the interface and select to “Install to this computer”.

image

This adds the project to an Out of Browser Silverlight experience that can be launched as any other application or program from your computer.

image

This feature of Silverlight can run on a Mac or PC, and delivers an experience for end users that is very similar to having a membership program installed on your computer.

image

The project will auto update if we modify the web based source version with a new release automatically.  The client is promoted with a messaging saying the program will close to update, then opens with the new version automatically. Truly using the best experience that Silverlight has to offer.

Uninstalling the out of browser app is as simple as a right click in the app, and selecting from a dropdown “Remove this application”.

image

Kind of like a windows 8 experience with any pc.

 

Thoughts on this and Silverlight for Microsoft CRM.

Silverlight… ahhh what to say about Silverlight….. where to start.

1. We drank the Kool Aid. Microsoft told us how great Silverlight would be, how it would segregate the design team from the development team and deliver the benefits of keeping people within their specializations.

2. We spend years of time investing in Silverlight development. We get it, we can work with it and we can do amazing things with it. This and other cool projects including a MS Pivot interface to DotNetNuke and Microsoft CRM data.

MS Pivot and CRM – http://demo.interactivewebs.com.au/dnnpivot/dnnpivot_demo.htm

3. We kicked it’s butt. We were able to deliver anything we wanted using Silverlight and made it interface with a multitude of data sources at multiple times using XRM and other web services to pull data from both CRM and other data sources.

 

And after all that… I can say with some authority. Silverlight is dead!

We get it, we can do it, we hate it and we regret the time we wasted after Microsoft mislead us into their Silverlight sphere.

image
Microsoft Silverlight Evangelist – We drank the Kool Aid

Silverlight never came close to delivering on any of the promises that Microsoft made about it.

It is tricky to develop in, it is poorly supported by even Microsoft, design tools are definitely lacking greatly, the development experience was a mine field of poorly documents bugs and broken features that required time and commitment to untangle the crap that Microsoft produced.

It was amazing to us how many things we were doing and solving that literally no one else was talking about. We felt like the first team walking on the Silverlight moon at every step of the way.

The end result is something that we are proud of. There are some cool features that we think make the project example above shine. But for all the time, and trouble invested to deliver it, it is just not worth it!

If looking at this and other similar projects again, we would use other technology to more quickly develop a very similar experience. There quite simply is nothing in Silverlight in interfacing with CRM that we can do easier other ways.

Final Thoughts

So there you have it. A good example of Silverlight with CRM, and the reason why we would suggest you use other technology yourself.

And check out that Silverlight Pivot link above. It is actually very cool too in what it does and how it does it. We have rigged this to work against any internet facing CRM environment including the Microsoft Hosted CRM.

 

Contact Us for CRM Development

We wrote this to help someone asking for a non commercial plug for a Silverlight in CRM example. We hope the above meets the requirement of that… but we are a development and CRM business, so we need to mention that if you need some cleaver interfacing with CRM. Then please contact us here http://www.interactivewebs.com/ContactUs.aspx.

We have other examples to show too.

Network You – New DotNetNuke YouTube Video Module

imageRecently we launched a new website called Network You. The site can be found at networkyou.org.

Of particular interest on the site is a new module or ours soon to be released to the DotNetNuke Community called Mushroom Video Module.

The module will feed Youtube Play Lists from youtube.com directly into your site in an easy to manage and easy to use video feed.

 

The end result of the feeds looks like this:

 

image

http://www.networkyou.org/Network/GlobalVillage.aspx

With the video feeds being selected directly from a play list selector button that referenced a YouTube account name.

image

image

The module also uses the template system developed by InteractiveWebs for the display system that allows simple to load templates to be customized to the users requirements.

image

An example of the module with multiple feeds onto a single page is this one: http://www.networkyou.org/Network/Professionals/VideoTopics.aspx

We will be releasing the module to the public in the next few weeks. We would love to hear any comments!

Adding an Attachment Field to Feedback Designer

Steps to add an Attachment Field to Feedback Designer Module for DotNetNuke.

  1. Select Configure Module
  2. Select Add Edit Form Items
    image
  3. Enter a Name for the Field (Like Upload File, or Attachment etc.)
  4. image
  5. Select Add – To add the filed to the Existing Form Items
  6. Use the up or down arrows to position the filed where you would like it.
  7. image
  8. Back and back

The result is a form with file upload ability. The attachment is sent as an email attachment.

image

Please contact us for additional DotNetNuke Support requirements.

Bulk Email Messaging and Bounce Back Monitoring

image

The Bulk Email module for DotNetNuke has a feature known as Bounce Email Monitoring, and it is probably a good idea to understand what it does and how it does it so we can explain how best to configure it.

Sending a Bulk Email Message

When an email message is generated using the DotNetNuke Bulk Email Module, a list of all the email addresses that you have selected from multiple sources is generated into a database.

The lists that you select can include.

  • Website Users
  • Custom Lists that you import
  • Microsoft CRM Marketing Lists
  • Imported contacts from email programs
  • Custom typed email address

Once the list is complied, email addresses are removed.

  • Duplications
  • Email addresses on the unsubscribed list
  • Email addresses on the bounce email list (that meet the requirements set)

Then the email messages are sent out and ticked off as being sent.

You can see that bounced email addresses will only be removed if they are on the bounced email list, and have bounced to a count matched the settings configured.

image

How the Bounce Email List is Generated and Counted

Periodically, the module will use the setting for the POP 3 account to look for email messages that it can add as a bounce. To do this, it will download all messages in the mailbox and look using some complex searching tools for email messages that appear to have bounced back from a failed send attempt.

Unfortunately email servers report bounce messages in different ways, so the code that reads the email messages and looks for bounce backs is long and complex. For this reason, the process of finding bounce messages should be kept to a minimum to reduce the load on the server.

Reduce Load

The best way to reduce load is to minimise the number of mail messages that the process needs to check.

The best way to do this is three fold.

  1. Send email from a unique email address that suggests no normal communication should run through that account. noreply@domain.com is my suggestion. That way the only email messages in that mailbox should only ever be bounced messages.
  2. Delete processes messages. The module can do this for you, but if the mailbox is a normal account, then ensure it is basically kept empty.
  3. Manually delete messages that are not bounce messages. If you intent to use a general account, then you should keep it as free as possible from general communications.

What happens if you don’t do this?

The process of downloading thousands of email messages, checking them all and processing them all can take hours. It will put a huge load on both the web server and your email server. It will increase your data transfer costs both on your web and email server.

So follow the suggestions and the result should be clean and fast.

Want to know more about email messaging in DotNetNuke.

Bing Ajax Control over HTTPS or HTTP Secure SSL

image

Today we updated some code in our Contact Details module for DotNetNuke.

The module makes it easy to add your contact details to a page in DNN.

There is a map control function that uses Bing Maps that can be seen in the demo here: http://www.interactivewebs.com/contactdetails/Demo.aspx

We have updated the module today to support the use of SSL or https connections to the page that contains the module.

How we did this

So here are the two ways to add the Bing Ajax control to your page in HTTP or HTTPS:

HTTP:

<script src=”http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3” type="text/javascript"></script>

HTTPS:

<script src=”https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3&s=1” type="text/javascript"></script>

Now on the HTTPS version notice I changed the URL to start with HTTPS, this is what pulls from the secure site over at the good Bing folks. Also notice I added the “s” parameter and set it to 1, default is 0, this tells the Bing API to get the image tiles for the map from HTTPS.

Why? you ask.

Well it seems that the API determines what protocol to use for JavaScript and other parts from the document.location.protocol, however when it comes to the map tiles it looks to a global setting that is set based on the parameter being passed.

Upgrading Steps for DotNetNuke from DNN 4.x.x to DNN 6.x.x

image

Specifically we wanted to take a version of DotNetNuke from 4.9.1 to 6.1.3 today and actually found that it worked perfectly.

We did take some steps that helped a lot. This may be of value to some of you.

Before we Began

1. Backed up the entire file system for the website.

2. Backed up the database on SQL server for the site in question.

3. Ensured we had a HOST login account that worked.

4. Ensured the server we were running on (Windows 2008 R2) was patched and running .Net Framework version 3.5 SP1.

5. If your site is busy, work out a way to stop the traffic. One way is to add a portal alias, like test.domain.com in your DNN website. Setup a DNS entry to that test.domain.com points to the IP address of your DNN web server. In IIS, setup a Binding, so that test.domain.com will answer for your site.

Then access the site on test.domain.com and check you can login, etc.

Then remove the binding in IIS for www.domain.com (temporarily while you play upgrade).

This way, the site will not answer normal user access, but will answer you when you go to test.domain.com.

 

Update Path

We suggest the following table for upgrading your DNN Website.

Note: If you are upgrading a version prior to DNN 4.6.2, then you will need to manually update the web.config file. After this version the updates are automatic.

 

Steps On Upgrade

On Codeplex, Click on View All Downloads

image

Find the version for the next upgrade step from the table above. Then find the Version Upgrade download link.

image

Download the .zip file to your server. Then extract the contents directly over the existing website directory structure.

You will be asked to overwrite files, Tick yes to all.

You will be asked to overwrite folders, Tick Apply to all – And continue.

Once you have extracted, hit your website in a browser, and watch the upgrade happen before your eyes.

Repeat the steps of backing up after each successful update, and download the next update package and repeat the process.

 

Tricky Bits

If you are using the XML module, on a DNN version before 5.3.0, then you should obtain the latest update of the module before moving past 5.3.0.

If you have the Ifinity URL Master module. We suggest turning it off to upgrade.

 

After Upgrade

In IIS you will wan to move the website to a new application pool that is running .net 3.5 or 4.0 Integrated. You cannot share application pools with earlier DNN versions that run on .net 2.0.

Jump into the HOST settings, and configure things like, friendly URL’s, DNN Host Menu Options, and performance settings.

If you disabled bindings (from the initial steps 5 above) re-enable them and test access.

 

DotNetNuke Upgrade Service and Support

We offer a DotNetNuke Support Service that can include the upgrading of DNN websites for you. This is especially useful if you are not confident with either .net websites or IIS server administration.

We are happy to help you evaluate the upgrade path and potential problems. The cost of the service is in effect calculated at at an hourly estimate. It should be noted that if everything goes well, and trouble free, there there is at least 1 hours work in this upgrade, usually more as there are often little bugs to sort out.

Please contact us for support here: http://www.interactivewebs.com/Services/DotNetNukeSupport.aspx

Additional References

http://www.datasprings.com/resources/articles-information/dotnetnuke-articles/upgrading-dotnetnuke-4.9-to-dotnetnuke-6.0

DotNetNuke Bulk Email on WebFarm Support Added

image 

Today we have added support to the DotNetNuke Bulk Emailer module for WebFarms.

We have identified a feature of Bulk Emailer for DotNetNuke that has caused some issues with the running of the module on a WebFarm.

There is an automatic enable feature that checks when you start a bulk email message that the scheduler for the module in the Host / Scheduler is enabled. If it is not enabled, the module will enable it.

The Problem

With WebFarms there are two processes that run at the same time.

image

This will cause duplication of sending email messages.

The solution is easy… just disable one of the schedule processes. However this will be automatically re-enabled by the module.

The Fix

To solve this we have added an option to the Bulk Emailer Settings. This option enables you to tick that you are using a WebFarm, stopping the automatic enabling of iWebs BulkEmailer EmailSchedule process.

Additional Steps Required

After you enable WebFarm mode, you will need to go into the Host Scheduler processes and disable all but one of the multiple processes for the iWebs BulkEmailer EmailSchedule.

image

The result will be that only one of the schedulers run and only one email message will be sent.