There have been a few posts asking for site deisgn reviews. One major critique i have for all of the designs posted are the complete non-existence of any web standards compliance.
What are web standards? Basicly web standards are the techniques and code markup you should conform to while designing a web page/site.
In almost every design posted in this forum (actually, every design except my own) I see people using tables to propogate their layout, which is a big no-no in the world of web standards.
Why can't I use tables?, you may be asking - well first off lets look at what a table is supposed to be used for. The purpose of a table is to display tabular data, like the results of a poll for example:
Table to show result to 'do you like fish?':
YES | No
Boy | 10 | 20
Girl | 20 | 10
The above is a crude example of a table, this is what the <table> object should be used to display.
So what do we use instead?
You use CSS (cascading style sheets) and XHTML (extensive hypertext markup language).
What are the advantages of using CSS and valid XHTML?? Well lets take a look under the hood of one of the designs posted on this forum. For this little example i have chosen http://www.dblog.uni.cc/templates/csindus/ which was created by gosh.
Gosh's version of this site uses the below code:
http://www.taekwondo-uk.co.uk/css/example1/goshcode.txt
The code is 191 lines in length, is very hard to read and understand - it is also very hard to change the style of the page if you wished to. For demonstration purposes I'm going to re-build the site using CSS and valid XHTML.
When loading, the above page loads all the images and is "blocky" - each bit loads at different speeds depending on the size of the img used to make up the site.
I have re-designed the site and the code is below:
The above code is 49 lines long. As you can see it is much simpler and is much more organised and its readability is improved greatly. The above code wont work on its own (it will but won't appear as intendid). So we apply the following style that is kept in a Cascading Style Sheet.
The above CSS code is only 93 lines in length. 49 + 93 = 142, the entire site is now much smaller than the original 191 lines.
So how is the new code different to the old code?? The new code allows the designer to change the sites layout,design and colour scheme by just editing one file, if tables were used then each individual page would need to be edited.
Also the page loading time is greatly improved, the site now only has to load 2 images (the header and background) instead of the 9 or so images on the old page.
To see the difference for yourself, use the links below to see the new and old pages.
New improved code:
http://www.taekwondo-uk.co.uk/css/example1/
Old code:
http://www.dblog.uni.cc/templates/csindus/
I hope this post has opened the eyes of some of the avid web designers here. Adopting these techniques as early as possible will greatly improve your work and raise the level of accessability your sites will enjoy.
For more information on the advantages of using CSS and XHTML click here.
What are web standards? Basicly web standards are the techniques and code markup you should conform to while designing a web page/site.
In almost every design posted in this forum (actually, every design except my own) I see people using tables to propogate their layout, which is a big no-no in the world of web standards.
Why can't I use tables?, you may be asking - well first off lets look at what a table is supposed to be used for. The purpose of a table is to display tabular data, like the results of a poll for example:
Table to show result to 'do you like fish?':
YES | No
Boy | 10 | 20
Girl | 20 | 10
The above is a crude example of a table, this is what the <table> object should be used to display.
So what do we use instead?
You use CSS (cascading style sheets) and XHTML (extensive hypertext markup language).
What are the advantages of using CSS and valid XHTML?? Well lets take a look under the hood of one of the designs posted on this forum. For this little example i have chosen http://www.dblog.uni.cc/templates/csindus/ which was created by gosh.
Gosh's version of this site uses the below code:
http://www.taekwondo-uk.co.uk/css/example1/goshcode.txt
The code is 191 lines in length, is very hard to read and understand - it is also very hard to change the style of the page if you wished to. For demonstration purposes I'm going to re-build the site using CSS and valid XHTML.
When loading, the above page loads all the images and is "blocky" - each bit loads at different speeds depending on the size of the img used to make up the site.
I have re-designed the site and the code is below:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Clan Name - Slogan</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
@import url(./styles/style1.css);
</style>
</head>
<body>
<!-- Wrapper Div -->
<div id="wrap">
<div align="center" id="header">
<img src="images/cs_03.jpg">
</div>
<div id="pagebody">
<div id="leftpage">
<div id="navmenu">
<a href="#">» Home </a> <a href="#">» Forum </a>
<br />
<a href="#">» Team </a> <a href="#">» Links </a>
<br />
<a href="#">» Etc </a> <a href="#">» Etc </a>
</div>
<div id="etcmenu">
<ul>
<li><a href="#"><img src="images/button.jpg" alt="Please keep at least one button intact." width="88" height="31" border="0"></a></li>
<li><a href="#"><img src="images/button.jpg" alt="Please keep at least one button intact." width="88" height="31" border="0"></a></li>
<li><a href="#"><img src="images/button.jpg" alt="Please keep at least one button intact." width="88" height="31" border="0"></a></li>
<li><a href="#"><img src="images/button.jpg" alt="Please keep at least one button intact." width="88" height="31" border="0"></a></li>
<li><a href="#"><img src="images/button.jpg" alt="Please keep at least one button intact." width="88" height="31" border="0"></a></li>
<li><a href="#"><img src="images/button.jpg" alt="Please keep at least one button intact." width="88" height="31" border="0"></a></li>
<li><a href="#"><img src="images/button.jpg" alt="Please keep at least one button intact." width="88" height="31" border="0"></a></li>
<li><a href="#"><img src="images/button.jpg" alt="Please keep at least one button intact." width="88" height="31" border="0"></a></li>
</ul>
<p id="buttonlink"><a href="#">Your Button Here ?</a></p>
</div>
</div>
<div id="rightpage">
<div id="content">Your content goes here.</div>
</div>
</div>
<div id="footer">Designed by <a href="mailto:[email protected]">Darkslide</a> and re-designed for illustration purposes by Solitude.</div>
</div>
</body>
</html>The above code is 49 lines long. As you can see it is much simpler and is much more organised and its readability is improved greatly. The above code wont work on its own (it will but won't appear as intendid). So we apply the following style that is kept in a Cascading Style Sheet.
Code:
body {
background: #111111;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 0px 0px;
padding: 0px;
text-align: center;
}
/* Text & Content Styling */
a {
color: white;
text-decoration: none;
}
/* Page Items */
#wrap {
background: #111111 url(../images/cs_04.jpg);
color: white;
margin: 0px auto;
margin-bottom: 40px;
min-height: 100%;
position: relative;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
text-align:left;
width: 780px;
}
#header {
margin: 0px;
margin-bottom: 5px;
}
#pagebody{
background-color: #646464;
padding: 10px;
width: 757px;
}
#leftpage {
float: left;
width: 200px;
margin-right: 20px;
}
#navmenu {
background-color: #646464;
border: 3px solid black;
color: white;
height: 100px;
padding: 10px;
text-align: left;
}
#etcmenu {
background-color: #646464;
border: 3px solid black;
color: white;
height: 300px;
margin-top: 20px;
padding: 10px;
text-align: center;
}
#etcmenu ul {
list-style: none;
text-align: left
}
#etcmenu ul li {
padding: 2.5px;
}
#buttonlink {
color: white;
font-size: 14px;
font-weight: bold;
}
#rightpage {
float: none;
margin-left: 20px;
margin-right: 20px;
padding-left: 20px;
}
#content {
padding: 20px;
text-align: left;
}
#footer {
background: transparent;
margin-top: 20px;
margin-bottom: 20px;
position: relative;
bottom: 0;
text-align: center;
}The above CSS code is only 93 lines in length. 49 + 93 = 142, the entire site is now much smaller than the original 191 lines.
So how is the new code different to the old code?? The new code allows the designer to change the sites layout,design and colour scheme by just editing one file, if tables were used then each individual page would need to be edited.
Also the page loading time is greatly improved, the site now only has to load 2 images (the header and background) instead of the 9 or so images on the old page.
To see the difference for yourself, use the links below to see the new and old pages.
New improved code:
http://www.taekwondo-uk.co.uk/css/example1/
Old code:
http://www.dblog.uni.cc/templates/csindus/
I hope this post has opened the eyes of some of the avid web designers here. Adopting these techniques as early as possible will greatly improve your work and raise the level of accessability your sites will enjoy.
For more information on the advantages of using CSS and XHTML click here.
![¤]´)÷¤--§îr Äürøñ--¤÷(`[¤](/forum/data/avatars/m/0/64.jpg?1550430717){kind=avatar}
