Free code

Setting up a responsive design website in Dreamweaver CS6 part 2/2

When working with responsive design in Dreamweaver, it's crucial that you keep track of where you place your styles. The html build of a given page should stay the same but you'll be changing the sizes of text sizes, divs, etc for each stylesheet. In our setup we created the mobile stylesheet first so both the tablet and desktop viewports will inherit all sizes from this stylesheet unless you change these manually. To demonstrate what we mean, in the screenshot below you can see three different stylesheets (you don't touch the main 'styles' sheet in responsive design).

MQa1

In this image we're currently on the mobile stylesheet and it shows we have some styles defined for the mobile version of our page. If we were to look at these same styles for the tablet for example, the sizes would change because all of the elements for these given style would have to increase. It would look like this:

MQa2

Something else important to keep in mind when you're building a responsive project is that the majority of styles used for mobile will be built using percentages (%). This is because there are so many mobile devices and using a percentage will help your site render more correctly than it would if you used pixels. Using pixels could make your site render an incorrect size as it wouldn't have enough flexiblity.  This means that when you build divs, widths, heights, images, etc in your mobile stylesheet, these should all be based on the percentage of how much that particular style takes up on your page. For example, if in your Photoshop mobile design your page is 100% and you have a logo that's 35% of the page (you can use the Info panel and ruler in Photoshop to get these measurements) than you might have a wrapper set to 100% and a logo set to 35% in your mobile stylesheet.

Text sizes are also set using ems in the mobile stylesheet; like the percentages, these will ensure your text size will adapt to various mobile devices. Some people also use percentages for the text sizes too.

Using imagery in responsive design is a bit more tricky; it's a good idea to reduce the amount of images in your responsive site where possible – particularly backgrounds that can overstretch and become pixelated. If you do have to use images, try to make sure the image maintains the same size throughout your different sizes. Also consider hiding the image from the mobile viewport and then having it visible when the screen grows.

Lastly, remember that you'll be able to start using pixel-based measurements in your tablet and desktop viewports since these sizes are more constant (there are much more mobile device sizes which is why we used percentages for that stylesheet). Just remember that building a responsive project can be tricky; it's important to keep track of which stylesheet you're working on. Also plan ahead in your design and think about where you want certain elements of the page to sit in each viewport. Doing so will save you time in the long run.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image