Posts tagged "multiscreen preview"

Media query and Dreamweaver CS5.5

There was a time in the history of computers when users did not have too many monitors to choose from.  That was very good for web designers because there were only so many resolutions to cater to. The rules ensured that that their sites catered to the least possible resolution and extra spaces were filled up with beautiful backgrounds as users switched to higher resolutions. As monitor sizes increased and users’ preferences for resolutions changed, the rules changed too. Nothing dramatic – loosening a nut here, tightening a bolt there, and it was all done.  And Dreamweaver pretty much had the design aspect covered on all fronts.

With the advent of Web 2.0, the websites got way more smarter than their static HTML ancestors. There was more coding than what a designer could probably handle. Most designers either took to coding, or started working with teams that helped bring intelligence to design.  It was but natural for Dreamweaver to provide increased support for developers in the code view. ColdFusion, ASP, JavaScript, database connectivity – Dreamweaver tried to accomodate developers of all hues.

From design to code and back to design – the advent of mobile devices changed the rules yet again.  While designers were well accustomed to designing for increasing resolutions, with mobile devices they had to contend with shrinking monitor sizes. The websites not only had to display well on desktops but equally well on mobile devices that had no standard monitor size.  It would have been neigh impossible, if not downright foolhardy,  for designers to create a website for each resolution.

It was pretty obvious that the way forward was going to be driven by style sheets.  You create a different style sheet for different monitor size resolutions to help customize display on various devices.  But how would a browser know the CSS to use for displaying the site? Enter Media Query, a piece of code on the site that specifies the CSS to be used for a range of resolutions.  Media Queries use the reported dimensions of the monitor size to specify the CSS for the device.

It is but obvious that a website will look very different on the devices that it is displayed on – tablets, desktops, and mobile phones for now.  With media queries, you can have a single functional website that works the same but looks very differently on the devices that it is used. In Dreamweaver, you can create a site using media query, and also preview the site as it appears in devices with various resolutions. Dreamweaver helps ensure that when your site goes live, it looks and behaves exactly the way it did when it was previewed.

For information on using media queries in Dreamweaver CS5.5, see http://help.adobe.com/en_US/dreamweaver/cs/using/WSeffff8bffc80208443aaa2ab12db791fb9b-8000.html