On this page:
  • Learning from things I like: Smashing Magazine’s responsiveness
  • Automating bulk web stuff with iMacros
  • Library shortcuts

Learning from things I like: Smashing Magazine’s responsiveness

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

Automating bulk web stuff with iMacros

I found myself needing to download a whole bunch of JSON data from a server that had a weird authentication thing that Chrome could deal with but wget/curl/Ruby couldn’t. Since my Firefox was on the fritz, I couldn’t use Selenium IDE or the Selenium Webdriver. iMacros to the rescue! (Chrome, Firefox)

2013-11-21 Geek notes - automating bulk web stuff with iMacros

That plus lots of keyboard macros and text manipulation in Emacs, plus a little parsing and regexp substitution in Ruby, plus more Emacs munging got me the data I wanted. Hooray for bubblegum and string scripting!

Library shortcuts

Matt Price e-mailed me about this wonderful piece of wizardry he added to YubNub (which is kinda like a command line for the Web). He set up the tpl command, which searches the Toronto Public Library. This prompted me to finally make YubNub the default handler for my Mozilla Firefox address bar, which you can also do by going to about:config and setting or creating the keyword.URL option to http://yubnub.org/parser/parse?command=

This is good stuff, and one of the many reasons why blogging saves me time and lets me hear about all sorts of interesting things. =) Matt, thanks for sharing!