Busting the Mobile Web Content Myth

Tweet

One of the common myths about mobile web development is the misguided notion that content from your traditional web site can be easily re-purposed into smaller bite-sized chunks for the mobile version. A simple change of style from media="screen" to media="handheld" is all you need to do to magically mobilize your site, right?

Wrong.

While it’s indeed possible to filter content with the liberal use of display: none in your mobile style sheet, in reality, this isn’t a good idea. In fact, many CMS systems can output a mobile, streamlined version of your web site, but even this is not always what your customers will want.

The W3C defines the concept of One Web as follows:

One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. However, it does not mean that exactly the same information is available in exactly the same representation across all devices. The context of mobile use, device capability variations, bandwidth issues and mobile network capabilities all affect the representation. Furthermore, some services and information are more suitable for and targeted at particular user contexts.

As this definition suggests, some things are simply not available (or even usable) on some devices. Additionally, some devices (such as a mobile phone) are much better at certain activities (like making phone calls) than other devices. Therefore, a device designed for a specific activity should utilize its unique features on the Web.

While the concept of having only one site, and to simply style it differently depending on the medium the visitor is using, is popular with many standardistas, a separate mobile site is required in order to deliver an optimized experience for mobile users. Customers who are surfing on a mobile device have different needs and requirements, so to force-feed them the same content as that displayed on the traditional site is a recipe for disaster. The following images show a good example of this principle. The Best Buy mobile site displays only two functions (Product Search and Find A Store) — a far cry from the traditional site.

Figure 4. m.bestbuy.com has only two functions: Product Search and Store Finder

Figure 5. The traditional Best Buy site, with all the bells and whistles

How do you go about selecting content and functionality to include on mobile versions of the sites you’re working on?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://sickdesigner.com Radu

    I’m writing this comment from my HTC Desire HD. And while I agree that web content should be device specific, I can’t help but point out that I had to switch to view the full version of Design Festival in order to be able to view this post. I guess my point is that mobile devices, in particular, are such fickle things that, as developers/designers, we either do it right, or we don’t do it at all. There is no wiggle room for mobile devices and the worst part is that you can never ensure 100% cross platform compatibility.
    On a lighter note, congratulations on the new website!

  • martcol

    As a frequent smartphone surfer It feels like we have stepped back in time with mobile services. How about a site with heavy content rendering a flashing banner ad for an age even before I had any viable content to reassure me I was on the right page.

  • Mattyk

    What happens if I’m on a much better mobile device, one that can render the html properly, with a great connection, zoom ability and a larger screen?

    What happens if I’m actually after one of the other features such as “new this week”?

    I’m seeing this more and more and its quite irritating to not get the choice. Maybe it should become best practice to always offer a “full version” of the website.

  • Mattyk

    oh yes – one more thing, congrats on the new website I’ve enjoyed the content so far. Would it be possible to add a feature to subscribe to the comments?

  • mercime

    Congratulations on the new site. Thank you for your article.

    My take on designing for mobile apps is to concentrate on content by keeping design clean. Site title, main navigation, search bar and content are good to go, hiding the sidebar/s and footers solved easily via pure CSS solutions :-)

  • Frode

    Congratulations on the new site..

    I also want to chime in on the mobile vs full site version. I’m typing this from my iPad, and I was sent to the mobile version of this site to start with. In my opinion you shouldn’t force users into your mobile site, but you should have (and promote) another url for the mobile site, ie m.designfestival.com.

    • Editor

      Hi Frode, thanks for the compliments – we just changed our mobile site, have a look and let me know if you like it better than the previous one… ;o)

      • Frode

        It renders much better on my mobile devices, though all my devices use mobile WebKit browsers. Myself I love the idea of the so-called ‘responsive web design’ by Ethan Marcotte, where the browser of a device tells what resolution it runs, and the website determines how the layout will be by using fluid grids, flexible images, and media queries. These are the three technical ingredients for responsive web design.

        Read his excellent article about what he named Responsive Web Design:
        http://www.alistapart.com/articles/responsive-web-design/

        With this kind of web design you won’t need ten different URLs for different devices ie. iPhone/Android, tablet, wap and so on.

  • http://www.apple.com Kolyan

    Well, I guess we’re getting either bigger screen or more laconic presence. Some “mobile” sites already so “clean” that is irritating to look at it. Imaging to get amused by a scetch or blueprint of a house instead of a full-colored pictures?
    Thats where we’re getting to. Bc its not that many exclusive words to describe uniqueness, so sites are bloated with someone’s personal opinions and that person decided to push that opinion as a value and some folks who has really nothing to do but to kill some time and decide to read and pass a few comments. And at the same time something very unique and rare just passed by unnoticed but we’re so bold and proud of ourselves by typing some personal opinions that nobody really cares about.