As handheld devices become more and more common, users will be viewing web content on smaller screens which means web developers must have a way of building webpages that can be viewed across multiple devices. Enter responsive design: A way to code a website so that it will shape to fit various screen sizes. Responsive design isn't just about designing a completely different website though; it's more about deciding what you need to keep for the viewer to see when the screen size minimizes.Â Some websites have a totally different mobile site than their desktop counterparts – responsive design is more about adjusting a current desktop website so that it segues smoothy into a smaller site such as for a mobile device.
The basic setup of a responsive design website in Dreamweaver has one primary html file per page that pulls CSS styles from however number of devices you wish to have your site resize too. In this example, we'll start a build for a site that has three common devices: Desktop, Tablet & Mobile. We'll also setup our stylesheets in order to accommodate the different sizes for these devices.
To begin, it's a good idea to setup your media queries and link these to your CSS files. This will ensure that you can build the site in one html document and have the site change and adapt as the user switchs sizes. To do this, choose Insert > Media Queries in Dreamweaver.
This should open up a screen that looks like the one below:
From here, click the button for site-wide media query file and select 'Specify' and create a new stylesheet in your CSS folder (we called ours css/styles.styles). Before doing this though be sure to check the 'Force devices to report actual width' box so that the mobile styles render correctly after you begin to code your site.Â After defining this stylesheet it's time to begin adding media queries which will ensure your site can be edited in different stylesheets that will instruct your code to resize based on the user's viewing device. This is done by clicking the '+' button.
Doing so will enable you to enter more information about this query in the panel below. Define a min/max setting as this tells Dreamweaver that the device will have to fall within these size numbers to show a particular view of the site.Â Also name the query with something that will help you identify which one it is. Here are some standard sizes you can use for the three viewports (mobile, tablet & desktop):
Mobile: max-width 767 px
Tablet: min-width 768 px
Desktop: min-width 992 px
For example, as soon as the user's device begins viewing the site at anything beow 767 px, the site will reflect whichever styles you specified in the mobile stylesheet. Be sure to link a new style sheet for each query as well. Example, css/tablet.css.
Here is a screenshot of what we entered for mobile. Be sure to click the add button and not the OK button at the bottom when you add the other viewports though or it close off this screen.
Here you can see we've finished adding our three viewports:
Now there's one last step to do in the initial setup: We have to edit the site wide media queries so that we don't repeat ourselves in each layout. This means that if you made all of the site layouts start with the mobile information, then you will only have to change the styles for a given size. Otherwise this would make our job quite hard. To set this up, close the media queries screen and go into the main stylesheet for the entire website. In here remove the text highlighted below and be sure to leave the semi colon.
It should now look like this:
In our next article we'll continue to build on working with responsive designs by looking at how to work with sizing web elements for responsive websites.