Archive for the ‘Tutorials’ Category

Using FIR [Fahrner Image Replacement] – Part 1 – Basic implementation.

When I launched the new template used on this blog some weeks back, a discussion started out on the use of FIR, the Fahrner Image Replacement technique, on the H3 tags I used on the widgets in the different sidebars. Actually, these are not widgets per se as they are hard coded as small included files to maximise load time. An internal recipe if you want. Anyway, the main idea behind using FIR, which is a really old technique, is that I wanted the specific use of images just for these H3s. As pointed out in the comments, I did not go for heavy DOM scripting driven font apps such as Typekit or Google Fonts just because I had no need for these. If I had specific fonts to use for bigger portions I would have used those or Cufòn.

Usability and SEO.

FIR is not the only technique you can use for replacing text with images. You have several techniques which you can find out with a simple Google search. There’s also the sIFR, the Scalabe Inman Flash Replacement, which used Flash to replace text defined by web design guru Shaun Inman. There are 2 reasons why I like the Fahrner Image Replacement technique: usability and SEO. Its use maximises these two core elements. How? Simply because when all CSS are deactivated (which is the case for screen readers) the content is still present. This therefore keeps the content that is associated with the H tag. You can relate to this past article if you want more information on the importance of H tags. Please keep in mind that the way I use the FIR solution is a bit different from the original versions. As a matter of fact, I play more on semantics to reduce the use of unnecessary HTML tags.

Implementing FIR.

Basis.

The FIR implementation is fairly simple. You need to have an image file bearing your graphical text. The magic occurs with the use of CSS to get the text out of the way and replace it with this image. This is an all CSS technique which means that if there is any CSS failure, the fall back will just be the plain text. So here is a piece of simple code:

<html>
<head>
	<title>FIR technique</title>
</head>
<body>
	<h3>This is the text to be replaced</h3>
</body>
</html>

The replacement image is the following:

Hiding the text.

Now let’s get into the CSS-fu. First of all we need to “hide the text”. We cannot use the visibility attributes because we will not be able to exploit the H3 box that is generated. What we can do is reposition the text inside that box. Actually we will reposition it outside the box and even outside the screen, so far that no simple user screen can show the text. Here is how it goes (you will notice that I’m not using a separate CSS file for this just for the sake of the example):

<<html>
<head>
	<title>FIR technique</title>
	<style type="text/css">
		h3{
			text-indent: -9999px;
		}
	</style>
</head>
<body>
	<h3>This is the text to be replaced</h3>
</body>
</html>

The text-indent implementation throws the text at 9999 pixels on the left of the screen, so it will not be visible at all.

Replacing the text.

Still with CSS, we need will now get the image to occupy the space left. The image does not actually occupy the space, it sits as a background image and we will be tweaking the heights and widths to adjust to the image.

<html>
<head>
	<title>FIR technique</title>
	<style type="text/css">
		h3{
			text-indent: -9999px;
			background: url(replacement.png) no-repeat center left;
		}
	</style>
</head>
<body>
	<h3>This is the text to be replaced</h3>
</body>
</html>

The background uses the URL attribute to call the image. The no-repeat attribute says all that it does and the center attribute centres the image vertically and the left attribute sets it to the left. If the image were too large for the containing box we would be using paddings to increase its size. Here for example, we are increasing the top and bottom paddings by 10 pixels each:

<html>
<head>
	<title>FIR technique</title>
	<style type="text/css">
		h3{
			text-indent: -9999px;
			background: url(replacement.png) no-repeat center left;
			padding: 10px 0;
		}
	</style>
</head>
<body>
	<h3>This is the text to be replaced</h3>
</body>
</html>

See the final result in action here.

Get started…

You can now get started with FIR. It is a simple but effective technique. You can download the source files here. Keep in mind that this technique does not apply only for H tags but for nearly all the tags that you can use. For example, on this site, the link on the logo actually uses FIR. In the following part, we will see how you can optimise your use of FIR.

Edit & precisions

I would like to stress on the fact that this technique is considered as “fail” by a lot of people because of the advent of font faces. As I stated in the intro to this article, if I had larger portions of text to change I would have used them. Knowing this technique is handy for your web design culture/education as well as if you have to choose between going for Javascript external calls or CSS for very small elements. Please note that the original technique was not accessible or usable because it used flawed visibility techniques. This version corrects this with the use of the text indent attribute.

Studying levels of influence before launching your email marketing campaign.

Let’s go back to some old school and traditional form of customer acquisition on the web: email marketing. Many might think that the age of email marketing is over. Email marketing actually is one of the most powerful vectors of conversion generation still in use. It is one of the reasons why newsletter subscription forms have never disappeared from websites. An email marketing campaign can be a great tool for conversion and also a tool to increase client confidence in your products and keep them coming back to you.

Email marketing campaign target.

To maximise an email marketing campaign the first thing to do is to maximise WHO must be contacted in priority and how to personalise the messages sent out. This calls for the indentification of influential people, the prescribers. Those are the main targets as they have different levels of influence on the prospective clients. There are 3 levels of influence.

Level 1 influencers for your email marketing campaign.

These are those influencers who are in immediate interaction with your clients and who have a real impact on their business. They are those who will have an influence on the choice of your products or those of your competitors. They will be the ones inciting the client to chose a brand compared to another as their own work depends on that.

For example, for a small business management tool publisher, accounting experts are level 1 influencers as in at least 1/3 of cases, they are the ones who influence on the software the company will be using.

Level 2 influencers for your email marketing campaign.

This level of influencer is in contact with the your final clients and can influence their choices. This, however, has very little impact on their own activity.

For example, a washing machine manufacturer can counsel a client on the type of washing powder/liquid to use but this will remain at the level of counsel, it doesn’t impact on how this manufacturer will build machines. A specific garment manufacturer for instance will be a level 1 influencer at this point.

Level 3 influencers for your email marketing campaign.

Level 3 influencers have direct or indirect contact with clients but are merely a link in the whole system. The final client’s choice has no impact on their activity.

For an insurance company, for example, a car dealer is a level 3 influencer because the choice of a car insurance has no impact on whether the final client buys the car at this dealer’s or not?

Now you know who your email marketing campaign should target.

As shown here, it is an absolute priority to identify the level one influencers in your field before even thinking of about what you will be putting in your email marketing campaign. This is a necessity. To make things clear: concentrate on level 1 influencers only to maximise your email marketing campaign conversion rate. Do not lose time with the other levels.

WordPress 3.0 might have feed errors. Fix them!

WordPress 3.0 is the new current hip. Everybody is switching to the new platform while fearing crashes or great upheavals in the world of blogging. I’ve been a bit worried about all this for some days before taking the leap of the full WordPress 3.0 upgrade. Everything went on really fine until…

Errors through CommentLuv.

I was commenting on a blog I usually visit. When I activated its CommentLuv app, I was greeted with a “No last blog post found” error that got my eyes growing like saucers before starting squinting in pure disbelief, as if staring for 2 minutes at the error message would give me explanation. First thing I did was to check my RSS feed where I found a nice error on line 5 at column 6: XML declaration allowed only at the start of the document error. It dawned to me that the WordPress 3.0 update might have generated this error.

Recurring feed error.

After some research, there seems that this type of error is frequent in WordPress, whatever the version. So I went out to try several feed correcting plugins for WordPress but whatever the solution tried (even that of clearing all WordPress files from blank lines) it didn’t seem to be able to clear the errors out. According to all that I read, it all comes from some trailing blank lines in the feed code. Having tried everything in vain, the only solution to this was to go back to the good old hand coding.

The fix.

Fixing this error was not an easy task but I found an article over at www.w3it.org. The code is fairly simple and its implementation is easy. All in all it takes the feed generated by the WordPress core and clears it all up from any blank line held around.

What you need to do is to open this file:
wp-includes/feed-rss2.php

Open this file in a text editor and look for this line:

header('Content-Type: text/xml; charset=' . get_option('blog_charset'), true);
$more = 1;

Just underneath it add this code

$out = ob_get_contents();
$out = str_replace(array("\n", "\r", "\t", " "), "", $input);
ob_end_clean();

That’s all! Short and sweet. This code clears all empty lines and hey presto, your feed is restored.

Other feed files?

You might be asking why the wp-includes/feed-rss2.php file? Just because it is the one that is really used in the WordPress feed. You can however do like I did, I opened all the other feed files and stitched them up with the same code.

A final word.

What came out of my perusals over the web on this issue is that the “blank line” error can be generated about anywhere in all the WordPress core or theme files. The current solution corrects all of these in one go but calls for hacking the feed. You’ll find different sources, hacks, solutions or what not on the subject out there and each might have a different root so take a good look at all the possible bugs before testing any solution around.

Dropping unnecessary tags in your HTML code.

This post might be a sequel to my previous post on speeding up a page’s loading time to get better rankings in Google’s search engine results pages (SERPs). It is however not the case here. Most of us write our code, at least our code’s structure, in one go. This is done preferably after having identified all the building blocks of a page or template. But let’s be honest, even if we optimise our code, our CSS and all the scripting that accompany our everyday job it is not easy to dive back into the code and go for seconds in terms of cleaning up.

The good choice.

I admit it. I have not done it all the time, cleaning the code more than necessary. Like everybody who has made mistakes I could easily come up with a thousand reasons for not having done so. The first would be: “It takes too much time on the schedule allotted to such or such project. As I matured I understood the necessity of doing second passes in code cleaning.

  • It helps you check any error that could have been left.
  • It might be a good occasion to compress some elements to speed up the page.
  • It is a good chance to drop the unnecessary tags in your HTML code.

Now you might be asking yourself what this “unnecessary tag in the HTML code” is. Simple. When doing second checks on my code I found out that I somehow found new and improved solutions to the code already written. The I would change these. Most of the time I found myself dropping some tags from my HTML code and exploit the inherited properties of other tags to achieve the same results. This would be beneficial for maintainance, improve page loading time and less code means more content for search engines.

The basic code.

Below is a basic example of code that we usually find in web design. There is nothing wrong with this code, it works perfectly well and is written to be nicely styled in CSS.

<div id="navigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about.html">About us</a></li>
        <li><a href="/services.html">Our services</a></li>
        <li><a href="/contact.html">Contact us</a></li>
        <li><a href="/register.html">Register here</a></li>
    </ul>
</div>

As you can see in this code, it is a navigation menu that is implemented into its own wrapping DIV tag which can itself be included in header or sidebar parts in a design. After analysing it and improving its CSS, we would estimate that the code is fine. But there’s one more step to push.

Dropping the tag.

In standard HTML, some tags have block displays and others have inline ones. Those missing any of these can get them through the declaration of these properties in the cascading style sheets.

    <ul  id="navigation">
        <li><a href="/">Home</a></li>
        <li><a href="/about.html">About us</a></li>
        <li><a href="/services.html">Our services</a></li>
        <li><a href="/contact.html">Contact us</a></li>
        <li><a href="/register.html">Register here</a></li>
    </ul>

With this in mind, we can bring some tags to become their own container instead of relying on an extra tag. This is the case with our basic code where we can directly make use of the containing UL tag to hold the rest of the elements, thus making the use of the holding DIV unnecessary. One tag won! This can be done on a lot of tags such as FORM or even SPAN (if there is a use to it…).

Let’s talk about this.

To be honest, as time goes by, this solution becomes a habit and a second nature. I now do not necessarily have to go through my code and drop tags all the time. I usually write a piece of code and stop and ponder over it. If there is a change to be made it is done immediately but this is now rarely the case. So why not go through your code and drop some tags? Do you have similar approaches in your coding skills? Try this trick out and see how much you can take off your code.

Build mega dropdown menus.

Since usability guru Jakob Nielsen recommended the use of mega drop down menus as useful on large scale websites, it has become impossible to ignore the way these menus are built. One of the best tutorials available is that of Soh Tanaka which drives you step by step into the building of mega drop down menus with jQuery.

Speed up your web pages via the CSS file.

As a Web designer, there are some rules that you have been acquainted to. One of the first being: “store all layout and graphics in a separate CSS file”. Nothing bad in this one. Knowing that a CSS file is downloaded once or updated if needed in a browser’s cache, this speeds up pages and adds more semantic through the separation of layout and content. All the good basics of CSS.

It happens that the content of a CSS file can easily grow. On some large websites it’s no surprise to see CSS files running over a thousand or two and even more lines. At the end of the day, a CSS file might in itself reach some 80kB or go over that. In France, the recommended “accessible” page weight limit is 27kB. So with an 80kB CSS file you’re just shifting the data bloating problem to another file. Its still here. So, this is my little trick to reduce CSS file weight. This will have, as a consequence, a positive result on your page loading time.

The Tool

One of my favourite editors is PsPad, lightweight, easy to use and packed with a whole bunch of useful elements. One of these is the ability to reformat the CSS/HTML in structured or inline format. A lot of tools do that too but PsPad is just one of those but allows me to manage whole projects in one go making it really handy.

The Trick

The simple trick is to actually structure the data of the CSS file then throw it to the inline version before uploading it to the server. Structuring the data is useful to clean the file. The CSS parser in PsPad realigns the code and structures it with the relevant tabs as well as drops all empty lines and redundant spaces. This increases readability.

Afterwards just reformat the CSS file content into “inline”. Here the tool will reformat the whole content to have each node on one line only per node. The file loses a bit of readability but gets improved in terms of spacing, hence reducing the filesize. Take a look at the 2 screenshots below. The first shows the weight of the layout.css file with structured content and, the second, the same file with inline content. The file size change is rather surprising:

Structured CSS file in PsPad

In line formatted CSS in PsPad

More ?

This small tutorial is but a mere trick to lighten up your file weight. Other solutions exist, solutions that would allow you to get those precious kB off your visitors’ shoulders with a view of proposing fast pages which would help them choose to convert on your site. On of them would be to use CSS shorthand and don’t forget precious tools like YUI. A good mix of those and techniques like the one presented here would surely help your pages load faster.

Most Performing Adsense Ads Size To Use

Most of you uses Adsense right? Whether it is to earn some bucks for a beer or even to make a part time income, Adsense is great but customizing it for the best earning potential is better. So here is one of the best tip to start with the Adsense Customization by looking at the different performance of the Ads Block size.

The best Adsense size to use

This is no more of a secret as everyone has said it at some point in time that the 336px ad space is the most performing. But then the only thing that they told you was that this ad block is most performing but what about the others? As per the Adsense TOS I cannot tell you the exact percentage of success with each size but I’ll give you a list in order of most performing to less performing so that even if the big 336 px ads does not fit on your blog, you can wisely choose another one.

Most Performing to Less Performing Adsense Size:

336 x 280 — 10/10
300 x 250 — 8/10
728 x 90 — 5/10
160 x 600 — 3/10
120 x 600 — 3/10
468 x 60 — 1/10

Now knowing the most performing size will not magically increase your CTR. Each of the ads space are best suitable for a specific part of your blog. So below are the best position to use them.

336 x 280 – This ads space is best to use between your post title and the start of the actual content. Note that I said between Title and Content and NOT ABOVE Title. How? The effect is simply that reader will first read the Title and then relate the ads to the content start in their mind which makes it less intrusive.

adsense positioning

300 x 250 – This can be used at the same place of the 336 one but it is less performing. If you use this one then the best position is to merge it in the content at the right-start. That is align your text to it but place it on the right side of the content.

728 x 90 – Most people use this ads space at the footer but this is the worst position of it. The best position for the space is in your header. That is if your header has only a small logo, you can align it in a table with it.

best way to use adsense 728 banner

160 x 600 – This ads is most performing in your sidebars but it also depends on the density of your sidebar. If your sidebar contain lots of stuffs, then use it in the image form to differentiate it from the others. IMO this 160 px is best performing when in image format rather than text.

120 x 600 – Same as the 160 px one but somehow less performing due to ads blindness to it more and more nowadays.

468 x 60 – Again this one is more and more less performing due to ads blindness. People are fed up of seeing this type of ads. Use it only if you cannot use the above and the best position for it is after your content just before the comment area.

Hope this post help you all for your adsense optimisation. Note that the logic here applies also to any other PPC ads network. You can apply this with Bidvertisers or even Adbrite.

Guest Post by Kurt Avish. :cool:

What you could do if you won one of our giveaways.

If you were one of our lucky participants, you might use your winner packs to try this superb tutorial on how to create a richly ornate typographic illustration. What about that? Dive in the contest then.

“Amene to SEO” – The HEAD element.

Back to SEO basics. How should you do your site/blog’s search engine optimisation? Many elements get into the picture but there are some simple rules to follow to optimise a page. Let’s start with the head part.

The head part of a page is the one that will have the most impact on your visitors via search engines. The head part is what the robots use to build their SERPs (Search Engine results pages). This means that the first thing a visitor will see of your page on a search engine is the head so you’d better polish things up a bit.

Anatomy of a search engine result.

Below is a detailed view of a search engine result off Google’s first SERP.

Search engine result example

As you can notice, the title tag is the one that is shown as linked in blue and the meta is used to describe the page’s content. Other thing that you will notice on this specific result is that there are no suspension marks on either the title or the description.

You might consider the result below. The title part has supension marks as well as the description. Though it gives information is triggers the thought: “This looks amateurish”.

suspension

Last thing, please, please do not put any HTML tag in the title because it does not do anything but waste character space!

So here is the recipe on how to optimise this part.

The title tag.

The title tag must not exceed 65 characters (spaces included), 65 being the number of characters Google shows on SERPs. This is how you don’t get the suspension marks. Another thing, to bear in mind, especially on blogs, long blog names and what not in the title just eat up space. Get rid of them, shorten the site name in the title to give more space to the real title.

Another thing that has been tested and proved efficient is the place where the site name is shown. On many sites, the site name is shown, then the real title. If the sitename is long, a lot of the characters are eaten up. The practice now is to put the sitename at the end of the title. If the title exceeds the 65 characters, it will just be deleted on the SERP but will still be present in the URL. So no worries on that. Your aim is to bring people to your site not show off your sitename.

So what is the real title? This actually is the title that is related to the content of the post/page. Careful, it is not the title of your post for example. E.g. say you have a page on Chicken Curry on your culinary blog and the introduction title is Cheap Chicken Curry. Your title might be “Chicken curry recipe with aubergines and potatoes under 30 rupees.” There you have your under 65 characters title.

To fully optimise this title, let’s say that your target keyword is “chicken curry recipe”, you have also added the keyword in your title. This therefore works for both attracting visitors through search engines and second for good positions in SERPs on specific keywords.

The meta description tag

The meta description is what will convince the visitor having been attracted by your title to visit the page. The meta description in Google does not exceed 150 characters. Staying in this range will get you to have a full stop end in the SERP description, giving you a cleaner aspect as well as more professional looking result.

Your sitename can be present in there but once again, you’ll find that 150 characters is pretty short and does require some reflexion. So better keep long site names out. The other important thing is to get your keyword(s) in there while giving out a clear and concise description of what the person will find on the page.

E.g. On the same “chicken curry recipe” page and keyword, you can get two occurrances of the keyword in the description while keeping it underthe 150 characters limit. Check it out:
“Need a cheap chicken curry recipe? Find out a cheap chicken curry recipe with aubergines and potatoes for only 30 rupees on My Cheap Recipes Blog.”

Conclusion

Finally, some words in the search results are in bold. These are the keywords I searched for on Google. Google puts them in bold, so use them to stand out of the crowd but do it smartly with a balanced mixture of well though text and important keywords.

Nota for non Mauritian readers: the title of this post starts with a Creole pun “Amene to SEO” translates in “Bring your bucket”.

5 tips to a successful seo-oriented web project.

Project management seems to be one of the major problems web designers as well as web design companies seem to face in Mauritius. This is because there is still a change in perspective to be made as companies in Mauritius still see the Web as a copy of print communication. This is the first problem. The second one is the lack of insight and step by step project management, what comes first etc. This also implies that the consulting job must be done before even coding.

Know the content.

Your client wants a website. Know his content. Make him/her think about it and work on it with him/her, this will help you understand his/her field if you’re unfamiliar. You’ll also get to understand the objectives of the site in its field.

Determine each page.

With the content, you can determine which pages will be built and how to order them in the site map. At this very moment, you’ll be able to prepare your metas (title, description and keywords) according to the content. This will help you point the keywords of each page out.

Manage page levels.

Steve Krug pointed out in his famous Don’t Make Me Think that he was surprised that web designers never built past level 2 mockups for pages. Knowing what a page will be like in any circumstance will greatly help you determine if you’re still following your project guidelines as well as work on some url-oriented seo tricks.

Use inner pages as basis for the homepage.

The problem on many homepages is that they look like “Uh, we put this here because we didn’t know really what to put.” Here’s the solution. On building your inner pages first (in theory) you’ll know what are the main objectives and what are the information that have to be pulled to the top. This will help deeplinking as well as conversion.

Build a consistent wireframe.

A consistent wireframe will give the structure of each page. This will be the basis for the graphic designer (or yourself). It will give a well defined field of work and the graphics will eventually abide by the priorities of the website. This is done to improve user experience and give a clean doorway to search engine robots.

What must be kept in mind here is that content is the basis of it all and the project grows and evolve around it. In this order there are better chances for a site to be well indexed and easily ranked.

Learning web design.

A month ago, I wrote an article on web design education in Mauritius which got me some sour reactions from so-called “web design professionals” from Mauritius. Sure, the first reaction in Mauritius is to insult then think. But do you do it when you’re a professional? Anyway, this is their way of doing the business: ego and self-satisfaction ensuring that all the inequalities prevailing in Mauritius carries on healthily. [Rant and denounciation off]

Coming back to the issue of web design education, a lot has come out from the ongoing contest to win a copy of Mark Boulton’s “Designing for the web”. Read the comments and you’ll get a great view of how most people in the industry have learned their trade. As a matter of fact, school and university lectures are practically non-existent in web design. Most of the time this goes in this order:

  1. Learn from the web with online tutorials
  2. Learn by scouting portfolios and “big hats” in the trade
  3. Books (depending on how they are written, bland and factual ones are not favourites)
  4. Ebooks/PDF books (new technology has us)
  5. Practice (trial and error)

Once again, read through the comments (and add yours if you’re interested in the topic or the contest) and get to know how people have started out in the domain.

Along with these are two excellent overviews that I would like to share. These might even be the groundwork for a new way of teaching or building a curriculum around web design:

  • Teach the Web has published a Monograph where the underlying question is “What to teach to the next generation of web professionals?”. Leslie Jensen-Inman has interviewed 32 top category web designers to understand that intricacies and issues of learning web design and the results are astounding. They are to the point and well documented. A real view of what web design education should be.
  • The School of Visual Arts has an MFA in interaction design as well as a great active blog on the theme of interaction design. Readers have requested reading recommendations in terms of interaction design and this has given a superb list of books to be assigned/already assigned to their courses.

    These could be landmark texts, underdogs, or critical reads, or stepping stones to other fields.

[Festive Hands] Coding the structure.

Welcome to this new episode of the Web Design Bureau of Mauritius CSS theme building. Today, we’ll dive directly into the code and start coding the structure. If you want to refresh your ideas on this structure just drop on to the previous structure article where we detailed it. At the end of the last post we had a full HTML structure with divisions. Now, we’ll work with the main css file only to get each division to step in its place. So, fire up your text editor and open the style.css file.

Margins and paddings.

Margins and paddings are inherent to certain types of blocks and can be added to practically any tag in HTML. One thing that I like to do when beginning a project is to get all the margins and paddings out of the way so that I can control every element, especially when using the box model which is the basis of all actual CSS web design (new elements in CSS3 will make use of different, and hopefully easier, solutions but that’s not for tomorrow). First thing to do then is to clear all margins by using the asterisk wildcard.

* {
	margin: 0;
	padding: 0;
}

Centring the document.

Remember that our main document was called #document. We’ll need to centre it horizontally. This is one of the problems designers didn’t know how to work around especially in IE browsers and which lead to the use of embedded tables. The solution is fairly simple.

#document {
    margin: 0 auto;
}

There are different ways of specifying margins (and paddings, which follow the same concepts) in CSS. The margins are specified following a clockwise pattern starting from the top.

#document {
    margin: 10px 20px 10px 20px;
}

This would be the equivalent of writing:

#document {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

What catches the eye is that the first version is shorter and will thus consume less bandwidth on page load. Now let’s say that we needed 10px margins all around we would just have written:

#document {
    margin: 10px;
}

Looking back at our document with 4 margins with 2 of 10px and 2 of 20px we notice that there are common denominators. The 10px are for top and bottom and the 20px for left and right. This can also be short-handed to 2 elements:

#document {
    margin: 10px 20px;
}

The browser will read 10px top and bottom and 20px left and right.

Other declarations of margins can be done in percentage (%) or automatically (auto) where the browser will calculate the margin automatically from the borders of the height or width available. This is what is used to centre the document in the browser.

#document {
    margin: 0 auto;
}

Margin 0 (notice that we don’t use 0px because 0 of something is nothing) specifies that we do not have any margin top or bottom and auto for left and right will force any browser (understanding this code) to centre the document depending on the browser’s viewport width. Actually, looking at my design, I need a 20px margin top and bottom of my page so I’ll modify the code for it.

#document {
    margin: 20px auto;
}

Width

The site, as specified in the structure article, needs to be 960px wide to be fully viewable in a standard 1024px screen. This is done by adding the width to the #document as it is the utmost element holding the page.

#document {
    margin: 20px auto;
    width: 960px;
}

This keeps all the elements in the page at 960px wide and centred.

Overflow.

The CSS overflow property specifies what to do with an element when its content doesn’t fit exactly. This is useful especially for height management. You might have noticed that no height has been specified in our #document. This has been done because I want it to automatically increase its height whenever content is added to any element inside it. The ‘hidden’ property allows us to specify that no scrolling effect in the division is needed, hence, the division should always adjust itself according to the height imposed by any content present. For example, if #sidebarLeft gets longer than any other element #body should increase its height, pushing down #footer and increasing #document's height. All this works with the overflow.

#document {
    margin: 20px auto;
    width: 960px;
    overflow: hidden;
}

Inner divisions.

Back on the structure we have 3 major divisions inside the document. These divisions offer the “content” framework. They are the #header, the #body and the #footer. These elements are simple to understand. They are all 960px wide and will also be modifying their height according their inner contents too. This will be simple to code then. Here we will be using some CSS shorthand. Instead of declaring thrice each element and stating their height and overflow, we will declare all this in one go. You can use commas to line up selectors in CSS. This way:

#header, #body, #footer {
    width: 960px;
    overflow: hidden;
}

All these elements have the same properties now.

Content and sidebars.

Finally we get to the last divisions in our structure code. The final elements are the #content and #sidebars (left and right). The idea in the structure is to distribute all of them in specific widths at specific positions. Specifying the widths is fairly easy. These will also have overflows hidden as explained earlier.

#content {
    width: 450px;
    overflow: hidden;
}
#sidebarLeft {
    width: 300px;
    overflow: hidden;
}
#sidebarRight {
    width: 170px;
    overflow: hidden;
}

Floating.

CSS float property allows you to specify where an element has to be positioned (left or right or not at all). Here we will be using the left and right floats.

Looking at our structure it is obvious that the #content box will be positioned on the left. It will thus take a float to the left. Its width being given all the other elements will follow to fill the space left. Don’t fret if things look broken.

#content {
    width: 450px;
    overflow: hidden;
    float: left;
}

The other sidebars would also look great if they were left floated. However, our visual structure shows that there should be a 20px gutter between the boxes. There are 2 ways of doing this.

First solution, all floats to the left.

#content {
    width: 450px;
    overflow: hidden;
    float: left;
}
#sidebarLeft {
    width: 300px;
    overflow: hidden;
    float: left;
    margin-left: 20px;
}
#sidebarRight {
    width: 170px;
    overflow: hidden;
    float: left;
    margin-left: 20px;
}

The 2 sidebars take a left margin of 20px each providing for the gutter. If we add all our widths and margins we get this. 450+300+170+20+20 = 960px, being the document width. This is how it works.

The second solution uses a right float just because I didn’t want to add a margin (lazy b*st*rd)! Instead of calculating the 20px margin and adding it I just forced the last box to float to the right. It gives the same result.

#content {
    width: 450px;
    overflow: hidden;
    float: left;
}
#sidebarLeft {
    width: 300px;
    overflow: hidden;
    float: left;
    margin-left: 20px;
}
#sidebarRight {
    width: 170px;
    overflow: hidden;
    float: right;
}

Conclusion

As a means of conclusion to this part of the tutorial we now have selectors set for the whole layout. As you can see, we have not touched at our HTML code while doing this and the whole page has its layout straight and robust. Along with that the page renders the same in IE6 and Firefox 2/3. I haven’t tested it on IE7 yet. I have linked to the W3C pages dealing with some of the selectors and concepts used in this post. It is always interesting to have a look at those and learn from them.

You can download the source files here.

[Festive Hands] Browser issues.

Here is a name that’s dreaded by nearly all web designers: Internet Explorer 6. IE6 has this notoriety simply because it has been the browser to have reached Microsoft’s apogee in terms maket share as well as being one of the worse browsers still in use and forcing web designers to lag with a 7/8 year old technology to be supported. Many web designers have taken the step and done their phasing, i.e. no more IE6 support. But is this a good move?

My point of view is that the bag of piles is still here for at least 3 years. We are getting into the month of February 2009 and today 30% of the browsers still in use are IE6 while Microsoft still holds 72% of the market share. Many persons might be Firefox, Chrome, Safari or Opera fans, but the job as web designer is to give the best user experience to the largest amount possible and this includes IE6 users.

The first question would be, why do people still use IE6? The answer would be, why do people use Safari. Safari comes included in the Apple Leopard package. Most Apple users will use their built-in browsers, so why wouldn’t Windows users do the same? Windows XP is still the most used OS in the world just because Vista is expensive and bloated and no real alternative (I’m not talking about Open Source here) is on the way? Maybe Windows 7 will change things. In the same way as Leopard in shipped with Safari, XP is shipped with IE 6. Quite a lot of people do not update their browser just because they don’t know how to do it or they are aware of all the spywares Windows loads with its service packs. Finally, IE does not have the forced upgrade power of Firefox when FF3 was launched. This explains why people still use this browser.

The choice of not supporting IE 6 might have unpondered results. Say you’re a web designer paid to build an e-commerce shop and according to your personal motives, you decide not to support IE 6. 30 possible percents of your client’s possible clients will be left at the door just because you chose not to support their browser. There are also other reactions. I, for example, hate to spend time watching a Flash splash page. Even if there is a skip button, I have the same reaction as about 25% of the people arriving on such a page, I just leave. Its the same thing with a website, if one has IE 6 and sees a complete busted site, one will just go browsing elsewhere.

Finally, some web designers think that it is cool to throw a huge invasive message to the IE 6 user telling him that he is nearly stupid and that he would be cooler if he upgraded his browser or chose to go Open on one of the Webkit based browsers. Here again, 50% of the people leave the site which in turn loses possible clients. I don’t need to upgrade my IE 6 as I have personal reasons of keeping it, especially for my work.

The best bet remains support then. This is done by using workarounds and not hacks because you end up cutting the branch you’re sitting on with this. Those workarounds operate with specific stylesheets as shown in the previous tutorial on the structure with an IE specific stylesheet. Here’s a test of the stylesheets. I have added, in the IE specific stylesheet, this piece of code changing all the divs color to blue.

div{
	color: blue;
}

If you open the index page in Firefox, the text will remain default black. If you open the same page in IE 6, you’ll have blue text all over the place. So here’s the proof that IE6 browser support can be done with valid code and HAS to be done. Real cross-browsing capabilities will really help a business, especially e-commerce.

You can download the source files here.

[Festive Hands] The structure.

This new episode aims to analyse page structure, CSS inclusion an HTML layout based on the Web Design Bureau’s template. I agree that it will be oriented in one direction but I think that it will be enough to extrapolate and apply the ideas to other designs. So here we go.

Structuring a page implies seeing the major blocks that form its core. If we have to deal with the current template we would see different elements. There’s a DOCUMENT layer that is usually called “wrapper” that will hold the whole page together. I prefer calling it DOCUMENT as I can use it as a hook when I apply Javascript to the pages. The DOCUMENT will bear 3 blocks: a HEADER, a page BODY and a FOOTER. Notice that I’m using semantics to define the blocks. Each is defined according to its function. Below is a screen of the blocks.

festive-hands-structure

As shown on the screenshot, the BODY is also a container holding 3 blocks, a CONTENT block holding the central content of the page, a LEFT SIDEBAR and a RIGHT SIDEBAR. Why do we need a container? The more we will add content to any of these blocks, the longer they will get. If there is no container, the footer will stay up to the height of one of the shorter columns. A container will become longer according to the height of the longest column it bears thus pushing the FOOTER further down.

Identifiers.

All the elements shown here will be unique elements in the page. Unique elements use identifiers, therefore IDs. The ID is an attribute of any tag you use in your code. IDs are represented in CSS with hashes also known as diesis (#). Here are the different IDs for the layout:

#document{
}
#header{
}
#body{
}
#content{
}
#sidebarLeft{
}
#sidebarRight{
}
#footer{
}

HTML structure.

Now, how will we define this structure in HTML? Simply by inserting the codes as the structure has been defined earlier. Notice that we’ll only use divisions for this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>WDM Test Homepage</title>
</head>
<body>
	<div id="document">
    	<div id="header">
        	This is the header.
        </div>
        <div id="body">
        	<div id="content">
            	This is the main content.
            </div>
            <div id="sidebarLeft">
            	This is the first sidebar.
            </div>
            <div id="sidebarRight">
            	This is the second sidebar.
            </div>
        </div>
        <div id="footer">
            This is the footer.
        </div>
    </div>
</body>
</html>

What happens when we open a page like this one in a browser? Just a series of piled blocks showing one sentence per line. First things first. We’ll add our CSS files to our HTML file. I said “files” because I always use at least 2 of them. One for standards compliant browsers and one for Internet Explorer as it is still the most used one and has difficulties to support some types of CSS. This IE CSS file will aim IE6 and IE7. So, we’ll build two CSS files: style.css and msie-fixes.css and add them to our document head:

<head>
    <title>WDM Test Homepage</title>
	<meta http-equiv="Content-Type" content="text/html;
          charset=utf-8" />
	<link rel="stylesheet" href="include/css/style.css"
         type="text/css" title="default" media="screen" />
    <!--[if IE]>
      <link rel="stylesheet"
       href="include/css/msie-fixes.css"
       type="text/css" title="default" media="screen" />
    <![endif]-->
</head>

I am putting all the elements in the same directory because this is a WordPress template and it works like that. If I were working on another type of site the elements would have been set differently.

Conditional comments.

Another thing you might have noticed is that I am using conditional comments. These are understood by Internet Explorer only and help us present IE specific code to IE browsers. Other browsers will just ignore this code. This has 2 advantages.

  • There is no need to hack the CSS and include hacks in your code. You just have to write your IE specific CSS in the msie-fixes.css file and it will work. If you’re a validator stickler, your main CSS file will also be a bit easier to validate.
  • IE6/7 won’t be here forever. IE8 is in beta and is passing the acid test, even Firefox doesn’t, pass this test! When, in some years, new and robust versions of Internet Explorer will be released and hopefully IE6 left behind, you will not have to go through the whole CSS file to correct your code. You’ll just have to delete this file and the conditional comment added to your page. This is called code maintainability.

That’s all for now, in the next episode, we’ll give a visual layout structure to all the divs used to start setting up the columns in pure CSS. You can download the source files here.

The other related articles are :
The use of serif and sans-serif fonts.
The sneak preview on the design.
Planning the job.

Use of serif and sans-serif fonts.

Like everywhere else there are rules in Web design. This article should have been subtitled : “Know the rules and then break them.” Isn’t designing a way of thinking out of the box? A way of following and transgressing rules? This one concerns the rules of fonts in Web design. So here is a list of rules that you might learn in a web design school. They are the safe ones:

  1. Do not use more than 3-4 types of font on a web page.
  2. Sans-serif fonts are used online, while serif fonts are for print.
  3. Its no use changing fonts in a middle of a line unless you have a very good reason to.
  4. Do not use script or fantasy fonts in your content body.

There are others, but we’ll stick to these basic principles. If you have a look around you’ll see that the basis of having sans-serif is nearly a constant on websites. Why has sans-serif become this “standard”? The answer is in typography. This is what sans-serif fonts bring:

  1. Sans-serif fonts look good at most sizes.
  2. They tend to have a more contemporary or business feel.
  3. Most operating systems render them neatly.
  4. Serif fonts tend to lose readability at smaller sizes.
  5. Serif fonts, when viewed on a Windows computer, may look terrible if ClearType is deactivated.
  6. Sans-serif fonts, on the other hand, can look good with or without Windows’ ClearType turned on.

So, the big rule is: use sans-serif fonts for your body text and serifs for your headings. If you leave here with only this rule, you master one of the most important ones. Some will however point the fact that the forthcoming design of the Web Design Bureau of Mauritius uses serif fonts for its body text. True and I’ll explain why.

First of all, change. This is what I was talking about on thinking out of the box. The last two books I’ve read are Bulletproof AJAX and DOM Scripting by Jeremy Keith. Both were written in sans-serif fonts. Didn’t we say that serif fonts are for print? Yes, but the editor, knowing that the readers of these books would be Web designers used to read in sans-serif online must have thought that it would be easier for them not to have a big change. Second, these books are tools and the text slabs are short. This makes it easier to read to have sans-serif fonts.

Now for the change online. Have a look at these sites. They all use serif fonts and quite beautifully, especially the Seed Conference one. Many would use the user experience factor. True enough. But nothing has proved that sans-serif is really better for reading apart for the pros and cons listed above. This is not a tongue-in-the-cheek conception but a reflection rather. We know how the things might turn bad using serifs, so we can find simple solutions to these. Eg: not going beneath 12pt font size (great I’m on 13pt) and increase line spacing as well as letter spacing by just enough for the fonts to look good. Another thing for the use of these fonts, serifs help guide the reader’s eye by building a sort of baseline to the text. The new Web Design Bureau design has no “visible” columns and the use of typography along with serifs help to define a guide for the text. The idea was also to give the Web Design Bureau a non-business feel as it is more of a personal blog. Serifs are warmer and give a fresh accent to the pages. Finally, the articles published here tend to be quite huge slabs. This would be difficult to digest to any reader, the use of serif text will help in alleviating the trouble.

There you have it then. Know the rules, the bounds and the limits and if you have to cross them, do it in a mature way. Weigh the pros and cons then go beyond them.

[Festive Hands] The sneak preview.

Welcome to the second episode of the CSS template building on WordPress for the Web Design Bureau of Mauritius. In this part we’ll get a quick view of the homepage designed on Photoshop, taking into consideration the different issues and elements that will have to be dealt with when building the template. We’ll see that the CSS integration and robustness are taken into consideration at the very beginning of the job.

I’ve been working on the template for the past week and the inner page is not done yet. The homepage, however, is created after a lot of pondering. Without waiting anymore, I give you the new design.

festive-hands-450

Yeah, it looks cheap because there are not any borders. It will actually look like the present template, no borderline. Let’s discuss a bit about this design. When I design a page, I don’t design it only thinking: “man this would look great”. I do it thinking about: “how will this look great while being easy to implement?”. This is more challenging! So here we go.

The whole of the design is based on one colour palette. As I told you in the first episode, choose your colours and head over to Colour Lovers to find the right palette. This one is called Orange Girl. I don’t know why but I have this orange colour thing. My favourite colour is blue, royal blue, but I have some kind of addiction to orange also. Isn’t the theme built for my personal blog called Marmalade? I added only one colour to the palette, a light turquoise blue for the links, something that stays in the palette but clashes also.

Once this is done, we assign the colours to each element we’ll be using. In this case I chose to put the predominant orange in every element that is put forward: RSS icon (its not the usual orange), block titles, post headers, quotes and bold text. The specific blue is used for all the links that we will be using. Sub-text, such as the mini blogging section uses the lighter grey colour, and the full text will use the darker grey. One special thing about the top navigation, the links are not blue but the interaction will be just like the one on the current template. The grey blocks are the Adsense blocks possibilities which will be based on the same colour palette.

The text to be used is mainly Georgia (serif font) and Arial (sans-serif font) on the top navigation, the publication elements as well as the quotes. I will soon be writing a post on the use of serif and sans-serif fonts in design in general and there will be a sort of inconsistency concerning my use of serif font for this template, but hey, I’m a web designer and I tend to write a lot! However, just keep in mind that I am using those fonts that are bound to be found on nearly all computers in the world.

And to end this up, the design is built on a 960px grid. Meaning that any standard 1024×800 pixels resolution screen will view the site in the same way. We’ll work on browser compatibility to have this babe running smoothly on IE6, IE7, Firefox 2, Firefox 3 and Google Chrome. How about that huh? What more, the columns are cut to have a 450 pixels full text content, a 300 pixels second column and a 167 pixels second sidebar. The more attentive of you readers will ask me about the header that seems to run all along the top of the content. Yes there is one, divided in 2 written “Renascence” on the left and “Alternates” on the right. We’ll get to that later ok?

For those interested, here is the first episode.