I’d Like to Teach the World to Sing (In Perfect Harmony)

Andy Clarke’s presentation at @media 2007 was concerned with international styles in web design, some interesting questions arose.

I was interested in why designers felt that they needed to conform to an international design style rather than adapting regional traditions in design to the web.

For example would an Italian designer look to adapt Giovanni Pintori’s classic typography for Olivetti to the web, or would they regard themselves as a world citizen designing in a universal medium where local traditions and innovations were insignificant?

Is there really an international style?

One thing I noticed when I started looking at CSS Gallery websites was that there appeared to be a specific look and feel to a design that wanted to say:

“I am a Standards Compliant CSS Website”

I feel that a lot of European designers began using American design styles because the first wave of Standards Compliant CSS Websites were American, and this trend has stuck.

The main difference would be in Typography, Europe gave us Sans Serif fonts like Helvetica and Eurostile. Whereas Americans’ prefer serif fonts like Georgia and Palatino. Serif fonts are now much more common in Europe.

Another striking thing about American design is a sense of history, a lot of contemporary design has a retro look, a certain early 60’s American Graffiti influence. The continuing vogue for logos with a flowing hand written feel like Coca Cola is evidence of this. Coca Cola incidentally have gone retro, and their new cans have simple flat colour and clean traditional type, rather than the recent fad for gradients and drop shadows, an interesting diversion.

Coca Cola Redesign

Americans also like to use a lot of texture and bring organic elements into web design, whereas European designers were always quite evangelical about white space. Nowadays Europeans’ have gone crazy about colour gradients.

One of the biggest American influences has been Apple Computers. Appletastic black and grey gradient backdrops are ubiquitous, as is typography with a faded reflection or shadow. It’s neat and tasteful, but it’s becoming homogenised. Websites don’t need look like an Apple product in order to appear more Web 2.0.

So I think there has been a move towards a universal style in web design. This could subconsciously reflect a medium without old rules and boundaries, but where is the variety?

@media2007: Hannah Donovan: For Example… (Part one)

Hannah Donovan is Head Creative at London based Last.fm, the online music recommendation site. Last.fm has been in the headlines following its acquisition by CBS.

I thought Hannah was the most refreshing and to-the-point speaker at the event. The audience quickly warmed to her when she used a rude word to describe MySpace.

The presentation emphasised the need to act quickly if you have a good idea, to be the first, even if your site is a little rough around the edges. Hannah used the phrase “Put perfection behind you”, as a designer I know exactly what she means, designers generally need to get over themselves. She emphasised that you should use “Broad Brushstrokes” and work big.

She asserted that “Form follows function”, that features, forms, and functionality needed to be user tested before any style is applied, to do the hard stuff first. I was interested in her opinion that you should not “re-skin” a website, that the design should be intrinsically linked with the functionality and that a re-design should only be undertaken if new functionality is introduced.

She recommended that we read Victor Papanek’s book Design for the real world, I have a copy with a nice Any Warhol soup can on the cover but I haven’t read it.

There was a short Q & A session after the presentation. A question that stood out referred to Accessibility on Web 2.0 sites that use AJAX, the women who asked the question used the phrase “Disabled people get to hear when the bins are put out, but miss out on all the sexy stuff” which was my favourite quote of the conference.

@media2007: Nate Koechley: High Performance Web Pages

This was a presentation for developers rather than designers so I was expecting a lot of information to go over my head, it did, but enough has stuck to write a short post.

Nate Koechley is a Yahoo! frontend engineer and designer based in San Francisco. The bulk of his presentation was based around a twelve step programme to create quicker web pages.

  1. Make fewer HTTP requests: This refers to combining style sheets and scripts to reduce the amount of communication between your browser and the server. He also recommended using Image Maps, which I thought were considered old hat, but for icon driven navigation I can see how this could work in reducing the need for multiple images.
  2. Use a CDN: this stands for Content Delivery Network, a way of deploying content from multiple “CDN nodes”. This is important for increasing the page load times on sites with a lot of traffic such as MySpace, which uses Akamai.
  3. Add Expires Headers to cached content: This allows control of caching mechanisms in your browser and is important for dynamic content which has to be downloaded repeatedly because it is not cached correctly.
  4. gzip components: gzip is a software application used for file compression with 90% browser support. I use Photoshopto optimize images for the web, gzip can apparently compress them by a further 50%.
  5. CSS at the top of the document: Links to external style sheets should be placed high in the HTML document, and use link rel=”stylesheet” rather than @import for linking.
  6. Move Script Includes to the bottom of the document: Links to external JavaScript files should be put after the closing body tag. This recently adopted practice is a necessity because page downloads are paused until an externally linked script is fully loaded.
  7. Avoid CSS expressions: CSS expressions were introduced in Internet Explorer 5.0 and it allows you to to assign a JavaScript expression to a CSS property. CSS expressions aren’t generally used by designers who enjoy the clarity of basic CSS mark up.
  8. Always link to external CSS and JavaScript files
  9. Reduce DNS lookups: You can reduce Domain Name System (DNS) lookup traffic by using multiple hosts, therefore distributing content via parallel downloads.
  10. Minify Javascript: You can compress external CSS and JavaScript file sizes by eliminating white space. You can use a tool called ShrinkSafe to do this or you can do it safely by hand.
  11. Avoid page redirects
  12. Turn off ETags: ETags prevent pages from caching.

@media2007: Joe Clark: When Web Accessibility is not your problem

Joe Clark is the author of Building Accessible Websites and is a former member of The Web Accessibility Initiative (WAI). He was dismissed from the working group for The Web Content Accessibility Guidelines 2.0 (WCAG 2.0).

He has since criticised WCAG 2.0 in the article To Hell with WCAG 2.0, and has formed WCAG Samurai, a group committed to making updates and corrections to WCAG 1.0.

There is obviously a lot of political baggage relating to WCAG 2.0 that I’m not in a position to comment on. I do however remember the presentation given by Gez Lemon and Patrick Lauke at @Media 2006 regarding baselines for WCAG 2.0. I was left very confused to why the document did not have specific examples of how guidelines should be implemented using HTML, they were instead “Technology Neutral”, so the guidelines could be applied across all formats including Flash, PDF etc.

I have tried to read WCAG 2.0 and found it impossible, although most W3C guidelines are pretty unreadable if you have my attention span.

So Joe Clark’s presentation was highly anticipated and its title When Web Accessibility is not your problem looked like a formula for further controversy.

The bulk of the presentation related to font-sizing and how although developers are responsible for the readability of their websites, they should not be expected to provide text resizing as part of the sites functionality.

Font resizing on a page is something the browser should do and does do, there are exceptions, for example Internet Explorer 6 does not resize text properly if the font-size or line-height is defined as a pixel measurement. Most responsible designers size their text in ems to combat this, and I’m sure will continue to do so for as long as IE6 remains the dominant user agent.

The second half related to the shortcomings of screen readers in understanding html abbreviation and acronym tags. Joe used examples of unusual acronyms to great comic affect, but I feel that this part of the presentation related to his interest in linguistics, their relevance to accessibility was a little tenuous. We will continue to mark up abbreviations and acronyms properly even if Jaws thinks that E. coli is an acronym.

It seems that most issues relating to accessibility are still very much our problem.

The presentation overran and this meant there was no left time for questions, I heard quite a bit of complaining and I heard a few unflattering references to the size of Clark’s ego. I found the presentation informative and funny, I didn’t learn many new tips to help make the Edge Hill University site more accessible, but I did learn a little about the quirks of Assistive Technology software and the politics of W3C.

@Media2007: Tantek Celik: Microformats, Building Blocks, and you

There has been a buzz about Microformats for over a year now, but until recently I was still confused by the concept. I had no idea how they could be implemented effectively and I was unsure of their relevance. The Microformats website is also rather academically written, and lacks the clear non-technical language that we designers prefer.

Tantek Celik is the Chief Technologist at Technorati an Internet search engine for searching blogs and the brains behind Microformats, he is a very likeable and dryly humourous speaker.

To try to illustrate what Microformats are quickly, hCard is a good example, it is a way of marking up your personal details: Name; Address, Email etc using XHTML code and an internationally recognised semantic structure. This code alone may provide structure, but really comes into its own when used with the Firefox add-on Operator 0.7, this allows you to instantly transfer the details from the page into your address book in Microsoft Outlook with a single click.

A second good example is hCalendar, this is a format for an events list. Events can be transferred into Google Calendar where desired.

Other examples are:

  • hReview: a standardised structure for user reviews on Web 2.0 sites, it is implemented nicely on Cork’d, a community for wine aficionados.
  • hResume: is a microformat for publishing resumes and CVs.

I’m sure there are more Web apps that Microformats can interact with; I will expand on this when I have researched the subject further.

With Microformats I think the emphasis is on the micro, they are small but useful formats. They could be very powerful if they were implemented universally and a mainstream browser incorporated Operator 0.7 into its interface, but for the time being their use seems to be confined to the IT community.

@Media 2007: Jason Santa-Maria – Diabolical Design: The Devil is in the details

Jason is a well known and influential designer working for Happy Cog, the studio run by Jeffrey Zeldman.

Zeldman is the author of Designing with Web Standards, a book that has been pivotal in the conversion of many designers from structuring pages with tables, to using standards compliant CSS layouts.

Jason’s design has had a stylistic impact on the look and feel of Web 2.0 sites; his use of organic and illustrative background images, combined with uncluttered typography with characteristic Serif font headings is universally replicated.

In this presentation he began by covering a few basic pre-style workflow steps. I currently use wireframe layouts, Jason suggested using a 12 column grid system as a starting point. Important Text and images can span columns but always fit within the lines of the grid. This is something I find difficult, at Edge Hill we often use movable type and a fluid layout; therefore column widths are measured with percentages and expand according to the size of the users monitor.

Additionally he uses Monochrome Wireframes that grade important elements of the page with darker shades. Blocks of strong colour create a connection with the user and help communicate the page’s function.

I found his tips on colour theory interesting, especially creating a colour palette from photographs using the eye dropper in Photoshop. Also choosing an image with a dominant colour and working it into the rest of the design was interesting. I think it is important to have an idea of which colours you are going to use before you progress from a wireframe, however I also know from experience that a scientific approach doesn’t lead to a perfect design, often an element of chance can push the design in a better direction.

The next section of the presentation was concerned with white space, or negative space, that is so important in defining typography. Jason cited the influence of Saul Bass whose typography and collages are seen in the opening credits of Psycho, The Man with the Golden Arm and Walk on the Wild Side. I have been a fan of Saul Bass for a long time and was pleased to hear that he continues to influence people working in a modern medium.

He finished with tips on typography, and the use of appropriate and contextually meaningful fonts.

I took a lot of inspiration and reassurance from the presentation. I feel that many of the approaches and theories that I learnt at Art College are still important in web design, and Jason confirmed this.