Web Design Tips and Tricks

How To Improve The Professional Look And Feel Of Your Website

Get Web Design Tips and Tricks on mps-web-design.com. How To Improve The Professional Look And Feel Of Your Website topic will increase your understanding on Web Design Tips and Tricks. We at mps-web-design.com only provide news, articles, information in Web Design Tips and Tricks. Web Design Tips and Tricks at mps-web-design.com provides the most up to date news and articles. If you have questions please do not hesitate to contact us.

Projecting a professional image is paramount to your website's success. It can make or break your online business. Use this handy article and links to improve the professional look and feel of your site.

First, take a general overview of your site. What is subject matter of your site? Define it down to a particular topic -- your niche.

For instance, you can have a website on Sports. You may have narrowed it down to a particular sport; say baseball. You may have narrowed it down even further, a particular baseball team.

Whatever the subject matter of your site, keep the content within your site on topic. Obvious, but important. Someone coming to your site to check out the Yankees -- don't want to find material on 'how to hook a rug'!

Make sure that you 'keep your site on topic'. This one thing alone will improve the professional image your site projects.

Next, consider your audience, who is it aimed at? Who are you targeting? For instance, if it's a general news site, it may be the whole world. Everyone is interested in the news.

If it a website on breeding dogs -- your audience is probably other dog breeders or those interested in dog breeding. Someone visiting your site will expect to see content/information on dog breeding.

Keep your site's audience in mind at all times.

Now consider the layout and design of your website. Is it appropriate for your topic and for your audience. Does the color scheme and design suit your subject matter? Does the design and layout suit your audience?

A website catering to young visitors, offering online role-playing games is not going to have the same layout or color scheme as a conservative business site. Appeal to your audience and subject matter; again, keep them in mind at all times.

In your site design, go for simplicity. Don't complicate them with too much flash and dazzle. Provide your visitors with what they're looking for -- and make it quick. Don't have your visitors jump thru hoops to get what they're searching for. Have an 'easy to navigate' linking structure.

Keep the overall design within two or three colors. You can even try an old artist's trick, make it almost monochromic with a complimentary color split to bring focus to your points of interests. Make sure your fonts are consistent and easy to read in all the different browsers. Keep the same logo or brand name on all your pages -- don't confuse your visitors.

Now, lets get down to some specific changes or additions that can 'tune-up' your website. These should improve the professional look and feel of your site.

Give Them Something to Remember You By!

1. Make a 'favicon.ico' file if you don't have one. Look down at your computer's task bar, you should see a version of a favicon of the programs on your computer. These are small '16x16' icons or symbols for your site or product. All major sites have them. Here's how you can make them:

Use a photo or paint shop program like Adobe or Paint Shop Pro. Just take your logo or part of it and reduce it down to a 16 x 16 image. Adjust the resolution and play around with it. You can just use a single letter from your site's name and jazz it up a bit. You need to upload this image to your website's directory in an ico file named 'favicon.ico' -- very logical Mr. Spock!

Extra help here: http://www.thesitewizard.com/archive/favicon.shtml

Give Them Eye Candy!

2. Make a logo. Or have someone design it for you. Nothing says professional than a cool looking logo! A really good one will brand your site in the minds of your visitors. Have this logo on all your web pages.

Logo building help here: http://web-bureau.com/modules/logo.php

Put Them on the Map!

3. Make a Sitemap for your site. Extremely important, make sure you have a sitemap for your website. Place all the links (if possible) to your site on here. It will unify your site and be of tremendous benefit to your visitors. It's a common courtesy you cannot, must not ignore. Ideally, you should have a link to your sitemap on all your web pages.

Redirect Them!

4. Redirect Page. Create a redirect or error page if your web host doesn't provide one. This is a catch-all page for the '404 Not Found File' that pops up. It will make your site more professional; plus, you won't lose all those hard fought for visitors. Make sure your Redirect Page has a link to your Sitemap.

Try this link for help: http://www.clockwatchers.com/htaccess_redirect.html

Blog Them!

5. Start a Blog and RSS Feed for your site. If you haven't placed a blog on your site -- do it now! This is one addition to your site you should have. Start a blog on the subject of your site or something complimentary to it. It will allow for visitor interaction and will give your site a boost in the ratings. (Use the link at the end of this article if you need help with setting up a blog.)

It will also give you a RSS Feed which will allow you to syndicate your site's information or content. Place an orange RSS or XML button on your site. Since RSS is somewhat new - you might want to place a little note explaining xml or the rss feed. Always place your visitor's comfort in the forefront.

Send Them to the Doctor

6. Doctor HTML. Check the html code and spelling of your site. Sites like this one are great. They will give you a tune-up for free! I have used this one and it's excellent. What you're really checking for is browser compatibility and broken links. It will also squish your html to save on your load time. It will check the coding and any spelling mistakes on your site.

Correct any blatant 'faux pas' in your site's coding.

You can find the html doctor here: http://www.doctor-html.com/

You can also go to NetMechanic to reduce the graphics on your site. As the net goes broadband, this is becoming less and less a problem but it's always better to have a fast loading site.

GifBot by NetMechanic http://www.netmechanic.com/accelerate.htm

Keep Them Browsing

7. Next check your site in all the browsers. You might be surprised how your site looks in a different browser. Firefox is increasing it's users, check your logs, see which browsers your visitors are using. Make sure your site looks and operates perfectly in these systems.

If you have a lot of friends with computers, check your site on their operating systems and see how it looks. Make any necessary changes. You can also try AnyBrowser.com Screen Size Tester below.

http://anybrowser.com/ScreenSizeTest.html

Give Them Spider Food!

8. Spend a day or so, checking all your keywords. List down your site's major keywords. The ones you're targeting. Optimize for the search engines. Most of the traffic on the web come from search engines, so make sure your site is optimized for them. Make sure you have submitted your site to all of these engines.

Double check your 'title' and 'description' meta tags for any obvious mistakes. These get indexed and are often the first line of contact with any potential visitors to your site. Professionism here could have a significant influence on the amount of traffic your site receives!

Find some great Search Engine Optimization Tools here:

http://www.webconfs.com

Give Them A Gentle Reminder!

9. Make sure you have a Bookmark link. Simple, but many websites don't actively encourage visitors to bookmark their site. Have a bookmark logo or link on all the pages of your site. Remind your visitors to bookmark. It's a great source of free traffic.

You can get a free script from Michael Bloch: http://www.tamingthebeast.net

Give Them Some Jazz!

10. Jazz up your site! Try to find things that will make your site more interesting. Give your visitors a reason to visit your site other than the great content. Offer a free service, like the one the doctor uses above! Run a contest! Give away free stuff or extra bonuses if they visit your site. In whatever way you can, make your visitor feel special.

Maybe try a headliner from Feedburner.com for your rss feed. This will display all your headlines. Add audio and video "testimonials". Add other graphics like the ones mentioned here: favicon, bookmark, sitemap, etc.

But don't overdo it with the graphics, but add a few to make your site visually interesting. Even a visually bare-bones site like Google does this with their logo on special occasions. It adds a touch of style.

It is estimated that over fifty percent of net users now have broadband so the use of a lot of graphics is not as detrimental as it once was. But again, don't over do it, a little spice goes a long way.

But don't put style over substance. It all boils down to content. Give your visitors good valuable content or information and your site will improve faster than with all the points mentioned above. Don't forget that basic ingredient while you're fine tuning your site.

And don't forget your site's visitors. Make their visit to your site as pleasant and comfortable as you possibly can.

Always keep your visitor in mind.

Each one is a special guest. Each one deserves the best site you can produce. Each one is ...

A VIP with a cursor! Give them the Royal Treatment!

Your site will reap the benefits and look good while doing it!

This post was originally published on May 13th, 2004. As others are writing about the topic, I thought bringing it out of the archives would be worthwhile.

A little recap

The idea of placing multiple states of buttons and other elements that are used in background images took its roots, I believe, from Pixy's Fast Rollovers. The CSS Zen Master extended this to another purpose in CSS Sprites: Image Slicing’s Kiss of Death. Didier Hilhorst came up with a nice application of this method, and I worked it backwards in Responsible CSS - Recycle your background images.

The idea behind the 'sprites' method can obviously be extended to any html element, and there are tangible benefits for doing this, just as long as the designer does his or her usual homework.

Benfits of using the 'sprites' method

What are the possible the benefits of using this method? Essentially it lies in faster download times for your web content.

Readers of Andy Kings book, Speed Up Your Site: Web Site Optimization will notice that this method reduces http requests and makes more efficient use of the data packets used to transfer files to the users computer, and that that is a good thing.

Packet size and http requests

From Web Page Design and Download Time, by Jing Zhi of Keynote Systems (seen here - pdf), cited in Andy's book:

The basic performance principle is therefore to make fewer requests and transmit fewer packets. From this principle, we can derive two basic design rules for wellperforming Web pages. First, reduce the overall size of the page, thereby reducing the number of bytes (and packets) to be transferred over the Internet. Second, limit the number of embedded objects on the page, such as images, each of which must be requested and transferred separately from server to browser.

They also found that it was the number of packets and not necessarily the overall size of the page that was important. If a packet could hold 1460 bytes (the figure given in the article) and your object was 1600 bytes, it would require two packets. They found that this object would transfer at the same speed as another object that was greater in size but still fit in two packets.

Potential payoff

The potential payoff for using this method versus individual images, then, is a faster download time due to reduced number of packets and fewer http requests.

Reducing http requests is easy. One file instead of two or three etc. is simple. But packet requests? That depends...

An example

The number of packets sent will depend on the size of the file and the users internet connection.

As an example, lets look at the fiftyfoureleven.com logo at the top of the page. When this design was first being coded, that link consisted of two 3.34kb images, one for the link state and one for the hover state. Now, by using one image that contains both states and simply bumping it back and forth depending on the hover state, that has been reduced to one 5.35 kb image. Right there is a savings of 1.33 kb. Good news.

Now, for arguments sake lets say that a packet can hold 1460 bytes (packet size for connections greater than 128kb/s = 1500 bytes -40bytes for tcp/ip headers). The two image method used 6 packets, 3 for each image (3.34/1.46, rounded up). The single image method uses 4 packets (5.34/1.46, rounded up).

Things are looking good.

How to optimize

In his alistapart article, Dave refers to the image that holds all of the sprites as his 'master image'. The key to benefitting from this method is to ensure that the file size of your master image isn't a bloated equivalent versus the sum of its pieces.

Conclusion

Great benefits can be realized when combining a master image from slices that fall well below the size of one packet, as that unused packet space goes wasted.

After doing a little more research, it seems that packet size can vary depending on the connection rate. That being said, it may be rather difficult to come up with a firm rule here. To play it smart and safe, try and:

• build master images that are smaller then the sum of their collective slices (by combining images of similar colors, for example) or
• rather than use a different distinct image for a certain element, reuse one that you already plan on using elsewhere.

This isn't exactly groundbreaking advice, however having seen the results acheived with the logo on this page, it can be seen that using the sprite method versus individual images at minimum does reduce http requests and even further it can reduce file size which in turn can reduce the number of packets sent.

More Articles: