Learning from the crazy ones

I’ve been reading the Steve Jobs biography and a quote in the Jony Ive chapter (half way through the book) from Jobs really stood out:

“In most people’s vocabularies, design means veneer, but to me, nothing could be further from the meaning of design. Design is the fundamental soul of a man-made creation that ends up expressing itself in successive outer layers.”

Spot on Jobsy!

Now back to web design

It made me think about my own practice in web design. Due to subjectivity — or as Jobs would have said, bad taste — there are no “right” answers in design (which Jobs probably wouldn’t have said). But there are a lot of very bad answers. My post Reflecting on Aesthetics (Jan 2011) describes a little bit of my thinking, obviously inspired by many great designers past.

I started practicing Responsive Web Design — the art of adjusting a website to its environment, most noticeably device size — towards the end of 2010. Previously I was designing static websites. Because the ideas and technologies are so new and ever evolving I’m still learning, but then again, so is the whole industry. I’ve heard a few bozos suggest that responsive web design is a “trend” that will pass. Or it is somehow “boring”. I tend to ignore those people. If you think that you don’t understand what is fundamentally important in design, let alone the evolution in web access (alright, it’s not the holy grail but there’s little downside). I’d suggest reading the Jobs biography, and then Mobile First by Luke Wroblewski.

A few favourites

After a year of tweeting, blogging, researching, experimenting and practicing on real clients, I thought it would be a good opportunity to showcase a few of my favourite responsive website designs. Not my own, that would be a bit arrogant, but those of others leading the industry.

A few of my current favourite website designs:

Lancaster University

Lancaster University recently launched their new site by The Roundhouse (Newcastle) and freelancer Tom Knowles. It’s obviously a product of strong understanding and strategy:

Aside from successfully completing the notoriously difficult task of designing for an education institution (with their design-by-committee committee and rebellious students looking for a cause), this website is awesome for the following reasons:

• Observation: content is intelligently selective at smaller sizes. For example, the statistics in the header are removed entirely on small screens. Lesson: not all content is created equally and the content hierarchy can change. Be very considerate of what may be removed.
• Observation: The “Find a course” feature changes dramatically but remains prominent on small screens. Lesson: consider what the user needs to do, prioritise those requirements, and provide functionality in suitable guises.
• Observation: on content pages the left side sub-navigation moves below the page on small screens (just above the footer). Lesson: visible content comes first. Users still have the main menu or browser navigation to go back.

Lancaster University’s website is not quite perfect by xkcd standards, but it’s a very admirable attempt and one we should all be learning from.

Andersson-Wise

The website of Andersson-Wise architecture says “Flash is dead” (if you didn’t know that already). It’s a photography rich portfolio with clever touches of UX thinking.

• Observation: this design mixes a print inspired grid with the fluidity of web design. Lesson: take full advantage of the space when you have it.
• Observation: Only one piece of content is removed on the entire website at a smaller size (and needlessly, in my opinion). Lesson: small screen does not mean less content. Read my ramblings on the matter in this post: What is mobile?
• Observation: at smaller sizes the website loads smaller images. Lesson: responsive design is not just about screen size; consider everything about the user experience, including bandwidth limitations.
• Observation: on portfolio pages the photo gallery transforms from a fullscreen slideshow to a vertical list of images. Lesson: consider the user’s interaction. In this case scrolling down to see more is a lot easier than operating a slideshow.

Food Sense

I have to admit Food Sense is beautiful (aesthetics still matter) but its a lot more than skin deep. Some would call this website “adaptive” rather than “responsive” because it’s not 100% fluid, but since it wouldn’t be too hard to take such a design down that path I think Food Sense is an inspiring example:

• Observation: the main navigation moves from a icon-based vertical menu to a text-based horizontal menu. Lesson: elements do not necessarily have to remain in strict places if their usage is clear.
• Observation: from 4 to 2 to 1; columns of content adapt to the screen size. Lesson: base your breakpoints around content to make best use of available space.
• Observation: At decreasing sizes first the slide tab captions disappear (below the photo), and then the titles follow suit. Lesson: users appreciate brevity and will not notice the omission of “nice to have” features.

Lessons learnt

I love these websites. Not because they’re perfect, they all make mistakes, but because they’re well ahead of the game and real efforts in exploring what web design means in a future tense.

Other favourites include Stephen Caver because graphic-heavy styles are still possible, Palantir — it’s gorgeous!, Content Choreography (very meta), and my own xheight where I’ve experimented with typogoraphy and focus.

I’d like to redesign/realign more of my own websites if I ever find time. In the meantime, clients will have to be guinea pigs! Joking aside, exploring new ideas one step at a time is the best way to progress talents. My goal is to always be on that horizon. I look at websites like those listed above to pinpoint where I should be and then aim beyond.

I reckon I’ll make this post a monthly occurrence on my blog. So if you’ve been working on something great, let me know!