Trends in web design: footers
21 May 2009
I could write a post about trends in the design of footers in modern web design. In fact, I'd LIKE to write such an article. But I don't have the time and reckon the Smashing Editorial team have done a much better job than I could ever do.So, I thoroughly recommend this article about the latest design of web site footers by Smashing Magazine. It is very, very good. Actually, just about everything those people do is good.
Labels: web design
posted by Greg on Thursday, May 21, 2009,
,
![]()
Web design trends in this century so far - part 1
15 May 2009Is good web design ephemeral and led by fashion, or does what is considered good design evolve and change, mature even, over time? In part one of an answer to this question, I'd like to contribute the results of a small potted survey I did on this recently, which asked "is web design really changing over time?" from a user-centered point-of-view.
Recently we moved our home office to a new, smaller space and I had to purge some of my books. In the process I re-discovered two old books showcasing commercial web design, and found myself examining the contents, thinking "keeper or sleeper?" Both books were from the beginning of the century, with a strong bias towards the sites of commercial companies, rather than the social-networking and Web 2.0 type of sites we have now. Both tended to rave about designs that at the time the books' authors obviously considered innovative and creative.This is fair enough when celebrating something from a graphic design point-of-view, but web sites today are about more than the presentation, or rather they should be. As Gerry McGovern is prone to say, these days generally,
when people come to your website they are on a missionand if you make it hard for people to use your site by using a purely visual approach to the design, they'll not come back.
Looking through the books, I was curious to know how many of the sites were still operating and what they looked like now. Nine years is a very long time on the web, so I was expecting to see some changes.
The two books were
- Web Design that Works, by Lisa Baggerman, published by Rockport in 2001, and
- Cyber Shops, by Claudia Gerdes and Jutta Nachtwey, published by Thames & Hudson in 2000.

I followed the URL for each web site featured in the books, noting the site's current status, and what, if anything, had happened to the design. It wasn't a very scientific survey (see notes about this below) but the results were interesting nevertheless.
Of the 72 sites featured in both books, 68% were still operating, with around a third no longer in existence. This is surprising. Considering the economic and social events of this century so far, I expected to find more dead sites than this. Maybe the good designs from the beginning of the century had stood the test of time? In fact, not. Further examination revealed a significant trend.

Of those still operating, the majority had new designs, and many of them had moved away from the design ideas so lauded and featured in the books. Several of the sites (7%) that previously used radical navigation and quirky presentation, had now morphed into the now standard E-commerce site model, using the familiar product catalogue, product details, shopping cart structure.
It was disappointing to see some of the sites still using Flash only (10%), although this design-ethic is still very common today, sometimes appropriately, sometimes not. On the other hand, it was was good to see many (20%) were now using a web standards approach, with valid HTML/XHTML and CSS for layout and presentation.
A significant design trend
The overall design trend of the web sites in these books indicates a normalising of web design, using elements and layouts most likely considered "standard characteristics" for a web site now. These characteristics include:- a clean, less cluttered look,
- a centered, fixed width layout,
- consistent layout and placement of site components like search and navigation,
- more accessible use of colour across the content body of the page (as opposed to that around the content, where visual design has become spectacular in some areas thanks to creative use of CSS),
- invariably white or pale backgrounds for the main content,
- more common use of standard or uniformly installed web fonts
- type size generally set larger and easier to read.
So can the design trends seen in the web sites featured in these books, be extrapolated to other web site types, like those found now in these "Web 2.0" times? I think so. Obviously the purpose of a commercial site can be quite different to that of a social networking site, but people do use both, so the design metaphors or elements that people recognise, and are familiar with using, are likely to be common for both types of site to succeed.
A problem with these graphic design books is that mostly the sites were being judged purely on their visual appeal not the usability or user-friendliness criteria considered good practice today. In doing so, these books illustrate nicely the warning that Jakob Nielsen and others give about departing from the norm in terms of web design – be very sure your audience can cope with this or you site will be doomed. On reflection, I think we've come a long way since the beginning of the century.
Next time, I examine whether good design at the beginning of the century is still good design a decade later.
Some worthwhile articles about good web design:
- Robin William's advice
- Advice from Smashing Magazine
- Excellent survey of modern good practice by Web Design from Scratch with fine examples.
Footnote: Why this survey might not be very scientific.
- I based it only on two random books, which may or may not have been good judges or relevant indicators of the web design industry – fair call, but the books were from reputable publishers, written by leading web design experts of the time, so unlikely.
- Maybe the books picked rubbish sites – not really, most were from highly successful retail brands and businesses, which would be expected to have commissioned leading designers of the time.
- There was a bias in the sites featured, in that most were commercial sites, not the more modern Web 2.0 sites we have now, where people expect to interact more – indeed, it's been my observation that the business world in general doesn't understand the web at all.
- My categories are completely arbitrary, and not based on any scoring system – actually the categories more or less created themselves based on what had happened to the sites.
- I didn't use any specific design criteria – true, but maybe I used experience and a trained eye.
Labels: web design
posted by Greg on Friday, May 15, 2009,
,
![]()
Optimise your web site for iPhones & touch-screen devices
20 February 2009 The second generation iPhones have been around for a while now and owners seem pretty happy with them. Other mobile devices and mobile browsers have appeared that use similar finger touch-screen interfaces, and people have had a chance to work with them and understand just what a change the touch interface makes to using a mobile device.On top of this, the increase in people connecting to the internet and in particular the web, seems to have surprised many, especially in the web design industry. I've met web designers who laughed when I said we should think about optimising our sites for mobile users. "Hardly anyone looks at web pages on a phone!" has been the usual reply. Why do many web designers seem to just want to cater to the majority - "hey, most people have IE, so who cares about other browsers!" Why would you cut off potential visitors just because of the technology they use?
Anyway, it appears people do want to access web sites on their mobile device, and some predict this will be the most prevalent way people use the web in the future. Many popular sites are already providing mobile-optimised options for their users, including Google, Amazon, TradeMe (the NZ "E-bay" – actually it's a better user experience than E-bay), Air New Zealand (these guys are using the .mobi domain so that proves they acknowledge the need to provide for mobile users), Yellow Pages (NZ), Wikipedia, and one I wouldn't have predicted considering its very rich large-screen monitor-orientated interface, Facebook.
The Facebook iPhone-optimised screen is very interesting, as it shows just how pared down one has to be, or can be, to suit the mobile interface. Here's the way Facebook appears on the iPhone in desktop view (left) compared with the optimised verison on the right (image taken from the .net magazine article mentioned below.)

So what does this mean for those of us designing and running web sites?
If you have a website that is likely to be used by mobile users, then you should consider optimising your site for such devices. I've said this before on this blog, and maybe I stood alone. Not any more.
Craig Grannell has written an article for the excellent .net UK magazine about optimising a site for iPhones (Optimise your site for iPhones, Craig Grannell, .net, January 2009, pp. 72-74). In his article Craig explains that although one can use the Safari browser zoom-in interface that comes with the iPhone, and apparently some prefer it to using a laptop (are they crazy?!), he thinks developers and designers could do much more to make it a better experience to use the web this way.
By default, websites appear in pint-sized versions, with text generally being illegible and links being practically impossible to target. … all is not entirely rosey in the land of the iPhone, and developers could do more to help."The article (unfortunately it appears to unavailable online as I write this) gives some excellent advice. First, Craig suggests web designers think carefully about whether the site is likely to be visited by a mobile user. The minutes of a local city council meeting are pretty unlikely to be used by mobile users, but the opening times of the council-owned swimming pools or the local museum may well be.
Second, if the site fits the criteria, than hone down the content, keep things tidy and simple, and present a streamlined, simplified version of site that focuses on the key features people want from it (hint: sorry, this isn't Google ads or a beautiful Photoshop-ed banner).
Then he provides two options. Create a mobile-optimised site, or create a mobile-specific site. Personally I prefer the former, as I strongly agree with this next statement he makes:
…working on an iPhone-optimised website is akin to dealing with print style sheets. As long as you're building sites using semantic markup and using CSS to style your layouts, you can [easily] create an alternate style sheet for the iPhone to present a streamlined, simplified version of your website."Craig suggests browser-sniffing to detect the iPhone device. I'd rather use the technique of providing alternative media type style sheets in web pages – screen, print, aural, handheld, etc – and then letting the browser select which one to use, but this so clearly doesn't work in the web browsers provided with so many mobile phones (I'm talking to you Nokia). This is because the default browser on many mobile phones has been built by the phone's manufacturer and most just seem unaware of web standards. As more third-party web standards compliant browsers (Safari, Firefox, Opera, etc) are provided for mobile devices, this problem will hopefully go away, but in the meantime, I'd follow Craig's advice.
And here's how. According to Craig, the simplest way to implement this is by using Javascript to make sure an iPhone-specific style sheet is used instead. (I'm not sure where this leaves those of use who want to optimise for HTC Touch or the new Palm and Android devices, but I will try to find out for a future post. Is there a standard userAgent id for other devices or do we just use some default mobile one?)
Craig provides the code for this technique as follows:
if ((navigator.userAgent.indexOf('iPhone') != -1) ||
(navigator.userAgent.indexOf('iPod') != -1))
{
var cssNode = document.createElement('link');
cssNode.setAttribute('rel','stylesheet');
cssNode.setAttribute('type','text/css');
cssNode.setAttribute('href','iphone.css');
document.getElementsByTagName('head')[0].appendChild(cssNode);
}
I strongly recommend web designers look into this approach, or variations of it to suit the situation.
Two other tips from Craig's article are worth mirroring here.
Don't think that the superior resolution of an iPhone screen will make it easier for users to read your web site text. I was surprised to read that the higher pixel density of the iPhone screen (163ppi) compared with a typical PC monitor (in the range of 72-95ppi) means fonts that are quite readable on a larger LCD screen tend to look very small on an iPhone.
And don't use Mac-orientated design conventions, because it seems most iPhone users are not Mac users. Say what?! Love to know where he got this from.
Labels: mobile design, web design
posted by Greg on Friday, February 20, 2009,
,
![]()
There is life in information design - still
29 October 2008 Has been a while since either of us posted here. Apologies for that. Is certainly not because we haven't had anything to say! Far from it.I'll hit you with the "we've been busy" cliché first – we've been busy. Bruce has found himself involved in a number of interesting projects, both work and play, and I've started a new job.
There goes the climate
We've both noticed an increased awareness of and demand for the skills of information design, and predict that if the overall business market in New Zealand does contract over the next twelve months, as seems likely, this will just increase competition for better ways to grab market share.Although spending on things like web design and information management have often been the first to be cut when times got tough in the past, we have a suspicion that competition and the better economies of scale marketing through the web can present will provide good opportunities for those in the wider information design industry. Time will tell.
Mobile web-browsing re-visited
What else has been happening? The official arrival of the iPhone in New Zealand earlier in the year gave many web designers a chance to think about how to design for it. The excellent LibraryTechNZ blog ran a series about web writing and optimising web sites for the iPhone. Apart from telling you all the web tricks that don't work on the iPhone, the above article, and this one on web design for the mobile provided an excellent list of resources and sound advice for the web designer. They also challenged libraries to think about meeting the challenge of providing content for mobile devices, as they said:There are so few websites out there that have optimised for mobile or iDevices (or even thought about it) that I believe we have a real opportunity to make our mark while we wait for the rest of the world wide web to catch up.Naturally, I was disappointed they didn't discuss the way the zoom-in Safari interface operated, although their first article mentions they expect to zoom a lot. Since I wrote the early articles on this blog about how trying to use a web site on a mobile device using the zoomed-out/zoom-in technique was nuts, I've since upgraded my own mobile device to a HTC Touch and have had more experience with using such a small screen to search and use the web. It ain't easy.
The Touch device only has a 320 x 240 pixels touch screen, which is fine, but the iPhone 480 x 320 screen really does put it to shame. I've tried the Windows Mobile IE browser that came with the device and the latest version of Opera Mobile. IE is a pain, no surprise there, while Opera seems designed for the user experience.The Opera Mobile 9.5 browser works well for a touch-screen mobile user, with large icons and menu symbols that are easy to use with your fingers. It also uses a zoom technique, but it doesn't work so well due to the lower resolution of the HTC screen. It's hard to tell if the content you are looking at is what you need, so I have found myself zooming in and then moving around, which as the LibraryTechNz blog says, "is like interacting with a newspaper page using a rectangular magnifying glass."
The zoom does work better on the iPhone but I think it is due to the increased screen resolution, from what I've seen. The technique is still wrong. Why try to make a web page look on a small mobile screen, the way it looks on a wider desktop/laptop LCD monitor?
Although I'm sure many web designers will scream at this, I think Google's provision of a filtering app to make web sites easier to read on mobile screens presents a more useful way forward for mobile web users (hat tip to the Canadian Slaw legal blog for covering this little-known Google option. The app does strip out style sheets, which may not be the best option, but considering most mobile browsers don't implement style sheets in any web standards way yet, you can't blame Google for taking this route.
Labels: mobile design, web design
posted by Greg on Wednesday, October 29, 2008,
,
![]()
Technical Communication morphs and changes into Information Design
25 June 2008 Our colleague Alison Reynolds from the GDID programme has just published an article in the Southern Communicator (the journal of TCANZ) proposing the profession redefine itself as 'information design'. It's about time the industry faced this rather difficult decision. We suspect the debate won't be popular in some parts of the world, nor some parts of the industry, because it's about re-defining what the industry is and does.Alison has given her permission for us to reproduce some key comments here. (The full article is only available to members on the TCANZ web site.) She starts by tracing the development of technical communication.
It is clear from the feedback given by GDID students that there is a strong demand for people with these skills. There is almost a hundred percent employment rate of GDID graduates, although to be fair, many are already in employment while they are doing the course. Students report that the information design skills they gain from the course are valuable to them and their employers, and helped them do things at work they couldn't do before.As new technology became more accessible to the public, the demand by consumers for products with supporting documentation grew rapidly. Technical writers became technical communicators as they found themselves responsible for more than effective writing. They needed to ensure that documentation was aimed at the users’ needs rather than just a ‘tack-on’ at the end of product development. Therefore, their roles changed to include competencies, such as audience analysis, document design and computing tools to produce a variety of information ‘packages’ to meet the users’ needs.
Practitioners now need a broad range of skills that are more focused on problem-solving approaches to communication needs that occur in commerce, health, education, as well as in the traditional areas of science, computing and electronics. I believe that it is these changes in the core competencies of technical communication that drive a need to redefine the profession as ‘information design’.So what are these competencies? Our industry and academic advisors carefully monitor the competencies taught in our programme that includes the following courses:
- writing and editing (still a ‘must have’)
- current research and practice (international information trends, localization, interviewing skills, ethics, group dynamics, personal skills)
- information management (content management, single sourcing, task analysis, project management)
- information design (design strategies for online and paper information products)
- usability testing.
No doubt these competencies will continue to change as the profession meets more information challenges. The only way to keep up is to take up the challenge of learning new skills through further education."
This tells us that re-defining technical communication in the broader terms of information design is more than likely going to make people more employable, and considering the economic times we live in, this has to be a good thing.
Greg and Bruce
Labels: information design
posted by Greg on Wednesday, June 25, 2008,
,
![]()
Ground Zero: where customer experience and information management intersect
02 April 2008 I consult in several areas, including usability design and information management. Sometimes this seems a little schizophrenic, so it’s good to pull back and think ‘where are the commonalities in these subjects?’This little cautionary tale is intended to point out where some of these important commonalities lie.
Recently I had a nightmare of a time trying to claim on the extended warranty on an ipod I had purchased just a year ago. The screen cracked, by the way, which effectively means: new ipod time. But that’s not the story.
The real story is the customer (or ‘user’) experience I had while trying to make my claim. And that’s the link between information management and user experience. When the user is, quite simply the customer, and the experience is the provision by a corporate entity of adequate service across a range of communication media: then the connection between these two areas of professional endeavour is thrown into high relief.
My customer experience problem was getting any service at all, and the obstacle - which reduced me to incoherent rage over several weeks – was information management. Specifically, the fact that information was not being managed at all.
To start with, in January, I tried emailing the company with full details of my claim including my warranty reference number. An automated reply told me I had to ring them, during business hours. I’m in NZ, they’re in the UK, that’s an expensive option that happens in the middle of the night.
So I rang them and quoted my reference number. I explained the whole story. I had the wrong number: “You want Worldwide Cover, it’s another department”. But my agreement, which was a WWC one, gave me the number I had rung. So I rung the other number. Great! No problem, I just had to get a service technician to certify on letterhead paper that the ipod is jiggered, and fax them. I got the letter, I wrote a covering letter, with the reference number, I photocopied my receipt as well. I faxed it.
In the end I faxed it more than 40 times, thoughout February. In total I devoted most of a day to faxing it. I even got it to go through once – on try #18 – on the other 39 tries the fax number was busy.
When I rang to follow up on the successful faxing, I found no one had my fax: “It must be in another department” – apparently on Mars. I had this mad idea that faxes would be scanned and entered in the customer database, linked to my agreement by the reference number, so any call centre staff member could access it.
Fool!
I took the names of the helpful staff. Every time I rang back and asked for a name, no one knew the person I had spoken to: “He must work in another department”. Where were the other departments, were they really on Mars? Apparently there was no staff address book or contact database that covered all the departments.
One person, in late February, on learning of my fax debacle, gave me his email address. Apparently this was a big secret and I wasn’t to let on about it to anyone. He offered to receive an email with a scanned attachment containing my pathetic documentation, which he would print to hard copy and convey (actually walk down the hall, carrying, mind you!) to the ‘right Department’. I scanned and emailed.
I followed up by phone, but no one knew this guy either. What’s more, their database had no record of any communication from me after my first call in early January. I imagined, since I quoted the same reference number every time, that they were building up a charming picture of our history together.
How naïve – if they could do that, they’d eventually realise where the ‘black spots’ in their customer experience were, and f’ing well fix them. I was past angry by now, I was incandescent. Then I despaired. I gave up at this point. Just wrote the whole thing off as a lesson to never buy extended warranty again.
Then, two weeks later, I got the email, from Worldwide Cover, they had my letter (dated 16 January, I have no idea if it is the faxed copy or the scanned copy). They would pay out in not more than 28 days, a stirling cheque, to my address. I emailed back, even though they didn’t tell me to, just to make sure they knew I was still alive. And I waited.
Twenty days passed, and I got the letter, I ripped it open with trembling hands… no cheque. All the information in this letter was the same as in the email, except they stated the value they would reimburse (a generous sum, mind you). And they told me that I would receive the reimbursement in not more than 28 days. That’s another 28 days, by the way, and the letter was dated a week after the email, so ‘28 days’ is clearly code for ‘an amount of time we cannot or will not commit ourselves to specifying’… I assume they haven’t seen the zombie movie of the same name, or perhaps they have a better sense of humour than I imagine.
But the point of the story is… this worldwide ‘leading brand’ company have given me a ‘user experience’ that has killed their brand stone dead. It’s not even nailed to the perch, it’s on the bottom of the cage gathering dust.
And the reason for this sad demise is that they have a bunch of automated systems: customer records, staff records, call centre records, mail management - with absolutely no over-arching processes or systems to manage the totality of information received about my claim. Their staff were generally helpful, but with the tools they’ve been given, they can’t actually help anyone.
Every time I called it was like Groundhog Day, back to the first time. Not only do they not provide an adequate service, but the company don’t even know that they aren’t doing it! So from the company’s perspective the problem does not exist. When I email them the link to this blog post (after I bank the cheque, mind you!) – they won’t know what the heck I’m talking about.
But thanks to them, I now know exactly where user experience assessment and information management intersect. And I’m standing right there, at ground zero, glowing with impotent rage, brightly enough to be seen from the moon.
Labels: information design, information management, user experience
posted by Bruce on Wednesday, April 02, 2008,
,
![]()
A web design company that talks about info design
12 March 2008 This must be one of the few web design companies I've seen in NZ that talks about information design: Click Suite based in Wellington (no surprise there - Wellington is where most of the best web work is happening in NZ, IMHO).Click Suite were also responsible for the UI of these two cool web sites by the National Library in Wellington:
- PastPapers - which "contains more than one million pages of digitised New Zealand newspapers and periodicals. The collection covers the years 1840 to 1915 and includes publications from all regions of New Zealand." You can search for keywords across the scanned papers and the keywords are highlighted for you onscreen over the original scan. Nice work.
- Publications New Zealand - which gives public access to information in the huge National Bibliography of things published in New Zealand "from the earliest days of New Zealand publishing through to the present." This site is interesting in using an XML back-end and XSLT to deliver XHTML to the browser. Dat's some clever shit, and it's good to see more web people in NZ know about this stuff.
Labels: information design, web design
posted by Greg on Wednesday, March 12, 2008,
,
![]()
