How to make your website and email mobile-friendly

Mobile-web usage has increased rapidly over the last few years, and is predicted to overtake web-usage on desktops by 2014 (Danyl Bosomworth May 2012, Mobile Marketing Statistics). In order to ensure that visitors do not become frustrated when visiting your site via a mobile device it is essential to make your web sites and e-mails mobile-friendly.

Crowd-sourcing and dynamic content renders mobile sites ineffective

'Back in the day' web sites were complex to build, and it was normal for webmasters to somewhat 'set and forget' their websites with relatively static content, beautifully designed. Today it is quite the opposite, as we update our blogs and websites hourly, daily or weekly and create tools to let others contribute.

Through crowd-sourcing, which involves enlisting a variety of people through an open call whether it is online or offline (Wikipedia March 2012, CrowdSourcing), others can easily contribute to our blogs and websites. This wiki is an example of crowd-sourced content that is dynamic. Updates can be done anytime and anywhere via desktops, tablets and smart-phones.

Early investments in mobile-friendly web sites required marketers to maintain two websites: one idesigned for desktops and the other ifor tablets and smart-phones. However, this is not feasible for web sites with dynamic content like blogs. (See also Why We Shouldn’t Make Separate Mobile Websites).

So we really need something more automated - technology that can detect the client device and present the content in the best format for that device.

Three ways to format your website for mobile use

  • Responsive design in your style sheets (CSS)
  • Go totally mobile at the expense of desktop
  • Use a translator

Different strokes for different folks

The first method involves working with your designer and web developer to implement multiple layouts in your Cascading Style Sheet (CSS) and a little bit of detection code that detects what client device is being used - computer, phone, tablet) , and then using whichever layout will make the content most readable. This allows you to control the layout and formatting of web pages without having to duplicate the content for mobile devices and desktops. Your developers will deliver the design agreed by using a method known as 'fluid design'or 'responsive design', which basically lets your webpage to detect the visitor device’s screen size, orientation and will change the layout to for the devices needs (Rouse 2012, Responsive Design). An example of a successful responsive design is Smashing Magazine's website (Smashing Magazine 2012).

The illustration below shows the exact same copy of Smashing Magazine's web site in four different formats.

https://align.me//files/Smashing%20magazine_1_0.png

Here is some more information on successful responsive website design.

An excellent resource for finding out how your site looks at any screen resolution can be found here.

Many blogs argue that designers should start with mobile as the core design platform, and add for each larger screen potential, rather than the reverse where designers strip out functionality for each smaller size.

One (small) size fits all

Another option involves designing a single site that is created especially for mobile devices but is ‘OK’ to access via desktop.

(Almost) identical twins

A third option is to use some sort of dynamic synchronisation capability to update your mobile-friendly site from your desktop- friendly site. By using something like Dudamobile, you will be able to create a second site without having to worry about maintaining two websites. This is because whenever you update your desktop website Dudamobile will automatically update your mobile website for you.

Test before you publish

It is a good idea to see how your webpage will look on a mobile device so you can make any changes before publishing them. There are many tools, and Speckyboy has a list of tools and sites for testing your mobile’s mobile friendliness

How to format e-mails for mobile use

Now that your site is mobile-friendly, the emails that lead to that site need to be mobile-friendly too. If you design for Outlook, you'll limit the width of your tables to 600px so that you don't present your recipients with that nearly-impossible-to-read wide-wrapping email. But this forces the table width to be too big for mobiles, so if you design for mobile reading, you'll set your table widths to 100% so that the mobiles sort out their own wrapping. It seems like marketers must make a call: set the table widths to 600px so the emails are readable in Outlook, or set the table widths to 100% so they are readable on mobiles.

But there is a workaround. This involves the use of responsive design, just like in the case of mobile-friendly websites mentioned earlier. This is because responsive designs ensure that the e-mails can detect what device the visitor is using and, based on this, be able to adjust the layout according to the visitor’s device (Rich Barrett 2012, Responsive Email Design).

Here is a step-by-step guide to mobile-friendly email for you to send to your wed developer and designer (don't try this yourself).

Some email engines and marketing automation platforms don't support CSS though, and many email clients (like Outlook) ignore the max-width command anyway, so here is a practical solution: make nested tables. That is, set your table to 100% to suit your mobile readers, then insert a bit of html that tests for Outlook. If that code detects Outlook, then it inserts a second table within that first one, and sets that second table to 600px. Then you introduce your copy and any images as you normally would, before closing your table tags in reverse order: If Outlook is detected, close the second table (the 600px one). Then, regardless of this test, close the first table tags. Here is the code:

<!--Start by setting up the style-->
<!--[if gte mso 9]>
<style>
#tableForOutlook {width:600px}
</style>
<![endif]-->

<!--Next, create your first table-->
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">

<!--Then, test for Outlook and if found, create your second table-->
<!--[if gte mso 9]>
<table id="tableForOutlook" width=600 border="0" cellspacing="0" cellpadding="0">
<tr><td>
<![endif]-->

<!--Now your content-->
<tbody>
<tr>
<td>
<p>Now insert your copy in para tags as you normally would.</p>
</td>
</tr>

<!--Close out your second table (only if Outlook was found)-->
<!--[if gte mso 9]>
  </td></tr></table>
<![endif]-->

<!--And finally, close out your first table-->
</tbody>
</table>