Style Your Website for Multiple Devices Using Dreamweaver CS5.5
- Preview Your Pages in Multiscreen Preview
- Set Up Media Queries to Style for Different Devices
- Preview and Edit the CSS for Your Pages in Different Screen Resolutions
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
If you surf the web these days on a mobile device or tablet, you probably notice that some websites are just miniature versions of themselves, shrunk down. Some are stripped down with no frills, and others seem to work almost perfectly across devices. Well, to get a site to work properly across multiple devices used to be more a challenge than it is today. Adobe Dreamweaver CS5.5 has built-in tools that help you design for multiple devices including personal computers, tablets, and phones. Using CSS3 media queries, Multiscreen Preview, and various other tools, you can easily take your design and get it to work on different devices (see Figure 1).
)
Figure 1 Style your pages for different devices and preview in Dreamweaver CS5.5.
In this article, I step you through the generic process for taking an existing website that was designed and created to be viewed on screen (monitor, laptop, etc.), and editing the design for a range of devices. Dreamweaver will set up media queries for you, as you’ll soon see, but it is your job to edit the formatting of the pages to make them look different (and better) in each device resolution, so CSS knowledge is a must.
So let’s get started testing and editing our web design. Here’s a list of topics we’ll cover in this article:
- Preview your pages in Multiscreen Preview
- Set up media queries for different devices
- Preview and edit the CSS for your pages in different screen resolutions
Preview Your Pages in Multiscreen Preview
With Dreamweaver open, you need to already have a site that is based on HTML (or XHTML) and CSS. It could be simple or complex, that doesn’t matter. Make sure you’ve created a Dreamweaver site and that the first page of the site is open in Dreamweaver CS5.5. Then continue by following these steps:
- With the first page of the site open, click the Multiscreen button in the Document toolbar. This will open a rather large panel that displays your page (by default) in three viewports: one for phone, one for tablet, and the third for desktop (see Figure 2).
- Click the Viewport Sizes button in the upper–right corner of the Multiscreen Preview panel.
- In the Viewport Sizes dialog box that opens, change the tablet size to a Width of 480 and a Height of 272. Click OK to see the “Tablet” viewport change in dimensions (see Figure 3).
- That’s great for testing in non-standard device resolutions, but let’s reset the dimensions for each viewport to their default sizes. Click the Viewport Sizes button again and click the Reset to Defaults button. Click OK.
- In one of the viewports, move the cursor around and notice that you can interact with the links and other content on the page because it is “live” (mostly). Click one of the links, and the next page will appear in all of the viewports (see Figure 4).
- To navigate back to the first page you were on, click the Home button in the upper–left corner of the panel or click the Back button (blue arrow) to go back one page, like the Back button in a traditional browser.
)
Figure 2 Preview your document in different viewport sizes.
Each viewport is a generic size for that specific device. For instance, the tablet viewport is set to 768x300 (pixels) of viewable area. Suppose that you want to test in a Sony PSP device (which is 480x272)? Well, you can edit the size of each viewport depending on the specific resolution in which you want to test.
)
Figure 3 Change a viewport size.
)
Figure 4 Navigate the page in the Multiscreen Preview panel.
Now that you see what the page looks like in the generic devices, you can add new styling to edit the designs to better match each device resolution. Leave the Multiscreen Preview panel open and continue to the next part.