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.

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.

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.

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.

The current issue (276) of A List Apart concentrates on the difficulties people have to study web design and above all, the quality of web design education. The two articles published triggered quite a lot of questionning and thoughts. Let’s face it, Web design education doesn’t practically exist. One of the major drawbacks according to me is that Web design is considered as a poor “sibling” of the larger “programming” family. Seems to me that, in Mauritius for example, Web design “oriented” classes will be given at the IVTB rather than at the University.

On my part, I do have a postgraduate degree in computer science and I have to admit that the “Web” courses I had there brought nothing to me. It was just an analysis of a list of tags used in HTML and a little bit of CSS. Some PHP was also considered as our programming base was OOP but not more. Everything I use today in my everyday job has been acquired in books and on reading online articles from sites like A List Apart and Web Designer blogs.

Another thing is, are the people giving those Web Design courses fully qualified? Let’s take an example, this is in no case a personal attack, just a fact. This person is called “Darkprint” and has been awarded the best student in graphic design and multimedia at the IVTB which has been covered by the press etc. Congrats to him! Problem is: his site is not standards compliant, there’s an overuse of images and spacers, the CSS is horrible. This shows that the courses he has had in Web Design were really poor. Furthermore, there’s a huge business management problem. If you’re going to be a freelancer, you have to manage your image and business. Do they teach that also? It doesn’t seem to be the case. On coming on this portfolio some things seem wrong. The only information I have is that the guy is young and ambitious and is called Darkprint and he uses a gmail account while having his own domain name. This lacks professionalism just because I won’t even know, provided I search the whole site or open the article, who the person is at the first glance.

Web design is more complex than it seems and many designers get into the job being completely oblivious of the REAL basic knowledge. Many people think that mastering [insert image editing software name here] is all that you need. The web culture, the trends, interactions, research and coding standards and knowledge are not taught! The uses neither. The WASP as well as the W3C have set up Web design education programs but these need time to get into the teaching culture, then it will take time to get the teachers qualified and eventually we’ll be able to get great Web designers leaving school with great value in their hands.

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.

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.

Is that fast or what ?

One thing that some web masters/web managers tend to forget is one of the basic rules of SEO (search engine optimisation). This rule, which should even be called this mantra, is “build content for your visitors FIRST”. Most of the people wishing to do SEO concentrate on SEO and search engines and not on this “mantra”. What they also forget is that if this content is really user-oriented, it IS essentially search engine oriented. Once this is done, there is but little SEO to be done.

The experiment.

I usually tend to follow my pages’ progression in search engine results pages and this time I had a real surprise. Yesterday I posted a review of Eservices‘ portfolio and I don’t remember why I had to do it but I searched for “Eservices Mauritius” on Google to check something out. This is where things went crazy. The post was published at 2 pm (shown 3 pm on the blog). I did the search about 30 minutes later and the post was already in Google’s first page.

Questions and assumptions!

• Was the Google bot already on my site indexing content when I published the review?
• I was thinking of a 1% keyword optimisation for this post. So is it the real deal, 1%?
• What about popularity? I feel like the Web Design Bureau has left the Google sandbox since late December 2008.
• 99% sure assumption: Google is giving more importance to fresh content! Does this mean that a niche blog gets more visibility?

Conclusion

All in all this shows that basic SEO rules and usage are still paying off. Content optimisation and content quality are still highly prized by the Googlebot. Keyword density still has its importance and fresh, updated content is getting more visibility by search engine indexation bots.

The title is a quote from Jeffrey Zeldman. If you are a Web designer and have never heard of this man, just drop it. Leave the field and try some other job. If you’re a Web company CEO, advisor, project manager or anything having some kind of responsibility in a web agency and have never heard of him also, just drop it. Its not an insult or anything of the kind of disrespect, Jeffrey Zeldman has written the one and only book you should ever read if you had to read only one on the evolution of the Web.

The full quote is the following:

We recognize that not every site can make this change now, and we don’t expect them to. But as more of us begin doing this, others will join. One man with a club is a hooligan. A thousand men with clubs are a regiment.

If you happen to read the source article you’ll see that it was written in February 2001 explaining that Web designing is taking a new turn and that standards compliant websites are the new black. In January 2009 more and more companies worldwide are turning towards standards and standards compliant websites. Web design agencies have understood that it is a quality deed that can be an added value to their sales department. Its not only saying it, it means DOING it.

Why am I saying this? Its just because I feel like that man with a club. I’m a web standards hooligan since I am leading a fight in a battle where I might be the only person doing this against a horde of Mauritian Web design companies oblivious of semantics or standards. Why are Mauritian Web companies so opposed to quality, native and basic concepts or even straightforward web designing? None are actually mastering what they are selling.

Let’s look at an example. Some person came round showing off a site on a Mauritian blog. That site is Ronde et Belle. This is a French based online shop with a lot of eye candy and has been set up by a Mauritian company Eservices.

First things first, just a quick site validation shows 147 errors. A quick CSS deactivation shows the horror of not mastering CSS and semantics as well as the use of tables in the markup. Case closed, this site is an interesting e-commerce site but lacks all the basic qualities of good website coding. What if the client decides to change the structure, the graphic layout or what not? This site can’t be changed that easily, the tables have to be redrawn to fit new structures. The semantics are quite inexistent, there’s only one H tag and it is lost in a table with a span in it.

So let’s look at what Eservices is offering. Web design services:

We provide a complete range of services to help you take your business online. Our team of technicians, graphic designers, copywriters, Web developers and programmers work in synergy to offer you a website that fits with your aspirations.

The group is said to have copywriters but their first page holds a enormous error being the word “referencing” which is a barbarism as in the context they could not find the expression “Search engine optimisation” as a service that they actually are selling. Eservices boasts of an extensive and up-to-date portfolio but all the sites present there have been built with the same lack of non-standard and non professionnal approach. Among them are the 3 new Attitude Resorts Group hotels websites which are ABSOLUTE CODING HORRORS!

This again shows the lack of professionalism of the Mauritian Web design companies. The Mauritian Internet community had quite a negative feedback on the new L’Express website back in December 2008. One thing that was held against La Sentinelle Ltd. was that an Indian company was hired for their site. Looking at Eservice’s, one of the biggest companies’, portfolio its not a surprise that the product has been outsourced. I’m sorry to say this but they get the same unprofessional code at a cheaper fare in India.

So this is how I find myself being a Web partisan for standards and CSS compliance which makes me a hooligan. I am convinced that in some years, people will follow the way I’m paving, and as Jeffrey Zeldman said, I might find friends in Mauritius to build up a regiment. Believe me or not. In some years even Eservices will have changed its way of coding and will be selling compliant websites, they are bound to do it!

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.

As previously announced, the Templatica giveaway has ended today, the 11th of January 2009. The giveaway had 10 entries (I would have preferred some more, but hey, this is a young blog). The draw has been done at 12h55 today, French Time. So here are the screen shots of the draw.

List of participants

Random dot org list choice

List injecting

Draw

As you can see from the screenshots, the draw has been made in one go. And the winner is : S4NDEEP. Congrats Dude. I’ll get to you by email for your prize. I wish to thank all the other contenders and hope to see you around soon. New things will be getting on at the Web Design Bureau of Mauritius.

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.

The Google Zeitgeist has been issued in December 2008. As expected, it bears a lot of useful and interesting information on the past year’s trends be they in terms of searches and in terms of navigation (I’ll get to this later). First things first.

One thing that I can boast about is inevitably the fact that Facebook is one of the most searched terms in the world, it is in the top 5 in most of the countries analysed by the Google team. It also crosschecks my analysis of the “Facebook” is better than “sex” trend test.

Along with these are the persons having created most of the buzz in the world. Namely Sarah Palin, Barack Obama, Heath Ledger, singing kiddos Jonas Brothers. . The American Presidential campaign is one heck of a buzz thing to closely look at and get inspiration from. World financial crisis also caused a lot of buzz but not in the “right” way of doing. This is one search expression that will keep on evolving over 2009.

So this is how the world has been running around on the Google search engine this past year. This gives us a real overview of how we use the Internet and how it stores information on everything that catches our interest.