I have to admit, I have never thought of myself as a graphic designer so this is really nice to see.

If you like it, why not head over to the Logo Design Love Awards site and add your vote — come to think of it, why not vote anyway, even if you prefer other logos

Recently there seems to be a discussion about whether or not to have stuff above the fold, or if the fold is now mythical, etc. Anyway, while discussing some of this, the following post made an interesting comment about how to explain whitespace to clients who want to cram everything into a page:

… the more you add, the more you detract from what is there. I think this should be the key to our approach when explaining white space to clients. Instead of selling white space on the fact that it looks better we should be selling it by pointing out that every element added to a page detracts from the rest.

– Paul Boag, Home Sweet Home, Vitamin, August 14, 2007

Thats a good proactive way of doing it, rather than saying “well, everyone knows whitespace is good!” Also allows the client to appreciate and understand the issue and buy into the idea rather than grudgingly accept it.

We tend to think of usability as the foundation of the work that we do. It sets the minimum requirement for a design to be successful, so if you’re not doing usability work you won’t know what that requirement is. Philosophically, that’s where we come from.

I think a lot of people look at usability as the ultimate end goal of the design process, but we don’t see it that way either. We see it as the place that you start, but there is lot more that a design should do than just attaining usability.

Usability doesn’t really get at the psychological and emotional context of use. Usability will tell you, from an ergonomic perspective, what people can do with a product, but there is lot more to making a product successful in the marketplace and making a product feel successful in people’s minds. Often, we find that clients come to us, thinking they have a usability problem, but it turns out that their products are pretty usable. The reason that the product is falling short is it is not satisfying an emotional or psychological need.

– Jesse James Garrett on Ajax, Amazon and Web 2.0, E-consultancy.com, August 2007

(Via UsabilityNews.com)

While young people embrace the Web with real or virtual friends and their cell phone is never far away, relatively few like technology and those that do tend to be in Brazil, India and China, according to a survey.

Only a handful think of technology as a concept.

… “Young people don’t see ‘tech’ as a separate entity – it’s an organic part of their lives,” said Andrew Davidson, vice president of MTV’s VBS International Insight unit.

“Talking to them about the role of technology in their lifestyle would be like talking to kids in the 1980s about the role the park swing or the telephone played in their social lives — it’s invisible.”

Young keep it simple in high-tech world: survey, Reuters, July 24, 2007

(Via UsabilityNews.com for summary as above link may expire at some point.)

I think that is a fair point. In a way, to be expected. For web sites, when done well, for the user it is how good it is to use not what techniques were used to create it.

Only us developers care about the details. As my wife would rightly say to me if I go into the details too much, “one naught, one naught!”

(I guess it will be interesting to see how these attitudes change or not over the years, especially if and when Brazil, China, India etc become the new economic powers of the world.)

Sometimes, all I have done is just the following:

• Switch from Arial to Verdana
• Put some line-height on the body (a good amount, such as 1.5, even 1.8 or more)
• Where I can, provide good use of margins and paddings around major chunks of content

Nothing more. And those times I have not thought much of it, but then I get a few comments like “Wow! It looks SO much better! What did you do!”

Conclusion? CSS line-height and white space are your friends! Not only do they improve usability, but simple accessibility, too, while being more aesthetically pleasing. Use them!

Side notes:

• Other times, I may have also needed to improve/clean the markup too.
• Public links not available at the moment, sorry — will see if I can get some screenshots.
• If you require a serif font, try switching from the narrow Times New Roman to something wider like Georgia. Wider fonts (for content) such as Verdana and Georgia improve screen reading, as the brain can more easily make out the shapes etc. For that reason, also avoid all caps. Titles are a different case, and things like Times New Roman (especially italicized) can look quite nice. My personal thought of Arial: I don’t like it!

This is an often-discussed topic, but I was having a chat with a colleague about this, so thought I’d summarize my view of the issues:

The layout approach for web sites is always a tricky one. It often boils down to the following:

Fixed layouts

Using pixel-based units for the dimensions of the page

Fluid layouts

Using %-based units

Elastic layouts (em based)

Using em-based units

(Of course, these are not the only ones, but the first two are certainly the most common ones, and the third overlaps with the previous ones.)

Here’s a quick summary of the pros and cons of those approaches:

Benefits of fixed layout

• Fixed layouts often seen easier to develop (pixel calculation can be easier than em calculation)
• Browsers such as Opera and IE 7 are offering zoom support (though IE 7′s still needs improvement) so flexible sizes may be less important
• Usually less background/decorative images are required for download (or at least less in number if not in overall size)

Problems with fixed layout

• They are fixed based on designer/developer’s choice not user’s
• Not all browsers support zoom, and text resizing may be required
• Sometimes get horizontal scroll bars which most people don’t like
• Text can overlap their original boundaries when resized. May make text hard or impossible to read

Benefits of fluid layout (% width)

• Design typically scales with the browser window as needed (maybe if too narrow there are problems)
• Gives a bit more control to the user

Problems of fluid layout (% width)

• If the screen is too wide, long lines of text may be hard to read, or there might be too much white space
• Calculating percents may be tough due to browser rounding errors, and desire to mix pixels and percents (which CSS spec unfortunately doesn’t support)

Benefits of elastic layout (em-based units)

• Works like fixed at “default” font size; keeps design proportions as you increase or decrease font size
• Overcomes most issues with the above two approaches

Problems of elastic layout (em-based units)

• Horizontal scroll bars if sizing too much — but easily fixed with max-width (to say something like 100%) and min-width (IE 6 and below would require an CSS expression hack if you even care about those browsers!)
• Calculation may be hard, as with %-based. CSS doesn’t have the ability to have functions and conversions such as being able to subtract some pixel values used within the content from the em-width of that content
• Creating flexible images may sometimes require a bit more work (e.g. breaking up what may appear to be one image into smaller ones so that the appearance of stretching and resizing is possible)

Is it even a developer problem?

It could be argued that font sizes are concerns of the browser and/or operating system. In some ways this is fair. Most browsers allow you to resize text, but scaling graphics and widths etc is less common (Opera has had it for a long time, and IE7 has recently introduced it. The former is quite good, the latter is new and so has some kinks to sort out). Most OSs offer zooming technology but they differ in quality.

I would argue that resizing text is still important within a browser even if an OS has it, because you might have your own preferences that do not match the specific site you are viewing. Also, until such time as zooming technology is more prevalent users may still need to change the text size of the sites they visit.

On a personal note, sometimes I find it quite handy to sit back from the screen if I am tired and increase the font size and read from a distance. It feels more relaxed, and even helps when there is background noise! Smaller text sometimes helps me concentrate.

My preference

I usually opt for elastic (preferred choice), or fluid depending on the type of site. I will try as much as possible to avoid pixel-based widths for the time being.

This blog is one example of an em-based layout. If you resize a bit, the proportions will remain in tact. At a certain point (depending on your screen size) you will hit the edge and if you are using a modern browser, I have used max-width to try and avoid horizontal scroll bars (unless you zoom a lot!)

Depending on the site being developed, em-based layouts are not that different to pixel-based. You still have to calculate the dimensions you want, but now you just use ems instead of px.

Once zoom technology is more widespread and well-implemented hopefully things might become a lot simpler to create even more flexible sites. SVG-based images may also help with many image scaling issues