WDD: What developers discuss

Once a week here at True Clarity our developers get together to share and discuss interesting things they’ve been doing in the past sprint. At the end of each meeting someone writes up some of the more useful things that were discussed and sends it round to the rest of the company. This usually prompts some interesting discussion and serves as an excellent method of knowledge sharing.

Sat at home thinking about what I could blog about I decided that these meetings provided regular content for some interesting blog posts and that opening the discussions up to the wider development community might be a good way of sharing knowledge even further.

Hopefully my colleagues will also think this is a good idea and turn this into a regular blog post – sharing the most interesting thing we discussed each week. I’m going to set the ball rolling with a blog about utilising responsive design techniques that was discussed a few weeks back. I have already found some of this stuff really useful and envisage it becoming even more so as we are asked to produce websites that are user friendly across an ever increasing range of browsers and devices.

So without further ado… here is the first (of many hopefully) WDD blog from True Clarity….

Responsive Design: Conditional CSS and jQuery producing fluid, responsive designs.

As more and more people are accessing websites through mobile devices many clients now include these devices on the core list of browsers for us to develop for. It is already a challenge to get a site looking consistent across all the browsers on traditional devices. When we throw browsers on mobile and tablet devices into the mix we often get a headache.

More important perhaps than cross browser consistency is the usability of websites on mobile and tablet devices. Touch screen controls and smaller screens can render a website almost unusable if the design is not suited to these devices. One approach would be to have a consistent design that works well on all platforms, but this might compromise design on traditional computers just to accommodate mobiles and tablets.

Fortunately, CSS3 has added flexibility to the media type added in CSS2.1 which, when combined with some JavaScript techniques allow us to identify the device and/or the screen resolution that the user is viewing the site on. Once we can identify this, we can apply whatever style rules we like to make our designs flexible and responsive.

So what things can we identify and how can we do that? The rest of this blog will cover some of the most useful techniques available before providing a list of further reading.

Specifying different style rules for small screens

CSS 2.1 introduced the media type to allow conditional rules depending upon the output. This means that to specify a stylesheet for a printable version of a site you simply add a media parameter to a link tag to include a print only stylesheet:

<link rel=”stylesheet” type=”text/css” href=”print.css”  media=”print” />

CSS3 takes this concept further to allow specific device and screen resolutions to be targeted. To add a stylesheet specifically for smaller screen resolutions we add a condition using the max-width property:

<link rel=”stylesheet” media=”screen and (max-width: 600px)” href=”smallScreen.css” />

Adding this rule would mean that reducing the size of the browser window to less than 600px would apply styles found in smallScreen.css. These conditions can even be combined to say “use this stylesheet when screen size is between x and y”:

<link rel=”stylesheet” media=”screen and (min-width: 480px) and (max-width: 700px)” href=”mediumScreen.css” />

The examples so far have shown how stylesheets can be included conditionally but we can also include media queries within our CSS files themselves.

@media all and (max-width: 600px){

.class1{color: #000;}

.class2{background-color: #666;}

}

A great example of some of these techniques in practice can be found at cxpartners.co.uk. If you resize the page in the browser window (and look at the source by inspecting and element) you will see the design change to adapt to the new resolution. Looking at the CSS styles applied to an element you will be able to see the media queries being activated to show and hide different content. Simple application of these rules has created a version of the site that is much more suited to small screen resolutions.

We can even target specific devices by using the min-device-width property – this would stop the rule being applied for a desktop user resizing their browser window.

Media queries are a css3 feature that is not supported in versions of IE below 9. Fortunately, there is a JavaScript library that will make media queries work in browsers that don’t support css3. You can download this library from here.

JavaScript solutions:

As always, there is more than one approach to implementing responsive designs. JavaScript or jQuery can also be used to detect browser width and change stylesheets accordingly. However, it also gives us some other techniques that can be used to target specific browsers and devices.

The jQuery.support function can be used to test a lot of design techniques that are not supported in certain browsers. jQuery.support.opacity for example will return false for IE 6 – 8. Using jQuery we could then adapt our designs accordingly.

The JavaScript below accesses the navigator object and looks to match the iPad part of it. This will be true if the user is accessing the site through an iPad:

function isiPad() {

return (navigator.platform.indexOf(“iPad”) != -1);

}

We can now either redirect an iPad user to a specific mobile/tablet version of the site or more simply, use jQuery to add a class to the <body> tag that is specific to the iPad.

$(document).ready(function(){

if(isiPad)

$(‘body’).addClass(‘iPad’);

})

Summary

We have covered ways of identifying devices and screen resolutions and placing conditions that will allow different behaviours depending on how a user is accessing your site. These are some of the techniques we can use to apply responsive designs. What we have not covered are some of the principles of designing for small screens and touchscreen devices. Scott Hanselman has written several blog posts about how he has used responsive design on his site:

http://www.hanselman.com/blog/EasyStepsToAMobilefriendlyResponsiveDesignWithAnEmbeddedYouTubeVideoAndAFluidResize.aspx, http://www.hanselman.com/blog/CreateAGreatMobileExperienceForYourWebsiteTodayPlease.aspxhttp://www.hanselman.com/blog/SupportingHighdpiPixeldenseRetinaDisplaysLikeIPhonesOrTheIPad3WithCSSOrIMG.aspx

More examples of media query properties and usages such as detecting landscape page orientation can be found here and here. This article has a great overview of Responsive Design principles and further techniques related to resizing of images.

These techniques allow us as developers to implement the design that is best suited for the device the site is being viewed on. Hopefully unresponsive and unsuitable designs should become a thing of the past.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s