Web Sites for Mobile Devices

Whilst the main theme of this blog is native mobile applications, I thought I’d digress a little and look at building Web sites which work with mobile devices. I’ve built a few mobile Web sites recently and each time, I question why bother? Surely, with modern mobile browsers, we can just use the normal (desktop) corporate Web browser and be done with it. As you might imagine, there are some very good reasons for building a site responsively. Even with the huge screen on my Galaxy S III, I prefer accessing sites which are optimised for mobile access. As long that is, as the full site functionality is available to me.

The height of fashion right now is to build sites responsively. A technique known as “Responsive Web Design (RWD)”. It’s really a set of techniques working together to ensure that within the limitations of their device the user has the optimum experience of a Web site.  This implies sites where the font’s scale properly, the images are appropriate to the screen size (and bandwidth)  and (most importantly) the layout changes to match the device accessing the site.

Why make a site responsive? Let’s start from the the opposite perspective with a traditional non-responsive site. There is still a considerable momentum behind the perspective of the pixel perfect  Essentially a printed brochure delivered via the Web. Imagine then the experience of a mobile user with a QVGA (240 * 320) screen trying to navigate around a graphically rich and no-doubt beautiful Web page I can easily imagine that the user would be utterly lost!

Moving to a well designed RWD site, radically changes things. Instead of one pixel-perfect site, sites are designed to work differently with different screen widths. Using the magic of conditional CSS, we can easily create different layouts for narrow mobile screens and wide desktop screens. The trick is to understand the needs of the user and which screen areas are most important to them.

Consider the these two screen layouts:

First, the normal 960px based desktop layout with a traditional layout:

site-layout-wide

It all makes sense with a desktop browser but imagine trying to navigate around this with a tiny mobile device.

Using RWD, we define a radically different layout for a narrow mobile screen

site-layout-narrow

The layout is designed to only require vertical scrolling. Note how I’ve prioritized the main content, putting it before all the other content except the header (which I recommend keeping small).

If you do this right, the user is able to locate the content they need quickly and easily. Put yourself in their place for a moment, which would you rather: content you can access with your mobile or content which looks brilliant but only on a desktop machine? If you want to know more about creating Web sites which work well with mobile devices then try why not attend Learning Tree’s new course on the topic: Designing Websites for Mobile Devices: Hands-On

Mike Way

Type to search blog.learningtree.com

Do you mean "" ?

Sorry, no results were found for your query.

Please check your spelling and try your search again.