Designer’s Block? Steal from Microsoft!

Wait a minute! Just hear me out…

The hardest part of creating a good layout and design for a web page is the starting point. After that hurdle, the concept should be easy to produce. There are, of course, other minor potential hiccups down the road like different browsers behaving in an unexpected manner to standard code, but those are usually resolved after the first step any way.

Disclaimer

I use the term “steal” in this context obviously as parody. I have no intention of using someone else’s hard work for personal gain.

This is primarily geared toward relatively novice designers or those who want to have a good basic starting point to create their own variations.

The best place to get a basic starting point, believe it or not, is right in Internet Explorer.

Start it up and open up a new tab.
You will be greeted with this :

Hello! I'm just waiting to be stolen... er... borrowed from

Hello! I'm just waiting to be stolen... er... borrowed from

The majority of your font selection is already in place and, I don’t know about you, but fiddling with the stylesheet in this page gives me some ideas on where to go. Of course, in typical Microsoft fashion, even this little bit of CSS and HTML is full of bloat. But we can remedy that very quickly.

Basic layout

First create a very basic page scaffold.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xml:lang="en" lang="en">
<head>
	<title></title>
</head>
<body>
	<div class="page">
		<div class="header">
		   
		</div>
		<div class="body">
		
			<div class="footer"></div>
		</div>
	</div>
</body>
</html>

As you can see, it’s a basic XHTML page with a title, a “page” div, header, body, and footer.  I placed the footer inside the body for clearing purposes. It just makes things simpler if you want to introduce columns… Which I will.

Before creating anything else, let’s put together a basic CSS file and place it inside a /css folder (keep stylesheets seperate from images, JavaScript etc… for clarity).
I like to put all of my Core, Screen, and Print specific styles in one CSS file for ease of maintainability. There are, of course, some browsers that cannot handle this. But considering the majority of web users are going to be using an up to date browser that’s at least Firefox 2, IE 6, Safari 3, Opera 9 and so on, I don’t think it will be a major issue. Besides, you can always go back and add in more functionality for these browsers.

I think it’s more important to keep to the basics and good style practices first.

Without further ado:

Basic CSS

/* Common */
body
{
	font-family: "Segoe UI", Tahoma, Sans-Serif;
	font-weight: normal;
	font-size: medium;
}

/* Screen */
@media screen
{
	/* Reset */
	body, div, p, h1, h2, h3, h4, h5, h6, form, fieldset,
	legend, input, select, ul, li, table, td, th, hr
	{
		margin: 0;
		padding: 0;
		border: 0;
	}
}

/* Portable device */
@media handheld
{
	body
	{
		background:#fff;
		color:#444;
	}
}
/* Printer */
@media print
{
	body
	{
		background:#fff;
		color:#444;
	}
}

What’s going on here? (You may recognize some of the code from a few previous posts)
Well, first there’s the common code which will either trickle down to the other styles or be overridden.

Then there’s the “screen” stylesheet, which is for your computer browser. “handheld” For mobile devices and “print” for the printer, of course. Note, the only “special” formatting I used so far in the last two is setting the background to white and font color to a very dark grey/brown. This will save your eyesight on a handheld and ink in your printer.

In the “screen” styles, I remove all the padding, margin and borders present in commonly used HTML tags. This is to make sure we can make these elements look exactly alike in subsequent code, but avoid multiple padding, margin and border attributes. It’s just easier to deal with all of them at once and start with a blank slate.

The Microsoft stylesheet

Let’s go to that CSS we borrowed from the IE tab (ErrorPageTemplate.css)…
The first block contains the following :

body
{
	font-family: "Segoe UI", "verdana", "arial";
	background-image: url(background_gradient.jpg);
	background-repeat: repeat-x;
	background-color: #E8EAEF;
	margin-top: 20px;
	margin-left: 20px;
	color: #575757;
}

The first font is “Segoe UI” set to the document body. This is a font that comes with Windows Vista.
Well, in case this font isn’t available, notice in our stylesheet, I used Tahoma as the second default font. This is its predecessor and the next closest match. Followed by a generic Sans-serif that most browsers on most platforms would substitute their own default if the previous two are unavailable.

Now, I’d like to use the same default background color (a very light blue/grey) and text color (a very dark grey) as the IE tab page and the same font (we already used that). But I don’t wan’t to use the background image.

Body styles

Add the following to the “screen” section of our CSS file :

 body
 {
	font: normal 86% "Segoe UI", Sans-Serif, Tahoma;
	background: #E8EAEF;
	text-align: center;
	padding: 0 0 20px 0;
	color: #575757;
 }

Note, I’m using the shortcut font formatting here :
font : {style} {size} {font-family};
This is recognized by most modern browsers.

I also centered the text alignment, because I wanted the wrapper to be placed in the middle of the page, but the content within will be left justified.

And now we can proceed to formatting tags…

Let’s start with div’s first :

div.page
{
	text-align: left;
	width: 90%;
	min-width:800px;
	max-width:1300px;
	margin: 20px auto 0 auto;
}

The “page” is basically our wrapper. I didn’t want the content to extend all the way to edges of the page, but I still wanted it to flex a bit. So setting a large percentage with a minimum and maximum width is a good way to keep your layout fluid without having your content be squashed if the window is too small or overly stretched on a very high resolution monitor.

The margins are set in the shortcut method going clockwise :
margin: {top} {right} {bottom} {left};
So we have a 20px top margin to keep things neat and off the borders, and an automatic right and left setting. This is so Firefox and other Gecko based browers will adjust the placement and not keep the wrapper confined to the left.

And moving on to the header…
I may want to add a dropdown menu or something similar. But for that I need to set the position to relative and set some fixed height I can change later.

div.header
{
	min-height: 140px;
	position: relative;
}

The “min-height” again is similar to “min-width” we used earlier in the “page” div. It doesn’t set a fixed height that the header can’t expand beyond. It just sets the minimum so we have room to work.

In other words, the header is allowed to expand to whatever width is needed.

Before going further, let’s test out this layout…
Insert the stylesheet into the <head> tag of our original scaffolding:


Now, insert a few dummy text lines in a paragraph just above the footer and see what this looks like.

A bit of refinement

Now we can work on the innards.
First, I’d like the background to be white. It’s just easier this way. Let’s modify the “div.page” block :

div.page
{
	text-align: left;
	width: 90%;
	min-width:800px;
	max-width:1300px;
	background: #fff;
	margin: 20px auto 0 auto;
}

Now we can move on to the rest :

div.header, div.body, div.footer
{
	clear:both;
}

Clearing “both” means any floated content above or below the header will be pushed out of the way.
This way, content in the header will stay in the header. Content in the body in the body will stay in the body and the same for the footer.
There will be no overlap here, so the page will be clearly seperated into a header body and footer.

The reason I put the footer inside the body div in our scaffolding is so that if there are any content in the body that may overlap (for example “floated” content”), the footer will still be the last element shown.

One thing that is rather clear is that the lines are too close together.

We can fix this by adding the following “p” block on our CSS :

p
{
	line-height:200%;
}

This makes the lines nice and separated.

Let’s look at what we have thus far.
I guess I don’t have to worry about being sued by Microsoft now, because this layout looks nothing like the original tab styles. In fact, we’ve created a layout with provisions for three types of devices (Computer, Mobile, Printer) in one stylesheet and the layout isn’t all that complicated either.

More content

Let’s extend our scaffolding a bit.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xml:lang="en" lang="en">
<head>
	<title>Page Title</title>
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>
	<div class="page">
		<div class="header">
			<h1>Site Title</h1>
			<p class="info">Site Description.</p>
		</div>
		<div class="body">
			<div class="content">
				<p>Lorem ipsum...</p>
			</div>
			<div class="footer">
				<p>Copyright &#169; 2008</p>
			</div>
		</div>
	</div>
</body>
</html>

What’s going on here?
Well, I added in a page title which is just “Page Title”. Then wrapped the paragraph we added earlier inside a “content” div. This is so we can do extra formatting on it later on.
I also added in a Copyright paragraph into the footer… Note the &#169; stuff… This is the HTML numeric code for the copyright symbol. I used this system, so it will have a chance of appearing unaltered in most browsers.

Basics complete…

Onward to Part II!

2 thoughts on “Designer’s Block? Steal from Microsoft!

  1. Pingback: Designer’s Block? Steal from Kyle Neath! « This page intentionally left ugly

  2. Your own blog, Window Shade “Designers Block? Steal from
    Microsoft! | This page intentionally left ugly” was truly worth commenting
    down here in the comment section! Simply just wished to point out u really
    did a remarkable work. Many thanks -Moshe

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s