They do this to allow the subtleties, the nuance of the work, to show and not become drowned out by surrounding distractions.  This principal holds true in art, architecture, music, dance, and yes… web design.

minimalism

Minimalism in web design is a fairly basic design concept:

• Less is more: focused, direct content
• Less is more: minimal use of color
• Less is more: extensive use of white space

When dealing in a less is more context, every detail counts – and it’s these details that make or break a layout or design.  Hence typography plays an enormous role in minimalist design, as does the subtle and proper use of balance, color, and position.

subtlety

While it may be a lost art in advertising and pop culture, it’s alive and well in disciplines such as information architecture and interface design.  General web design seems to fall somewhere in the middle, perhaps even further segmented by the designers intended audience.  While hopefully a passing fad, many sites are simple static psd to html conversions – and while they look nice, the content is constrained by the layout and the two are inexorably intertwined.  And while the graphic artist may or may not have been excellent, the concept is forever frozen in a static layout.  While there’s nothing wrong with a tables-based slice and diced psd website, these are generally obtained at the very low end of the price spectrum by students or freelance developers.

There is an almost complete lack of subtlety in these sites, and they’ve become so prevalent that they overshadow those that do.  We’ve become so accustom to the busyness of the majority of what’s out there that our first impression of a minimalist site might be that it’s boring.

How Users Consume Text on the Web

Before we get too far into this, let’s assess how we consume information on the screen.  Numerous studies have all come to the same conclusion, we process information from the screen differently than from printed material.  For instance, the vast majority of those tested use various scanning techniques to to quickly process and consume information on the internet, and most find it easiest to read dark text in a light background when reading more than a few words at a time. Likewise they found that smaller font sizes contributed to more focused reading, and less scanning.

The last thing I want to bring up before moving on, is that your copy makes a large difference as well.  Users can’t stand ‘marketese’, it instantly undermines credibility and sends them scurrying to the next item in their search results.  Users are busy, they want to get their information and get back to what they were doing.

Some Typographic Principals

1. Contrast: Since colors on a monitor screen are created by light, it’s important to keep an acceptable contrast between background and text – with black text on a white background offering the highest contrast (sometimes too high).  Having a contrast that’s too low results in muddy-looking text that can be difficult to read.

2. Hierarchy: The proper use of headers, focus points, and the organization of information all lead to scannable text – and scannable text is what we’re after.  Nick La has a great article on Typographic Contrast and Flow using his own site as an example .  His explanation of flow is superb:

“Space plays the most important part in maintaining flow of your design.  Good use of space will tell the reader where to start, when to pause, where it ends, and what to do next.”

3. White Space: In content-heavy layouts, the spacing contributes to the general readability of the content.  White space offsets large amounts of text in such a way as to facilitate the smooth flow of information – the user’s eye flows easily through long blocks of text when white space is used properly.

4. Consistency: When you start thinking of text as a UI element, the importance of consistency becomes clear.  The user needs to be able to anticipate what to do based on what they have done, and process information based on how it was received.  Keeping well placed headers and having emphasis on important elements goes a log way to breaking up sometimes monotonous text.

Putting These Principals Into Effect

Now that we know the components of good typography, how do we put them into good effect?

Perhaps the most important thing you can do in the beginning, is to develop typographical standards within the site specification.  While there’s a bit of an art to it, it’s not rocket science.  The most important factor being consistency  - and using common sense.  Don’t try and reinvent the way folks read on the web, simply make it more intuitive and easy on them.

Consider the following:

Poor Typography

While technically there’s nothing wrong with the content, it’s difficult to read, and the hierarchy is muddy.  By applying the concepts above we can present the same content in a much more readable format:

Better Typography

By using the above principals, we transform the generic blob into an easier to read, modern block of copy.  We use a proper font pairing and slight brightness adjustment for contrast and hierarchy.  The image gives use the perfect mechanism to create dramatic white space and adjust the column and line height for easier tracking.  The result is easy to read, modern in appearance, and polished.

Why bother?

The iPad has become the first device I use in the morning, and the last device I use before bed.  Now here’s the real kicker, they’re not selling 1 million of these devices per month because they aren’t good at browsing the web.  Furthermore, this is just the deep breath before the plunge – there’s no shortage of hardware manufacturers putting themselves in position for a massive tablet campaign.  Now whether  any of these devices get any traction is open for debate, but what’s not is that mobile computing is where all of the action is taking place right now.

Morgan Stanley analyst Katy Huberty has raised her projections on not only Apple’s iPad but the tablet market in general, predicting that tablets will outsell netbooks by 2012 as Apple ramps the iPad production and other vendors join the fray.

– Enterprise Mobile Today

So the trend is definitely coming, it’s no longer a matter of if – but a matter of timing.

Based on our experience with iPad Web browsing, we would not be surprised to see tablet daily Internet usage exceed traditional PC Internet usage in the coming years

– Katy Huberty (Morgan Stanley)

And there it is…  So what does all of this mean?  If people are using tablets now, what needs to be done differently in terms of web design?  The easiest way to tackle this question is to look at the operating mode of each medium – from the mobile phone to the desktop, and the devices in between.

How can we design for this trend?

The biggest concern to keep in mind is that the core functionality of your site or web application continues to perform as expected under the medium of tablets and phones.  Javascript seems to be pretty safe, but Flash is a non-starter.  Either eliminate Flash from your content, or have something to replace it when it doesn’t render.  Apple has come right out and said they would not support flash on the iPad or iPhone (the biggest marketshare of mobile browsing), and support on the devices that do offer is a mixed bag.

Input: The Desktop

We’re all familiar with this one – a desktop keeps the screen vertically oriented perpendicular to the input surface (mouse and keyboard).  The mouse is a relatively low bandwidth pointing device, but is extremely precise – allowing a user to click on a small button, link, or image; as well as select large swaths of text.  In addition to this, we have the keyboard – an extremely high bandwidth device for text entry.  Then we wrap all this up with a multitasking environment with a large display, able to position two web pages side by side in most cases.  the desktop is the premier platform for the creation of content, and an great performer in the consumption of content.

Input: The Netbook

I’m using the term netbook here, but this applies to most laptops as well.  Here we have a portable device with the same high bandwidth keyboard, perpendicular to a vertical display device (although not usually large enough to display multiple sites side by side), and a relatively precise track pad or nib for pointing.  Again, a netbook user is able to click small links, and select large portions of text for copy and pasting; and is an adequate performer in the creation of content (more-so the laptop over the netbook), and an solid performer in the consumption of content.

Input: The Tablet

The tablet is a significant departure from the previous modes of input, and shares more in common with the mobile phone than the desktop.  The screen and input device are one, and with the use of multi-touch this very much a high bandwidth mode of operation.  However, the pointing ability of the touchscreen is vastly inferior to the precision of the mouse or trackpad.  A user is unable to discern what’s obstructed from view by their finger, and trying hit a small button requires zooming in on the display.

Input: The Phone

The phone pretty much shares everything in common with the tablet, only in a much smaller form factor with a much smaller display.

Keep your fonts and input items of a respectable size.  Gone are the days of 15″ monitors – and needing to cram as much as possible into a small space.  Don’t go below a size 12 font for any reason, and it’s probably safe to say that 14 or 16 is perfect all around.  Better yet, adjust the typography to accommodate the width of the window (try resizing the window of this site) to ensure an optimal experience across all platforms.

Putting it into Practice

Knowing that the way people are interacting with the web is changing, how do we design for this shift?

We design for their fingers of course!

We can borrow a lot from existing touchscreen interface design, elements need to be large enough to be easily selected by a digit, and likewise we need to look at elements as binary, action or inaction.  For instance, a hover state is very difficult to achieve on a touch screen, so cascading menus aren’t going to work well.  Likewise, tool tips and other hover feedback are going to be lost on the user.

While it’s nice to be able to create a mobile version of a site, this isn’t always necessary.  For one, iPads are large enough to accommodate most 960px width layouts comfortably, and secondly, most mobile phone surfers are already used to panning and zooming as necessary to navigate a traditional site.  If you’re site is text-content heavy, it’s probably worthwhile to have a liquid width layout to facilitate ease of reading, but for most sites (at this point) the cost doesn’t justify the result.