Multiscreen Preview and Screen Size Settings in Dreamweaver CS6

Multiscreen Preview is a new feature in Dreamweaver CS6 which has a particular value in relation to mobile devices. In this age of advanced technology, viewing websites is not only possible through desktop computers and laptops. Nowadays, we have so many devices of all screen sizes that people use to browse the internet and view websites. We have devices such smart phones, tablets, PSPs, netbooks, to mention a few. Dreamweaver took note of this and that’s why this feature was introduced.

Through Multiscreen Preview, you will be able to view how your website looks in three different default screen sizes, as well as adjust your website to other size settings.

To access Multiscreen Preview, open your website in Dreamweaver CS6. While in Design view, click on the Preview button / icon found right after the View buttons.

When you click Multiscreen Preview, a dialog comes up showing a preview of your website in three different screen sizes. Currently, it is set to a phone size of 320 x 300, a tablet size of 768 x 300, and a PC desktop size of 1126 x 204. You can change these sizes later on.

On the right hand side of the Multiscreen Preview dialog, you will find the Media Queries and Viewport Sizes buttons.

Media Queries is a very useful approach that we take when dealing with different sizes of device. What this does is that the browser asks the device that the user is using what size the device screen is. Through Media Queries, you can have your website render itself in an appropriate size for that device.

In Viewport Sizes, you will see the three default screen size settings that come in Dreamweaver CS6. You can change the sizes through the Viewport Size dialog by changing the width and height. If you have already applied a new size setting and would want to revert it back to the default sizes, you can click on the Reset to defaults button.

You can also view individual sizes not included in the Multiscreen Preview dialog while in Design view. To do this, cick on the Preview button / icon again, there you will see a list of other predefined sizes for feature phones, smart phones, tablet, PC, and so on. Click on one of those and you get a preview of that particular screen size.

Aside from changing the width and height in Viewport size dialog while in the Multiscreen Preview, you can also edit sizes or add a new window size. You can do this by again clicking on the Preview button / icon, then Edit Sizes. A Preferences dialog appears with the category Window Sizes highlighted. (Tip: You can also access the Preferences dialog thru the Edit menu.)

To add a new window size, click on the Plus (+) button. On the appropriate column, type in the width, hit the Tab key and type in the height, hit the Tab key and type in the description, and finally click OK.

Dreamweaver’s Multiscreen Preview is a very powerful addition to its many functional features as this makes our websites more accessible to more people who use various types of devices to access the internet.

Need Dreamweaver training? Get 12 hours of Adobe Dreamweaver CS6 online training course by Simon Sez IT.

Simon Calder

Chris “Simon” Calder was working as a Project Manager in IT for one of Los Angeles’ most prestigious cultural institutions, LACMA. He taught himself to use Microsoft Project from a giant textbook and hated every moment of it. Online learning was in its infancy then, but he spotted an opportunity and made an online MS Project course - the rest, as they say, is history!