Dreamweaver CS6: The Missing Manual

Strategies for Using Media Queries

Now that you know how to add media queries to a page, what’s the best way to use them to make your site mobile-friendly? Most site pages are just too wide to look good on a mobile phone. Phone browsers typically zoom out to give you a bird’s-eye view of the page. If the page has multiple columns and was designed at a width of 960 pixels, it’s impossible to read on a phone without zooming in and dragging the page around.

Web designers use a few techniques for mobile design:

• Remove columns. Multiple side-by-side columns look great on a big monitor (and even on a tablet in landscape mode), but not so much on a phone. Remove the floats (see Understanding the Box Model) to stack a page’s content divs one on top of the other.

• Remove widths. If you use a fixed-width design, your pages won’t look good on a phone. A 960-pixel-wide page is just too much for the 320 or 480 pixels of a phone. For a phone, a good approach is setting the widths of your content divs to Auto or 100%. This converts your page from a fixed-width design to a liquid, or flexible, design. In other words, no matter how wide a phone’s screen, the divs will fit 100 percent of it. If a person holding an iPhone in portrait mode (so that the screen width is 320 pixels) suddenly turns the phone horizontally (changing the screen width to 480 pixels), divs set to Auto or 100% simply resize to fit the new space.

• Tighten up white space. Ample space between headlines, graphics, and other page elements ...