Dipping my toes into Responsive Design

My first experiences with responsive design was by being thrown in the deep end. That’s always the best way, I find, and is even more interesting when the bulk of the work has already been done. From looking at the already created CSS and JavaScript from a project I am now co-developing I have learned the basic techniques for creating a responsive template for tablet and mobile devices – and it really isn’t that hard.

The key lies with the CSS media selectors. First, construct your CSS for your desktop view as you normally would – though keep the tablet and mobile views in mind when deciding how to construct your HTML. When it comes time to create the mobile template, insert the following into your CSS file AFTER your main CSS declarations.

@media only screen and (min-width: 300px) and (max-width: 767px) { 

}

This is a media selector, and this one defines the rules for browser width that represents a mobile device such as a phone. Within the declaration simply override your main CSS declarations with their mobile equivalent.  

@media only screen and (min-width: 768px) and (max-width: 1000px) {

} 

These widths define most tablet devices. You will notice that when you resize your browser to the defined widths, the template realigns itself and obeys the new CSS rules. You could also include mark-up specific to a media by decorating it with a class, such as “mobile-only”. In your base CSS you would set display: none, and in your mobile media selector set it back to display: block. This is an easy way to add and remove elements not required for all templates.

The most important thing to remember (as is usual with modern web development) is that Internet Explorer version 8 and earlier (and some earlier versions of Safari) do not support media selectors. Our salvation lies with the jQuery library “CSS3 Media Queries”, found here: https://code.google.com/p/css3-mediaqueries-js/. Just include the script and you are good to go.