Making our new site responsive.

media machine responsive design

Update: The method outlined in this article was before drupal 7 had good, stable releases of the Bootstrap framework. There are plenty of great, responsive frameworks available now. Use them!

Over the last year the trend towards responsive web design has been undeniable. We know people access online information via various devices, all of which serve up content at different resolutions. We also know mobile browsing is expected to overtake desktop-based access within 3 to 5 years.

In order to progressively enhance and future-proof our sites, we have focused on percentage based adaptive layouts, for many of our more recent projects.

In short, percentage based design allows elements of the website to adapt slightly according to its parent container. Blocks of content and images can shift, resize or move into new space as the screen gets smaller or larger, instead of being a fixed width, center aligned. This allows us to sites look great on large monitors, and still be accessible on smaller devices, such as smart phones.

This is all done with CSS, and is not difficult, just a bit more time consuming because you writing additional CSS rules for when the browser reaches certain sizes.

So we decided it was time to re-theme our site.

We did that by dividing 100% by number of columns we wanted taking into consideration padding and margins.

I use a slightly customised version of https://github.com/grahammiller/ResponsiveGridSystem

.span_4_of_4 {
	width: 100%; 
}

.span_3_of_4 {
	width: 74.6%; 
}

.span_2_of_4 {
	width: 49.2%; 
}

.span_1_of_4 {
	width: 23.8%; 
}
/*  Column Setup  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}

.col:first-child { margin-left: 0; }

/*  Grid of 4 */
.span_4_of_4 {
	width: 100%; 
}

.span_3_of_4 {
	width: 74.6%; 
}

.span_2_of_4 {
	width: 49.2%; 
}

.span_1_of_4 {
	width: 23.8%; 
}

This takes care of our columns and makes them scalable, but once columns scale down to resolutions below about 600px the content areas become too narrow and text looks rather strange.

So we use min-widths in our CSS to stack blocks once they reach certain widths.

.span_2_of_4 {
	width: 49.2%;
        min-width:180px; 
}

With combinations of these CSS rules you can pretty much create layouts with as many columns as you like scalable and responsive.

The last bit of CSS we used is known as media queries and this controls the CSS rules applied to columns once the display reaches various sizes. With this we can have control over how things look on various devices.

@media (max-width: 780px) {
	#header{
		width:60%;
	}
}

Some of the more popular devices are listed below.

/* Smartphones (portrait and landscape) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* iPads (portrait and landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* Desktops and laptops */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

What one would also like to do is prehaps create a seperate menu for mobile. You could then show and hide it using a media query. I used a jQuery to convert the menu links into a dropdown menu for better accessibility.

function ($) {
			  Drupal.behaviors.selectMenu =  {
			    attach: function(context, settings) {
				  
				// Create the dropdown base
			    $("