Previewing Pages at Different Resolutions

Testing web pages in different browsers has always been a chore for webmasters, and that’s especially true for mobile design. To preview a web page on a phone, you have to store the page on your server and use your mobile phone to connect to the website to see how it looks. Fortunately, Dreamweaver CS6 simulates different mobile devices’ screen sizes so you can avoid this time-consuming step.

Tip

If you own an iPhone, iPad, or Android phone or tablet, Adobe offers free software that lets you preview a mobile web page that’s sitting on your desktop computer directly on your phone or tablet. Adobe Shadow (http://labs.adobe.com/technologies/shadow/) uses a combination of a desktop program, an app for your phone or tablet, and a Google Chrome browser plug-in to literally beam web pages that you view in Chrome on your desktop straight to your phone or tablet. In fact, you can beam a page to all your iOS or Android phones and tablets simultaneously.

Multiscreen Preview

Once you finish designing your site, select Multiscreen Preview from the Multi-screen menu in the Document toolbar (circled in Figure 11-2). You can also choose File→Multiscreen Preview to open a window with three views of your page, one each for a smartphone, a tablet, and a desktop browser (see Figure 11-3). Each version has a different width and height, and, because Dreamweaver displays the pages using its WebKit browser, each represents a “live” view of the page. That means that ...

Get Dreamweaver CS6: The Missing Manual 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.