Sourcebench - the web developer’s workplace

Welcome to our first step of the CSS Slicing Tutorial, called - The Basics.

Right here, right now, we will introduce you to some of the more simple and basic things and methods in getting the job done.

The job is already known - to slice a design into a nice, clean CSS website. But first, we will take some time to talk and discuss different kinds of layouts and design, so that some of you, who are not really familiar with this, have some ideas thrown at them and get their gears going.

Let’s get this party started!

Alright, first of all we need to familiarize ourselves with the design of the website. What will it look like, what components will it hold, where will the specific components go, how will they be positioned in relation to the header, the navigation, the content and the footer. Will these be all the things we want/need on the site? Questions, questions, and even a bit more questions. Well, I say we have to answer them first.

Step 1 – The Header

Let us use this Simple Template as an example layout. This was made for us by Emil Nikov and he constructed the template in a very simple and easy to understand manner. It covers all the basic points of a clean CSS website.

First of all, the header, of course is the upper part of almost every website ( I say almost, because I have seen almost everything on the web and I bet many of you have, too ). It should consist of a logo of some sort – mostly web 2.0 based style like a nice shiny text with a few gradient effects on it or anything that tickles your fancy. It is your logo after all, I just make suggestions.

Let’s take a closer look at the Simple Layout's header. Its width and height are relatively good, the width is perfect, on the other side – many people may prefer a bigger or smaller height size – depends on your choice really and mainly the content bellow the header. The Simple Layout has a nice clean header with the logo to shine on it. A good example – you might want to make the whole header one big picture of a group of images or the something that will be in tune with your logo design, it is not necessary in any way for it to have a clean background. Absolutely, no – you can do with it whatever you wish, what is ABSOLUTELY necessary is the size. It should not be really big, the thing is to have a nice balance between the header and the rest of the site that will be visible bellow the header.

So, when a visitor first comes to the site, he/she sees the header – and no matter how attractive it is, there will be a lot of people that will want to see something even more interesting bellow it. By that I mean, a part of the actual content of the site that will grab the attention. We will cover that later on the subject.

In conclusion, the header is an important part of the website, of course, but nobody said that it should be definitely and utterly the upper most part of the layout. There are websites that contain their navigation menu bellow the header or even as a side bar of the main content. As we can see our navigation is in the header which has its good points - the best is that it is extremely visible, easy to comprehend and use.

Let us continue.

Step 2 – The Navigation

We already picked up the topic, considering the navigation part of the website’s design. It is vital – whit out some kind of navigation interface a website stands crippled. Yeah, sure you can put some links or pictures anywhere and have them hold links to the other parts of the site. Even place a sitemap that will make it more understandable, but who would want to check the damn sitemap every five seconds, because they can’t find their way around?! Some of you might be thinking right no : “Oh my God, what the hell is this guy talking about?! There can’t be people that are just that delusional and do something like that…” Well, I hate to say this, but there are MANY that will do and even have done those things and some, even worse.

Anyway, as I was saying – the navigation should be placed in a space that is absolutely 100% easily visible, to stand out just enough so that people can have it poking their eye when they want to explore your website. As, we already discussed, there are websites that use their navigation menu in different parts/corners of their website, but we have an example so we shall have a look at it. The navigation menu is placed right next to the logo, so it is easily seen and it uses big text-like "buttons". The main idea is kept and fulfilled. Also, you can place a search bar placed next to the navigation menu somewhere - that is if your website is stuffed with a lot of content. It provides even more flexibility for navigation purposes.

Notice how the background of the navigation bar is in tune with the uppermost part of the header and the footer. This is a good way to keep the design, as many people say, clean and tidy.Many people might think that there is actually no background and they wont be half wrong, but there are a lot of uses of the "lack" of background - like the introduction section has a clean red background that adds up to the style of the overwhelming white space behind it. Let me repeat myself, this is not even NEAR to being necessary, it is just a good idea. The thing is that many websites that have their designs praised, use a similar method – they use a color scheme and abide by the colors of the scheme. For a website like, say, the SourceBench it is obvious what the color scheme consists of – green, dark blue and white. To use the best of the color scheme “method” you have to make a visual of how the content and the components of the layout will be placed and to think of a nice way to color then – using gradient or whatever you find handy to make the “parts” of your site in tune with one another. Some people even use the chess style design – where if they use an even number of colors, like for example :blue, green, white and orange – they make their design in a way that same colors never touch one another. A green header, a white content , an orange navigation bar as a side bar in the main content, and finally a blue footer.

Most of the websites out there use a single color for background or a gradient type background that goes all the way from the top to the bottom. Then they place a colorful header and the navigation with the content just look like they are flying in the nothingness. May sound a bit sarcastic, but it surely works in some cases.

What you should definitely remember is that – the navigation menu has to be one of the first things that a visitor sees when he comes to your website. Also, it has to be big enough or stylish enough to be easily seen and recognizable.

The main thing about a website is to make it easy to operate, the visitor has to work with it without unnecessary thinking about where he/she should click to go to the place he/she wants. The answer has to be right in front of them and to be DAMN obvious. That does not mean to place large signs – CLICK HERE and the like. CSS is all about clean and style.

Alright, here comes :

Step 3 – The Content

The content is the place where all the information is hold. Where the “Welcome” usually is and a short description of what this website is all about and/or what it offers. Something like one short sentence to give the basic idea and to be easily read – like in a glimpse of a second and it is already in the brain processed and apprehended. If that is actually happening to visitors – then its job is done. Something like this may work in some cases : “Welcome to MyWebSite! Here, you can find blq blq and learn a lot about blq blq blq, especially if you are interested in blq blq, we have a section/department/whatever that does blq blq about blq blq! Enjoy blq blq blq now!”

You get my drift.

So, we are not here to discuss what kind of information the content should hold, it is entirely up to you and the idea of your website. We are here to talk about the content’s layout. Yeah, the content can be a simple big rectangle with text thrown in it and some pictures and stuff. That may and actually has worked for many websites and portfolios, but there are many different styles of content. We will discuss some basic ones, like having a side bar in the content.

Step 3.1 – A single side bar.

The content can be consisted of two rectangles – I am saying this so that you can have a rough image in your head. Like, having a side bar on the right side of the web page, to use it to place some pictures, links, and additional information. Yet again, let’s have a look at the Simple Layout template – the content is made out of two “rectangles” as we called them or two columns. The one on the left presents the actual content or the main content, information about the product on the site can be found here, when the other, on the other hand, has some , info considering the company, maybe its background and contact listing. As you can see they are “split” from one another by an invisible line, thus making it easier for the visitor to grasp the concept. The layout structure stands invisible, as it should be, making the design clean and having a strange “mint” like theme. The Simple Layout is a great example of this kind of two column content design.

Step 3.2 – Multiple Columns

The Multiple Columns design is usually made out of three columns – in most cases the middle column contains the actual content and information the website provides, the left/right column has the images, ads, additional info and the like in it. The other column ( being left or right depends entirely on the designer ) is made out or made into all sorts of things – the navigation bar, link listing or may have the same purpose as the other ones – as I said before, it depends on what the designer wants to accomplish or what kind of website he/she is building. It is rarely a fact, the columns to be the same width – they are almost always the same height, but the width is usually different. The middle one can be bigger in contrast to the other two so that if you put the main content in the middle one – you have more space for more information. I think you see my point here.

Step 3.3 – Other

There is a huge amount of different website designs out there – some so unique that you can barely comprehend the way they are done. Others, imaginative and creative, yet simple. I would recommend to look around some CSS Inspiration Galleries that we have listed on the SourceBench – there we have gathered some of the best CSS galleries on the net. You can get inspired – as the name says – from just browsing for a few minutes – they have extremely interesting content. A lot of people – a lot of design ideas!

Step 4 – The Footer

Many of you may think that the footer is something that is child’s play or even not important at all. I have seen websites that absolutely exclude any kind of footer and the bottom of the web page looks like it is still under construction. No matter what many of you think, the footer is actually much more than just a piece of graphic to “finish” the site. Actually, its job is much more demanding and important. While the header contains the welcoming part of the website, logo and stuff like that – may even contain the navigation – Different people, different designs – the footer has to keep the copyright information, credits , date or clock or whatever and why not even an alternative text navigation or sitemap. Do not neglect the footer in any way, it shows how serious you actually are and compensates for lost space or badly made designs, that actually lack it.

Ok, enough of that – what about the size of the footer? The Simple Layout's footer is the type most used. It is small and simple, providing the required information for this kind of footer and thats it! On the other hand If you take a look at the SourceBench’s footer you will see that it is a large one. This is a not a very common situation, but in this case it is good to be that big. You must have noticed that there is some copyright information as well as text navigation type sitemap where you can go directly to different sections and under sections of the site. There are also some ads there which I like to call – bonus ads – as they are into a corner that is not very much seen, but they are cheap. This way there are more opportunities to advertise others.

This is just one way to make the footer, but we will use the Simple Layout's footer as it is much more suitable for almost any kind of website. As you can see it has a very small height and, of course, the width is the same as the rest of the page. This, as many other things considering design, is not a MUST thing. The width can be changed corresponding to the way you think it should be, but I am just telling you how it must be for the common standards.

Everything else beyond that is entirely your decision.

These here, everybody, were the basics of the basics of the common, or standard, CSS web design. The main “ingredients” of the recipe to make yourself a nice clean web site.

In the near future we will continue the tutorial with the next and more advance step – the actual slicing of the web design into a full fledged CSS web site.

So, as I said many times before, STAY TUNED!

This entry was posted on Tuesday, October 23rd, 2007 at 4:18 pm and is filed under webdesign. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.