Welcome to the first episode of this exciting adventure of building a whole CSS template on WordPress for the Web Design Bureau which will also be an opportunity for proposing hands on CSS, architecture, development and web design tutorials. Hence first things first, we have to plan the work ahead. This plan should cover all the aspects of the coming work in terms of colour, style, layout, options, css, code, cross browser compatibility and interaction. This is where we are also going to collect important features and small elements that will be used as a basis to the design. What you’ll also need is some paper and a pencil because this is where things start.

The Need.

As you have surely understood over the months this site has been running, the Web Design Bureau concentrates on content first rather than on graphics or what not. There are contextual ads running around and there is also the “Mini Blogging” stuff that is held up on the right hand side of the page. An inbuilt search engine is available and some pages also. That’s practically all that’s used on the site. The design will have to take these into consideration. So this is where we get into documentation.

• What makes a good blog design? (Which could called what makes good web design.)
• Find the perfect colours for your website.

Identifying the style.

Identifying the style would involve giving a certain stylistic orientation to the design. This process would answer to such questionning like, how many columns will the site have, what percentage of the screen the site will occupy, what type of logo will be designed or how bold will we be in applying a type of design? Just imagine how this process must have been lead to get results like the sites of 24 ways or Duoh. Taking into consideration the needs expressed in the previous section, we will be aiming for a “minimalist” style. At this stage of the process, we’ll have to get inspiration. So here we go and check minimalist styled sites and read some articles on minimalist design over the Web.

• Minimal sites gallery
• Is minimalistic design more effective?
• 10 easy steps to become a better Web designer

Drafts.

Once you have your idea, fire up… you sketchbook and your pencil. Start doodling. Set down the ideas. See what works best. Keep in mind that you have some constraints such as your search engines field, your ads and what not. Having a wire frame like this will help you stay focused when you’ll start designing for the browser.

You’ll also need to check some important elements such as page width (I usually work at 960px fixed width as I’m sure that a 100% of my content will be shown on a 1024px wide standard screen). Think about your forms as they’ll come in the picture while building the comment box. Think about the H elements, the blocks, your comments, block quotes, comments, lists…etc.

For more inspiration on element building, you can check one of my favourite resource sites: Pattern Tap, where’ll you’ll get a whole load of ideas for each and every part of your template.

From these drafts we’ll build the final wireframe on our favourite design tool, Fireworks or Photoshop. Check back soon for another episode of this project.

Welcome to the brand new posts of 2009 on the Web Design Bureau of Mauritius. To kick off this new year and add some nice design approach to the blog, in case it loses its Web ‘n’ Seo niche award, a new series will be launched in the tutorials category. This series will be quite special.

Until now, the Web Design Bureau of Mauritius has been running on free “mucked up” wordpress themes and its time to give it some branding and personality. I will be taking the most out of this branding and theming work to publish different tutorials on web design, CSS and Web Standards to give an insight on my approach of Web design.

This will in no way be a fixed recipe but a series of ideas and examples you can use as inspiration or basis to learn, improve or acquire knowledge in Web designing. The design and integration processes will be the core of this series and will be published once a week. So keep in touch with the Web Design Bureau of Mauritius to see this series. You can follow my different updates on my twitter here.

Leave a comment on THE TEMPLATICA POST to participate to the Web Design Bureau end of year contest.

Links are the core elements of the Web. Hypertextuality is the basis of thhe web, the idea behind which the Web exists. It is the primary force driving the web. The whole definition and the concept are fully detailed and explained over at the W3C links section. This tutorial’s objective is to show you what elements are used when doing simple link styling using CSS.

Here is a sample link:

<!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Link styling test document</title>
    </head>
    <body>
        <p>
            This is a link to the <a href="http://www.webdesign-bureau-of-mauritius.com">Web Design Bureau</a>.
        </p>
    </body>
</html>

If you put this link in a simple web page you will get something that looks like the following :

This is the default text style and link style of any web browser: 12px, Times New Roman, Black for the text and blue for the link. When you place your mouse cursor over the link, an action called hovering, nothing really happens to the text but the arrow pointing to the link is transformed into a pointing finger. You can click on the link and if you come back on the original page, you’ll see that the colour of the link has changed to blueish purple indicating that the page that is linked has already been visited using this application. Cleaning the browser’s cache will set it back to blue waiting to be visited again.

These default elements are not usually beautiful to look at and need to be styled to get into your design. We’ll therefore explore the simple possibilities of link styling in css. The different states through which the link goes as described above are driven with pseudo-classes. Some pseudo-classes are not cross browser compatible but the links ones are generic and parsed by all the browsers available on the market. You can act on these pseudo-classes to style your links.

Fonts

First things first. Times New Roman is a horrid character set but you can still get it to look great. How? You can follow Internet guru Dave Shea’s tutorial on taking back Times New Roman and give it some pizzaz or just change the whole body font style.

In your document head, add this piece of code. (This is done just for the sake of testing. Your standardised use of CSS should be done in a seperate CSS file.)

Dave Shea style

<style type="text/css">
body {
	font-size: small;
	line-height: 20px;
	word-spacing: 0.15em;
}
</style>

Otherwise, you might use a sans-serif font like Arial.

<style type="text/css">
body {
    font: small Arial, Helvetica, sans-serif;
}
</style>

By this time, your text should look like this.
Dave Shea style

Sans-serif

Link pseudo-classes

The selectors for each of the pseudo classes have the following forms

• the selector for normal links is a:link
• the selector for visited links is a:visited
• the selector for hover links is a:hover
• the selector for active links is a:active

Please be warned that the pseudo classes are not specific, ie. a link can be both visited and hover for example. In this case the selector declared further in the top of the document prevails. When using them, it is important to have the declarations in a specific order:

a{
}
a:link {
}
a:visited {
}
a:hover {
}
a:active {
}

The code above is how you should use the pseudo classes. You can now state your styling in the classes. Example:

<style type="text/css">
body {
    font: small Arial, Helvetica, sans-serif;
}
a{
    color: #F00;
}
a:link {
    text-decoration: none;
}
a:visited {
    color: #666;
}
a:hover {
    color: #00F;
}
a:active {
    color: #0F0;
}
</style>

The link will thus go though the following stages.
Normal link

Hovered link

Visited link

What happens is that I have coded the link to be red and without the underline as normal state, the color swaps to blue when hovered and is grey and neutral (with the original style) once the link has been clicked. So, this is the basic concept to grasp to start styling links. Advanced concepts to come later.