Disclaimer: not an actual Evo
web designer.

There are lots of approaches to website design. Other designers may legitimately find much to disagree with in this short list, or have items to add (please!). But these are the over-arching principles I try to adhere to in designing sites. At least they’re the ones I can think of right now.

The header, footer, and side navigation or subnav areas should be thought of as a "frame" for website content. They should be attractive, well-organized, functional, and support the brand, but visually, they should not compete strongly with page content for attention. If you have a boring website, the way to fix it is not to make the header and footer more exciting (which does not necessarily preclude the need to redesign the header and footer). If your website lacks excitement or interest, put your time, budget, and energy into making your content more exciting and useful.

Be semantic with content structure. When the style sheet is turned off, the content on the page still needs to make sense. If it doesn’t, it impacts our next principle:

Accessibility is not optional. Accessibility starts with recognizing that not every website visitor sees or experiences websites the same way you do, and caring about their experience. The next step is to understand how their experiences may differ, and making accommodations so they can access the content. It’s easy to overlook accessibility if it’s an after-thought: it has to be a priority.

Prioritize content. What’s the most important content on each page? If it’s important, make it prominent, because expecting people to read carefully to extract the nuggets is unrealistic. This means highllighting content by various methods, including subheads, boxed content, color, scale, and bullet lists. And white space.

Footers are useful for other things besides holding copyright info. It used to be that footers were barely used and little noticed. Blogs have changed that, and the aesthetic works well on "traditional" websites and blog-based websites. While they are still not (and shouldn’t be) a place to put content that needs to be emphasized, footers have become a good place to put tags, social media links, contact info, marketing messages, and other information in addition to the copyright statement and links to the privacy policy.

Tags: Accessibility, Communication, Design/Development

I’m not an accessibility “expert,” though I care about the issue and do my best to create accessible websites. However, I read a lot of web design/development information, and sometimes in my reading I pick up a trick without thinking through all of the accessibility angles. A classic example is how I’ve routinely (until now) implemented the Gilder/Levin Method of image replacement to place logos in the page header. The reason I settled on using the G/L method in the first place, by the way, is that it is supposed to be accessible. And it is, if properly implemented. Here is the HTML markup as it’s normally recommended:

<h2><span></span>Company Name Goes Here</h2>

I won’t bother with the CSS, because that’s not where the problem lies. The problem is in the HTML markup. Using a head tag (<h2>) in the page header turns out not to be such a good idea. The reason given for doing this is the supposed SEO benefits: Google will give the information high priority because it’s enclosed in a head tag. However, some of my SEO friends tell me there is little benefit to having the same heading on each and every page of a website.

But the real problem is that enclosing the company name in the h2 tag interferes with the document hierarchy. A semantically structured document has a single h1 heading first (in the "content" part of the webpage), followed by lesser headings. Including headings prior to the h1 heading interferes with the ability of people who use assistive technologies to make sense of the document.

So what’s the solution? Instead of using a head tag to enclose the company name, simply subsitute a div tag. Maybe it will cost you slightly in SEO (there’s a lack of consensus on this point), but it will definitely make your pages more accessible. I think it’s a good trade-off:

<div id=”logo”><span></span>Company Name Goes Here</div>

Tags: Accessibility, CSS

You’ve seen those homepages with 3 product lead-ins and 2 giveaways and NEW!!! special pricing and the latest news and a billboard about what the company stands for and the mission statement and a picture of the CEO and an announcement about the company picnic and a picture of the dog by the sales manager’s daughter (no wait, that’s the refrigerator door) and a newsletter signup and a see-us-at-the-tradeshow blurb and a call to action to download a whitepaper and a partridge in a pear tree, all thrown up there in an ad hoc manner.

You’ve seen those right? And about half of the items have a "look at me" graphic or heading shouting for your attention? How long did you read through all that stuff to see if there was something you wanted to click on to find out more? Zero seconds would be the most common answer. Overwhelming amounts of information on a homepage, especially when all or most of it is competing for attention, drives visitors away.

So why do we see homepages like that? When I’ve had an opportunity to see what’s behind those situations, it almost always turns out to be a combination of two things. One, there is no real vision or strategy about the role the website should play. And two, whoever is responsible for the website (IT, marketing, whoever) has a "weak sister" status within the company, for whatever reason, which undermines their ability to do anything about thing number one. This creates a situation in which all the divisions or departments in the company (sales, HR, engineering, marketing communications, etc.) insist on getting their stuff placed in a Very Important Place on the website. Lack of a plan or policy creates a "vacuum" which sucks all that information onto the homepage.

See, it’s really just physics. And lack of priorities that comes with not having a strategy.

So, how many things should be on a company website homepage? It’s not really about the number. What it’s about is having items on the homepage that support the website strategy. And nothing else.

Get a strategy, get strong support for the strategy from the CEO/President, and the "how many" question (and the "can you put this on the homepage" questions) will go away.

For more posts in this series, see the “Bad Websites/Good Companies” category at right.

Tags: Accessibility, Design/Development, Marketing