EvoBloggito

Five Fundamental Website Design Principles We Think About at Evo

Author: Ray Gulick; Published: Dec 8, 2009; Category: Accessibility, Communication, Design/Development; Tags: Accessibility, Communication, Design/Development; One Comment

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.

Why Bad Websites Happen to Good Companies, Part 8: Creating Barriers to Downloading Free Information

Author: Ray Gulick; Published: Mar 26, 2009; Category: Accessibility, Bad Websites/Good Companies, Design/Development, Marketing; Tags: Information Architecture, Marketing, Usability; No Comments

Giving away stuff on your website is a really smart thing to do. It’s an opportunity to spread your ideas or information about your products and services, sometimes in exchange for a little bit of information that could be helpful in your marketing. It’s a very simple process, but companies screw it up all the time, usually by one of the following two methods.

Screw-up Number One

Too often, companies undermine their attempts to offer free information (whitepapers, product info, sample book chapters, etc.) by requiring onerous amounts of personal or contact information in return. You’ve probably seen this, and maybe even been guilty yourself (I confess, I’ve done it). In exchange for a lousy whitepaper, I have seen people asked for ALL of their contact info (including their work phone, home phone, cell phone, and Twitter ID), their job title, their preferred salutation (Mr., Mrs., Miss, Dr., Professor) and their underwear size. OK, I made up the last one, but it does get intrusive after the third piece of info. By the time people finish and submit the form (IF they finish), that whitepaper had better be damned good.

Screw-up Number Two

Another way to blow it is with poor execution. I recently got an offer in an email newsletter I’m subscribed to for a free chapter download for a just-published book. I need another web design book like a hole in the head, but I was game to find out if there might be a reason to spend almost $30 on this one, so I clicked on the download button. That did not start a download. Instead, it took me to a page that asked for my email so they could email me the download info. While I didn’t consider their request for my email address to be too much to ask, the button had said "download," and I found it a little disturbing that it wasn’t what happened. I also wondered why, if they had my email address to send me the newsletter, they needed it again to send me the download info. Why didn’t they just send me the download info to begin with?

I dutifully typed in my email address and clicked "submit." That took me to a page where they offered me several newsletter subscriptions, all preselected as "yes," including the one I already had. I clicked on the link that said "No thanks, I’m just here for the free book chapter." That took me to a page that promised to send me a download link. Two days later, I’m still waiting for that download information. I don’t think I’ll go back and make the request again: I just saved nearly $30.

Giving stuff away is not rocket science, and unless you’re a government supplier, your customers are probably not rocket scientists. So don’t make it difficult. And keep the information you ask for to a bare minimum. Your visitors will never hold it against you if you ask for too little information.

Oops! There Goes Another Accessibility Mistake

Author: Ray Gulick; Published: Jan 29, 2009; Category: Accessibility, CSS, Design/Development; Tags: Accessibility, CSS; One Comment

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>

Part 6, Why Bad Websites Happen to Good Companies: Too Much Stuff on the Home Page

Author: Ray Gulick; Published: Jan 21, 2009; Category: Accessibility, Bad Websites/Good Companies, Design/Development, Marketing; Tags: Accessibility, Design/Development, Marketing; No Comments

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.

Paying Attention to Website Accessibility

Author: Ray Gulick; Published: Jan 17, 2009; Category: Accessibility, Business, CSS; Tags: Accessibility, CSS; 3 Comments

Web accessibility has to do with making websites accessible and usable for everyone, regardless of abilities or disabilities. Most of the techniques for making websites accessible are easy to do and don’t take much time, but many websites are minimally or not at all accessible. There are laws in place to ensure that public and commercial buildings include access for disabled people, but in the US, there are no laws requiring commercial websites to be accessible, yet (Britain has had such laws since 2004). US government or government-funded agency websites are subject to Section 508 of the Americans with Disabilities Act, but I’m not aware of any agency that has lost funding due to non-compliance (if you know of a case where penalties have been applied, please let me know).

I don’t believe there is a conscious attempt to make websites inaccessible. I believe the problem is simply a lack of awareness of what accessibility means to disabled people and how easy it is to make websites accessible. Also, older approaches to web design (for example, the old slice-and-dice method promoted and enabled by Fireworks) resulted in particularly poor accessibility. Those types of approaches were meant to make sure a website looked the same to everyone in all browsers, but they left out people with perceptual disabilities, making some of the information "inaccessible" to them. Website accessibility does not mean the site looks the same to everyone in your audience: it means the information is available to everyone. What good is "looks the same" to a blind visitor?

The first step toward accessibility is to build websites that are standards-compliant. Good, clean markup with all style elements defined in CSS is fundamental. Second, semantic markup is a great help, and the use of XHTML is a start in that direction. These days, thankfully, you cannot credibly promote yourself as a competent or professional web designer if you don’t use CSS/XHTML. If your website was built that way, you’ve taken some steps toward accessibility, and I would consider that the minimally acceptable approach. However, there are still a remarkable number of websites built with CSS/XHTML that use fonts specified in absolute units (pixels) as opposed to relative units (ems). This will not be a problem as IE6 passes from the scene, but that will be a while.

It gets a bit more complex when you attempt to enhance the user interface with jQuery or other javascript. None of the online accessibility validation tools I’ve found seem to be able to recognize the difference between obtrusive and unobtrusive javascript, or whether or not the page is dependent on the javascript to reveal information. So the page is given a warning, at best, or failed (most of Evo’s websites get less than spotless accessibility evaluations for this reason). Even Google Analytics code on the page triggers a warning or failure. It’s tempting for developers, with these kinds of results, to quit caring about accessibility.

But it’s best to use these tools for pointing out potential problems to evaluate, rather than take the results at face value. In the above example, further investigation may be in order with the Firefox Web Developer tool, turning off javascript. If doing so makes content on your site unviewable, your site is utilizing javascript in an obtrusive, inaccessible manner. Not good. However, if all content remains viewable, and only presentation is affected, the chances are javascript is not affecting accessibility.