Keeping your home page clean

In the fight for real estate, usability and design aesthetics are often the first causalities.

One of the most common sticking points I encounter when developing a website is the sign off of the home page. Client’s want to cram it with as much content as possible, while the designer is seeking to maintain the integrity of the design. So, what is the best way of avoiding this kind of confrontation?

I am sure you have come across requests like this before…

I need the logo bigger, more space for news, events and features, shortcuts to key applications, more prominent navigation and can you make the search stand out. Oh yes, and I don’t want the page to scroll at 800 by 600. Also, sales would like to add banner advertising across the top and down the side.

In many cases these absurd scenarios occur because of a perception that the home page is the most valuable location on a website. As a result all the various departments clammer to get their piece of the limelight.

In the fight for real estate, usability and design aesthetics are often the first causalities. Below I outline four techniques I am starting to use in order to bring some sanity back to the home page scramble.

Recognizing the changing role of the home page

One of the first steps to home page utopia is to get the stakeholders (those who are fighting for home page prominence) to recognise that the home page doesn’t have the importance that it once did. In fact I think it would be fair to say that we are going to see a continued decline in the traffic going to home pages over the coming years.

Jakob Nielsen in his book “Prioritizing Web Usability” talks about a change he is seeing in the way users are interacting with the web.

There was a time, says Nielsen, when users who had a specific task would go to a site where they thought that tasks could be completed. For example, if they wanted information on the Crisis in Darfur they would go directly to CNN or the BBC. However, more and more it would appear that instead of turning to a specific site and finding content via that sites home page, they are instead looking to search engines. The search engine takes the user directly to the information they require thereby completely bypassing the sites home page. Obviously, this deep linking seriously reduces the prominence of the home page.

Add to this the rise of RSS feeds and more people accessing information via mobile devices, and you begin to see the focus shifting from the website home page towards the individual pages of content. That is not to say home pages are no longer important, they are simply not as important as once they were and so do not justify the level of competition they receive in some organisations.

Don’t rush into the home page

Another technique I am starting to use more often is to avoid addressing the home page too early in the process. By starting with standard textual pages (which after all make up the majority of the site) you get to set the design style before it gets diluted by the land grab for home page real estate. Once the client has “bought in” to the design they will perceive it as being more important and so are less likely to allow it to be railroaded by content demands.

However, delaying the home page development isn’t just a “political” move. It is also the right thing to do. A home page should reflect the sites content at the highest level and signpost the user to key content deeper in the site. In the majority of projects I work on the client hasn’t finalized all of the content in the initial design stage. In my opinion it is hard to create an effective home page until you have a full understanding of what content it is meant to signpost and represent.

Communicating the importance of white space

In the case of home page design the heart of the conflict between designer and client is often a perception of the importance of white space. Every designer knows that white space is a fundamental tool of good design, but we are often bad at expressing why in a way the client can associate with.

This is an area I have been thinking about a lot recently and I have come up with a possible solution which I am yet to try. It was inspired by the book “The Laws of Simplicity (Simplicity: Design, Technology, Business, Life)” which I am currently in the process of reading. On the subject of white space the author says:

“The opportunity lost by increasing the amount of blank space is gained back with enhanced attention on what remains.”

Or in other words; the more you add the less importance anything has.

I think this is where we sometimes go wrong as designers. We sell white space on the basis that it looks better. Instead we should be selling it on the basis that every item you add to the page detracts from the rest.

To help the client think this through I am wondering whether a point system of some kind might help. You might want to suggest that a user has 10 points worth of attention they can give to the home page. Every “module of content” added to the home page takes a minimum of 1 point. More points should be assigned to more important elements. This approach will quickly show that the more you add to a page, the more likely important elements are going to get lost in the crowd.

I am not sure whether the approach would work in practice or not, but it does strike me as a good way to focus the clients mind on what is important.

Embrace rather than fearing the fold

The killer blow to any home page design is when the client says: oh yes, and we want all of that to fit above the fold. This inevitably leads to smaller typefaces and less white space.

I think we need to work hard as designers to dispel the myth that users never scroll. Sure, users don’t always scroll but that is okay as long as we put less important elements further down the page.

The idea that users don’t scroll is horribly out of date and probably comes from the very early writings of Jakob Nielsen. However as early as 1997 he was suggesting that users were becoming more comfortable with the idea.

If your client needs further proof then install Crazy Egg or some other heat map service on the clients site. This will actually show where on the page a user chooses to click. You will see a decline lower on the page but not enough to justify putting everything above the fold.

The emphasis should be prioritizing content rather than cramming everything into the small space above this ill defined line that we call the fold.

But how?

Of course the fundamental problem with educating our clients, is that in many cases you cannot talk to the people that are demanding home page space. This is a very real problem and in many cases there is little you can do to overcome it. However I was impressed by Shane Diffily’s idea of running stakeholder workshops in his recent A List Apart article. Having a workshop at the beginning of a project where you can talk about good practice and dispel some of these common myths is a superb idea and should help a lot of projects run that much smoother.

Show 71: macBoag

On this week’s show Paul talks about user login and registration, Patrick Haney shares his opinions on good design and Marcus covers picking the right web design agency.

Play

Download this show.

To subscribe directly within itunes click here

News and events

The world of web design seems to be bristling with news this week. Nevertheless I have managed to pick a mere five stories worthy of sharing with you:

The WASP Street Teams

The importance of web standards is a message that has now largely reached the majority of professional web designers. If you read blogs, attend conferences or indeed listen to podcasts then you probably know and work with standards. However WASP recognises that there are still a lot of web designers who are not so aware. They are therefore setting up Street Teams, which are local groups who share the “good news” of standards with their local community of designers.

Admittedly there is little in the way of details at the moment, but in principle this sounds like an interesting concept.

Elitism within web design

The Brit Pack has come under attack since SXSW for being an elitist group. Similar bizarre claims are often levelled at conference speakers, however this is the first time it has been directed at a group like the Brit Pack. Exactly why they are considered elitist is beyond me but it does raise an interesting question about what role more prominent members of the web design community should be playing.

Why semantic URLs matter

Robert Nyman has published a nice little post on the value of semantic URLs. In other words why:

domainName.com/page/foo.html

is better than:

domainName.com/page.html?query=foo

He talks about usability and search engine optimisation as well as looking at the development benefits it provides. If you aren’t already using semantic URLs then this post is definitely worth reading.

Buying and selling websites

There is an interesting article this week on Sitepoint. It looks at the idea of buying up failing websites, revamping them and then selling them on. This is definitely worth reading if you are a web design company like us looking for alternative incoming streams beyond pure development projects.

The future of Open ID

I was gutted to miss the Future of Web Apps conference in London. I was therefore understandably excited to see that the podcasts are already online. I was even more excited to see that Simon Willson had taken the time to match up his slides with the podcast to create a screencast on Open ID. Open ID is an area I see huge potential in and can’t wait to see how it develops in the future.

Client corner: Selecting an agency

We have an interesting discussion this week about the pros and cons of different types of agencies. For example should you look for a small specialist agency that focuses on one area of web design or turn too a massive ad agency that handles everything from web design to print and TV. Specialist agencies offer more experience and expertise in their particular field but often require more management, as you need to work with multiple agencies to get the different elements of a project done. Conversely, larger agencies tend to be slower moving and so lack the cutting edge experience in specific areas but allow you to get everything done “under one roof”.  

Ask an expert: Patrick Haney on what makes good design

Patrick Haney is a designer for Harvard University but is probably best known for his flickr photoset. It started as a personal project to keep track of websites that inspired him. He would see a site he liked, grab a screenshot and add it to flickr. However over time more and more people subscribed to the feed until today Patrick is known for his good eye for design. He therefore seemed the logical person to ask: “what makes great design?

Agony uncle: user Login

Creating a secure area on a website can be a tricky business. Not only are there technical challenges but also usability issues as well. How do you handle usernames and passwords, what if the user loses their password and how do you streamline the registration process? In this week’s agony uncle section we look at setting up a secure area, the technology and the downsides of locking content behind a password. 

Review: Moving to the mac

So while I was away in the states I bought a macbook. I know, I have been rude about macs in the past but the exchange rate was so good and it just sat there looking all black and sexy. Since returning to the UK I have been undergoing the process of moving across. This has proved an interesting experience and so I thought I would share some of it on the show. I cover things like:

  • Apples attention to detail in their hardware
  • The intuitive interface of OSX
  • Why good user interface design is about leaving stuff out
  • Why I am missing Office 2007 (Entourage sucks!)
  • The rose tinted glasses of most mac users
  • Why I believe that Vista is a viable alternative for some users.

Show 67: Marcusworld

This week Dan Rubin looks at the design fundamentals and Marcus continues his series on the statement of work.

Play

This week on the Boagworld Podcast, Dan Rubin looks at the design fundamentals of white space and page layout.  Marcus continues his series on the statement of work, while Paul explains openID and tackles the HasLayout bug in Internet Explorer.

Download this show

To subscribe directly within itunes click here

News and events

Keyword forecasting

Last week saw an interesting new tool released by the Microsoft Adcenter Lab. The keyword analyser is an experimental tool which allows you to see predictions of future searches on specific keywords. You can compare the growth of multiple keywords and even get basic demographics on who is searching on these terms. I am not sure that this tool is actually that useful, however it is strangely compelling nevertheless.

Introduction to the DOM

Chris Heilmann shows us a sneak peek of his upcoming DOM scripting workshop in a 10 minute  Screencast. Although not enough to get you started in DOM scripting it will certainly help you grasp the underlying principles.

Lessons in freelancing

As Cameron Moll prepares to leave the world of freelancing he shares his experiences from the last 18 months on his blog. Cameron gives a valuable insight into the lessons he has learnt and I would strongly encourage any freelancers to take a few moments to read it.

Jonathan Snook on CSS

When it comes to CSS we all work in slightly different ways, which is why it is always interesting to get an insight into somebody else’s approach. This week Jonathan Snook shares his top CSS tips and it is nice to see he has added some controversial tip bits.

Clients corner: Statement of work (technologies)

Marcus continues his series on the statement of work by discussing what needs to be said in the documentation about technologies, training and content population. He also looks at the hidden costs associated with hosting and how it should be handled in the contract.

Ask an expert: Dan Rubin on white space and layout

I remember sitting behind Dan at a conference once watching him work on a design (when he should have been listening to the speaker!). It was fascinating to see how he approached user interface work so I thought it would be great to get him on the show to talk about the fundamentals of design; white space and layout.

Agony Uncle: HasLayout

This week in the agony uncle segment we look at the HasLayout bug. In my experience this one bug creates the majority of problems that we encounter in IE. It’s an amazingly hard bug to explain and yet fortunately relatively easy to fix. I explain what it is and what problems it causes as well as looking at some possible solutions.

Review: Open ID

This week saw the announcement by Microsoft that they are going to start supporting Open ID. We take a look at what Open ID is, how it works and why you should consider implementing it on your own site. Most of what we cover is also tackled in Simon Willison’s excellent Screencast on Open ID.

Show 65: Dying (Man Flu!)

This week on the Boagworld Podcast, Paul and Marcus drag themselves from their death beds to share why you should care about Vista and Drew McLellan explains the pros and cons of Ruby on Rails.

Play

This week on the Boagworld Podcast, Paul and Marcus drag themselves from their death beds to share why you should care about Vista, which browsers you should support and introduce you to the exciting world of terms and conditions. Oh yes and Drew McLellan explains the pros and cons of Ruby on Rails.

Download this show.

To subscribe directly within itunes click here

News and events

Barcamp

The weekend of the 17th of February sees the second barcamp to take place in London. If you haven’t come across barcamp, it is a gathering of web geeks where everybody takes turns to present a 30 minute session. You can pick which sessions you wish to attend and the whole thing has a very informal feel. Its free and arguably one of the most valuable meetups of the year.

Paper prototyping

There is an excellent new article on the List Apart website. It proposes closing down your PC and returning to good old pen and paper. Compelling stuff, which should make you evaluate the way you develop your designs.

Bulletproof AJAX

Jeremy Keith is about to release the follow up to DOM Scripting, Bulletproof AJAX. As with his previous book Bulletproof AJAX is aimed squarely at the designer community. It will be perfect for people who have read DOM Scripting and want to take the next step. If you can’t wait that long and can squeeze £295 out of your boss then you might want to attend Jeremy’s AJAX workshop down in Brighton. I have attended it myself and it is extremely good.

Custom reading containers

This is an incredible proof of concept that I was emailed last week. Basically it enables the user to resize elements of your web page to suit their requirements. Admittedly it has only undergone limited testing so far and relies on PHP; nevertheless it looks very interesting indeed.

Client corner: Terms and conditions

This week Marcus starts a new series on client contrasts with a “fascinating” look at terms and conditions… I know… control your excitement! Some of the points he covers include:

  • Make sure you read the T&Cs carefully no matter how boring they are!
  • Get advice if you don’t understand something
  • Make sure you note the governing laws that cover the T&Cs
  • Note the deliverables and rights
  • Understand your liability if there are problems

Agony Uncle: Browser support

Danny has sent in an excellent question about how far we should go in supporting the numerous browsers out there. Should we support IE5, Opera mobile, Opera on the Wii and so on? In the show I talk about the need to not set hard and fast rules in this area but adapt to the individual requirements of our clients. I talk about not blindly accepting the browser support requested by the client but rather analysing statistics to establish the best browser set to build for. Finally I also explain the concept of graded browser support as implemented by larger organisations like Yahoo!

Ask the expert: Ruby on Rails

Talking of Yahoo, this week our expert is Drew McLellan who works in their development team. He is on the show discussing the pros and cons of working with frameworks like Ruby on Rails.  Among other things he looks at speed of development vs. maintenance and generally gives a nice overview on the subject. He certainly helped me have a clearer understanding of the benefits and drawbacks.

Review: Vista

So Vista has hit the shelves and being the uber geek that I am I couldn’t resist upgrading as soon as I got my hands on the disk. I know there are loads of reviews on Vista but I thought it was worth reviewing specifically from a web designer’s perspective. I talk about the problems I had installing Photoshop, the improved FTP support and the multiple website support now in IIS. I also look at how Vista could potentially change the way people interact with the web by bringing things like desktop widgets and RSS feeds to the masses.

Podcast 30: The flash debate strikes back

Last weeks show (the great flash debate) generated so much interest and so many comments that we have decided to do a follow up show looking at the feedback we have received.

Play

Download this show.

Paul’s constant blunders

In what is becoming a regular feature, Paul kicks off this weeks show by apologising for his various blunders over the last couple of weeks. He explains his bizarre interpretation of the WAI guidelines as well as doing a complete u-turn regarding macs, now that boot camp has been launched.

Technobuster: CSS Hacks

In this weeks technobuster section Paul and Marcus discuss CSS hacks. What are they? Why do we need them, and possible ways to avoid them? In particular they discuss the problems with Internet Explorer and ways to avoid hacks by using conditional comments.

Main Feature: The Flash Debate Strikes Back

Paul and Marcus were slightly concerned that some listeners had misinterpreted their position on flash so felt that it was worth clarifying a few points. They look at good and bad examples of flash as well as discuss some of the feedback they have received over the last week.

Web resource review: Robert Nyman

If you are a web developer Robert Nyman’s blog is a must read. He covers all kinds of web design related issues and recently wrote a very interesting article about Flash and Internet Explorer. If you are a web site owner it is important that you are aware of recent changes in the way flash is implemented in Internet Explorer. For more information on this issue for web site owners visit the Headscape website.

Promote us please!

Paul also made a request to all listeners to the podcast. If you enjoy this show he asked that you take a few moments to promote it in one of the following ways:

Add a comment to the boagworld.com listing in itunes. Simply go to the music store in itunes and search on boagworld. The opportunity to comment is associated with each show.

Link to the podcast. If you have a blog or website of your own write a short piece saying what you think of the show and link back to this site.

Add the boagworld feed to your site. It is easy to add the posts from this site directly to your own site. Click here to find out more.

Vote for us on podcast alley. Click here to go straight to the boagworld entry and click the vote button.

Jeffrey Veen : Web Essentials 05

Last night I finally found time to listen to Jeffrey Veen’s presentation (Beyond Usability: Designing the Complete User Experience) at the Web Essentials conference. It is definitely worth taking the time to listen to this one.

I hadn’t heard Jeffrey speak before and so it came as a pleasant surprise to hear a funny, engaging and insightful speaker that really inspired me.

What I particularly enjoyed is that he took a holistic approach to web design that brought together design, usability, technological and business.

Although I have really enjoyed the other speakers Jeffrey seemed to be living much more in the real world, understanding that return on investment is as important as semantic code!

So stop reading this blog and download his podcast right now. You won’t regret it. It might also help to download his slideshow so you can see some of the examples he is talking about.

Download Jeffrey’s podcast here

Download Jeffrey’s presentation here