Home arrow HTML arrow Page 3 - 10 Design Tips To Live By
HTML

10 Design Tips To Live By


In this article Mitchell talk about the top ten design tips that any web designer should live by. He talks about usability, colors, linking, cascading style sheets, image optimization, testimonials and more.

Author Info:
By: Mitchell Harper
Rating:  stars stars stars stars stars / 0
February 06, 2002
TABLE OF CONTENTS:
  1. · 10 Design Tips To Live By
  2. · Tips
  3. · More Tips
  4. · Conclusion

print this article
SEARCH DEVARTICLES

10 Design Tips To Live By - More Tips
(Page 3 of 4 )

Tip #5: Open external links in a new window

One easy to implement tip that is often overlooked is making sure that any links that don't take the visitor directly to a page on your site should be opened in a new window by default.

When you think about it, this benefits both yourself and the visitor: they still have your site open and are given free reign to browse the external link, with the option to return to your site simply by closing the external sites browser window.

To open a link in a new window, you simply need to specify the value "_blank" for the target attribute of the links anchor tag:

<a target="_blank" href="http://www.sitepoint.com">Click here</a> to open SitePoint.com in a new browser window.

Tip #6: Underline and color your hyper links

The majority of web users are in a hurry and are pressed for time in some way or another. Our eyes only pickup on certain things, and these don't include hyper links that look like they’re part of the body of a document. When you're developing a new site, always make sure that your hyper links are underlined, and preferably in a different color to the text surrounding them.

Here's an extract from a site that I visited the other day:

Extract from poorly designed site

Quickly glancing over the text shown in the example above, how many links did you spot? If you answered none, then you wouldn't be alone. This was the page I received when I signed up for an affiliate program a couple of days ago.

Each "click here" was actually a link, but the web designer didn't even bother to make the link stand out from the rest of the text around it. Look how much easier it is to spot the links when they're both underlined and colored:

Extract from well designed site

Tip #7: Optimize your images

One of the main reasons that a lot of web sites are slow is because their images are not fully optimized. Optimizing images will decrease their file size, resulting in less data needing to be downloaded from a site before it can be displayed. Here are three ways to optimize your images:
  1. Reduce the image size: Make sure your images are as small as possible. Crop any "white space" around the edges because it increases the file size of the image.
  2. Reduce the number of colors: Many image formats including the graphical interchange format (GIF) allow you to reduce the color depth of an image without noticeably decreasing its visual quality. If you have an image such as a logo, then try using a program such as PhotoShop to decrease its color depth down from 16 bit to 8 bit. Save the image and view it in your browser. If it still looks crisp and clean, then save the image. Notice the difference in file size compared to the 16-bit version?
  3. Reduce image quality: If you're working with a Joint Photographic Experts Group (JPEG) image, then you can reduce its file size by reducing its quality. Using a program such as PhotoShop, you can specify the amount of "loss" for the image, which in turn reduces its size.
Tip #8: Tell your visitors who you are and what you do straight up

This is probably the simplest tip to implement in this article. When a new visitor comes to your site for the first time, they want to know who you are and what you do straight up, especially if you're selling products.

On your home page, you should have a small paragraph telling them exactly who you are and what you do. This will increase their confidence in your company and if you have what they're after then there's a better chance that they will stick around. Here's an example for a fictional site, Fred-Smith-Tools.com that sells gardening tools:

"Hi, thanks for stopping by Fred-Smith-Tools.com. We are based in Los Angeles, USA and sell a wide range of gardening tools including spades, pruning tools, clippers, spray guns and shovels. Please scroll down this page to take a look at our list of daily specials!"

Tip #9: Use customer testimonials

A customer testimonial is simply a comment from one/more of your sites visitors that includes some positive details of their dealings with your web site or company. By displaying customer testimonials on your site, visitors can see that other people have used your site/products and found them to be useful and valuable to their needs. Customer testimonials are also one of the best ways to increase your visitor's confidence in your site.

To display customer testimonials on your site, add a link to your menu system named "Customer Testimonials". Link this to a page where you display all of the testimonials you have received from your customers.

To actually collect testimonials, you can either ask some of your customers for them directly, or setup a feed back form on your site. Here's the sort of testimonial you should be looking to post on your site:

"I found your site yesterday from Google.com and I must say, I'm really impressed with its layout and your HUGE range of products. I ordered a CD from your on Thursday and it arrived right at my door the next day. If only there were more sites like yours on the net. Good work."

Tip #10: Provide contact details on EVERY page

One of the main sources of frustration for many web surfers is the lack of contact details on many sites. If you run a web site that sells products, then many people may prefer to order over the phone instead of the Internet. You should display either a sales email address or the phone number for your sales hot line in the top right hand corner of every page.
blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials