Dreamweaver CS6: The Missing Manual

Mobile Web Design

There’s no doubt that mobile phones are changing how we live our lives. They’re also changing how we build websites. The small screens of iPhones and Android phones don’t treat wide, three-column web pages kindly. Many sites shrink down to postage-stamp size when you look at them on phones, requiring you to pinch and zoom and swipe and scroll to find what you’re looking for. Fortunately, there are ways to make websites redraw themselves to fit the smaller sizes of mobile phone screens. Dreamweaver CS6 includes several solutions: the new fluid grid layout tool (Adding Styles to Media Query Style Sheets) lets you design three different layouts (for phones, tablets, and desktop screens) using the same HTML. In other words, you only have a single web page, but using CSS, you can alter the design depending on the width of the viewing screen. You can also craft your own “media queries” (a CSS3 feature discussed on Media Queries) to create CSS styles that apply only to screens at particular widths or within a particular range of widths.

Dreamweaver CS6 also provides tools for creating mobile-only websites using jQuery Mobile (jQuery Mobile), a JavaScript tool that makes traditional websites look and function more like mobile applications (and less like web pages).