Automatically Adapt Your Site for Any Screen Size with Dreamweaver
- Previewing at Multiple Sizes
- Creating Style Sheets for Alternate Screen Sizes
- Building the Media Queries Style Sheet
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Clients these days think it's perfectly reasonable to request that their web pages look good on computers, tablets, and smart phones. Those pages don't have to look the same on every device, but they do have to render gracefully regardless of screen size. With Dreamweaver CS5.5 and later, you can use HTML5 and CSS to make your pages look good at any resolution. In this article, we'll look at two of Dreamweaver's features that help you attain that goal: Multiscreen Preview and media queries. Using media queries, a part of the CSS3 specification, you can automatically link your HTML pages to different CSS style sheets that rearrange the layout of the pages for given screen sizes.
For this article, I started out using one of Dreamweaver's built-in page templates, the "HTML5: 2 column fixed, right sidebar, header and footer" template. If you want to follow along in Dreamweaver, you can use that same template by choosing File > New, clicking the Blank Page category in the resulting New Document dialog, and then choosing the template from the Layout column, as shown in Figure 1.
I also wanted to start with an external style sheet, so I chose Create New File from the Layout CSS pop-up menu in the dialog, and I saved the style sheet under the name desktop.css. Then I made some content changes to the HTML file for the sake of a little visual interest, and I moved the sidebar to the left side of the page by changing its CSS float property to left.
)
Previewing at Multiple Sizes
Dreamweaver CS5.5 introduced a new feature, Multiscreen Preview, which works with Live view to show you simultaneous views of three different screen sizes: Phone, Tablet, and Desktop. Multiscreen Preview makes it much easier to make your web pages handle multiple devices.
To see your page in Multiscreen Preview, follow these steps:
- Open the page you want to view at multiple resolutions.
- In the Document toolbar, click Design view. (It doesn't matter whether you have Live view turned on or off.)
- Click the Multiscreen button in the Document toolbar (see Figure 2), or choose Window > Multiscreen Preview. The Multiscreen Preview panel appears (see Figure 3). In this figure, the viewports all show the same layout, beginning with the upper-left corner of the page. That's because I haven't yet implemented media queries, so the CSS for the three views is identical.
)
)
The Multiscreen Preview panel's viewports are all in Live view. Each of the three viewports shows its pixel dimensions (horizontal x vertical), and each has independent scroll bars. Because you're looking at a live rendered view of the page, you can click links (to go to another page in your site, for example), and all three viewports will update. I have the Phone and Tablet viewports set for the dimensions of the iPhone and iPad, respectively, in portrait orientation, but you can click the Viewport Sizes button in the Multiscreen Preview panel to change the view sizes.