Web 2.0 Layout Mark 2 - More Gradients

on Thu Aug 28 11:26:02 GMT 2008 in XHTML and CSS and viewed 28533 times

The first Web 2.0 Layout designed by me was primitive at best. With no gradients, annoying colors, and boring design, it left a lot to be desired. That’s where this layout steps in. It brings more to the table in the terms of design and the usability. Overall, when you are done reading the tutorial, you will have yet another easy and good looking layout under your belt.

Setting Up Your Page

Of course, let’s jump right into it.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-us">
<head>
<title>Web 2.0 Layout 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* Style */
</style>
</head>
<body>
<!-- HTML -->
</body>
</html>

This is your general page. It’s XHTML 1.0 Strict. There’s CSS. HTML.

Adding Markup

As a CSS layout, you should be able to style around your content. So write some HTML before anything else.


<h1>Web 2.0 Layout 2.0 - The New Web 2.0 Layout</h1>

<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#feeds">Feeds</a></li>
<li><a href="http://www.shadow-fox.net">Shadow Fox Network</a></li>
</ul>

<a href="#">A Link</a>

<p>Let's talk a lot about Web 2.0</p>

<p>You have:</p>

<ul>
<li>Centered Layout</li>
<li>Rounded Corners</li>
<li>Two gradients</li>
<li>Big text</li>
<li>Whitespace</li>
<li>CSS only website</li>
</ul>

<p>Here's some more text</p>

<h2>More Links</h2>

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

<div id="footer">
This has web standards.<br />
<a href="http://validator.w3.org/check/referer"><img src="valid.png" alt="Yay standards!" /></a>
</div>

This is a pretty easy page for now. There’s the header describing the page, the navigation (all in an unordered list), a couple paragraphs, more links, and one div, which is a footer. Now this layout is definately a little Web 2.0 (there’s definately plenty of whitespace), but you need something much cooler. So let’s start the styling.

Step One of Styling


* { margin:0; padding:0; }
BODY { font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
    line-height:160%;
    font-size:14px;
    color:#000;
    background-color:#FFF; }

a { color:#507EA1;
    padding:.3em; }
a:hover { color:#507EA1;
    background-color:#CFDCE6;
    padding:.3em; }

And here’s your result.

So this is your style for now. Your layout’s definately looking much better. The font is a lot better, there’s a better line height, and the links just look plain cooler. But the no margin/padding on everything (the asterisk * selector) can look bad on the page.

Step 2: Starting on Web 2.0

Another mark of Web 2.0 is the centered layout. So why don’t you add that and start with the footer and navigation.

New CSS


* { margin:0; padding:0; }
BODY { font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
    line-height:160%;
    font-size:14px;
    color:#000;
    background: url(gradient2.jpg);
    background-repeat: repeat-x; 
    background-color:#FFF; }

h1 { color:#596F80; }
h2 { background-color:#ccc;
    padding:.3em; }

a { color:#507EA1;
    padding:.3em; }
a:hover { color:#507EA1;
    background-color:#CFDCE6;
    padding:.3em; }
a img { border:0; }

#layout { width:85%;
    margin:0 auto;
    padding:.3em; }

#navigation { padding:.5em;
    margin-top:10px; }
#navigation li { display:inline;
    margin-left:10px; }
#navigation li a { font-size:1.2em; }

#footer { border-top:1px solid #596F80;
    padding:.5em;
    margin-top:5px; }

And some HTML:


<div id="layout">
<!-- The previous HTML -->
</div>

As you can see, there’s some more style added. One thing that’s great is the layout. All it is is just one <div> and the style applied to it is to be 85% of the screen. Something that looks a bit better, even though there is no border.

Also new is the navigation: each <li> inside of it is displayed in a line, with a small margin. The links also have a larger size, just to distinguish them from regular links.

Also added was some more style for the headers. The h2 now has a background color to make it stand out a bit more, and images inside links have the border taken off of it to look a bit better.

Also a point of interest is the background image on the body.

The Body CSS


BODY { font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
    line-height:160%;
    font-size:14px;
    color:#000;
    background: url(gradient2.jpg);
    background-repeat: repeat-x; 
    background-color:#FFF; }

As you can see, there is a background image that will repeat over the x axis, or horizontally. This gradient is just:

One simple small picture that extends to the whole webpage. I created this in under a minute in Photoshop with the gradient tool. It’s 1 pixel wide by 300 pixels tall. Looks really good as a background.

Now that this is done, here’s what you have: Web 2.0 Layout Step 2

It’s looking pretty good. But there’s still a few things missing…

Finally! Rounded Corners and The Rest


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-us">
<head>
<title>Web 2.0 Layout 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin:0; padding:0; }
BODY { font-family:"Trebuchet MS", Verdana, Arial, sans-serif;
    line-height:160%;
    font-size:14px;
    color:#000;
    background: url(gradient2.jpg);
    background-repeat: repeat-x; 
    background-color:#FFF; }

h1 { color:#596F80; }
h2 { background-color:#ccc;
    padding:.3em; }

a { color:#507EA1;
    padding:.3em; }
a:hover { color:#507EA1;
    background-color:#CFDCE6;
    padding:.3em; }
a img { border:0; }

#layout { width:85%;
    margin:0 auto;
    padding:.3em; }

#navigation { padding:.5em;
    margin-top:10px; }
#navigation li { display:inline;
    margin-left:10px; }
#navigation li a { font-size:1.2em; }

#footer { border-top:1px solid #596F80;
    padding:.5em;
    margin-top:5px; }
</style>
</head>
<body>
<div id="layout">

<h1>Web 2.0 Layout 2.0 - The New Web 2.0 Layout</h1>

<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#feeds">Feeds</a></li>
<li><a href="http://www.shadow-fox.net">Shadow Fox Network</a></li>
</ul>

<a href="#">A Link</a>

<p>Let's talk a lot about Web 2.0</p>

<p>You have:</p>

<ul>
<li>Centered Layout</li>
<li>Rounded Corners</li>
<li>Two gradients</li>
<li>Big text</li>
<li>Whitespace</li>
<li>CSS only website</li>
</ul>

<p>Here's some more text</p>

<h2>More Links</h2>

<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

<div id="footer">
This has web standards.<br />
<a href="http://validator.w3.org/check/referer"><img src="valid.png" alt="Yay standards!" /></a>
</div>

</div><!--/layout-->
</body>
</html>

There is your web 2.0 page in its entirety. Even with the rounded corners. I believe that’s the only thing that was added. The rounded corners is of course my all time favorite markup using the Nifty Corners. It’s really great.

And here’s your final layout!

Conclusion

This Web 2.0 isn’t just about layouts of course. These two layouts are mostly meant as a satire of the layouts. If you are looking for actual web 2.0 layouts that look much more like the trend, you can definately find them. This is meant to be web 2.0 with my spin on it, which is usually without all the bells and whistels. Web 2.0 is also about the AJAX, the Ruby on Rails, and more. You should always look into trends, even if you aren’t going to join them.

Ideas For Extension

Add a Live Search
More Gradients
A Badge
Fixed Position Banner

The Shadow Fox Network - Ruby on Rails, PHP, XHTML, CSS, Javascript, and XML Tutorials