Dreamweaver CC: The Missing Manual, 2nd Edition

Chapter 12. Designing Websites for Mobile Devices

Web designers used to build web pages for the 800 x 600 pixel resolution of 15-inch monitors. Then, as large LCD screens became popular, most web wizards designed pages for monitors that measured 1024 pixels wide and larger. Today, the explosive growth of smartphones makes it clear that designers need to craft sites for much smaller screens, too. A majestic, panoramic web page that looks beautiful on a 27-inch monitor may turn into a tiny, unreadable postage stamp on an iPhone.

You design for the multitude of mobile browsing devices in several ways. Some designers build separate, mobile versions of their sites (see Figure 12-1). Using server-side programming, these sites detect the type of device you have and deliver a web page customized for it. An Android phone web surfer, for example, will see the mobile version of a site, which provides a greatly simplified experience: a single-column design with most of the navigation elements removed, but with a prominent search box added.

Of course, not all of us have the time to create two versions of a website, or the technical skills to program a server to detect a visitor’s browser. Fortunately, Dreamweaver includes several tools that tackle the problem of mobile site design. The most straightforward of them uses CSS; CSS3 allows media queries that let you check the resolution of a device (how many pixels wide a screen is) and supply styles for just that resolution. For example, if a screen ...