Notes

Outline

Designing Web Sites Starting Down the Right Path

What Makes a Design “Good”? A good web design is one that is: Usable Accessible And most importantly achieves the business objective for creating the Web site.

Why Some Web Designs Fail The most common failure in web design is that there is not enough of a “discovery” phase before any work is done.  A lot of clients don’t know what is possible on the Web and rely on you to tell them how they can use the Web to enhance their day-to-day business.  Asking the right questions of your client and getting real answers is sometimes a tooth-pulling experience, but if you expect to provide a site that is a worthwhile business tool to your client it’s an imperative first step.

Fact-Finding Questions What is the business objective of the website? In other words – what do you want to use this website for?  Designing a site just because an executive told you to do it without telling you what the site should achieve is not a good reason.  And no, it is not an acceptable reason that “everyone else is doing it”.  Of course these days you need a website just to justify your company’s legitimacy, so it is ok to make a brochure-style website with a small amount of branding, directions to your facilities, contact information, investor information, etc. but it is probably not the best use of the Web and it’s capabilities.

Fact-Finding Questions Who is the target audience? A Web design that works for a company selling makeup to 16-24 yr old consumers will probably not work for a company offering franchise investment opportunities.  Do you need to design for disabled users?  For web-enabled devices such as phones?  Knowing who will use the site and how they will use it will help you dictate what designs appeal to your target audience, what to steer clear of, and how far you can push the envelope.

Fact-Finding Questions What is the overall message you want to convey to the users?  Are you the “most reliable”, offer the lowest prices, the most technologically advanced?  How do you differentiate between your company and your competitors?

Fact-Finding Questions The previous list is not in any way a complete list of questions you need answered, but by getting some well defined answers to these few questions, you should have enough to start your creative brainstorming. Make sure your Project Manager (PM) gets you involved in initial client meetings.  Don’t rely on the PM to relay the information from the client to you, insist on being involved in client meetings when design issues will be discussed.

Fact-Finding Questions Additional Resources: Web Style Guide by Yale University Press (a must read) Web Redesign by Kelly Goto. (to help manage the process)

How Do You Design a Web site That is Usable? While there are numerous books and websites to aid you in your search for a creating usable designs, the following list of techniques you should use in each Web design is a good starting point.

Good Design Techniques Place your name and logo on every page and make the logo a link to the home page (except on the home page itself, where the logo should not be a link: never have a link that points right back to the current page). Provide a search mechanism if the site has more than 100 pages. Don’t use Mystery Meat Navigation (an object on a page that has no indication that it’s supposed to be a navigation element and only after rolling over the MMN are you presented with any indication of it’s function) Write straightforward and simple headlines and page titles that clearly explain what the page is about and that will make sense when read out-of-context in a search engine results listing.

Good Design Techniques Instead of cramming everything about a product or topic into a single, infinite page, use hypertext to structure the content space into a starting page that provides an overview and several secondary pages that each focus on a specific topic. The goal is to allow users to avoid wasting time on those subtopics that don't concern them. Use link titles to provide users with a preview of where each link will take them, before they have clicked on it. Ensure that all important pages are accessible for users with disabilities, especially blind users.

Good Design Techniques Do the same as everybody else: if most big websites do something in a certain way, then follow along since users will expect things to work the same on your site. Remember Jakob Neilson’s Law of the Web User Experience: users spend most of their time on other sites, so that's where they form their expectations for how the Web works. Content is KING!  No matter how nice your designs are if the site doesn’t provide any valuable content to the customer, they won’t stay long and most likely won’t come back.  Give the customer a reason to come back to the site.  News, promotions, games, whatever fits for a particular client. Finally, always test your design with real users as a reality check. People do things in odd and unexpected ways, so even the most carefully planned project will learn from usability testing.

Good Design Techniques Additional Design Resources Simple: Web Sites, a book by Stefan Mumaw (deconstructs several sites with different design/content goals) www.webpagesthatsuck.com (examples of what NOT to do) Web Design in a Nutshell – O’Reilly Press

Creating Accessible Web Sites What is an accessible Web site?  An accessible Web site is a site that can be viewed on multiple types of browsers, multiple platforms, and by disabled persons without creating multiple versions of the same site.

Creating Accessible Web Sites Separate your content from your presentation by using Cascading Style Sheets (CSS).  This allows you to centralize the management of the look and feel of the entire website while keeping the HTML/XHTML semantic and meaningful.  CSS allows you to change the entire look of a website containing thousands of pages through just one page.  By really learning CSS you can significantly reduce the weight (kb) of your Web pages (customers don’t like to wait) and the number of requests the to the server.

Creating Accessible Web Sites Read and follow the rules of the US Government’s Section 508 requirements. Section 508 sets forth requirements to make site accessible to disabled users.  Most of the rules are good ideas for site in the first place, such as mandatory ALT tags for images, and captions for table data.  The requirements are not difficult to implement and can only help your site’s visibility.

Creating Accessible Web Sites Don’t override user’s preferences.  In particular, don’t use pixel settings for font sizes, use a relative setting.  If users with bad eyesight want to zoom into your page, don’t force them to stay with the 10px.  Using a relative unit like em or % will scale your entire site’s text accordingly.  A user’s computer should work like they want it to work.

Creating Accessible Web Sites Stop using HTML and move to XHTML.  The W3C did.  Actually, the W3C has halted any further development on HTML and has recommended XHTML as it’s replacement as we eventually move to XML as the universal language of the web.  And it’s not hard either.  XHTML is essentially an HTML document with minor modifications such as mandatory closing tags, that checks against an XML DTD.  Starting to use XHTML now will help you transition into XML and will help you will write clean code.  XTHML works in all of the current browsers so it can be used now.

Creating Accessible Web Sites Accessibility Resources: Any of Jacob Neilson’s publications (usability guru) Don’t Make Me Think: A Common Sense Approach to Web usability Any of Eric Meyer or Haikon Lee’s books on CSS (both on the W3C CSS Team) Cascading Style Sheets: Separating Content from Presentation Maximum Accessibility: Making Your Web Site More Usable for Everyone Usability for the Web: Designing Web Sites that Work www.section508.gov

Misc. Web Design Tips After a design is approved, create a template for all new pages.  Take that template and simplify it even more.  Externalize the JavaScript, take common sections (such as navigation, page headers, etc) and create external include files.  Include files get cached, making pages load faster.  When you create an include file that all of the pages use (much like using CSS), you need only update that one file rather than touch every page to replace a graphic, color, etc. Be picky about your code and learn to code by hand first before moving to a WYSIWYG. Minimize graphic file size as much as possible.

Web Design Tools Web Graphics Design: Adobe Photoshop/Image Ready Macromedia Fireworks JASC Paint Shop Pro Corel Draw Color Schemer (for choosing colors that fit together)

Web Design Tools Code Editors/WYSIWYG Macromedia Dreamweaver Adobe GoLive Microsoft Visual Studio Microsoft Front Page

Web Design Tools Web sites www.macromedia.com – especially the Designer/Developer sections with great tutorials, tips, and extensions www.coolhomepages.com – peruse lots of great site designs www.w3c.org – the people who create the standards for XHTML, XML, CSS, etc. Web Page Design for Designers - http://www.wpdfd.com