Designing Web for Mobile DevicesPosted by Jason Hawkins / February 27, 2012
If you are wondering where to spend your online marketing dollar, the mobile web is not only hot right now, it’s essential. In many ways, we can thank Apple for making the mobile web both possible and enjoyable with iPhones and more recently iPad and tablet technologies.
New technologies, however always come at the expense of others. When Apple decided not to support Flash, tens of thousands of businesses were forced to redesign parts or all of their websites after confidently choosing to use Flash only a few years ago.
Flash isn’t the only consideration when delivering websites on mobile devices. The mobile web has a unique set of challenges. Most sites look OK on a mobile device, but are quite often difficult to use due to the small amount of screen real estate available.
In fact, it is worth arguing that businesses should deliver a completely customised mobile web design.
Now, before you roll your eyes thinking this is yet another marketing task to fit into your week and budget, think of it as a new approach. Try eliminating a more antiquated marketing technique like Yellow Pages or newspaper ads and put the time and budget into your mobile web presence. You’ll be able to watch your ROI click by click.
The mobile web has been struggling to gain popularity since the first Palm Pilots back in the early 2000’s, but websites were just not designed to work on small screens. Finally, now there are now enough mobile web users to seriously consider specific mobile versions of your site.
Mobile web users are set to overtake desktop users by 2014!
Mobile Website Usability Checklist
If half of your online traffic is mobile and the user experience is appalling, with images taking forever to load, navigation not working or users having to zoom in to read or view content, your prospective customers will simply look elsewhere.
SME websites should address the following checklist to ensure users have the best possible mobile experience:
- Does it load quickly?
- Does your navigation work?
- Are the essentials of your business easy to find (contact, services, articles, staff profiles)
- Is everything clickable or do you need to zoom to access buttons?
- Do you need to zoom in to read content?
Sometimes simply implementing a mobile stylesheet can solve your issues, but sometimes the solution requires a bit more work.
3 Ways to Build a Mobile Site
In the past 12 months, there have been major developments in mobile website frameworks. These allow a website to act like a mobile app, with touch screen style sliding and navigation elements. With these tools in mind, you basically have 3 options available to you, ranging in complexity:
Option 1: Mini Mobile Site
Standard websites are built using hundreds of different CMS types and technologies. So why fight an uphill battle by trying to make your large and complex website work on mobiles. Sometimes it can be easier and cheaper to put together a separate simple 5 page microsite that is built specifically for mobile users.
Yes, you may be repeating content from your main site, but it will look great and your users will be able to quickly find the information they need. They can even call your phone number with one click.
When users visit your standard website from a mobile device, the site detects they are on a mobile device and automatically redirects them to the mobile site. A subdomain is the simplest solution for hosting, for example http://m.yoursite.com instead of http://yoursite.com.
This is an extremely popular and cost effective solution. However, if you are publishing a lot of content, your mobile site and main site should be connected to avoid a lot of content double entry.
Option 2: Make your existing website more mobile friendly
This option suits large, content-heavy sites, but may be quite involved depending on your website CMS.
For sites that exist in mainstream open source content management systems, such as WordPress, Drupal or Joomla!, there are mobile ‘plugins’ available. But, our recent tests on the Top 5 mobile plugins for WordPress discovered that none of them worked without significant code hacking. And, these CMS’s are the easiest to translate to mobiles.
Very few websites use a CMS out of the box. They all have some level of customisation. The mobile plugins do a reasonable job if your site only contains basic pages and posts, but as soon as you have complex custom designs or content being delivered to various parts of the site, the mobile plugins fall over.
Your other option is to create a mobile stylesheet. These remove unnecessary elements from your pages, leaving the essential content and navigation in a style that is easy to operate on a touch screen. The browser will automatically detect whether users are on a mobile or desktop device.
This is relatively straightforward for sites that purely deliver content, but for businesses that actively use their website for more than just providing information, for example, bookings, payments, timetables, ecommerce, etc, shifting parts of your website into a formal ‘mobile app’ could be the next step.
Option 3: Build a Mobile App
There are thousands of mobile apps available for Android and iOS devices. If you are serious about how you deliver your business to your customers in the digital space then an app is probably the answer.
To fully explore app solutions, think about content delivery, automated tasks, application forms, payment systems, data collection, sales team tools and training modules. Any of these components could add enormous value to your customer and prospects (and your business) if available on the mobile web.
Your app does not need to be sold on iTunes. Perhaps it’s only for internal use to assist sales people on the road, or the guys in the warehouse. The only limits are your imagination.
Getting an app to market requires careful planning and execution, however you may already have the backbone of it in your existing systems and databases, so it may be simpler than you think. Just put your ideas on paper and contact your digital agency (or us!).
For an example of a standalone mobile site visit our mobile website…
Scan the QR code on the left or
For the more technical readers, Smashing Magazine explores the pros and cons of the different types of mobile delivery options in great depth.
About the author
Jason Hawkins is a senior application strategist, information architect and director at KND. His knowledge is based on years of industry experience in taking online application ideas to reality across a broad range of industries.
KND are web and digital professionals with over 10 years in the business. We specialise in strategy, web, cloud and mobile apps, eMarketing and SEO strategy, servers, hosting and design. We work closely with our clients to achieve successful outcomes. Call us today (+61 7 3832 4077) or email (firstname.lastname@example.org) to discuss your next project.