EvoBloggito

Why Bad Websites Happen to Good Companies, Part 9: Having a Print Designer Design Your Website

Author: Ray Gulick; Published: Sep 9, 2010; Category: Bad Websites/Good Companies, Design/Development, Information Architecture, Usability; Tags: Accessibility, Design/Development; 2 Comments

It’s amazing to me that this still happens with a fair degree of regularity. It would seem obvious that print and the web are two distinct mediums requiring different expertise. But unfortunately, it’s not uncommon. Design-is-design-is-design to many people, and many of them continue to think of web design as “on-screen graphic design.” I’ve discussed this before. It has nothing to do with whether or not print design or web design is “harder” or “better,” but how they are “different.” Asking a print designer to design a website is much like asking an interior designer to redo your landscaping: different expertise and understanding is required. It’s also not the best idea to ask a web designer to design your annual report.

Before I go further, let me say I have worked (and continue to work) with some print designers who understand there are differences and do their best to approach web design differently and accommodate the needs of website visitors. They generally have accepted the fact that web pages must accommodate many different browsers and system settings, and that their work will not display uniformly to everyone who sees it. They recognize that on the web, information is more important than packaging if it comes down to a choice between the two, and they try to avoid ”designing in“ accessibility or usability issues. They take advice about aspects of their design that are problematic from a usability or information architecture perspective. I like working with those designers and in fact, they often push me to do things outside my “comfort zone,” which often leads to me learning something new.

What’s more important: design or information?

Many print designers see the web as a hostile environment for their visual “designs,” which they hold as the most important aspect of web design. It bothers these folks mightily that they cannot absolutely control how their design is rendered in visitors’ browsers. They have little or no understanding of how (or why) to provide for these differences, and often as not, cause usability or accessibility problems trying to control the “user experience,” by which they mean “visual experience.” There are still print designers (in 2010!) who set paragraph or headline text in photoshop and display text as images on their website (how else to make sure that everyone sees your carefully kerned 11.5 point Museo Sans on 18 point leading?).

But while visual design is important (I’m a designer too, and I believe in the power of design to influence thinking and behavior), it’s pointless if the ability for visitors to find, access, or utilize the information is compromised. The fundamental idea of the web is the ability to search and find relevant information. Design that interferes with that is not only a waste of time, but destructive to the purpose of your website. Good web designers understand that and learn techniques and design approaches that preserve and even enhance usability and accessibility.

Should an interior designer design your landscaping?

Even if you really like and trust your interior designer and you love what they can do to a room with color and fabric, do you really think he or she has an understanding of plants, soil, drainage, etc., that will result in a satisfactory landscape? They may love a nice landscape, and relish the challenge of working in a new medium, but the most likely reality is that there are big gaps in their landscape design expertise that you will have to live with in the finished landscape.

As with the example above, rarely do websites designed by print designers live up to expectations of usability, interactivity, search engine-friendliness, or information architecture, regardless of how nice they might look. The understanding of the web and expertise to leverage its ability to communicate, inform, and persuade is simply not present. Good web designers offer these things along with beautiful and functional design.

The above image represents my primary point that, while there is some overlap in knowledge and skills between print and web design, there are large amounts of knowledge and skill required for each discipline that are not common. There are, no doubt, some designers who have mastered both areas, but they are unusual and rare. While I started my design career in print, after focusing on web design for at least a decade, it’s difficult for me to change my perspective back to that required for really good print design; my design mindset no longer supports that perspective. I know from working with print designers that they have similar problems adjusting to a web perspective.

Bottom line: find a good web designer and put them in charge of your website design or redesign. And if your favorite designer is a print designer and you really want him/her to design your website, insist that they find a good web front-end developer to team with. You’ll get better results in how the site serves your visitors, which means your website goals are much more likely to be realized.

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.

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.