The 6 don’ts of Web Development

Over the years i have found (usually the hard way) that there are a lot of guidelines we need to remember whenever we are working with the web. So keep these in mind next time you're building a website!

Don’t forget to clear your floats.

So maybe you have gotten use to clearing your floats, personally I think a lot of people either never understood the concept fully or stuck too long with tables because you can’t run into that problem with them. Anyways here is the don’t. Whenever you have a float you should remember that the floated element kind of literally floats in the page, hence if there is a wrapping element it will not get pushed down under the floated element, here is a picture to help you visualize this.

And if you want to see it in code here you go :

<div class="wrap" style="border:1px solid #666; width:200px;">
<div class="floated" style="float:left; height:200px; border:1px solid #CCC; width:150px; margin-left:10px;"></div>

So the idea here is that the floated element, well its floating hence you will need to clear it i just recently found a very interesting solution (compared to using the old class clear that has the clear:both; property in the css styles) you can use the br tag with the attribute clear and then you choose whether its a left float a right float or both which happens when you have an element or 10 that are floated left and right. Here is how that looks:

<br clear="all" />
<br clear="left" />
<br clear="right" />

Seems to work pretty well, so have fun and remember clear your floats.

Don’t use tables for your website layout… any part of it

So i’m sure 90% of you are like “Obviously!!” but i keep running into web developers that either still use tables for everything (which is such a headache to work with) or they use a hybrid which is something i didn’t even know existed until recently. The hybrid consists of using div’s for the main layout elements but inside those divs you lay a heavy groundwork of tables. Anyways the headache is still the same, tr tr, td, td, tr ,td td… IM LOST let me be td’s. Anyways please don’t use tables for your layouts, tables can only and should only be used in a few scenarios, forms (although you can do a pretty smack up job of making forms work well with divs and labels, i’ll have to write an article on that) and tabular data of course. Last but not least you can use it for calendars… and that’s it. Anything else is not okay, so please spend some time read some tutorials and learn to use divs the web is moving forward move with it.

Don’t overuse absolute positioning

I’ll admit it is  a little addicting to use absolute positioning because its the easy way out. But its usually not the best solution. I try to use absolute positioning only when there really is no alternative available for me. Absolute positioning for some odd reason has some minor cross browser issues, and there are other reasons i won’t go into. Try to  float elements, and use good markup that positions elements naturally. Absolutely positioned elements can be a huge frustration later in the cycle of building a website.

Don’t forget that not everyone has JavaScript enabled

For the most part i’ll admit that most people have JavaScript enabled, but it’s always a good policy to make sure if javascript isn’t enabled to either notify the user and ask them to enable it, or to create alternative methods of accomplishing what the javascript was suppose to do. Using the noscript tag is a sure way to accomplish either.

<noscript>Hey turn that JavaScript ON!!!</noscript>

Don’t overestimate the browser compatibility of your users

Even though websites are dropping IE6 support like wild fire you should see if dropping support for browsers is okay with your visitors. Check your analytics, or just make sure there is minimal support. Minimal support means that even though the website is not pixel perfect the same in every browser at least it is fully functional. Personally i believe that ecommerce websites always need to support most browsers. Web Development blogs on the other hand… well i personally don’t support ie6 on this blog. Anyways make sure that you are supporting all browsers at least minimally!

Don’t forget that your website will be viewed by all types of monitor sizes

I have definitely gotten much better at this as of lately. You should realize that your website will be seen by monitors of all sizes, from tiny laptop monitors, to gigantic web developer monitors. Recently I had to modify my fully fluid layouts to a restricted width, no one likes reading a huge paragraph in one line of text, it’s just not fun. I’ve actually found that the websites i design on my laptop do best against multi-browser size monitors. Hence i have one big monitor and one smaller 17 inch monitor on my desk as of the time i’m writing this article. Again looking over your analytics can really help you figure out which size you want to mainly aim for, 800x600 IS a thing of the future so consider that next time you design.