The prospect of speaking to 650 people inside Nottingham’s grand Albert Hall was more than a little daunting, considering the one time I’ve spoken before was to less than 50 people in a small meeting room. But the experience was fantastic, and I’ve had some incredibly kind feedback.

If you find yourself with forty or so minutes to spare sometime, you might like to watch it. Amongst other things, I talk a bit about machines with souls, why accidents are great, pencils, Ghostbusters—oh, and there’s a video of me doing a crap jump off a balcony and breaking my heel.

If, for whatever reason, you can’t see the video above, you can watch it on Vimeo. You can also view my slides, but be warned: they make little sense without my rambling to accompany them.

Following on from getting the project proposal and contract signed off during Part I, I’ve procured the content and brand assets so now it’s onto planning and design concepts.

Wait, “procured the content”? That sounded easy! Listen, I know. Planning for, authoring and managing content is hard. We wouldn’t be building entire web apps or writing whole books on it if it was easy. But this project is not an exercise in content strategy; it’s a small, single-page site with a very specific purpose: promoting a bi-annual comedy show. The content consists of:

• Site title and description
• Details of next show (Date/time/venue, booking methods)
• Name, photo, profile (55 words), testimonial quote and link to YouTube videos for each of the 4 acts
• Mailing list signup form
• Links to Facebook and Twitter accounts, and sharing links

Getting started

Gathering snippets of visual inspiration and marking up the content in HTML have been the first two steps. I find marking up content early a great way to familiarise myself with the subject matter, at the same time as actually getting the work done. The difference this time has been my “mobile first” mindset.

Knowing that, at the most basic level, visitors will experience a single-column layout has helped me better focus on content hierarchy: most important at the top, least important at the bottom. No decisions influenced by a more “designed” layout. Traditional wireframes have always felt too influential in this regard. When beginning design concepts, I’ve often felt trapped by the wireframe layout that the client has already signed off, when in many cases all the wireframe needed to do was define simple hierarchy.

Branding work was completed by a separate company prior to kick-off on the website, with a creative direction intended to be reminiscent of 19th century circuses. I’ve received logo variations and a colour palette, but little more. This has been a bit of a blessing, as I can help shape an appropriate web presence for such a young brand without overbearing print guidelines.

Building a prototype

With the content all marked up in gooey, semantically rich HTML, I’ve defined styling for typographic and basic layout elements in global.css. Choosing 14px as my ideal text size, my measurements for type and imagery are based on the 2:3 ‘Musical Fifth’ ratio, and resulting modular scale. While I’ll be further integrating this scale into the design as the site progresses, I didn’t want to get too caught up in it at this stage, as I had quick and dirty layouts to prototype.

There is no existing Punchline website from which to deduce statistics on visitor resolutions or devices, so I’ve chosen to use the display areas of common devices as breakpoints for my media queries. These media queries, declared in a separate screen.css file, only get served up to devices with a minimum display area of 480px (iPhone in landscape mode). Devices with display areas of less than 480px, like “feature phones” or common smartphones in portrait mode, simply get served up global.css. From there it’s been a case of choosing the most suitable grids for the given content and display area.

Breakpoints and layouts

Note: The acts featured in my prototype and design are NOT the real acts appearing in the show. They’re simply examples I’ve picked for the purpose of this write-up, to protect the integrity of the real show.

Devices with a display area of up to 479px will see a single-column layout; each content block stacked on top of another. Devices with display areas of between 480px and 599px see a two-column layout; each act assuming a column (with two acts stacked on top of the other two) and the show summary, mailing list signup, social links and footer all spanning the width of both columns. Display areas of between 600px and 767px retain the two-column layout, but receive a couple of extra snippets of content that weren’t absolutely necessary at smaller sizes.

This is where it starts to get a bit more interesting. Display areas of 768px and larger see the header pulled out to the left-hand side, looking more like a sidebar. This element is given position: fixed; to retain it’s position as the document scrolls (it’s kind of important, seeing as it contains the booking information). The mailing list signup and social links are absolutely positioned above the acts to take the place of the header. The headline act assumes the full width of the main content area, with the middle slot and opening act still split into two columns underneath it. The compere appears underneath these two acts, spanning both main columns.

This three-column layout then morphs into a four-column layout for display areas of 1024px or larger, with the compere coming up to join the two other acts in columns underneath the headline act. There is no change for display areas of more than 1200px yet, but I’ll likely progressively increase type sizes to maintain readable measures and eventually set a max-width on the site container.

1. < 479px
   
2. 480px – 599px
   
3. 600px – 767px
   
4. 768px – 1023px
   
5. 1024px – 1199px
   
6. 1200px >
   

Because each layout is liquid, all that’s really happening from one breakpoint to another is the addition (or subtraction) of floats, percentage widths and margins. As a result, it’s been super quick to knock up the prototype.

It’s sure as hell not pretty, but take a look. Resize your browser to see the breakpoints in action.

Static visual mockup

I found my base typographic sweet spot in the process of creating the prototype: 14px Georgia with a 1.5em line-height. I also chose Rosewood Std Fill for both h1 and h2 headings, as it made sense historically; Adobe based it on an 1874 design, which fits nicely into our 19th century bracket. But other than basic typography and layouts, I’d done no visual design work at all.

Though the brand assets riffed off old 19th century circus artwork, I was told specifically that the site should have “a hint of circus”. Take from that what you will, but I heard: don’t design a page that’s meant to look as if it’s inside some god-awful circus tent or staring down a lion’s throat, just drop enough hints and people will get it.

I’ve based my static visual mockup on the 1024px-and-up layout, employing an eight-column grid (960px wide). It’s hardly the greatest thing I’ve ever designed, but as a first-pass concept, it feels developed enough to send off for some feedback. I deliberately didn’t work into it too much; it’ll develop in due course.

Why 1024? It’s the easiest reference point for the client. They’re used to browsing websites of around this width on their desktop anyway, and this layout is, I suspect, likely to be the one visitors see most.

I emailed the client a link to the visual mockup set in a browser, accompanied by a video. In both the email and video, I emphasise the fact that this mockup is an “artist’s impression” of what the final site may look like. In the video (a screencast), I simply take a few minutes to explain my reasoning behind the responsive approach and demonstrate the breakpoints in action. This should help the client understand what is otherwise a potentially lofty concept, or at least a relatively new one. Particularly if they’re not a complete nerd.

Potential issues

Getting to this point has been an interesting (and at times downright fun) process, and though it feels like I’m making good progress, I’m left with more questions than answers…

Q: How will I get around loading large inline and background images across potentially weak data connections (not to infer strength of data connection from device resolution, of course)?

A: Only load large background images past certain breakpoints? For inline images, load smaller versions by default and feed large versions to more capable devices with Filament’s script?

Q: Will browsers, like IE6, 7 and 8, that don’t understand media queries simply get served up the basic linear layout?

A: Without JavaScript enabled, yes, though there is the option of using css3-mediaqueries.js to mimic the work media queries are doing. The idea of having an entirely JS-dependant layout does feel wrong to me, but I’m not ruling it out for these cases. Alternatively, simply serve up the 1024+ layout to IE7 and 8, as they would otherwise get were the site not responsive at all. IE6 will likely get a basic, linear layout.

Q: Will lettering.js and fittext.js work well enough, and how will I avoid all this JS load for small screen users who won’t even get to see the results?

A: My plan is to set the complicated type using lettering.js and FitText. I’m a bit apprehensive, as I’ve never properly integrated them into a site build. As for avoiding JS bloat on devices that can’t even make use of it, people much smarter than me allude to the fact that it isn’t easy. So, yay.

Until Part III…

Two streams of thinking I’ve found fascinating to see develop over the past year or two are “responsive” (or “adaptive“) web design and a “mobile first” approach. Perhaps because I’m never really involved in mobile-specific projects, it feels like responsive web design has generated more discussion and prompted more writing amongst those I know. But however separately these topics have been discussed, it feels as though they share the same ethos: we can create better experiences by embracing the inherent flexibility, power and dynamism of the web.

Hearing Jeremy Keith speak at DIBI last week helped clarify a lot of the thoughts I’ve been having surrounding the topics. To begin creating better experiences, the first step we need to take as designers is to start relinquishing this delusional idea of control we have over our designs as concrete visual pieces. Every time we fire up [insert your graphics editor of choice] and punch in canvas dimensions at the beginning of a project, we’re simply perpetuating this fallacy that the web is some kind of fixed canvas we can design for. It isn’t. It never was.

640×480? 800×600? 1024×768? Basing the width of a website on the resolution of a desktop computer monitor, particularly when we have no idea what the viewport width might be, has never been the right thing to do. But now, finally, the reality of the exploding mobile landscape has brought the inadequacy of our approach into sharp focus.

Design for the web demands an approach further divorced from the visual communication practices of the past. This is not to say we should disregard any of the undeniably crucial work of designers over the course of history; we should must learn from them and carry that awareness with us always. I don’t think it’s possible to reach our full potential as designers of the web without doing so. But the web is a unique medium unto itself, and designing for it should be approached appropriately.

Why all the babbling?

Being a designer for a product, I rarely create websites these days. But I’ve taken on a small project that, in the process of completing, will hopefully help answer some of the questions I have about responsive web design and design for small screen (by doing, as opposed to just reading about).

I’m not claiming that what I’ll be doing is in any way groundbreaking. I personally know people employing the same, or at least similar, techniques in their work right now, and have been for some time. But I know more still who aren’t, so I’m keen to open up my own experience in the hope it might act as some sort of reference. Through comments, it’d be great to build some discussion around the approaches I’m taking as I work through the project.

The project

The website is for a new company hosting bi-annual comedy shows in Edinburgh. It’s purpose is simple: to be the primary source of information for upcoming shows, providing visitors with methods of booking tickets, and encouraging them to sign up to the mailing list.

With the project proposal and contract signed, the first step has been to procure the content.

Part II next week.

Interface = Brand

In ‘The Interface of a Cheeseburger’, Oliver Reichenstein observes that “Shaping interfaces is shaping the character of things. The brand is what transports the character of things.” It’s possible for the gut feeling we have for a product, service or organisation—Marty Neumeier’s definition of brand—to be defined by the interface. Apple, Dyson and Lego are examples of such brands.

Establish a vocabulary

Interfacing with something is a lot like having a conversation. Just as people learn to articulate themselves, so must an interface. Like social etiquette, the language of an interface should be designed appropriate to situation and purpose. Crafting a vocabulary helps mould the senses of an interface.

Context is king

Is the purpose of the interface a serious one? Utilitarian in nature? Perhaps it’s a tool, or simply used for fun? Successful design decisions are made in the context of usage, content and the business. Complicated web apps demand design decisions that not only serve the user, but that scale well and are performant too.

Make it better

Every time you touch your app is a chance to make it better. “Better” does not equate to more features. Seek out weak points, note down issues and set time aside from your schedule to improve them. Consistency of UX, visual improvements, code dryness, whatever. If you’re developing new features without an eye on the larger experience, you can bet you’re making things a whole lot worse in the long term.

Facilitate good habits

Much like a driving instructor and pupil, it’s a designer’s job to facilitate good habits in the user. Prepare them mentally for the task at hand. Set the tone. Use handholding and signposting techniques to ease the introduction to, and completion of, specific activities.

Make it simple, but no simpler

I like to define simplicity of an interface as: allowing the user to concentrate on the task at hand without realising it.  While the quest for simplicity is virtuous, enforced simplicity can be dangerous. Instead, consistency of approach is paramount. It buys you attention, and while it’s important to know how not make the user think, it’s arguably more important to know how and when to make them think.

Small details make a big difference

A/B tests performed on changes to button text, form element alignments and small passages of microcopy have proven that small changes can make a huge difference to a bottom line. Likewise, crafting elements of the user experience that resonate with us as  human beings creates a bond that draws us back. Taking the time to sweat the details is always rewarded.

Design is for humans

Machines are logical and rational, but humans are emotional and irrational. Try to see design as less about solving problems and more about creating opportunities. Theory can be learned, just as execution can be learned. Our real value as designers is our instinct to know how and when to marry them appropriate to the situation.

Download my slides

• InnerSpeaker — Tame Impala

  Modular Recordings

  In the best possible way, InnerSpeaker sounds more like it was recorded in 1967 than 2010. Chock full of dreamy melodies, spaced-out psychadelic fuzz and fat, pounding drums, it’s a trip back to an era of lo-fi production that modern music seems to have largely forgotten. Even calling it “lo-fi” seems unjust, given how rich and imaginative Dave Fridmann (multiple-time collaborator with The Flaming Lips, Mercury Rev and Mogwai) has been in his mixing of the album.

  Though occassionally directly referencing sixties groups like Cream, The Jimi Hendrix Experience (‘The Bold Arrow of Time’, ‘Island Walking’) and The Beatles (the very Lennon/McCartney-esque double-tracked vocals), I find it hard to put my finger on exactly what makes the albums best moments really work. It’s certainly not a reactionary record; these three young Aussie’s haven’t just sat down and worked through their parents’ vinyl collections over a fortnight. Everything from the songwriting approach, to the instrumentation and recording style has clearly been honed over a number of years. It sounds old, and I love it.

  Highlights

  • Alter Ego ·
  • It Is Not Meant To Be ·
  • Lucidity ·
  • Jeremy’s Storm

• One-Armed Bandit — Jaga Jazzist

  Ninja Tune

  One-Armed Bandit is a bit like Hot Rats for 2010. After the short introductory ‘The Thing Introduces…’, the title track picks up where Zappa’s 1969 breakthrough album left off. But despite the abundance of complex passages and frenetic time signature changes, Jaga Jazzist never seem to lose sight of the fact that strong melodies are central to everything. There’s an abundance of musical styles here, and an impressive array on chops to match. Aside from the aforementioned Zappa, there are more than a few nods to John Coltrane, Aphex Twin, King Crimson and even Squarepusher’s more instrument-led material.

  What I really love about this 10-strong Norweigan powerhouse is that they manage to do something really rare on One-Armed Bandit: credibly fuse elements of jazz and progressive rock with electronica. And if that remark doesn’t scare you off immediately, you’re probably in for a treat.

  Highlights

  • One-Armed Bandit ·
  • Banafleur Overalt ·
  • Prognissekongen

• This Great Pressure — Jogger

  Magical Properties

  As a general rule, Jogger seem to take perverse pleasure in denying the existence of anything as petty as rules. This Great Pressure is a strange but compelling listen that takes in elements of folk, math-rock, electro, IDM, breakcore, hip-hop, dubstep and… death metal.

  It was the relatively straightforward ‘Gorilla Meat’ that got me hooked on the album initially, but if you’ve got the patience to hear Jogger out you’ll be rewarded with an eclectic collection of songs that somehow seem to blend seamlessly.

  Highlights

  • Gorilla Meat ·
  • Master And Student ·
  • Champing At The Bit

• Astro Coast — Surfer Blood

  Kanine Records

  I saw this group of young Floridians play at the Pavement-curated All Tomorrow’s Parties festival in Minehead back in May. My immediate thought was: “they sound sound a bit like Weezer, if Weezer hadn’t gone shit after Pinkerton”.

  Astro Coast is good wholesome pop at it’s core, but with a few interesting twists and the occasional dip into shoegaze/glue-sniffing territory. Wads of reverb on the vocals and a few Dick Dale-esque guitar melodies lend a nice kind of “west coast” feel, and there are shades of The Pixies and Sonic Youth throughout too.

  Highlights

  • Take It Easy ·
  • Harmonix ·
  • Swim ·
  • Fast Jabroni

• Butterfly House — The Coral

  Deltasonic Records

  I’ve long respected The Coral, despite never really being a massive listener. They’ve always seemed like a “band’s band” — no frills, no drama, no make-up, just music. But their older albums never really grabbed me, for whatever reason. Butterfly House, however, is a brilliantly crafted record.

  The production (handled by John Leckie, producer of Radiohead’s The Bends and The Stone Roses’ debut) is lush and interesting, but without being flashy. The songs were written over a period of two years and thoroughly road-tested, so the writing and playing is polished and really well-rounded. The band sound confident and self-assured. And though they’ve retained many elements of their psych-pop roots, there are plenty of Beach Boys-esque harmonies and elements of the best Stone Roses material here too.

  Highlights

  • 1000 Years ·
  • Walking In The Winter ·
  • Butterfly House ·
  • Falling All Around You

Notable Mentions

Oh, and these lovely records have tickled my ears too…

• 

  SwimCaribou

• 

  The SuburbsArcade Fire

• 

  ModeratModerat

Check out Shelby’s in-depth article about the development of Designspiration on the ISO50 blog, or head on over to the site now.