Good Web Site Design
Notes from the WebMasterWorld Convention, Las Vegas, 12-2004. This conference covered all bases from website design, usability, stickiness, structure, dynamic content, flash to marketing. The conference covered a great deal of info about websites, customers, browser compatibility and customer usability.
Why has your customer hired you to design them a website?
- They just want a website on the internet so they can say they have one.
- Because they just want one to match their business cards, brochures and letterhead?
- To sell a product or service online?
- To be found on the Internet
- Answers 2, 3, and 4
If you guessed number 5 you are correct! Sometimes the client says to themselves that “this website is a marketing venue similar to my yellow page listing in the phone book or print ads.” But they hire the designer first and foremost because they have to have a website.
Then it’s on to marketing. Well the reality is great web design is marketing a product or service and a brand. It’s at the top of the pyramid for any business online. Your Only Job: To sell the service or product! What you do as website designers can either make or break the pyramid. At the top of the pyramid is marketing, bottom left is content/navigation/usability and bottom right of the pyramid is graphics/pictures.
Make the content on your website rich, usable, customer friendly and explanatory. Your site should provide as much of what the user is looking for on your site as you can show. (Don’t show a company graphic all by itself or an animated logo spinning around. What does your user care about that? Your user comes to the site to get information, right? So, give it to them. Customers are first and foremost looking for information; product, service, price and company information. Make sure these areas are covered in each specific section of a web site. Content speaks to the customer in the form of information; graphics and pictures enhance the product or service and are always the last thing to be added to the website.
When adding images for the product or service make sure to use the alt image tag to identify the image itself. Why? Some people on the internet are handicapped and all they see is the alternative info you typed into the alt tag in your code and not the image, and second some browsers are text only and do not show the image but will allow the viewer to see what the image is about via your alt tags.
Web design is based on many things:
- Visitors to the website
- Cross browser compatibility
- Page load speed
Website Usability and Construction
- Create a very simple, easy-to-understand navigation system that doesn’t take up too much space. Preferably left hand navigation or top navigation (see below for examples). If you use image maps you must create text links at the bottom of the pages. If you use buttons made out of graphics, please name the buttons for what they stand for not button1.gif or imageslice1.gif etc. Name them like: bluewdigetforsalebutton.gif or germancoffeenightandday.jpg.
- Make sure your user has a way to search the site by a complete and easy to use sitemap.
- White space in code or double byte code is a waste of space and adds up in KBs. Do pay attention to your backend code if the code has double, triple or more spacing taking the spacing out. It just adds up to KBs used and a slower loading page.
- Make the site sticky. Sticky means making a customer come back over and over. It can be a monthly newsletter posted, bookmark this site link, tell a friend script or a free offered for leaving their contact info for an email loop!
- Should I let people off my site? Yes you should have a section on the website for links to other websites which are relevant or compliment the website or the interests of the client. If you trade links with quality and relevant sites this is where you can put the exchange links. If you work on a Las Vegas hotel site, relevant links could be car rentals, event calendars, chamber of commerce and night life or clubs.
- No ‘Under Construction’ or blank pages…this is a strict No No!
- When redesigning a site do not delete all the old pages – reuse their page names on the new site or add a custom 404 page to gather up all that missing traffic from those pages. Old pages continue to float around the internet for years. If necessary add expiration meta tag to the pages as needed to get their links off the Search Engines.
- Make the page titles usable and relevant to the page itself. Each page should have its own Meta Title…do not reuse the same one over and over again. Make the title of the page explanatory. If your user bookmarks the site (and you really want them to do this so they come back often), the first 20 or so characters on the page is what they will see in their favorites/bookmarks menus. If you are the San Francisco branch of the Music Store, entitle the page, “Music Store – San Francisco, CA” not “Your one stop shop for music past and present.”
- The name of the site page should not be coffee1.htm, coffee2.htm, etc. They should be called germancoffee.htm, irishcoffee.htm, etc. This is good website design and usability for all involved.
- At the top of each page’s content, add a one sentence tag line that summarizes what the user will find in the site like a headline in a bold and slightly larger font. This is not the mission statement of the company. It is informative, short and sweet.
- Add the latest online or print news story in full on the company to the About Us page. Odds are that some of the site visitors are coming to your site because they heard about a piece of news. Then also place titles and a synopsis with links to the full text for each other older article that you think people want to read about your company.
- Add client praises or letters from your customers throughout the site, filtering them onto pages where the main point of the letter matches the subject of the content of the site. This adds credibility, without the cheesiness of a “Testimonial Page”.
- Provide a way of contacting the company on every page. Often, people come to the website just to get a phone number or address. Don’t make them hunt for it. If you have more than one location, put a link on the home page to either a store locator or a listing of all the stores that people can search or sort through.
- If you are selling directly from the web page, as in conducting ecommerce (or if you just put out an advertising circular), put some of the profiled products on the front page with links to where they can buy them in one or two clicks. Don’t just have a link for specials.
- If you are selling a service, highlight some of those services on the front page rather than making your user dig for them. Use content and text links to direct them to more info on the highlighted service.
How spiders visit a website to index its contents
Yes, there is a happy medium, you can “have your cake and eat it too.” You can have a pretty site with some bells and whistles as long as the designer knows what they are doing…here are some tips.The first step in designing a website is to build the proper table structure. This framework for your website will easily guide the search engine spiders through your site taking the route you want them to. A good table structure is essentially a map to the spiders; it guides the way as they travel through your website. This is also important for your visitors to see consistence and ease as they use the site.
This table structure is very beneficial to your website ranking as it guides the spiders to the text rich, most important content of your site as quickly as possible. The spiders will enter your site at the first table, the header, and then travel through to the empty cell in row 1 of the second table, the next stop is your content area, the “meat” of your website. After going through your content the spiders will then continue onto row 2 where you have inserted a table holding your navigation, if your navigation is image based, as most sites have it, it holds very little content that matters from the spider’s perspective. (This is why it makes sense to use test here and not graphics.) The spiders will then follow through to row 3 where you have your footer, a place to add in valuable rich targeted keyword text links to all your site pages.
If this table structure does not fit your design at all there can be work arounds such as our 100%x100% format. This is a good way to present your business with a simple entry page. Put your flash or slide show or pretty splash image in the top half and your keyword rich text below.If you scroll down the page when viewed in a browser, you will see that there is in fact a lot of text below the main image. With this simple 100% x 100% table you can achieve this affect on your website. This table will open the same way in all resolutions giving your index page the look of a text free page when in fact it is not.
If you choose to use the 100% x 100% table noted here you should still try to stick to the general table structure shown above for your internal pages. There can always be room for adjustments based on the size of your site however most websites use left hand navigation and this table structure is based on left hand navigation.
If your navigation is across the top of your page, maybe reconsider it. It can remain at the top, I have designed a few websites that are ranking well with this top navigation, but for the best result, the left hand navigation using the table structure first mentioned in this article is best.
All in all I cannot stress enough that a well designed site will rank higher in the Search Engines. Even if you do not have a complete SEO overhaul of your site this table structure will increase your rankings over those that do not have a clean, properly structured website. Though the table structure is not noticed so much by the visitors to your website aside from the look of it, it is very noticed by the spiders and they will go through your website based on it.