This is a bit old - you may or may not notice the date on this post but it's over a year old. That doesn't mean it's not useful but we all know how fast things chance on the web so there's a chance that techniques and technologies described here could be a little dated.

The 5 most recent things I’ve learnt about responsive design

Posted on by

In a recent post responsive web design – should we turn it off I mentioned that we’re all still learning when it comes to responsive design, so I thought I’d share the things I’ve personally discovered recently.

1. A lot of people underestimate the size of a screen
I first noticed this on some of my older stuff and on some other sites when I first got an iPad. I had really underestimated the size of the screen, or at least what can be comfortably viewed on the screen. An old standard 960px width design fits nicely onto a tablet the size of an iPad yet I often see a design switch to something more akin to a mobile layout, and I’m guilty of that myself on some designs.

2. There’s no great substitute for using a device
I like many others have spent lots of time resizing browser windows on my desktop whilst designing and that will get you 95% of the way for responsive designs. Sadly though there really isn’t much of a substitute for getting hold of a device and browsing stuff with it. Obviously you can’t buy everything but having a few devices of varying screen sizes is a good start.
Aside from that I often pop into stores and browse projects in store when I’m passing and have a spare few 5 minutes, I’ve found a couple of layout bugs I hadn’t noticed by browsing on a Nexus 7 in PC world.
These were bugs that I managed to replicate with a window size on my desktop but I’d managed to miss when resizing, it’s easily done. It’s also worth noting that some browsers, chrome on my mac for example, simply won’t scale down enough to replicate mobile device widths. The web inspector for iPhone with safari is well worth checking out for that.

3. It can be done really well and it does make a difference
One thing I have noticed is that it can be done well, and when it is it feels right, it works. Seeing it done well always reaffirms my belief that it is worth the hassle.

4. It can be a pain at times, especially if you hide stuff
I visited a football blog on my mobile trying to find their twitter handle to look at something. I know full well on the desktop site they have it in the header. It wasn’t there in the mobile header, “try the footer” I thought. After a lot of scrolling – another problem on some layouts – I found it wasn’t in the footer either. I ended up looking in my mac to find it.
It’s been said by many, but really, don’t hide stuff. I try not to, the only exception I tend to make is if it’s a purely design element.

5. Proper use of form elements isn’t wide spread enough
HTML 5 has provided us with a great number of useful form elements, notably stuff such as tel and more importantly email. I love it when I click on an email field and get the proper contextual keyboard on my device, it shows someone thinking about stuff properly. It’s maybe not specifically a RWD thing and it’s a little thing and I don’t know if people aren’t aware of these types of things or just don’t use them.

So that’s it 5 quick points I’ve learnt recently about RWD, I expect I’ll learn a whole load more over the coming year, or even years!