Learning from things I like: Smashing Magazine's responsiveness

Posted: - Modified: | design

I'm teaching myself design by looking at things I like and trying to figure out why I like them. Smashing Magazine is not only a good blog for design inspiration, but it's also (naturally!) a great example of techniques.

One of the things I like about Smashing Magazine is how the site adapts to different screen sizes. For example, if you view it on a mobile device or in a small window, you'll see a simple header and the story.

2014-07-07 12_45_42-Smashing Magazine — For Professional Web Designers and Developers

The menu icon links to the footer menu, which is used only with narrow screens:

2014-07-07 13_08_53-Coding Archives _ Smashing Magazine

If you have a little more space, the header will include the top-leel site sections (books, e-books, workshops, job board) and the left sidebar will include categories. The search also moves from being hidden behind an icon to having its own space.

2014-07-07 12_45_26-Smashing Magazine — For Professional Web Designers and Developers

Even more space? The left sidebar gets collapsed into a small horizontal menu, and a right sidebar appears with an e-mail subscription form and some highlights from other sections. I wonder why the left sidebar is collapsed into the menu, but I guess it would be weird to have the category list jump from the left sidebar to the right sidebar and then back again, and they probably wanted the e-mail subscription form to be above the fold (so it wouldn't make sense to add it to the left sidebar). The search box is moved to the top of the right sidebar, too, so it looks more like a background element.

2014-07-07 12_45_09-Smashing Magazine — For Professional Web Designers and Developers

Incidentally, here's a little thing that happens when the window is just a little bit narrower – the WordPress menu item gets abbreviated to WP.

2014-07-07 13_05_24-Coding Archives _ Smashing Magazine

 

 

And here's what the site looks like when I maximize the window. There's the header, the left sidebar, and the right sidebar.

2014-07-07 12_44_45-

I also like Smashing Magazine's use of colours – the cool blue matches well with the warm red, for some reason that I can't quite explain at the moment. I also like how they use different grays to make things recede into the background.

When I redesigned my site, I wanted to do something like the responsiveness of Smashing Magazine, so I learned more about using media queries. Here's how my site behaves at different sizes. (Or at least, how it should!) On a small screen, the key links are just hand-drawn icons, and there's no sidebar:

2014-07-07 12_50_57-sacha chua __ living an awesome life - learn - share - scale

Slightly wider? I can add some text to the links, and I can add a couple of optional links like Random.

2014-07-07 12_51_17-sacha chua __ living an awesome life - learn - share - scale

On a normal-sized screen, I add a sidebar on the right side.

2014-07-07 12_51_32-

On a wide screen, I move the post meta information to the left margin.

2014-07-07 12_51_54-sacha chua __ living an awesome life - learn - share - scale

You can comment with Disqus or you can e-mail me at sacha@sachachua.com.