How to prepare your website for the mobile touch-screen revolution.

Quick stats:

• Mobile web traffic has increased 400% in the last 2 years and continues to show huge growth
• Apple's mobile Operating System (iOS) is the dominant smart phone/ portable OS in north America and Western Europe
• Apple iOS users are power users who use their mobile devices for web browsing far more than other mobile device owners
• 17% of web traffic is from mobile devices
• 60% of mobile web traffic is viewed on Apple iOS
• Apple's mobile operating system does not support flash

Back to Basics

There is a hidden benefit in planning your site for the wide range of devices it must now perform on: it forces a back to basics approach that eschews gimmickry in favour of clear messaging. You can add bells and whistles, but you must insure that if someone is only able to read a simple, text based site map to navigate, you're still communicating the essence of your brand.

3 tips to insure your website is optimized for mobile touch-screen devices:

1) Avoid Flash or other Plug-in Driven Technologies

• Apple's mobile OS on the iPhone and iPad doesn't support flash. Fortunately, the animated "Flash" landing page that was all the rage in 2001 is generally seen as an annoyance in 2010. Best practices today advocate a focus on concise benefit driven messaging - not gimmicky graphics.
• You can still achieve the most functional aspects of animation using other technology. Effects like dissolves and object scroll can now be easily achieved with javascript, a browser based technology.
• Most stand alone video content uses the flash plug in which means it won't be seen on the iPad or iPhone. A simple workaround is to use youtube or vimeo to host your embedded videos, since they will automatically offer your video in a non flash format if required. If you are committed to hosting your video content, consider offering a link to a transcription or text and image based version.
  
  

2) Use standards-based HTML and CSS

• For non technical folks, standards based HTML means building your site according to the classic hierarchical structures that HTML was originally designed to support: Heading 1, Heading 2, Heading 3 and body text.
• When designing the site hierarchy, adopt a plain language approach to your navigational elements and maintain a focus on the refinement of content and key terms.
• CSS (Cascading Style Sheets) allow you to clearly separate content from visual design elements. The practical benefit of this is that it means that content can be easily adopted to different screen environments
  
  

3) Plan for multiple platforms and devices

• Whether you like it or not, people will try to view your site on whatever device they are using. Test your website on the dominant mobile platforms (iPhone, iPad, blackberry, android) and consider adding alternate navigation methods such as breadcrumbs.
• Anticipate the fact that people may be navigating your site with their finger and consider how this will affect the user experience. For instance, you may decide to give prominent navigation elements a tactile feel that invites a touch experience.
• Install a device sniffer in your home page code and consider creating a plain text, HTML version of your site that provides the most important information in a device independent format. If justified, you may want to build an iOS (iPad/iPhone) version that makes use of Apple's developer toolkit for a streamlined experience on these devices.

---

Want to have your website assessed by Jar Creative? Contact Us

About the Author:
Jeremy Robinson is the Principle and Creative Director at Jar Creative, a Toronto based Digital Marketing Agency. An internet pioneer with over 10 years experence in digital design, he has worked with International brands on high level marketing and brand initiatives.