I may have exchanged my programming pants for a more fitting pair of designer pants a long time ago, but I still enjoy geeking out over the latest trends in web development on a day-to-day basis. I do this not only because it’s important to keep up with capabilities on the web for my job, but also because beneath my hard artsy shell lies a gooey, nerdy center that just wants to write beautifully formatted* lines of CSS until my fingers are calloused and raw.
But enough about me. One of my favourite trends that has been popping up more and more is the notion of creating a responsive website. This means that the design and development of a website automatically adjusts itself to accommodate whatever screen size and platform the user is running, all the way down to mobile. There have already been some excellent articles written on the subject (even one that argues a more appropriate name & approach might be adaptive web design), so I won’t get too technical, but this is a great approach for many reasons. Firstly, your content will look awesome no matter what size your screen is. Secondly, you don’t need to adapt your website each time a new gadget/device comes out. (Alright, let’s be honest here, you’ll probably never stop tweaking your website, but at least this makes it a little easier.)
The main elements include:
- A flexible grid
- Flexible, scalable images
- Media queries that load different views for different contexts
It’s not a new phenomenon by any means, but some people have been taking this idea by the reins and doing some neat things with it. Media Queries has a nice collection of responsive websites to check out, but below are some of my favourite examples of ways this technique can be used. Click, expand and contract your browser window, and be amazed.
I think as an overall solution, it’s not totally there yet; if anything it’s just another tool for our tool belts, but it’s still a step in the right direction. I’d love to take this idea and do something completely different with it — load up a completely different design as you change your screen size, hide easter eggs that require you to load the site on your mobile device to find them; things like that. If it creates a cool custom experience for everyone, then I’m in. Isn’t that how the web should be?
Darcy Reaume says: