Designing The Well-Tempered Web

Advertisement

As technology evolves, so does the art and craft of Web design. New technology creates new challenges, which require new solutions. Often we’re working in uncharted territory, where the solutions demanded really are new. Other times, we’re faced with problems of a more universal nature, problems that have a history.

Given the limited history of Web design, we have to look beyond our immediate domain for answers to the more challenging questions. We do this all the time when we draw on the rich history of graphic design and visual arts. But we’re not limited to sibling disciplines. If we can identify the abstractions and patterns that constitute our challenges, we can look to any source for guidance. We can look to a seemingly unrelated field, such as psychology or music. We can even look to an episode from the early 18th century about Johann Sebastian Bach.

In this article we’ll look at what Bach has to do with modern Web challenges — Particularly the challenge of designing for devices with diverse attributes and capabilities.

Bach And “The Well-Tempered Clavier”

In 1722, Bach put together a book of solo keyboard works intended as a collection of educational pieces for young musicians. The book contained 48 pieces — a prelude and fugue in every major and minor key. Now a staple of the Western canon, it’s regarded as one of the most important works in the history of Western music. He named the book The Well-Tempered Clavier.

To appreciate the historical significance of the work, you have to understand that in Bach’s day the notion that one might play keyboard music in all keys was unorthodox. It was a matter not of philosophy, but of physics: a fixed-pitch keyboard instrument could be in tune only with a selection of keys at a time. In the tuning systems of the era, playing in tune in all 12 major keys was simply not possible.

While the laws of physics can be tough to bend, human perception moves fairly easily. The solution was to redefine what it meant to be “in tune.” By adjusting certain intervals so that they deviated just slightly from perfect intonation, a tuning system was produced that allowed one to play reasonably in tune in all keys. This practice of compromising granular qualities for the greater good of the system is called temperament.

Well-Tempered Clavier, Book I, Prelude I
Opening measures of the first Prelude of Bach’s Well-Tempered Clavier. (Image credit: Wikipedia)

The name of the alternative tuning system made famous by Bach and The Well-Tempered Clavier is, unsurprisingly, “well temperament.” Today, most intonation in Western music is based on “equal temperament.” The methods are different, but the goal is the same: to make each of the keys slightly imperfect so that all of the keys can be used. It’s like utilitarianism for acoustics.

What This Has To Do With UI Design

Probably the most exciting development in Web design in the last few years has been the shift to designing for multiple devices. It’s no longer just about how a website functions in two different browsers, but about how it functions on various devices with completely different characteristics: different screen sizes, different capabilities, different use contexts, different interfaces.

Although responsive design and device-specific websites enable us to tailor designs for diverse experiences, there will still be times when we have to make universal decisions — and when we do, the metaphor of well temperament can be helpful.

The application of this concept to UI design is straightforward: in order to deliver a good experience for a range of devices, we have to allow for occasional imperfections in individual interfaces. We have to make little compromises here and there to make sure that our design travels well to other environments.

Touch-First Design

A common example of well temperament in action is the effect that touch interfaces have had on recent desktop website designs.

As a pointing device, a finger, being much larger than a mouse, requires a larger touch target than what’s required by a mouse cursor. So, to ensure usability, interactive elements need to be bigger. As interactive elements increase in size, other things need to increase in size to maintain balance. This leads to an aesthetic characterized by generous margins and padding.

New Gmail design
The new Gmail design has a lot of white space and extra padding on buttons and is very touch-friendly, even though it’s a desktop design.

The rise in popularity of the iPad, which bridged the gap between touch interfaces and desktop screen sizes, is what accelerated the influence of touchscreens on desktop interface design. If you look at recent redesigns of major products such as Gmail and Twitter or browse CSS galleries, you’ll see that design on the Web is starting to look a little different. Things look more… plumpish. There’s more white space, buttons have more padding, things in general feel bigger. Of course, other factors are at play, such as the steady increase in desktop screen sizes.

What we end up with is a design that might afford too much space for a mouse but an appropriate amount of space for a finger. We allow for a slight deviation from the norm in one experience in order to better support all possible experiences.

It’s important to note that making a UI touch-friendly in this way also results in a UI that might be more useable for mouse-and-desktop users. A button that’s easier to touch is often easier to click. By erring in the direction of usability, we get the bonus of improved performance of the design in its original desktop context.

Microsoft Metro design in Windows 8
Microsoft’s Metro design language is inspired by a touch-first approach to interaction design.

Universal Design via Responsive Design

Although much of the discussion on responsive design tends to focus on techniques of responsiveness, responsiveness itself is never the goal. It’s a means to an end. The design responds in order to do something else. That something else might be to supply different content, to serve low-bandwidth images, or to adapt the layout for better presentation on smaller screens. That something else might also be a goal of providing a universal experience to a large number of different devices.

Riding the responsive design train to arrive at universal experience design, we’re likely to pass through some form of well temperament. A great example of this — and an excellent example of responsive design in general — is the Boston Globe’s website.

BostonGlobe.com home page
The Boston Globe is a shining example of responsive design on a large-scale website.

This responsive strategy enabled a single design to adapt to any device that a reader might use to read The Boston Globe (even the Apple Newton!). But this wasn’t just a feat of front-end engineering. Accompanying the media queries and JavaScript wizardry was a simple malleable design that lent itself to adaptation.

This is a tempered design. While the minimalism might be purely stylistic, I suspect that if it had been a desktop-only design, we’d have seen more gloss and embellishment. There would have been a longer runway on which to perfect the experience for a single-use context. But instead, the designers made little trade-offs to produce something that could be transposed to all possible environments — something that could play in all 12 keys.

Mobile-First Design

The preceding examples were concerned more with graphic design, but the concept of temperament can be applied to product design, user experience, information architecture — almost any other area of design. Let’s look at product design and the idea of designing for mobile first.

If you’re designing for mobile first, then you’re already working with tempered design. By starting the design process with mobile and building a product around the demanding constraints of the mobile environment, you’re obligated to focus on the most essential elements of the product. As Luke Wroblewski writes:

So, when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish, without the extraneous detours and general interface debris that litter today’s desktop-accessed websites. That’s good [for the] user experience and good for business.

When these design decisions extend beyond the mobile experience to define the overall product, then the design takes on a form of temperament. The latest redesign of Twitter (i.e. “New Twitter” or “New new Twitter”) demonstrates some of these principles.

New Twitter design
New Twitter has a simplified design and a consistent experience across devices.

One of the objectives of the Twitter redesign was to give users a consistent experience across computers and mobile phones. Achieving a consistent look and feel is a UI challenge, but achieving a consistent overall product experience is a deeper challenge. In both cases, designing for mobile first puts us on the right path.

Something I found interesting about the Twitter redesign was the influence that the mobile experience had on the product’s overall design. For example, aside from the tweet button, all of the actions have been organized under four tabs: “Home,” “Connect,” “Discover” and “Me.” It’s a simplification that plays wonderfully on a small screen. Four items fit perfectly in the tab bar.

On the desktop website, other features have been added, but the simplicity established in the mobile version carries over. Although the desktop version has plenty of room — both pixel-wise and figuratively — for more complexity, the design is restrained, tempered, to ensure a universal multi-device experience.

Beware Of Wolves

In the natural tuning systems that predated the standardization of well and equal temperament, notes of the out-of-tune intervals that were played simultaneously produced a harsh and howling sound. Musicians had a great name for this: they called it a “wolf.”

Applying this idea to interface design, we can think of a wolf as a visual or interactive element designed for one experience that breaks down to some degree when transposed to another. Think of the times you’ve struggled to finger-tap a small link that was made for a mouse cursor, or had to read tiny text on a mobile screen, or, on a touch device, used an interface that relied on hover states. Wolves in the UI.

New York Times mobile touch targets
These article present links that are designed for interaction with a mouse. When viewing on a touchscreen mobile device, their usability is greatly impaired.

New York Magazine dropdown menus
New York Magazine provides useful and well-designed drop-down navigation menus — but only if you’re using a mouse.

Closing Thoughts And Practical Tips

Again, it’s true that responsive design and device-specific experiences can offer us a way around many of these problems. If we can tune the size of a button to a particular environment, then we don’t have to accept blunt, across-the-board treatment. But the number of devices we have to support will only increase, and customizing for every possible scenario could quickly become unreasonable.

Even if we are able to provide perfectly tailored design at the execution level, there is still value in thinking about tempered, universally accessible design at the conceptual level.

Additionally, just because we can tailor design to particular experiences doesn’t mean that users will not carry expectations over from one experience to another. The boundaries might blur whether we like it or not.

Tips and Things to Keep in Mind

  • Think responsively.
    Even if you’re not implementing a full responsive design, simply thinking in responsive terms goes a long way to achieving usable universal design.
  • Think touch-first.
    A button sized for a fingertip will always work for a mouse cursor. But a button sized for a mouse cursor will often be too small for a fingertip. Designing for touch first ensures that your website or application translates well to other contexts.
  • Think universally.
    “Test early, test often” the saying goes. In your design process, think early and often about how your design will function on various devices.
  • Think mobile-first.
    Starting your design with mobile focuses you on what really matters to your users. By maintaining focus on the essential features, achieving a consistent experience across devices will be much easier.
  • Be careful with interaction behavior that is not supported universally across interfaces. Hover states don’t function the same on touch devices. Touch gestures can’t be performed with a mouse. It doesn’t mean we can’t use these things, but we have to be aware of their limitations.

In The End…

Bach believed that people should be able to write and play in any key they wish. He argued for it by writing beautiful music that compelled the world to agree. He designed for the system he wanted.

We want our users to have great experiences with our websites and applications on any device they choose. We want our work to be as usable and accessible as possible.

What will you design?

Other Resources

You may be interested in the following related resources:

(al)

↑ Back to top

I'm a designer, developer, and Director of Interactive Media at Summit Business Media. Every now and then I post stuff on my blog (RavelRumba). More often I post stuff on Twitter (@robflaherty). I live in New York City.

  1. 1

    Well done Rob!
    Really interesting post.

    4
  2. 2

    I’d like an article to look into the extent of mobile web-browsing at the moment because it seems to be massively exaggerated. Besides checking email and occasionally some social media… and the odd-use of the dominos pizza app, I really don’t think my tiny mobile will ever be my browser-go-to. Mobiles are for on the go and I don’t know when I have time to do extensive web-browsing when I’m traveling.
    I think unless a client specifies that they want their website to be intuitive on a mobile, we shouldn’t get too caught up in worrying whether the website is easy to use on every device. Time to test all this increases cost and its not really important for most clients.

    8
  3. 3

    I am still not sold on the mobile first approach. If you do a mobile first approach I don’t see how unforeseen challenges can be handled, as you can see when a full desktop design is made first.
    Seems like you limit yourself more when you design for mobile first.

    I think of it as starting big and widdling down the content and navigation later. Keeping mobile in mind is definitely a need, but I think you limit yourself too much just because of the form factor of the devices. I know mobile usage is growing and going to continue to grow. But I am not sold on idea that mobile devices will be the sole viewing sources for people.
    I am also not sold that tablets, the way they are now, are the way of the future. They seem too limited.
    I see something like the ASUS PC tablet that is running Windows 7 or the Metroid format. I would not doubt that a tablet PC will bypass the iPad and the Android devices, because of the shear computing power that it will and already does have. The desktop concept has not gone away. Heck they have made keyboards for iPads and Android tablets already. And phones too.

    So, great article otherwise. But mobile first, I am not so sure yet. I need a bit more convincing before I start with that.

    1
    • 4

      I agree. I think Tablet PCs will at some point be just as a competing product as any of the current iOS and Android tablets, purely out of sheer productivity value that it provides and I as well agree that it will bypass them too. I have the Asus Tablet PC and quite frankly I can’t see what’s going to beat that.

      I’m quite reserved towards the Mobile first approach not all sites need this – heck I don’t even try to push responsive design unless I truly see a real reason to. The only exception I see is if you are developing a community based site, ie social, or you are selling a product or products that are tailored towards such devices then yes it makes sense to but otherwise no need – the cost is not justifiable.

      0
  4. 5

    Also just noticed this. Apple doesn’t even make a mobile version of their site. Why is that? We spend all our time trying to make mobile sites compatible with their devices, why should we, as web developers, do this when they don’t spend the time to make a mobile site themselves.

    ???

    Just saying.

    4
    • 6

      Apple doesn’t need to follow the rules because they are Apple. Also, they are selling the devices … so they assume you don’t already have one, which means you aren’t accessing their website on one of their devices :)

      -10
    • 7

      Apple also market Safari as a full-featured browser on iPhone and iPad, negating the need for a mobile site. It’s all about them showing that you get the same experience in Mobile Safari as you do on the desktop.

      6
      • 8

        I get that Safari being full featured but so is Android’s browsers. Both work great at viewing webpages, but the simple fact that I don’t want to pinch, zoom, double tap and then readjust everything to view what I want.

        Just saying it would be nice if they could do the same if we are to develop mobile versions for our sites, they could do the same. But of course they are Apple. No necessarily an Apple knock (I own a Mac Book Pro) but they do have a bit of an ego issue. Especially since their product cost between $150-$500 USD to produce any of the Apple products and they charge over $1500 to buy a new Mac Pro. They don’t have any proprietary hardware anymore. They are using off the shelf components. This may be similar to other brands but not as absorbant. Anyways, I got off topic.
        Great article. Sorry for the short rant.

        0
  5. 9

    Off topic… can the smashing mag site have any more obnoxious ads… looks awful and cheesy. way to ruin a nice site.

    5
  6. 11

    Superb article. Thanks for all the wonderful tips. Will surely keep these in mind when i am designing something.

    0
  7. 12

    As always – thought-provoking. Three things I find missing — our sites are not islands unto themselves.

    Design for sharing — not just FB but elsewhere, including Kindle platform, Flipboard, Newstand, etc. and in ways that return visitors to your own site if that’s your objective or in ways that accomplish other goals. (FYI – wanted to share this post on Pinterest and none of your photos appear in the pin process – thus no share.)

    Design for content protection — the plagiarists, the scrapers, they’re smarter than our sites right now and we are paying the price.

    Design for monetization — the prettiest/most useable sites aren’t going to last long if there’s no revenue, and not just ON our sites themselves –

    1
  8. 13

    A thoughtful intro and well-planned article. Well done.

    I’ve been moving to the idea of designing for mobile early on, but not first. Perhaps I just have an oddball process, but when sketching out the wire-frames and general look and feel, I bounce between mobile and desktop/laptop plans. The latter helps me think of and refine functionality, the former aids in simplifying the presentation of that functionality and highlighting what is vital. When it comes to laying it out digitally, the result is a cohesive presentation with all the right bobs and bits where they should be. One that only needs to be built once.

    The one thing I haven’t done as much, and will certainly take away from your article, is making the buttons more graphical. Google’s approach seems a little too simplified for general use (great when your users have time to get used to them, but maybe not so much for random users on a blog or product site), but there’s definitely a sweet spot.

    Thanks!

    2
  9. 14

    Good article, but honestly this article has been written a hundred times over again.

    1
  10. 15

    I tend to agree with Kayleigh that there needs to be more research on just how much surfing people are actually doing on their phones – Most I know use their phones for quick lookups, directions, etc. Very rarely are they reading news or lengthier blog posts unless stuck somewhere killing time. Personally I find it painful reading on a small smartphone screen.
    ———-
    Tommy makes a good point – and Carlos about limiting yourself – that modern browsers like Safari with pinch to zoom etc. were designed to negate the need for specially designed mobile sites. I think the fact that smartphone/tablet apps have been so popular it’s skewed the thinking unnecessarily toward this mobile first theory.

    0
  11. 16

    Nice article especially on the point of thinking touch-first. It is indeed a refreshing challenge to design websites thinking mobile and touch first.

    It is interesting about the research on the usage of mobile devices to access websites. Does the client really appreciate the responsive features? I have observed on the train that people are willing to zoom in and out on websites which are not optimized for mobile devices. It seems like i am the only one feeling excited when i see a responsive website!

    0
  12. 17

    Beautiful article – embedded in history, relevant for now, broad enough to be encouraging and links enough to get you started. Well done.

    Get bored of articles where people seem to think that design was invented yesterday and technology only impacted society when information was added to it.

    As a side note when I first stumbled on Bach as a 14 year old I read it first as ‘The Well-Tempered Cavalier’. That may well be the title of my autobiography :-)

    0
  13. 18

    Nice descriptive article.Great work.Thank you

    0
  14. 19

    This really moves the term “responsive” from being the latest buzz word to a way of approaching product design in general. This is a vivid reminder of how exciting the field of web design and development is.

    0
  15. 20

    I have a hard time reading the posts and now there are listings for books. My my…Great post as usual.

    It’s strange that no one seemed to have noticed, but didn’t the design change radically? I mean, I love this design — it’s clean and intuitive :)

    Loving it. Keep them coming. Can you believe the fact that I read these posts even though I am no designer.

    0
  16. 21

    Tobias van Schneider

    January 18, 2012 6:29 am

    “It doesn’t mean we can’t use these things, but we have to be aware of their limitations.”

    or let’s just say, “…to be aware of their possibilities (and how to use them best)” (:

    Cheers
    Tobias

    0
  17. 22

    I decided to go with simplicity and ultra compatibility I think most people are coming to the web from their phones and then going back from their laptops.

    0
  18. 23

    One of the most interesting articles I’ve read in a long time. Period.

    0
  19. 24

    Timely and informative article. Way to go Rob!

    1
  20. 25

    Informative article, great effort Rob, keep continue.

    Thanks,

    0
  21. 26

    Mobile browsers might not be used for extensive browsing now. But they were used at all for internet only a few years ago and look at it now. What will the internet look like in 2017? Why wait until it is necessary to make everything for mobile when we can already be getting out products/websites heading in that direction now.

    0
  22. 27

    I think a more telling way of making a comparison between the web and music would be to think of web content as musical composition and devices as instrumentation. While you could arrange the well tempered clavier for guitar, you’d end up with something that sounds significantly different, and the arranger and performers would face challenges entirely different from the challenges that Bach sought to confront. This comparison could lead to very different conclusions. Most important among them I think is the absurdity of demands designers are faced with today, i.e. make a site work perfectly on every device in every browser.

    0
  23. 28

    Very good article. I think some people who commented above only see what is happening right now and not how it is going to develop in the future. In the past we have been held back by nonsensical limitations mainly resulting from a certain major browser’s flaws in adhering to web standards. Today we are very close to overcoming that, which is going to save much work and money.

    Ten years ago we could be pretty sure that an overwhelming majority of our users had a display with a resolution of 1024x768px resolution and a size of 15 or 17 inches. Today displays range from 240×320 up to more than 2000 pixels in width. And even as the smallest resolutions might die out because the ppi resolutions of small devices are on the rise, the display size stays more or less the same, limited by the sizes of our pockets and hands. There is no way that we can pass on responsive design because “browsing on a phone is overestimated”. Even if it is now I doubt it will be in the future. And if it should be a niche in five years from now this would mainly be due to the lack of responsive design.

    The point I want to make is that while the limitations of the past were simply frustrating and unnecessary, today’s limitations are a result of progress and simply cannot be overcome because our hands and pockets will remain the same. Mobile phones will not grow, compact notebook displays might get more ppi but will stay at 11 or 13″ inches and our eyes won’t get used to smaller or larger text. Saying that one or another segment is a niche today is not a solution. Web designers are selling a product that a client might use for the next years without a major overhaul. The beauty of creating responsive design is that if in some years more people think it is a good idea surfing the web on a HD television from a distance of several meters, you simply use a media query and throw in a CSS because you thought of the content rearranging beforehand.

    1

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top