How to Preview a Website for Mobile Screens in Adobe Dreamweaver CS6
Note: This excerpt is from the forthcoming book Adobe Creative Suite 6 Design and Web Premium Classroom in a Book, ISBN 9780321822604.
From the book
From the book
Preview a website for mobile screens
Next, you’ll preview a finished layout that was built using techniques similar to those you just used. You’ll locate the finished layout using the Files panel, which lets you browse files without leaving Dreamweaver. You’ll also try the Multiscreen Preview, which lets you see how your site looks at multiple sizes at once.
- In the Files panel, locate the file pluralist.html in your Lesson05 folder, and double-click it. (If you can’t find the Files panel, choose Window > Files.)
- Click the Preview/Debug in Browser button, and choose a web browser from the list.
- Resize your web browser window to see how the layout responds. Be sure to try full screen and very small, narrow window sizes to simulate desktop and mobile screens.
- Switch to Dreamweaver, click the Visual Aids button, and then deselect the Fluid Grid Layout Guides command.
- Make sure the Live button is on, and click the Mobile, Tablet, and Desktop buttons in the Resolution Switcher to observe how the layers were designed for each size. You can examine the layers and the code to see how it was done.
- Click the Multiscreen button and choose the Multiscreen Preview command from the menu.
- Click the Viewport Sizes button in the top-right corner of the Multiscreen Preview window.
- In the Viewport Sizes dialog box, for Tablet enter 1024 for Width and 768 for Height, and then click OK. This is how you can customize the size of each viewport. Many tablets have pixel dimensions of 1024 x 768 in the landscape orientation, so if the tablet audience is important to you, you may want to create a viewport of this size for previewing your website.
- Move the pointer over the text at the bottom of the Featured Products section of the website in the Tablet viewport to preview the mouse-activated animations. Unfortunately you can’t follow the links.
- Click the Viewport Sizes button, click the Reset to Defaults button, and click OK. This default configuration makes it easier to fit all three viewports on one display.
)
Notice that the layout automatically rearranges the layers to a single column for the narrowest window size.
Now that you’ve seen the
web browser preview, you’ll
take a second look at the document
in Dreamweaver and edit it. First
you’ll turn off the green
Fluid Grid Layout Guides which
are useful when designing the
overall layout, but can get
in
the way when working with design
details.
)
)
The Multiscreen Preview opens, showing you Phone, Tablet, and Desktop views all at once. Each of the views is called a viewport. Use the scroll bars to preview the full height of each viewport.
)
)