Design and Technical Challenges for Mobile Website Content - dummies

Design and Technical Challenges for Mobile Website Content

By David Karlins, Doug Sahlin

The issue of mobile accessibility emerges in every realm of creating a website, affecting the size and type of images you embed, the color scheme you apply to your site, and what kind of navigational structure you choose.

The point here is not to point out all the different challenges posed by the size of mobile devices. Here are two possible solutions for providing web-friendly content:

  • Media queries: You can present the same content in full size and mobile browsers but display that content differently using different CSS style sheets. For example, content presented in three columns in a full-sized monitor can be presented in one column in a (narrower) mobile viewport (screen).

    Multiple media queries can be configured for a site. They’re defined by the size of a user’s viewport. So, 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 yet another for a mobile phone in portrait (vertical) mode.

    You’re unlikely to create more than two or three versions of your site at first, but the number of styles you can define for a single site is unlimited.

  • jQuery Mobile: You can 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. Neither one requires hiring programmers or advanced knowledge of web design. That said, when you decide to take the plunge and create a mobile version of your site (using media queries or jQuery Mobile), you’ll have to put some time and energy into figuring one (or both) of those approaches.

The point here is to raise consciousness as to how the size difference between a full-sized and mobile viewport affects every aspect of page design and technology, including these issues:

  • Small viewports: The most immediate and obvious difference between desktop/laptop browsing and mobile browsing is that mobile viewports (the viewing screens) are smaller. The size difference between full-sized media and mobile devices has radical implications for site design:

    • Mobile pages generally avoid using columns. Building page design with a columnal “understructure” 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 hard for big fingers to tap, and thus different link techniques (such as large, clickable buttons instead of narrow lines of type) are often used in mobile design.

    • Images must 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. For example, a photo of person from head to toe that works well on a full-screen monitor might be nicer if cropped to just a headshot for mobile devices.

    • Forms are configured differently on mobile devices. Some form input fields that work okay on a laptop (such as radio buttons and check boxes) are hard to use on a small touch-screen device. Instead, sliders (bars with a draggable slider) and flipswitches (with a yes/no set of options) make forms easier to fill out on a mobile device.


  • Lighting and color issues: Mobile devices are much more likely to be used outdoors than desktops or even laptop computers. And, the lighting intensity on mobile devices is lower than that of bigger screen computers. This poses particular challenges for creating mobile-friendly sites.

    Color schemes that work well on full-sized monitors — in relatively dark, indoor environments — can prove frustrating or useless on a mobile device in bright sunlight. Avoid color schemes like shades of gray (or subtle shades of any color) on mobile devices.

  • Download speeds: You’ve heard the ads: “Our 4G is so fast!” Blah, blah, blah. Here’s the skinny: Mobile devices, if not running on a Wi-Fi network, load pages much more slowly than desktops and laptops, regardless of whether those larger devices are plugged into an Internet connection or connected through Wi-Fi.

    And, as you’ve guessed by now, this has strategic implications for presenting content for mobile visitors. Because mobile pages take longer to load, you want to avoid making users navigate from one page to another.

  • Mobile plug-ins (and lack thereof): Perhaps the most widely known difference between mobile and laptop/desktop viewing is that iPhones and iPads don’t support Flash video. Yes, Flash Video files (FLV) are widely used to distribute video online, but those files are a no-go for Mac mobile devices. Those users will see a message like the one from Hulu here.