Designing Your Very Own Web 2.0 Layout
on Sat Jul 05 08:32:55 GMT 2008 in XHTML and CSS and viewed 33859 times
Web 2.0 is probably a term you’ve heard before many times. With it comes ideas of AJAX, rounded corners and badges. And whitespace. Lots of that. It usually favors the minimalist approach, so we’re going to try to capture this essence in a tutorial here. (Note: No AJAX, No Gradients, or badges. I’m working on that. But does include gigantic footer.)
Web 2.0 is probably a term you’ve heard before many times. With it comes ideas of AJAX, rounded corners and badges. And whitespace. Lots of that. It usually favors the minimalist approach, so we’re going to try to capture this essence in a tutorial here.
You can see the final version here.
Introduction
So to start you need your basic outline. It should look easy to use and still kind of fancy even without styles. Also, this must be totally valid. For this layout you’re going with XHTML 1.0 Strict. That should be good.
Now we start with the basics:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Web 2.0 Design</title>
<style type="text/css">
/* CSS will go here... */
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<ul id="navigation">
<li><a href="http://www.shadow-fox.net">The Shadow Fox Network</a></li>
<li><a href="#rss">RSS Fodder</a></li>
<li><a href="#resources">Resources</a></li>
<li><a href="#tutorial">Back to the tutorial</a></li>
</ul>
<div id="content">
<h1>Web 2.0 - Designing made easy</h1>
<p id="introduction">
Web 2.0 is another new fad. The design is simple and it can be easy to design for it.
</p>
<p>You can put some content here as well. It's just to serve for the rounded corners. It could be your
company motto, or maybe an about, whatever man.</p>
<h2 title="resources">Resources Used</h2>
<p>For this layout I used:</p>
<ul>
<li><a href="#">My Brains (Yes I have multiple)</a></li>
<li><a href="http://wellstyled.com/tools/colorscheme2/index-en.html#">Color Schemer</a></li>
</ul>
</div>
<!--footer-->
<div id="footer">
<h2>Gigantic Footer</h2>
<p>That's right, no Web 2.0 Footer is complete without a gigantic footer.</p>
<p>Why? I don't know. Just go with it. Let's put some more links.</p>
<ul>
<li><a href="Tutorial">Back to the tutorial</a></li>
<li><a href="#feed">The Feed</a></li>
<li><a href="http://www.photoshoplab.com/web20-design-kit.html">Web 2.0 Image Creation Guide</a></li>
</ul>
</div>
<!--footer-->
</body>
</html>
The result of your design can be found here.
Now that’s not bad. Just two <div> elements. One h1 element to describe your website, that’s pretty prominent. There’s a navigation above. The rest is all paragraphs and lists, with a couple of h2 elements for some subheadings. And of course you need a separate <div> for the footer. Just because it has to be gigantic.
Starting to Style
You don’t want to leave your page naked do you? No, of course not. But still, why don’t we barely clothe it. It’s Web 2.0, man.
So to start, we need some better stylings on those links, and maybe set up the font and header settings as well.
h4, CSS
* { margin:0; }
BODY { font-family:Arial, sans; }
h1 { color:#596F80; margin:.5em; }
h2 { margin:.5em; }
p { margin:.5em; }
a { color:#647D8F; }
a:hover { color:#648F7D; }
We use the asterisk (*) to apply a margin of 0 to all elements. I wouldn’t like to do this, but for some reason the DOCTYPE declaration seems to add a line under the navigation. And besides that, the navigation is eventually going to sit up against the top of the browser window. Other than that, it’s some pretty basic styling. Adding some color to the h1 element and to the links, and then a margin to the paragraphs and the headers because of that margin:0 applied to them.
You now have this: a barely styled layout with some pointless text. (The url is supposed to mean 1.5, not step 15.)
Adding a Bit More Color And Design
Now to basically finish it off, you need to make the navigation stand out a bit and be more navigation-y. And the footer really needs to scream “I’M A FOOTER! I HAVE LINKS!” You know, like web 2.0.
So slap in this CSS
#content { margin:.5em; }
#navigation { list-style:none;
background-color:#406480;
padding:.5em; }
#navigation li { display:inline;
padding:3px; }
#navigation li a { color:#CFDCE6; }
#navigation li a:hover { background-color:#50A17E;
padding:1em;
color:#CFE6DC; }
#introduction { font-size:18px; }
#footer { background-color:#647D8F;
padding:.5em;
color:#FFF;
margin-top:20px }
#footer a { color:#CFDCE6; }
#footer a:hover { color:#CFE6DC; }
The content has a pretty basic margin. Just to get it off the “walls” of the monitor. Then the navigation has a background color and padding. And I took off the dots or squares or whatever of the list. And they now display in a line. Also, the introduction paragraph was made a bit bigger to stand out. And of course, finally, the footer was made a different color to stand out. And make it more footer-esque.
So now you have a pretty good looking layout.
But of course you’re saying: “Ben, you promised rounded corners!” And so I did. So let’s get to that.
The Finishing Touches (And Rounded Corners)
Now with the addition of the rounded corners you’re going to need to change the HTML around a little. But that’s ok. It’s a simple layout. We’re simple people. But we love rounded corners. And it’s not a big change. Plus you can be flexible. It’s Web 2.0 man.
And again, I got the rounded corners CSS and HTML from this guy. I’m not a CSS genius like that.
Find in the HTML the section that looks like this:
<h2 title="resources">Resources Used</h2>
<p>For this layout I used:</p>
<ul>
<li><a href="#">My Brains (Yes I have multiple)</a></li>
<li><a href="http://wellstyled.com/tools/colorscheme2/index-en.html#">Color Schemer</a></li>
</ul>
You’re going to change that to look like this:
<div class="box">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="boxcontent">
You can put some content here as well. It's just to serve for the rounded corners. It could be your
company motto, or maybe an about, whatever man.
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
A bit messy, but it validates perfectly and looks cool as well. So just put in the final CSS:
#navigation li a:hover { background-color:#50A17E;
padding:1em;
color:#CFE6DC; }
.box h1 { padding:0; margin:0; color:#FFF; font-size:20px; border-bottom:1px solid #A07850; }
.box p { color:#FFF; font-size:14px; padding:.5em; }
.box { background-color:#647D8F;
margin:10px; }
.boxcontent { padding:.5em;
color:#FFF;
margin:2px; }
.boxcontent span { font-size:12px; }
b.rtop, b.rbottom { display:block; background-color:#FFF; }
b.rtop b, b.rbottom b { display:block; height:1px;
overflow:hidden; background-color:#647D8F; }
b.r1 { margin:0 5px; }
b.r2 { margin:0 3px; }
b.r3 { margin:0 2px; }
b.rtop b.r4, b.rbottom b.r4 { margin:0 1px; height:2px; }
Besides the whole mess of styling for the box, I also snuck in a little hover trick for the navigation bar. Now when you mouse over a link in the navigation, it goes green and gets bigger to let you know that one: this web site is cool, and two: this is the link you’re about to click on.
Wrapping It Up
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Web 2.0 Design</title>
<style type="text/css">
* { margin:0; }
BODY { font-family:Arial, sans; }
h1 { color:#596F80; margin:.5em; }
h2 { margin:.5em; }
p { margin:.5em; }
a { color:#647D8F; }
a:hover { color:#648F7D; }
#content { margin:.5em; }
#navigation { list-style:none;
background-color:#406480;
padding:.5em; }
#navigation li { display:inline;
padding:3px; }
#navigation li a { color:#CFDCE6; }
#navigation li a:hover { background-color:#50A17E;
padding:1em;
color:#CFE6DC; }
#introduction { font-size:18px; }
#footer { background-color:#647D8F;
padding:.5em;
color:#FFF;
margin-top:20px }
#footer a { color:#CFDCE6; }
#footer a:hover { color:#CFE6DC; }
.box h1 { padding:0; margin:0; color:#FFF; font-size:20px; border-bottom:1px solid #A07850; }
.box p { color:#FFF; font-size:14px; padding:.5em; }
.box { background-color:#647D8F;
margin:10px; }
.boxcontent { padding:.5em;
color:#FFF;
margin:2px; }
.boxcontent span { font-size:12px; }
b.rtop, b.rbottom { display:block; background-color:#FFF; }
b.rtop b, b.rbottom b { display:block; height:1px;
overflow:hidden; background-color:#647D8F; }
b.r1 { margin:0 5px; }
b.r2 { margin:0 3px; }
b.r3 { margin:0 2px; }
b.rtop b.r4, b.rbottom b.r4 { margin:0 1px; height:2px; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<ul id="navigation">
<li><a href="http://www.shadow-fox.net">The Shadow Fox Network</a></li>
<li><a href="#rss">RSS Fodder</a></li>
<li><a href="#resources">Resources</a></li>
<li><a href="#tutorial">Back to the tutorial</a></li>
</ul>
<div id="content">
<h1>Web 2.0 - Designing made easy</h1>
<p id="introduction">
Web 2.0 is another new fad. The design is simple and it can be easy to design for it.
</p>
<div class="box">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="boxcontent">
You can put some content here as well. It's just to serve for the rounded corners. It could be your
company motto, or maybe an about, whatever man.
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<h2 title="resources">Resources Used</h2>
<p>For this layout I used:</p>
<ul>
<li><a href="#">My Brains (Yes I have multiple)</a></li>
<li><a href="http://wellstyled.com/tools/colorscheme2/index-en.html#">Color Schemer</a></li>
</ul>
</div>
<!--footer-->
<div id="footer">
<h2>Gigantic Footer</h2>
<p>That's right, no Web 2.0 Footer is complete without a gigantic footer.</p>
<p>Why? I don't know. Just go with it. Let's put some more links.</p>
<ul>
<li><a href="Tutorial">Back to the tutorial</a></li>
<li><a href="#feed">The Feed</a></li>
<li><a href="http://www.photoshoplab.com/web20-design-kit.html">Web 2.0 Image Creation Guide</a></li>
</ul>
</div>
<!--footer-->
</body>
</html>
Actually, not really. Compare it to the two or three column layout, and it’s not that bad. Less thinking to position elements because there’s only one column. So much easier, right? It might serve you well in the future. So go forth, be prosperous, and trendy with your web 2.0.
I finished this before Led Zeppelin IV finished.
Helpful – very helpful – tutorial. Thank you for posting it, I, personally, found it exremely useful.
by Anonymous