Chapter 6. The Anatomy of a Mobile Site

WHAT'S IN THIS CHAPTER?

  • Learning about common structures of mobile web sites and their information architectures

  • Understanding how navigation and page content can be displayed effectively for mobile devices

  • Reviewing the current state of support in devices for styling and script-based interactivity

Now that you have a good understanding of the mobile environment under your belt, you turn your attention to examining how mobile websites are actually put together. In this chapter, you will look at the overall shape and structure of such sites and how you should design and implement important parts of them, such as the navigational mechanisms, the content itself, the styling, and the interactivity.

You won't learn about a particular CMS platform yet, but everything in this chapter should apply to any good mobile site — whichever server technology you choose to develop or run it with.

Before beginning, please note that code for several of the figure examples can be downloaded at www.wrox.com.

SITE STRUCTURE AND CONCEPTS

This section looks at the overall shape and structure of a good mobile site. Before you dive into building pages — or tweaking their appearance — it is vital that you have a clear understanding of how the pages fit together cohesively.

Information Architecture

In the simplest form, the shape of a common website is often best modeled as a hierarchy, and mobile websites are no exceptions. The concept of a site having a "root" (that is, the ...

Get Professional Mobile Web Development with WordPress®, Joomla!®, and Drupal® now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.