Responsive design and development

Govt.nz responsive screens

Govt.nz website - responsive UX/IA, responsive design, responsive front-end dev

Ah the joys of responsive design! I completely love it - it's a challenge, and a new thing to learn, and a constantly evolving and developing set of techniques and technologies.

We've reached the tipping point in terms of responsive design - where almost all clients now expect a website that responds to the device in which it's being viewed. I find that being able to combine UX, IA, design and front-end development is a real advantage when it comes to responsive web design and development, particularly as I tend to do much of my responsive design in the browser, as HTML.

See case studies of all my responsive web design/dev projects.

Until fairly recently I focused on getting my websites looking as close to exactly the same in different browsers as I possibly could, but since the advent of CSS3 and responsive design I've become more relaxed about that. I can still build down to IE6 if you really want me to, but tend to draw the line at IE8 for responsive sites.

BNZ Community - responsive screenshots

BNZ Community - responsive front-end dev

One of the things I really enjoy about responsive design is getting the details right. I love working out how to rearrange content in different device widths, and working out where to set my breakpoints, using standard breakpoint settings as a starting-point but being guided to a large extent by the content itself.

I love deciding which responsive techniques would work best for the tabular data on this particular website, and the main navigation, and what shall we do with the subnav, and what's going in the footer...

All that stuff is so much fun - and I find it begins in the wireframing, is developed during the design phase, and reaches its peak once I'm in the browser and building the templates - because only then can you actually see the site doing its responsive thing. I use a mobile-first approach because that makes perfect sense to me, and I believe in providing everything you'd get on a desktop, in a mobile - you just have to rearrange it and test the heck out of it.

Zero Harm responsive screens

Zero Harm - webmaster with some design development and front-end dev

I have a shoebox full of old mobile phones I've bought off TradeMe to do my responsive website testing because I firmly believe it's always best to test on real devices. I reckon if it works in the old Blackberry Bold and the Samsung Galaxy 5 running Android 2.1 and the LG C900 Optimus 7Q with Windows 7 and my iPhone and new iPad and the Samsung Galaxy S III and the ZTE Open running the Firefox OS, as well as a pile of other devices - then I'm probably doing OK.

On my desktop I also use the Firefox Web Developer toolbar for a quick overview of breakpoints, Firefox "inspect element" for a detailed examination of all possible browser/device widths, Firebug for pretty much everything, and Chrome for a whole range of other emulated devices.

WebWeaver responsive screens

WebWeaver Productions - responsive IA/UX, responsive design, responsive front-end dev

I'm really lucky to live in Wellington and to have been to every Webstock conference bar one. This means I've attended full day and half-day workshops run by some of the web's leading responsive design experts, including Ethan Marcotte (Responsive Web Design) and Jeremy Keith (Responsive Enhancement) in 2012, Karen McGrane (Content Strategy for Mobile) in 2013, Josh Clark (Designing for Touch) and Brad Frost (Everything You Wanted to Know About Responsive Design...And Less!) in 2014, Derek Featherstone (Responsive Design and Accessibility) in 2015, and Luke Wroblewski (Mobile Design Now) in 2016. It means I've been able to learn from the best, at the same time as teaching myself and ensuring that I'm keeping up with developments in the field of RWD.

I remember sitting in Ethan Marcotte's workshop in 2012, feeling slightly concerned that I was a slightly late adopter of RWD and that I was going to be left behind in the rush of front-end devs who could already do this thing.

I needn't have worried. Pretty much everyone at the workshop was in the same boat as me, and as I listened to Ethan discussing break points and liquid layouts ("oh hang on - I was doing those way back in 2005-2006 - before designers decided they preferred fixed-width 1024px websites...") and responsive images ("wait - I remember figuring out the 100% wide thing for images years ago...") and then later, arranging content on post-it notes with Jeremy Keith - I remember thinking "Yes, I can do this - and it all makes perfect sense..."

Ali - thanks for all your help on the Community project. A challenging one but great to get it nailed. Your input was really appreciated.

Russell Mildon, Project Manager - Online Sales, BNZ Digital (BNZ Community project, 2014)