In this article virtualROI look at some of the design and technical challenges that have arisen for mobile website content and some possible solutions to help combat them.
With changes in technology and the seemingly endless number of devices available to access the web on the move the issue of mobile accessibility emerges in every aspect of the creation of a new website or indeed in a redesign of an existing one. These challenges affect everything from the size and type of images you embed, the colour scheme you apply to your site to what kind of navigational structure you choose.
With laptops and desktops sometimes being skipped altogether and people going straight to mobile the most immediate and obvious difference between desktop/laptop browsing and mobile browsing is that mobile screens are smaller. This size difference between full-sized media and mobile devices has radical implications for site design, these can include:
Mobile pages: These generally avoid using columns. Building page design with a columned “under structure” is often essential to making content accessible and inviting in full-sized pages.
Links: Often need to be larger on mobile devices to be accessible. Tiny links are harder to tap, and thus different link techniques, such as large clickable buttons can often be used in mobile design.
Images: Need to be much smaller in mobile devices. There is a qualitative dimension when it comes to choosing and cropping versions of images that appear on a mobile site. Designers are often well-served to crop photos tighter for a mobile device.
Forms: Are configured differently on mobile devices. Some form input fields that work on a laptop (such as check boxes) are hard to use on a small touch-screen device. Instead such things as sliders (bars with a draggable slider) can make forms easier to fill out on a mobile device.
Lighting and colour issues: Mobile devices are more likely to be used outdoors compared to laptop’s and the lighting intensity on mobile devices is also lower than that of bigger screens. This can pose particular challenges for creating mobile-friendly sites.
Colour schemes that work well on full-sized monitors in relatively dark, indoor environments can prove difficult to use or useless on a mobile device in bright sunlight. To compensate avoid colour schemes like shades of grey (or subtle shades of any colour) on mobile devices.
Download speeds: Regardless of what the adverts say or indeed any of the providers the fact is that if mobile devices are not running on a Wi-Fi network then pages load much more slowly than desktops and laptops, regardless of whether they are connected through a cable or connected through Wi-Fi.
This has implications for presenting content for mobile visitors. Because mobile pages take longer to load, if possible you want to avoid making users navigate from one page to another.
Mobile plug-ins or lack of: Perhaps the most widely known difference between mobile and laptop/desktop viewing is that iPhones and iPads don’t support Flash video. Flash Video files are widely used to distribute video online but these files are a no-go for Mac mobile devices.
So apart from the above what other possible solutions are there to provide delivery of web friendly content to mobile devices regardless of their size? Well here are two.
Media queries enable you to present the same content in full size and mobile browsers but display that content differently using different CSS style sheets. An example would be content presented in three columns in a full-sized monitor can be presented in one column in a narrower mobile screen.
It is also possible to configure multiple media queries for any given site. They are defined by the size of a user’s screen. For example, you could create one style sheet that displays your site content in tablets, another that displays the site in a mobile phone in landscape/horizontal mode, and even another for a mobile phone in portrait/vertical mode.
It is unlikely that you will create more than two or three versions of your site to begin with, but the number of styles you can define for a site is unlimited.
You could build a completely different site for mobile users. The jQuery Mobile option involves creating separate content for a mobile site than what’s presented to full-sized monitor visitors.
Media queries and jQuery Mobile are within your reach but when you decide to create a mobile version of your site (using media queries or jQuery Mobile) it will be absolutely necessary to put the time and energy into figuring out which one (or both) of these approaches you decide to use.