Blog Posts

“Responsive design” is the latest buzzword in a long series of web buzzwords which has featured “XML”, “Web 2.0″ and “HTML5″ to name a few; but it’s one that shouldn’t be dismissed.

The days of assuming your user is browsing your website on a desktop or laptop machine are over. Mobile users are no longer restricted to people trying to find directions to a restaurant or building - they now sit at home on their comfy sofas and use their mobile phones to browse the web; they sit on trains and use their mobile data connections to shop online; they sit in parks whilst eating their lunch reading the latest news or tweets; or watching a TV catch up service. The human population are becoming slaves to their mobile phones as CNET’s recent photo gallery showed.

Whether this is a good thing or a bad thing doesn’t matter. It’s now a fact of life. Netflix’s recent comment about supporting almost 1,000 different Android devices using their service means that we cannot guarantee a certain screen resolution - unlike the iPhone, Android device screen sizes (and capabilities) vary immensely. And Androids are becoming more popular - we can’t just ignore them.

But mobiles aren’t the only device. Tablets are a whole new kind of device that have appeared in the last 3-4 years, with another set of screen resolutions. TVs and game consoles now ship with web browsers; and the desktop and laptop PC/Mac are far from dead either. The days of opening Photoshop, starting a new document; typing in a width and height and ignoring everything else are well and truly over.

Chris Coyer’s recent slideshow “What We Don’t Know” not only covered responsive design but a whole host of other user uncertainties and is well worth a read; but my favourite slide by far was the following one (even though it didn’t include any mobile resolutions):

Screen resolutions

So how do we deal with this? Like everything in the world of web development, there is no one answer; and also it’s messy. The usual story then!

The Responsive Design Checklist

Is Responsive Design the Right Choice?

It’s easy to latch on to buzzwords but the truth is “Responsive Design” isn’t the answer to every problem; just as “XML” was never the solution for every data problem, and not every website needs “HTML5″.

Responsive Design allows our sites to scale across multiple devices, but some solutions work better with a custom build for certain devices. Focusing on building a streamlined, specific solution for mobile or tablet can result in an experience optimised for these devices that doesn’t feel forced.

Of course, you may decide that the right solution for your site is actually a hybrid of the two - a site which scales for different devices, yet key components are delivered differently depending on the device. This technique is known as Responsive Web Design with Server Side Components (RESS).

Luke Wroblewski has written a great post on these methods.

Types of Responsive

Luke Wroblewski has also recently written a excellent post on different types of responsive design. In it he lists five types of responsive design:

  • Mostly Fluid - a variation on fluid design which at large resolutions introduces margins; and at small resolutions stacks columns.
  • Column Drop - all content is in columns, and as the page width reduces, columns are dropped below one another.
  • Layout Shifter - using different layouts at different resolutions.
  • Tiny Tweaks - making subtle changes to the page as the resolution increases (such as text and image sizes).
  • Off Canvas - where columns are hidden off screen until the user requires them. Think of the Facebook user sidebar, which is hidden on mobile until the user presses a button.

More details of each are available on Luke’s website - it really is a must-read for responsive design.

Your first decision when building a responsive design should be which of these categories your website falls in to.

Graceful Degradation vs Progressive Enhancement

There seem to be two camps of people - those that prefer “Graceful Degradation” and those that prefer “Progressive Enhancement”.

“Graceful Degradation” means starting with a awesome base site which works on the latest browsers and technologies; and then adding fallbacks to support lesser capable browsers (it doesn’t mean providing no fallback).

In terms of responsive design, this means building a site for larger resolutions and then gracefully degrading for smaller resolutions. At a very basic level, this would mean using media queries which use max-width. We can use media queries in our <link> element in our HTML when including our stylesheets, or in our CSS files.

A HTML Media Query:

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

A CSS Media Query:

@media only screen and (max-width:600px) {
  // styles
}

Unless you are building a simple, single page application the tidier route is including separate stylesheets; although beware that the browser will download every stylesheet in case you resize the page while viewing the website.

“Progressive Enhancement” means starting with a basic base site that works on all browsers and then layering additional functionality on top for more capable browsers. Specifically for responsive design, this is also termed as “mobile first”, and at a basic level would be media queries which use min- width.

There are lots of articles from different points of views on which is better - Designshack’s article on “Mobile First Design: Why It’s Great and Why It Sucks” is a particularly good read.

Modernizr is an excellent tool for feature detection which can help with both graceful degradation and progressive enhancement.

Outside of responsive design, it does feel as though CSS naturally falls to graceful degradation - border radius’ does not appear in older browsers for example. On the other hand, if you load all your images in the highest resolution, then your mobile users (who may be on their sofa, or may be on the train) are really going to suffer. Jason Grigsby has written some useful articles on responsive images.

Other Considerations

The Internet Explorer Factor

Once you’ve decided which method your responsive design will use, you need to work out how you are going to support it in Internet Explorer. Internet Explorer 9 only accepts a limited subset of media queries, which thankfully includes min-width and max-width (but not min-device-width and max-device- width); but earlier versions (of both desktop and mobile) will need to rely on conditional comments.

There is a conditional comment available for targeting mobile versions of Internet Explorer, so you may choose to use this to send it the stylesheet for smaller screen devices:

<!\--[if IEMobile]>
  <!\-- conditional content/styles here \-->
<![endif]\-->

Performance

As the browser downloads every stylesheet regardless of device width, it’s important that you keep your code as tidy as possible. It’s also important that you ensure creating a responsive design is not adding significant weight to your page. Brad Frost summed it up in a recent blog post when he said that visitors do not care if your site is responsive, they just care that they can do what they came to do.

As usual, minification and gzipping can help here - but be careful not to include images, functionality and content that is no use for smaller screen devices.

Device Testing

It’s impossible to test your design on every device that the user could possibly use, but it is important to get a representation of what your users will be viewing your website in. If you have an existing website, check the web analytics to see what devices are popular. Device popularity varies by location, so ensure you are using statistics that are relevant to you. Ensure you are including small screens, large screens, different browsers and different operating systems. Again, the Netflix blog discusses how they test for 1000 Android devices and is worth reading.

Conclusion

As a team, you need to follow the responsive design checklist and decide:

  • Whether responsive design, device specific sites or RESS is the right choice
  • If you are building a responsive design, which type of responsive design will you build?
  • Will you implement your responsive design using progressive enhancement or graceful degradation?

One you have decided, you need to make sure every person in your team sticks to these decisions, whether they work in design, user experience or technology.

If you do not, you will end up with a system that is poorly designed and contains messy, unmaintainable code. You will end up with some features that use graceful degradation and some that use progressive enhancement, and it will become extremely difficult for anyone to figure out what is going on. And you will end up with different types of responsive design, and an inconsistent user experience.

Let me know your thoughts on Responsive Design, and the Responsive Design Checklist below, especially if you can think of any other important considerations for building responsive designs.

The Start of Something New

Friday, January 12 2018

After almost 11 years, I am moving on from AKQA to pastures new.

Read more

The Quest for the Perfect Workflow

Friday, May 16 2014

Today I spoke at jQuery UK on my Quest to find the Perfect Workflow. This post provides detailed information; slides and the links to the material mentioned in my talk. Now updated with screencast!

Read more

Creating a List of Posts in Assemble

Thursday, February 27 2014

In the previous post, I showed how to get started with Assemble. Now we have content, let's look at how we can create a list of posts.

Read more

Getting Started With Assemble

Wednesday, February 26 2014

Want to create a static site blog with Assemble? You've come to the right place. This in-depth tutorial will get you started with creating a blog in Assemble!

Read more

Shrinkwrap Your Dependencies

Wednesday, February 5 2014

Front end development has evolved over the last couple of years thanks to `npm` popularised by task runners such as Grunt and Gulp. Thanks to our package.json files, it's easy for another developer to get set up on our project in seconds by typing `npm install`. But what happens when some time has passed and your project dependencies have moved on? A new version of a package may introduce a new bug, or completely change its functionality altogether.

Read more

Beginning Web Development

Tuesday, January 7 2014

There are so many things to learn in web development now that it can feel incredibly overwhelming - but it can also be very rewarding. What fascinated me about web development was the ability to create - I love to create - and when I started out building web pages I found it incredibly easy to express my creativity with HTML and CSS in just a few lines of code. Here's some tips for if you're just starting out!

Read more

jQuery On and Off Namespacing

Tuesday, February 5 2013

Being able to apply and remove events with `on()` and `off()` is great, but sometimes there is a requirement to either trigger or remove a subset of events that have been added to an element. Here's how!

Read more

Sublime Text 2 Cheatsheets

Monday, December 24 2012

As my Christmas present to you, here are 2 cheatsheets (one for Mac, one for Windows) so you can learn and reference those shortcuts to improve yourself and your developer skills.

Read more

Canvas Animated Particles 3D Effect in 5 Minutes

Sunday, December 23 2012

A couple of months ago, I gave a PechaKucha talk about creating a 3D animated particles effect with the canvas element.

Read more

Extending getUserMedia With Canvas

Sunday, July 1 2012

Following on from my previous post which introduced us to getUserMedia, I wanted to share two ways you can extend getUserMedia's video capture using my good friend, the canvas element.

Read more

Introduction to getUserMedia

Saturday, June 30 2012

For a long time in the 'Flash vs HTML5' comparison arguments, one advantage Flash had was the ability to capture audio and video from the users computer. With upcoming browser releases, it is now possible to do this with JavaScript and the HTML5 video element, and its very simple to do.

Read more

CSS3 Flexbox Carousel

Friday, May 25 2012

Carousels are one of the most common components web developer's build. As other trends come and go, carousels tend to stay.

Read more

State of the Browser 2012

Monday, April 30 2012

A rainy April Saturday in North Greenwich (London) was the host of this year's State of the Browser; where a representative from four of the five browser vendors spoke about how their browsers have progressed in the last year and what we have to look forward to going forward.

Read more

Scaring Off Beginners

Friday, April 20 2012

There has already been far too much conversation about whether semicolons are appropriate to use at the end of lines in JavaScript. Serious problems could have been solved in the time JavaScript experts have spent arguing about this. And if the experts can't make a decision on something as simple as semicolons, what chance do beginners have of understanding JavaScript at all?

Read more

Complying With The EU Cookie Law

Thursday, April 19 2012

The cookie law is a new EU privacy legislation that requires websites to provide clear and comprehensive information about the cookies being stored; and obtain consent from visitors in order to store or retrieve any information about the user.

Read more

Thoughts on Implementing Responsive Design

Monday, March 19 2012

Responsive design is the latest buzzword in a long series of web buzzwords which has featured 'XML', 'Web 2.0' and 'HTML5' to name a few; but it's one that shouldn't be dismissed.

Read more

CSS Regions

Tuesday, March 13 2012

Currently if you have a page where content is separated by a drastic change in layout you will need to include part of your content inside one element, and the other part inside another element. If you're using a CMS, this means you need to have two content fields for what is essentially related content. CSS Columns already offers functionality to separate content in to columns but CSS Regions provide greater control and flexibility of content on your page by allowing content to flow through the page structure, whatever that structure is.

Read more

My JS1k 2012 Entry

Monday, February 27 2012

This year I decided to enter the JS1k competition for the first time. The idea behind JS1k is to produce a cool JavaScript application in under 1kb (1024bytes) of code. I had not done any JavaScript golfing before, so I thought it would be a nice little challenge for myself. I didn't realise at the time quite how addictive or time-consuming JavaScript golfing was going to be!

Read more

CSS3 Backgrounds of the Future

Monday, February 13 2012

Whilst we've been busy supporting older versions of Internet Explorer, a few new CSS features for backgrounds have sprung out of the woodwork and in to our browsers.

Read more

jQuery UK 2012 Conference

Saturday, February 11 2012

Yesterday I travelled to Oxford to attend the jQuery UK conference, which the team at White October carefully crafted together. The snow threatened to stop me, but thankfully calmed down by the morning. So a quick hop, skip and jump on to a train and coach; and I found myself in Oxford at the Saïd Business School.

Read more

Modernizr Prefixed

Saturday, February 11 2012

There was a new release of [Modernizr yesterday (2.5.1), and included within this release was some brand new features to the Modernizr Prefixed() API (introduced in 2.0), which can take away some of the pain of vendor prefixes from your JavaScript.

Read more

Keeping It Real Simple

Monday, February 6 2012

Last week I had the opportunity to go on a presentation skills course, and one of the tasks we were set was to explain one aspect of our job role to a group of people who had no experience in our field using the LIONS approach using zero jargon.

Read more

Impress at Presentations with Impress.js

Tuesday, January 31 2012

The other day I mentioned on Twitter that I was playing around with Bartek Szopka's Impress.js library to write a presentation and it seemed to gather some interest. I then gave the presentation, and that gathered some more interest; so I thought I would write a short blog post about how to use Impress.js.

Read more

Writing for the Web

Wednesday, November 30 2011

Today is Blue Beanie Day, an anniversary where developers change their avatars to wear blue beanies to show their support for web standards. Today is also the day a new web initiative has been launched called Move the Web Forward, with a simple goal of making it easy for developers to start contributing to the web platform.

Read more

Using jQuery .on() and .off()

Thursday, November 10 2011

With the release of jQuery 1.7 on November 3rd came two new ways to attach event handlers - .on() and .off(). These two additions unify all types of (good) event handling in jQuery and will help you write tidier and more efficient code in the future.

Read more

Front End Code Etiquette

Wednesday, November 2 2011

One of the most interesting parts of working as a web developer comes from making a decision on how to organise code depending on a particular project or problem. There are multiple ways to do the same thing, and there's not necessarily a wrong or a right answer for every situation.

Read more

Self Executing Anonymous Revealing Module Pattern

Thursday, October 27 2011

I thought as a way to kick this blog off I would share this JavaScript pattern with you which I've started using recently. I can't take any credit for this pattern - I discovered it on my Internet travels, so all thanks and kudos go to Elijah Manor on 'Enterprise jQuery'.

Read more

Welcome

Friday, October 21 2011

If you're reading this, you've reached the first post of my blog. Depending on whether I've written a few or many blog posts at this point, this may be an achievement that you've reached this post, or it may have been a simple slide of the finger.

Read more