Want to learn bad web design

I am new to webdesign. All the sites teaching you the good parts of web design, so I can straight away start using those stuff. But I don’t want to end up with shallow knowledge but want to have true, deeper understanding of everything. I am not going to use those bad parts in real world, but want to do atleast one practice layout in those stuff… this will give me better idea of “feeling” how bad those things are, instead of just reading it is bad. It will also help me to understand how things evolved over the time, this understanding will come handy at times.

Now, I have hard time in finding those sites which are bad, for example: table based layout. Can you please give me sample websites which used table based layout, site which use entirely absolute positioning and other such bad layout style one should not use? Thank You.

You don;t have to look far there are plenty of sites about on google that [URL=“http://www.topdesignmag.com/20-examples-of-bad-web-design/”]highlight bad design.

Have a look through a few of my latest posts and you will see another example (although I wouldn’t be so rude to say which one it is).

Thank You Paul. Those sites seems listing bad sites based on how it looks, aesthetics and usability. I am particularly looking for bad sites on technical front… ie. sites using tables for layouts, absolute positioned layouts etc ( couple of sites in that list in table based, but those are too bad usage of table design, which wont serve the purpose of learning from it).

I found templatebox.com containing 1000s pure table based layouts which seems good to learn table based layouts, so that one can learn why we should not use those approach. Also this site: mtsindia.in. All these looks professional table based layouts ( as in 2006 standards ).

Please tell me sites which use absolute positioned layouts. Other than table based and absolute positioned, what else lay-outing approaches considered bad? Thank You.

Here are some sites that will inspire you:

http://www.dokimos.org/ajff/ <- If you have Photosensitive Epilepsy do not visit this site
http://web.archive.org/web/20100813142028/http://havenworks.com/
http://www.theworldsworstwebsiteever.com/

I would say, try to dig up old posts on old forums, where people state what they’re trying to do and also their horrid code. Then code it up yourself, and try to make changes to that code to get desired effects.

One problem with this approach though is some bad code out there is getting around some particular browser’s quirks, and may do completely different things in younger browsers. But it’s something you can try.

You can practice a few bad things and probably make decent-looking pages: try copying a page’s visual layout but do it in tables. Try again in frames. If you have a copy of Flash, see if you can emulate a page entirely in Flash, including all the mouseovers and clickable elements. Try making a page entirely of hundreds of nested divs, each with 5-10 classes on them, like Drupal markup but also with inline styles. Make use of tags like font and center, attributes like bgcolor and valign, to see what you get (again, modern browsers might ignore some of these things nowadays… for example, only IE seemed to ever do anything with bgsound, and webkit has recently stopped responding to anything with “text-decoration:blink”). Due to this sad trend, O POINTY BIRDS doesn’t look in modern browsers the way the gods intended. Go get a copy of IE6 and Firefox 2 and take a gander at that beauty.

Lastly but maybe more importantly, practice making HTLM emails. This is an area where arcane knowledge of inline styles and nested tables is actually useful for more than learning. People raised on good wholesome web standards are constantly fighting HTML email templates. Kids these days never heard of the “gap under images in table cells”, muhahaha.

I hope this helps. Honestly I learned a lot simply by trying to build stuff to other peoples’ specifications. While trying to do that, with web standards, I still ran into a lot of hairy stuff, showing me that while I could read somewhere how a tag or a property is supposed to work, I didn’t actually fully understand it, or recognise what some browser was doing with it.

You learn the most from debugging.

AhHAHaHaHa!!! Finally… a page that doesn’t crash Netscape! :lol:

Thank you Stomme, Your suggestions will be really useful. That html email usecase suggestion is quite good.