Shoestring Branding Home

Marketing for Independent Professionals

Basic Web Design Guidelines

Branding your website:

  • Include your logo in all pages. Position it at the top left or top center or your pages.
  • Complement your logo with a tagline or catchy sentence that summarizes your brand idea. For example “Always low prices” is the tagline for Wal-Mart.
  • Create a favicon. A favicon is a small graphic that appears next to the URL in the address bar.
  • Have a consistent look and feel in all your pages. Use a color scheme and layout that are clearly recognized across your site. 
  • Have an About Us section, that includes all relevant information about you and your business. 
  • Include a copyright statement at the bottom of each page.

Designing your website’s navigation:

  • Group your navigational options in relevant categories. 
  • Use common names for your menu options: Home, About Us, Contact Us, Help, Products. Avoid “clever” or “catchy” alternatives that are not descriptive enough. 
  • If your site uses Flash, provide also an HTML version for users who prefer a less fancy, faster site.  Your HTML version will also work better with search engines.
  • Provide simple text navigation links at the bottom of long pages, so users don’t need to scroll back up.
  • Link your logo to your homepage from all your pages, except the homepage itself. 
  • Display a hyperlinked “breadcrumb trail”.  A breadcrumb trail looks like this: Home > Section > Sub-Section > Page, and it tells people where they are within your site.
  • If your site has many pages provide Search capabilities. Include a search box in the upper right corner of your homepage or in other visible space.
  • Set your search box to search your site, not the web.
  • Create a custom error page that displays a simple site map with links to the main sections of your site and a search box. That way, you will not lose visitors that have followed a bad link to your site or who have misspelled your URL.

Layout and Content Presentation: 

  • Put your most important content above the fold.
  • Optimize your page to be viewed correctly with the two main browsers: Internet Explorer and Mozilla Firefox.
  • Use high contrast: black text on white background, or white text on black background work best. 
  • Don’t use too many different fonts. Avoid using small serif fonts (like Times Roman): they are difficult to read from a computer screen. Verdana is the most web-friendly font, since it is wide, clean and easy to read.
  • Avoid amateurish features like: numeric page counters, wholesale use of exclamation points, all caps, center justified blocks of text, excessive animated gifs, busy backgrounds, or anything that distracts and doesn’t add value to your readers.
  • Don’t use pop-up windows.
  • Don’t use frames.
  • Test your site in different browsers and resolutions.

Writing for the Web:

  • Unless you’re running a technical site for technical people write in layman’s terms so that everybody can understand.
  • Write in a way that facilitate scannability, using headings, bullet points, bold key words, white space, etc.
  • Reading from a screen is difficult: use 50% less words than you would use on print.
  • If a page is too long, break it into several pages and link to them.
  • Use a spell checker. Spelling mistakes hurt credibility.

Getting to Know Your Customers:

  • Ask for feedback: include a feedback form in your Contact Us page. 
  • Publish an ezine and include a subscription form in your homepage. Give your customers  a valuable bonus to encourage them to subscribe.
  • Include polls and other tools to gather market intelligence.

Creating Links:

  • Make your links descriptive. They should indicate what the user will be linking to, as opposed to just saying “click here”.
  • Don’t underline anything that is not a link.
  • Use a consistent color for your links (preferably blue).
  • Use a different color for visited links, (preferably purple or a lighter tone of the unvisited links color). 
  • When linking to a non-HTML file, such as Excel, Word or Acrobat, make it evident, by including a small icon next to the link.
  • Don’t link to “under construction” pages.
  • Make sure that your links work. There are free online tools that can help you with this.
  • If you use graphic links, use the ALT attribute to add a description that will pop up when you place the cursor over the image.

Proper use of graphics:

  • Optimize your graphics. Use only .gif and .jpg formats. Make your image as light as possible while maintaining acceptable quality.   Use a free online graphics optimization tool to reduce the weight of your images.  Make sure your pages load in less than 10 seconds or less.
  • Use thumbnails (miniature versions of pictures) and make them clickable into the actual size picture. 
  • Avoid graphics that look like ads. People will ignore them.

Optimizing your site for the search engines: 

  • Create short, descriptive page titles, to entice search engine users to click on your links.
  • Create a site map containing links to all your pages, and link to it directly from your homepage. Search engines will follow the link to your site map and will add your pages to their index.
  • Pick two or three main keywords (the words you believe search engine users will type to find your page) for each page and make sure to include them in your page title, description meta tag and page body.
  • Make each page focused on only one topic.
  • Use more text than graphics, and minimize the use of flash and JavaScript. Search engines heavily favor text and will crawl and index your site faster.

Blog-Specific Web Design Tips:

  • Use a minimalist template, preferably one with a white background and dress it up with a nice logo.  
  • Use pictures to dress up your blog entries and give your blog a more professional appearance. You can find excellent pictures at a very low cost in istockphoto.com.
  • In one of your blog’s side columns, list six or seven links to very high authority sites related to your topic. When the search engines  visit your blog, they will find these links and your blog will benefit by association.
  • Always link out to the sources you use to document your posts. This is not only good etiquette but also a good way to promote your blog and get links back. 
  • Use labels to categorize your posts and keep your blog neatly organized. 
  • Include social bookmarking widgets with your posts so that readers can save your site on del.icio.us, digg, reddit or any other social bookmarking service. 
  • Include an RSS button in a visible location so that your visitors can subscribe to your feeds.
  • Include a form to subscribe by email.  Many people still don’t feel comfortable with RSS.

1 Comment

1 response so far ↓

  • 1 The Three Biggest Internet Marketing Time Wasters // Sep 27, 2007 at 11:15 pm

    […] site will never be perfect.  However, if you followed a few basic web design guidelines at the beginning, chances are your site is already good enough and ready to be enhanced with […]

Leave a Comment