How to build mobile-friendly websites and emails

Your target market is increasingly reading your website on small devices, which means much of your designer’s hard work is wasted. If your pages are not formatted with mobile viewing in mind, chances are your users will click away quickly. Some will argue that this is a consumer phenomenon, but that’s a cop-out. The reality is that your audience is becoming less patient by the day, and if your content can’t be digested easily, it won’t be.

Even for sites that enjoy a good proportion of patient, desk-bound visitors, the emails that promote your web copy and digital assets are likely to be read on a mobile first, then either dumped, kept, or filed depending on what they can digest in that 15-second skim read.

So, mobile is with us.

Here are a few quick stats to bring this right to the top of your must-do list:

  • Mobiles are the top choice for a ‘first read’. 36% of email is now opened on a mobile device, with 33% for desktop, and 31% for webmail, according to Litmus.
  • There is a 132% increase in the number of emails being opened on mobile devices (same source).
  • 43% of mobile email users check their emails four or more times per day, compared to 29% of desktop email users.
  • And IDC is predicting that mobile web search will overtake desktop web search by 2015; some argue it will be as early as 2014.

If you’ve not yet formatted your webpages and emails for mobile users, here are a few practical tips.

First, see how your own website looks on mobiles and tablets. If you can’t read it without squinting or scrolling, there might be a bit of work ahead. Your site might be populated by the most amazingly compelling copy and knock-ém-dead images, but it all counts for naught if your visitors can’t read your copy. This Australian Government web site is fairly busy on a desktop, and the user needs to scroll on a mobile to read the pages. Do really care THAT much about taxes?

Your emails are now also subject to ruthless treatment: If they can’t read your emails, they won’t. There’s no point having a killer mobile-friendly website if the emails that lead to your blog, or flow from your confirmation process, can’t be read on those small screens.

Web

Many thought leaders have been advocating that we need to build duplicate sites for mobile visitors to uniquely honour mobile users and desktop users, but this appproach has two big flaws:

  1. Dynamic content (blogs and crowd-sourced content) make the curation of multiple sites a management nightmare; and
  2. Tablets have ruined everything – we now need 3 sites. Mobile-only sites look plain silly on a 10″ tablet.

We’ve done some digging on global best practice, and have some simple recommendations for you.

There are three popular options:

  1. Design your website for mobile visitors as a primary target and let your desktop visitors enjoy a ‘simple’ experience
  2. Get some synchronisation software or platform to update your mobile-friendly site(s) with content from your main site; or
  3. Get your designer and your web developers together to redesign your style sheets (CSS in the vernacular) so they present different fonts and layouts for each of your main device types. Known as ‘responsive design’, this is all about formatting your website differently for each of the most popular formats (mobile, tablet, desktop).

Here is a great example of responsive design at www.urbancircus.com.au:

Email

Often overlooked, email formatting is just as important as web, but we seem to be torn between two poor options.

Most marketers worked out long ago that emails need to be formatted using tables. Here’s why:

That text is just way too wide for comfortable reading. There’s a reason newspapers and magazines present their copy in narrow columns.

If you set your emails into a table set to around 600 pixels wide, you won’t get that too-wide line that can’t be read without starting again at least once every paragraph. BUT, use fixed-width tables with a mobile email and your readers can only read it if they squint. The mobile honours the 600 pixel width, when there’s perhaps only room for about 350.

Put a little bit of detection code in the hidden html of your emails and it will determine the properties of your visitor’s device and present the email in the best possible light. Here’s that same email on a displayed on a smartphone:

There’s a host of great web developers who have applied their craft to email to spell out how to format the perfect email, but many email engines and marketing automation platforms don’t support some of the formatting options these are based on. But there’s a simple solution.

  1. Format your emails with a first table set to 100% width and your mobile will obligingly show a nicely-legible email on your mobiles;
  2. Then, within this table, offer some conditional formatting that tests for Outlook and sets the table to a fixed width (say 600px);
  3. Then present your content; and
  4. Reverse the process at the end of your email.

While the wide screen shown here is perhaps a little extreme, this image shows how an email can be made narrow enough to read in one go even if the reader has a large screen on theior desktop:

That’s the same email as the one we showed earlier nicely legibile on a small-screen mobile.

For some more detailed specifics on how to format emails and web, take a look at the mobile wiki page that includes sample email code for this formatting. Maybe you can also edit the wiki page with your own experiences.

 

funnel-plan-sales-and-marketing-planning-tool