The Challenges for Designing Websites for Mobile Content - dummies

The Challenges for Designing Websites for Mobile Content

By David Karlins, Doug Sahlin

Having mobile-friendly sites remains the goal of websites with a lot of resources to develop alternate content and presentations for mobile visitors. You might not have those resources, so here are essentially the four approaches you can take to making mobile-friendly site content:

  • Don’t worry about a mobile presence for now. Not every website needs a mobile presence right away, but you can think ahead and build mobile into your long-term plans.

  • Keep your site so simple that it will work in any environment. This is a less-than-optimal solution because sites that are simple enough to work on a mobile phone that use, for example, a one-column layout aren’t going to be very inviting in full-sized screens. But again, there might be situations where this is a working solution, at least for a while.

    If you go with this approach, keep your site design simple, your images small, your video formatted to work in any environment, your color scheme basic and high contrast, and your fonts large.

  • Detect a visitor’s media and present the same content, but with different CSS style sheets, depending on the viewport.

  • Providing alternate style sheets with media queries allows you to create a single set of web pages, with content, and present them differently (with different color schemes, font sizes, and layouts) in full-sized and mobile viewports.

  • Detect a visitor’s media (their viewing environment) and divert mobile users to completely different content. This technique relies on JavaScript to detect mobile devices. Or you might need to embed links for visitors to find mobile-friendly content, like the one at the Madison Square Garden site.

    Mobile-only versions of websites generally are built using a subset of JavaScript — jQuery Mobile — to present content specifically designed to work faster and better in mobile devices.