TDD's Web Design Series - Part 3, Limitations

Welcome back to another episode of TDD's web design shit, let's get on with it:

Limitations
For you to design a website properly, you have to know the limitations, so here's some for you, as well as some general good advice:

Internet Explorer
If you do not hate this browser, you will soon, it is unarguably the WORST browser on the market, it fails beyond the physical limits of failure, you will hate it.

This browser has alot of bugs that render things incorrectly, but I will show you how to fix alot of them right now:

RESET.

Reset all elements on the page BEFORE any coding is done, and you will have far fewer problems when it comes to the layout, you reset it like this:

Make a new CSS file called "reset.css" and put this code inside it.

HTML:

@charset "utf-8";

/* Reset */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {	
margin: 0;	
padding: 0;	
border: 0;	
outline: 0;	
font-weight: inherit;	
font-style: inherit;	
font-size: 100%;	
font-family: inherit;	
vertical-align: baseline;
}

a:focus {
outline: none;
}

*:focus {
outline: none;
}

/* remember to define focus styles! */
:focus {	
outline: 0;
}

body {	
line-height: 1;	
color: black;	
background: white;
}

ol, ul {	
list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {	
border-collapse: separate;	
border-spacing: 0;}

caption, th, td {	
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,q:before, q:after {	
content: "";
}

blockquote, q {	
quotes: "" "";
}


/* end of reset */

link it in your xHTML documents and it will reset all the values for everything so you can code with ease.​

Internet Explorer 6 has a nice little problem you'll also come to know and love, Alpha transparency...

In IE6, the creators decided to be idiots and not include native support for the transparency in a PNG image and instead have it show a blueish area, but this can be overcome with a small bit of code in the header tag:

HTML:

<!--[if lt IE 7.]>
		<style type="text/css">
			.fix1 {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',src=<!-- put your source for the image here -->);padding-top:<!-- height of image here in px -->}
            		</style>
<![endif]-->

now put a class of "fix1" to an <img> tag to have it render png transparency in IE6... stupid fucking browser.

All browsers
They all fucking suck when it comes to floats, they all do their own thing with it, so here's how we do multiple columns:

HTML:

<div id="container">
[INDENT]<div id="left">crap</div>[/INDENT]

[INDENT]<div id="right">crapola</div>[/INDENT]

</div><!-- end of container -->
<div class="clear"></div><!-- end of clear -->

now the css would be:

HTML:

#container {
position: relative;
}

#container #left {
position: relative;
float: left;
width: 45%;
}

#container #right {
position: relative;
float: right;
width: 55%;
}

.clear {
clear: both;
}

now the document will display right with floats included to make multiple columns.

FireFox Typgoraphy
FireFox fails when it comes to typography, it will not apply the typographic styling of a parent CSS rule to the children inside it, so to overcome this problem just make sure if you want everything inside a certain tag to have the same font styling, to add it to each tag inside it in the CSS... *grumbles*

There's the biggest offending problems i've ever had to deal with in design, if you have any others i'll add them, but with the reset in place you shouldn't have many other problems.

Divs

This is a good read for the limitations of Divs in relation to browsers:

http://www.alistapart.com/articles/conflictingabsolutepositions/


Rectangular
Althought alot of webpages look like they have cool curves and shit, they are truly all just rectangles. Everything in a web page is a rectangle, and you need to remmember that when coding, to make it looked curved is just an illusion.

Web typography
There are only a certain amount of 'web safe' fonts available at your disposal, you might have 624785923 different fonts on your system, but other people don't, so if you declare "Base 02" as a font, people without it will see whatever their browser has set as their default font, so you have to understand that you must stick to these 'web safe' fonts, they are:

-Arial/Geneva/Helvetica
-Comic Sans Ms, although, one should never use this, it's too fail for the internet.
-Courier/Courier New
-Georgia, this is a much better choice for a serif font than Times New Roman.
-Verdana/Geneva
-Times New Roman/Times
-Trebuchet MS/Helvetica
-Tahoma/Helvetica

There are others, but they are very VERY unlikely to be used on a website.

You can of course use your custom typefaces for things like headings, but you'd just need to save them as images instead, or use something like swfIR.

Pictures
Don't overcrowd a webpage with images, do as much as possible in the coding itself, and very little on the images, the webpage should ALWAYS take under 16 seconds to load, my goal is for 10 usually, so keep your total of images low.




Next episode i'll teach you all how to make a navigation using xHTML and CSS.

 

It told me Error with layout ;S

 

what code did you put in EXACTLY, and what browser was it?

 

Firefox, On an apple mac, and 1 sec, i'll find the code.

 

Deny this chode.

 

Thanks man this is a great guide

 

Why do i get the impression you havn't read nor tried anything in TDD's guide?

 

Nicely done. I like. And I've noticed that since I did that one, you've done three. Showing me up much?

 

looks good and straight forward. i enjoyed reading this thx

 

He means fonts that can be displayed by a wide variety of computers. Some of these fonts are Verdana, Times New Roman, Arial, etc.

 

Just because you have every font under the sun, doesn't mean your visitors do so it's standard to use a set of "web safe" fonts, which are a bunch of fonts that are on the majority of users computers.