Web Design Tutorial: Technical Do's and Don'ts for Every Web Designer

Expand Your Mind, Know More About Your Design Skills

Peter R
Don'ts:

1- Web positioning:
Don't center everything on your website pages.
Think about it for while, why printing design layout is always from left to right, not centered. Take an example all books pages layout is from left to right, imagine if you read a book with a center layout, it will be so hard to read and follow this way.
Finally it's up to you, but it's easier to read without a centered layout.

2- Marquee tag:
Don't use scrolling 'marquee' tag.

What is Marquee tag?? A normal HTML tag (that only works in Internet Explorer), allows you to create a quote like horizontal scrolling display of whatever text and words you put in-between the tags.Some of web designers like to use a marquee, but most web site visitors and surfers don't like to see it at all. Scrolling marquees make your page look cheap and take away from the rest of the page.
Be smart and avoid what your web visitor don't like.

3-Background Music:
Don't use background music on your web pages.
Background music is good for some web pages like MTV channel web site, this can work with them. But for most websites this is just a very bad idea simply for some reasons, for example file sizes for this music files are pretty heavy, so it take a long time to load for every web site visitor, in most cases it's not worth to wait for it.I know some web designer like to have a nice music files in web sites, if you have to do it so keep the choice to the surfer, by making it an option surfer can take off and on.

4-Java Scripts:
Don't rely on JavaScript to work on your pages.
About 20% of the internet users can't run JavaScript! that basically means that you can't use JavaScript for key features of your website. But it doesn't mean you forget it and don't use java at all, but if you use it be safe an try to have some alternative for your script in case your surfer can't run java scripts.

5- Redirecting:
Don't automatically redirect your website surfer except in few circumstances.
With the help of java scripts web designer may know how to redirect visitors from one page to another, for some cases it's ideal to do that, but for the most cases it's a very bad deal.Redirect can confuse people a lot, most of users think that when the page redirected they are out of the page they want so they close all pages, not just that but also it can cause problems with the search engines.
Be smart, if you want to send people to another page, create link with a little explanation as to where they're going.

6-Flash websites:
Don't design a full flash website page if you want a fast high ranking in search engines.

We all know and love flash website, right!! It's all fun and looks really great, but it's a big mistake. When you decide to have your website all flash, you have no hope at all to get a fast search engine ranking. If you have to do it be sure to do all the safe modification for your website so that you may have a chance with search engines ranking.

7- Windows resizing:
Don't automatically resize a visitor's browser window.
Some designers have some styles that look best with a particular screen size, so they will use JavaScript that will resize the user's window to fit that size.You think this is cool right, now way this way you confuse your user and make the user have to deal with your website with the size you decide, this not good at all for all you website visitors.
Be safe, make people chose the window size they are comfortable with.

Do's:

1- Consistency:
Do keep the structure, navigation and the design consistent throughout your website.
Be smart, your website user or visitor like things consistent, take Windows, Mac and Linux applications as an example for you, see how they are all have the same look and the same structure so that you keep find thing you need to do quickly.Menus and navigations is a very important part of your website design, so don't put your menu along the right side of the page then on the next page you put it across the top of the page and so on, this way you lost your consistency.

2- Size Limitation:
Do keep you web pages light and easy to load.

Web pages usually include images (JPG, JPEG, GIF), multimedia contents like videos ( AVI, Quick time videos, Real player), and animations like Flash movies. When you add up the size of all those contents your web site pages add up and get bigger and bigger in Kilobytes, so your web visitor have to wait to download all these contents.
Now think about it, if your user have to wait more than 20 second or so to see your web page! You probably loosing this user and you will lose all of you audience this way.
To be safe, keep your web page size less than 50 to 60 Kilobytes.

3-Page resolution:
Do Keep your web pages viewable at 800 X 600 resolution.

Most of web designer as myself have computer monitors that can display higher resolution like 1280 X 1024 and higher, so when you design with this monitors your design is fit with these resolutions, but when you view it on a lower monitor with less resolution your design is totally missed up and the user have to scroll up and down, he may also need to scroll left and right to show sides of your web page and this is the bigger problem.
To be safe, design most of you websites for the 800 X 600 or 1024 X 768: this way you satisfy about 50% of your web audience.

4- Site Map page:
Do create a site map page for your website.

What is site map? Site map is a normal web page include all of your web pages and all your website sub web pages name and section, every web page text link is include in this page and hyperlinked to the physical page organized in proper categorization.
A lot of website users and visitors the first thing they do when they land on your website is searching for the site map, this way they find the what they looking for fast and easy.

5-Navigation styles:
Do use a slandered design styles for your website navigation.

Some web designers like to design a different navigation look, some designer like to design a funky navigation using a complex shapes or a hard 3d shapes to get a different look for these navigation.
Be smart, complex navigation design make people confused, some times it's very hard to find the page link you looking for.
For the second time, take Windows, Mac and Linux applications as an example for you, big companies like them search, research and spend a huge amount of money to figure out what type of navigation that works faster and easier, and as you know they keep it simple.
Do keep your navigation left sided or toped in your website pages and keep the consistency of all pages.

6-Colors:
Do keep your web colors matched, clear and simple.

All web designers knows that there is good web colors and there is bad ones, let's have an example of the bad combination, Red and Blue over each other is a very bad combination, when you have a red background with a blue text over it, it's very hard to see clearly, so avoid all this hard colors combination and try to select a good color combination that match with each other, good on the eyes and clearly and easy to read.
Try to choose the light colors in the background like the white color for instance, and black text color is the best on the eyes.Try to avoid dark background, especially black background, also avoid light colors on text, especially white color text because it's very bad for printing as well.
Be safe, keep good colors combinations: color match with each other, good on the eyes and clearly and easy to read.

Our tutorial comes to an end, now you have your list of Do's and Don'ts.
Until next time, have fun.

Published by Peter R

A senior web developer with wide experience in web programming languages like JavaScript, AJAX and CSS. I've a great interest in web technologies and gadgets since collage. Famous for writing How-to guides a...  View profile

4 Comments

Post a Comment
  • Kassidy Zuniga3/26/2011

    This is a great article. Background music and no marquee's are two great tips of what not to do. You are trying to attract a client, not annoy them to the point of leaving, haha.

  • zemkarlos3/6/2011

    I was very pleased to find this site.I wanted to thank you for this great read.
    http://www.tomhelmandpartners.com/site-for-sell/

  • zemkarlos3/6/2011

    I'm impressed. You're truly well informed and very intelligent.Thanks a lot.<a href="http://www.tomhelmandpartners.com/site-for-sell/">site for sale</a>

  • Naty9/2/2010

    Basic, but informative and well written. Good Job

Displaying Comments

To comment, please sign in to your Yahoo! account, or sign up for a new account.