Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Adobe Dreamweaver

How to Preview a Website for Mobile Screens in Adobe Dreamweaver CS6

  • Print
  • + Share This
  • 💬 Discuss
From the book
Learn how to preview a website for mobile screens, including how to 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.

Note: This excerpt is from the forthcoming book Adobe Creative Suite 6 Design and Web Premium Classroom in a Book, ISBN 9780321822604.

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.

  1. 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.)
  2. Click the Preview/Debug in Browser button, and choose a web browser from the list.
  3. 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.
  4. 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.

  5. Switch to Dreamweaver, click the Visual Aids button, and then deselect the Fluid Grid Layout Guides command.
  6. 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.
  7. Click the Multiscreen button and choose the Multiscreen Preview command from the menu.
  8. 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.

  9. Click the Viewport Sizes button in the top-right corner of the Multiscreen Preview window.
  10. 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.
  11. 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.
  12. 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.
  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus