• Designing Your Website to Meet the Needs of Mobile Viewers Apr 25, 2012

    Designing Your Website to Meet the Needs of Mobile Viewers

    In my previous post, I discussed the pros and cons of developing a mobile app that is actually installed on a smartphone or other mobile device. For most of our customers, building a mobile app turns out to be an unnecessary expense and can even limit their expansion into the mobile market by making it more difficult and costly for their business or organization to get found.

    So, if you are seeing your monthly page views from mobile devices steadily climbing past the 10 percent mark, and you're not going to design a mobile app, what should you do? The answer is either to modify your current website or develop a separate website to meet the needs of mobile viewers.

    But how do the needs of mobile viewers differ from those of desktop or laptop viewers?

    Narrower screen resolution. As technology progressed from old fashioned CRTs to flat LCD displays, we watched screen resolution progress from widths of 640 pixels at the dawn of the commercial Internet to greater than 2400 on some widescreen displays today. Web designers, who were once admonished to limit their live content area to 720 pixels or so, now typically design for a live area of just under 1,000 pixels. But the iPhone screen has a resolution of 320 pixels -- about a third the width of most of today's websites. You can't simply "squeeze" a thousand-pixel page layout into 320 pixels. You have to modify it in some way to make it effective for mobile viewers.

    Type size. A big, wide page allows for plenty of contrast in type size. You can use the equivalent of a 72-point headline above 12-point body type because your brain sees the headline type in proportion to all the space around it. Place that same headline type on an iPhone and it will look disproportionately large for the screen. If the smartphone user zooms out to make a website fit on her screen, the small type may become too small to read. Zoom in and wide headlines become too big and wide.

    Navigation. The prevalence of widescreen displays has provided tremendous flexibility in communicating complex website structure through design. It is not unusual for a website to have principal, secondary and even tertiary navigation panels, each of which includes a distinct class of website content or activities, and each of which may be enhanced with layered dropdown menus. These complex navigational structures need to be simplified or "flattened" to work on a narrow screen.

    Complex Page Layouts. Widescreen displays also enabled the rise of 3-, 4- and even 5-column page layouts and the conceptual development of the website home page as a "portal" to multiple web locations or services. If you had sufficient content resources or affiliated content providers, your home page could be a virtual 3-ring circus of activities. The use of distinctive graphical elements or page templates could be used to denote movement from one section of a website to another, providing visual cues to help viewers navigate successfully between virtual worlds. The capacity to represent competing activities side-by-side or to represent complex pathways between them is seriously compromised on small mobile screens.

    Time and Attention. But perhaps the most important difference is the attention span and preferred activities of mobile users themselves. Mobile users are, after all, mobile! They are less likely to be sitting in one location for prolonged periods of time and their informational needs will tend to focus on:

    • getting where they are going or deciding what to do next
    • accomplishing a mission, which can include shopping
    • filling time between real-world activities, or
    • finding and sharing information as part of face-to-face social interactions

    So, in addressing the needs of mobile users, we need to consider not only how our content is displayed, but which content is likely to be most useful and therefore should be given prominence.

    Back to our original question: What should you do? Simplify the design of your widescreen website so it will work in small mobile browsers? Build a separate website just for mobile viewers? A combination of the two?

    In the next post, we'll look at these options and their implications for those with existing websites they want to keep pretty much as they are, and those who are getting ready for website redesigns.