Experiments: Responsive Design

Experiments: Responsive Design

Of all the trends, technique and fads that come and go in the world of web development the one that fascinates me most is responsive design. It’s an idea that encourages web designers to ensure their creations work on any device, be that a web-enabled 52” LED TV, an out-of-date smart-phone or an even older feature-phone, or the latest and greatest iPhone, Samsung or HTC.

Responsive design isn’t new, I first found out about it when I read Ethan Marcotte’s book Responsive Web Design in 2011, so it’s been around for a while now and a lot of the sites you use every day will be responsive to varying degrees.

What interests me the most about it is the challenge. It’s no longer enough for developers to build websites that are designed to display best on a 1024 by 768 pixel desktop screen or 800 by 600 pixels if you’ve been in this game as long as I have! These days I have to think about a plethora of devices all with browsers and internet connectivity and how my designs will respond when viewed on their screens.

And it doesn’t end there; how a design displays is one thing but the means of interacting with a website on a desktop computer, internet TV or smart-phone are vastly different and have their own unique requirements.

I’ve built a few responsive websites in my time, the site you’re looking at now is responsive as well as the City of London’s website, so I’ve had a fair bit of experience with it but I wanted to experiment more and so I set-up a City of London subdomain to use as a location to post my latest foray into the world of responsive design.

From my experience, there are two key principles I’ve learnt:

  • When designing a page element always consider how flexible it is, ask yourself will it work when it’s expanded on a wide screen or contracted on a smart-phone screen?
  • Don’t use device dimensions to govern your media query breakpoints, take your design and fix the issues that occur when its expanded and contracted – where you see lots of failures that’s where your breakpoint needs to be

I’ve followed these principles in this latest stab at responsive design. As the URL suggests, it’s just an experimental testing ground and I’m constantly adding to and tweaking it but it’s useful to have it all online so that I can annoy my friends and family by firing it up on their devices whenever I see an opportunity to do more field testing.

Technologies

  • Responsive design
  • HTML
  • CSS3
  • SVG