Majin Planet

HTML and Web Design 10 Do’s and Don’ts

HTML and Web Design 10 Do’s and Don’ts

1. DONT - Page Counters: Page counters do one thing for you, nothing at all but make you look like an amateur. They make your design look very mess. Also the last thing you should be letting your visitors know is your web stats. Because generally people don’t care how many visitors a web site gets, and chances are you don’t want people to know. Why would you want to let your visitors know you haven’t had a hit in weeks?

Back in the old days, it was cool to have page counters, just like it was “cool” to have a splash enter page. Today however if you have a good host, most come with server stats and logs. In many cases they are better then these on page site counters. And if your on a host with such server stats, either you didn’t know (find out) or you don’t care. In either case you should be worrying about your content and what you offer, because your pages stats wont sell any products.

2. DONT - Flashing or Blinking Text: Please for the love of god. Stop it. They only place you should see such types of text is on a neon sign you commonly see at nude bars or web sites made in the mid 1990’s. No one likes to see them unless you have naked people on your site.

First off lets discuss about the important point about content/text on a computer screen vs print. People read the test off a computer screen which at most is about 1/4th the speed that they do on paper. This important fact tells us that we should not only keep what we want to say on the web short and sweet, but don’t use flashing text! I will say some of my articles have been some what long (maybe that’s why no one reads them) and all I can say is that well I guess I have a bigger mouth online (and a keyboard for that matter) then I do off.

3. DO - Web Page title should make Sense: If anything the core attribute of the web is the title tag. The page title is a must, as it also is what is used by search engines to list results. If your site has no title or a poor title, it will rank bad or may not be ranked at all. This is what it looks like:

CODE

<title> </title>;

Trust me I have seen many, many pages with no title tags and all you get (in most browsers) is a the pages URL. People look at the page titles to get a clear idea of what the page is about. If you have a page on how to brush dogs, the page title better have Brushing Dogs.

4. DONT - Force People to use new browser special plug-in’s to view a site: Unless your one of those sites like Microsoft which people have to get on, don’t do it. It limits your audience, because most web users don’t know anything about the browser’s special features. With today’s standards you can easily build a fantastic looking web site using HTML and CSS without having to force your visitors to jump threw hoop after hoop just to see what you have to offer.

Many web sites that gain loads of traffic force users to do such things with flash and even some sites force you to use Internet Explore only. Trust me, just because Microsoft does it doesn’t make it the right.

5. DONT - Use Frame sets: Why? Back in the old days they where used because HTML had very crappy layout capabilities. However today we have CSS positioning that is well supported by every major browser you see today. So why don’t we use them, even know they are part of standard HTML? Most new to web design use them because its simple and easy but most of them have trouble creating and using them properly. Frame sets tend to make a web site harder to use and when it comes to search bots indexing them, its a nightmare to say the least.

6. DONT - Try and cheat your way into top Searches: In the past, the webmaster community used various methods in an attempt to reach a high rank in the search engines. Many of these tactics included putting hundreds of key words on the page as invisible text. These tactics may have had some limited success in the old days, but today it spells doom for your site.

If you don’t believe me, try and fool Google and you and your web site will die in a very horrible and very painful death. The last thing I will do here is list on how to get high rankings. Remember this: If you want a high ranking, create good content, its the foundation of how to get top rankings and traffic to your web site.

7. DONT - Use Chat Rooms: I myself have made this mistake in the past (and not to long ago too) generally they sound like a great idea, but generally most people don’t give a crap about chat rooms. The worst thing then having a chat room is having a empty chat room. Who wants to hang out at the local night club with no one but you inside? So unless your site has about ten million visitors every hour and taken on the subject matter of your site, a chat room may be up your ally, other then that stay far, far away from then.

8. DONT - Use Flash Intros: I’m happy to say I’m one of the few who never used them, however if I knew how to use flash chances are I would have. About 3 years ago (ever take a few) Flash Intros where all the rage of the internet. The fact is that most of the sites who had them, didn’t “need” them. As it turns out the “skip intro” button is the 2nd most clicked on the web today. Don’t waste your time with them, in my opinion Flash should only be used in special situations.

9. DONT - Use Under construction pages: Another one I have done in the past, mostly because I get lazy. Basically just forget it because this type of page should never even go up. If you have links that are pointing to a page such as this, disable it until the page is up and running. If your page is truly “Under Construction” and has content on it that is ready to be seen by your visitors, just post a “last updated” date and make sure you get the new content in place soon. Generally, every page on the web is “Under Construction” as web pages are always changing, adding and removing content. What I’m talking about here are those cheesy under construction images on the page.

10. DONT - Use Background Music: Some web designers like the idea of a little background music to get you into the mood, there are some special cases like on MTV or Disney web sites which this method can work. But for the most common web site its a very, very bad idea for a few reasons:

• Music files are typically pretty”heavy” and large and they take time to download. Most web surfers will not think that it’s worth the wait. Besides most computers simply don’t have sound capability so its very silly to force these people to download something they can’t use.
• Unexpected music/sound from ones PC can be very annoying and can cause problems, for example when your at work.

If you want to have music on your web site, there are many options for you to use. Today there are many flash base sound blog or “Radio Blog’s” which allow uses to turn on and off and only downloads when the users chooses too. As always if you want to just give users the option to hear some music, like your bands latest songs, or some other sound clip like a interview or web cast, the easiest solution is to create an MP3 of the audio and have it link by either a flash player, Quick Time Player or Windows Media Player. There is always just out right linking to the file itself.

11. DONT - Use Internet Explorer’s Marquee Tag: Internet Explorer came out with a infamous “marguee” tag in version 3.0. This is an HTML tag, which only worked in IE, allows you to create a stock quote like horizontal scrolling display of text, images any any other HTML tag’s you put inside it.

Generally the text was first made for the reason of scrolling text, however while web desingers like this idea (and would scroll about anything) but most web surfers hate them. Scrolling test makes your page look cheap and it takes away from the rest of the content.

Tickers make sense when the information is display in a constantly changing state. Stock quotes are the best example a way to use scrolling text. Other then that its a bad idea. If you do however do use scrolling text in this way, there are very simple javascript’s out there which give the same effect and are more support on all the browsers today.

12. DO - Structure your pages consistent throughout the site: Some web designers get bored (such as myself) and some like to or decide to create a different structures to each one of their pages (on the same web site). A classic example is when you find the navigation on the top of the web page, only to click to another section to find it now on te right side going down.

Web surfers like to have things the same in terms of design and navigation. This is why all windows programs have the same look to them, as with Mac programs. Keep your desgin simple and easy and constistent on all pages.

13. DONT - Use automatic pop-up windows: Take it form me, I have learn my lesson, also don’t use javascript base ones to get past pop-blockers. If anything they are the most annoying thing you can do to someone when they visit your web site.

Generally pop-ups are used to present ads and other “non-core” material to the user. If you are thinking of using some part of your content in a pop-up window, try and work on intergrating it into your current pages with out the pop-ups. Today, every web browser comes with pop-up blockers. Most web users have them turn on to high. So take it from me, just forget them and the web will be a better place.

14. DO - Use standard styles on Navigation: Sometimes a web designer may want to tempted to use some funky, crazy looking navigational system. Things like all the navigational links arranged in a circle spinning around a 3D cube or something. This confuses the hell out of people.

Big companies like Apply and Microsoft have spent a tone of money to figure out what kinds of navigation works, and what they found is that left side navigation and top navigation is what people are use to. Think about it, all programes generally have the navigation on the top or the left side. Now I’ve done the right side before which generally works ok, but for me it felt out of place. You best bet is to stick with left side and top or a combo of both.

15. DONT - Automatically Resize the browser windows: On my god what a nightmare this is. Some designers will come up with a style that looks best with a particular screen size, so they will use javascript which will resize the window to fit that size. This just pisses off the visitors, people will typically set their browsers to the window size they like, so don’t mess with it.

If your layout requires you to do a window resise, you need a new layout. These are many factors that can affect the screen that visitors use. The Window size, screen resolutio, browser, text size, etc. As such you should try to create a fluid and flexible page layout, because it almost impossible to control all the factors.

16. DO - Design with 800 x 600 resolution in mind: OK, so you have a computer with a screen resolution of 1280 x 1024, and you want to fill in all that space, good. But remember that not everyone has a resolution of 1280 x 1024 at home. Most web users surf the web at 800 x 600 because most like the big text.

Scrolling web pages vertically (top to bottom) is ok, as long as it’s not more than two and half pages or so. But scrolling horizontally (side to side) is really bad and annoying to visitors. When designing your web page, if you want your site to look good on those 800 x 600 size screens but still want to fill as much space as you can on those super screens, build a fluid and flexible layout, I recommend using max-width and mini-width so that the page wont go smaller then 800 x 600 and no bigger then 1000. You must also remember the space the scoll bars take so if you are desinging for 800 x 600, the width should be no more then 780px.

17. DONT - Automatically redirect Users: Sometimes web designers will use javascript or other ways to automatically redirect visitors from one page to another for various reasons. This can confuse people, and it can cause problems with the search engines. If you want to send people to another page, create link with a little explanation as to where they’re going.

The general theme here is that you should not try to take control away from the visitor except under special circumstances. If you are moving a page to another page, its ok to put up a redirect for that page to the new page, but be sure to fix all your links, and the only people who will be seeing the redirect are those who may have bookmart the old page.

18. DO - Create 404 Error pages: We’ve all seen them, 404 pages. On websites that are served by Windows servers it is a plain white page that has this text:

QUOTE

The page cannot be found The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.

Not very friendly and not useful to visitors, since the page itself doesn’t give you much information. The solution is that you can create your own 404 page and have that appear instead of the practically useless one that you see above.

A 404 page is just an HTML page like any other, most web host today have it up where you can create error pages for each error. A good 404 page will be clear to the visitor that they found the right website, but just not the right page. 404 pages should include a link back to your “home” page and maybe the site map page. If you have a search engine built into your site, then include the search too.

19. DO - Create a Site Map: A site map is a simple web page with text links to all the websites sub-pages organized in proper categories. Most people will use a site map if they can find one. Generally its a good idea to submit your Site Map to the search engines as you chances of getting link goes up. Google even now has a site map generator you can use for such a reason.

20. DO - Keep You pages under 60k: Web pages can be made up of text, images (GIF, JPEG and PNG) and multimedia content like Flash movies and QuickTime video etc. When you add up the size of all those elements in kilobytes, you get the total amount of kilobytes someone will have to download to see the entire page. This is typically referred to as simply the “page size”.

If someone has to wait over 10 seconds to see your page, you are probably losing most of your potential audience. High speed Internet is growing steadily, but the majority of surfers are still on 56k dial-up modems. That means that you are begging for trouble if your pages are over 60k.

21. DONT - Center everything on the page: Center text is something that should be used limited, in many cases only for header, but not always. Plain out centered text is hard to read. Think about reading a book where all the text was centered. Print rules have been refined for well over a hundred years, so my guess is that it works. When ever in doubt about your layout, think about how they do it in print.

OK so with that in mind, for western cultures, left justified text (text that’s line up to the left side) is the best way to go. you can center major parts, such as titles, but nothing more then that.

22. DONT - Reply on javascript to much: In general terms this is no longer that big of a don’t. The reason is most browser if not all support javascript. However there is still a good 10% left who can’t use javascript or they turn it off. So basically this means if you use javascript for a key part of your site, you can generally block there access.

One problem I’ve seen the most are javascript base menus for navigation. That doesn’t mean you shouldn’t use them, but always make them with people who don’t have javascript in mind. For example, make sure the links that would normally drop down point to a page with those links already. or give some sort of other means such as a bottom static links or a site map.

23. DONT - Use busy background images on your pages: If your going to use a titled background on your web site, using either GIF, JPEG or PNG, you want to use a solid color.

Once upon a time ago, titled backgrounds where all the rage on the Internet, however today they have become, well a bad idea. It can work if your title image is nor noisy and is a solid color (if you can use a background color). If you use a title image of say a cat or other picture such as that it will make your page unreadable. Remember, that white and black background work just as good as some crazy background image.

24. DO - End URL’s with Forward slash marks in links: Alright this is a point that may sound a bit nerdy to some, but listen to me there is a point to my madness here. Basically this is a little simple way to speed up things for the user. If you type in an address that has no page, for example (www.majin-planet.com) you want to put a trailing slash after it. Which should look like this:

CODE

<a href=”http://www.majin-planet.com/”>Majin Planet</a>

As you can see, right after the “.com” there is a forward slash “/”. If a link where pointing to a particular web page, you wouldn’t add the forward slash at the end. For example:

CODE

<a href=”http://www.majin-planet.com/index.html”>Majin Planet</a>

By adding this mark (see first example), we remove a step that otherwise the web server and browser would have to take. Removing this extra step can give you a speed boost. Why? Go to any web site like www.cnet.com, type in “www.cnet.com” and watch the browser address bar flash to “www.cnet.com/”. What did you notice? It added the “/” mark. You may not seem like much these days with high-speed connections, but on a server end it makes a big difference.

25. DONT - Set your type to all Capital letters: Using ALL CAPS in your content is a good way to emphasize and title an element. But don’t create a long sentences or paragraphs in all caps, its plain out hard to read.

26. DONT - Have more then a few works in italic: Italics are a good way to draw attention to text, but it makes text hard to read on a computer screen. Using italics for one or two words on occasion is good. But if you go crazy with it and start using italicized text all over the page, it becomes to hard to read and you be left with out any visitors very fast.

27. DONT - Using more then a few words in Bold: Generally this is the same as the last two, either way keep it to a reason in your text. Mostly you only want to use bold for headers or captions, for the reason to bring attention to the particular word(s). If you make it all the same, your going to lose your impact.

28. DONT - USE the H5 and H6 tags: Why? Because the out put text is so small its to hard to read. These tags make your text smaller then the browser default size and it makes it bold. You can make the font size bigger by using Style Sheets and setting H5 and H6 to a bigger size you want, but it will be unreadable for those who turn off style sheets.

29. DO - Turn off borders around links graphics: As you know that graphics turn into links or in other words buttons by placing the Image tag inside the link tag. By default the browsers will surround the image with an ugly color (base on your default link color) to show us that its a link. Your images which are acting link buttons, show look like a button, so there is no need for a border like this.

You can generally turn off image borders by added “border=0″ to your image tags or you can set the img class to default “border:0px;” which will effect all images on your page.

30. DO - Put alternate text (alt attribute of the image tag) in all your major images: Alternate text is text that you insert in your image tags, that is used by text only browsers. Text only browsers are used by the blind to surf the web since images won’t help them very much the alternate text in your image tags is read by the text only browsers in place of displaying the images.

You should put meaningful information in the alternative text that will benefit those who can’t see and it will also help you with the search engines. The alternate text is inserted in your image tags like so:

CODE

<img src=”images/picture.jpg” alt = “this is a web page graphic.” border=”0″>

The alternate (alt) text will also be displayed as a tool tip in Internet Explorer.

NOTE FOR MACS: The ALT doesn’t work on the MAC, so instead you can use the ‘title’ attribute instead. There is no reason you can’t use both on the same tag.