WebDesign Bureau of Mauritius

Announcing the new series.

wdbm — Tue, 06 Jan 2009 09:49:48 +0000

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.

Grab “Quicksand”.

wdbm — Mon, 05 Jan 2009 09:23:30 +0000

Wonderful free sans-serif font called Quicksand and released by Andrew Paglinawan through Typophile.

Get Snowish.

wdbm — Mon, 05 Jan 2009 09:22:17 +0000

I would usually have blogged about this in the minipost part of the Web Design Bureau but the quality of the work is so astounding that I had to publish a whole post on this icon pack. Designer Saki has produced one of the sleekiest and most detailed free icons set out there. Another thing is that the list consists of 500 icons. A huge collection! Different sizes are available and the pack includes a Windows theme package while the other icon sizes can be used for websites. Grab them through the links offered on Saki’s DeviantArt portfolio.

Facebook trend confirmed.

wdbm — Fri, 02 Jan 2009 13:03:41 +0000

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.

A kick in the groin!

wdbm — Tue, 30 Dec 2008 13:54:08 +0000

Google officially says that Gmail is faster on Firefox and on Google Chrome. Not on IE up to IE7 and might be faster on IE8. That’s some real browser killer. Its said to be something like two times faster!

What was your greatest accomplishment in 2008

wdbm — Tue, 30 Dec 2008 13:16:31 +0000

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

Guns ‘N’ Roses, Chinese Democracy, giveaway contest on Sachin’s blog.
Jason Mraz giveaway contest on Sachin’s blog.

OK people, for once, we’ll not be talking about business or web or design on this site but we’ll just make a personal review of our own year. So, what has been you greatest accomplishment in the past 12 months? What have you done that has changed your life or that has made you the most proud? Did something give you infinite satisfaction? Maybe it was professional, personal, or *spiritual*. Tell about it in the comments.

Win the new G’N'R album!

wdbm — Mon, 29 Dec 2008 09:24:35 +0000

Your host Sachin is offering a brand new CD of the last Guns and Roses album, Chinese Democracy over at his personal blog. Leave a comment to enter the contest and win it.

Effective Web design.

wdbm — Sat, 27 Dec 2008 08:27:38 +0000

I was about to write a long post about this when I found this extremely well written and to the point article by Eric Wegerbauer on effective web design. Not too much and precise. Great article Eric!

Simple link styling using CSS.

wdbm — Fri, 26 Dec 2008 16:00:45 +0000

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:

Link styling test document

This is a link to the Web Design Bureau.

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

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

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:

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.

Web and SEO niche award for WdbM.

wdbm — Fri, 26 Dec 2008 12:42:00 +0000

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

Just a quick post to announce that the Web Design Bureau of Mauritius has been awarded the Best blog in Web and SEO niche for 2008 after the Blog of the Year 2008 competition held on Island Crisis. Thanks to all who voted for the Bureau and to Avish whose dedication to the Mauritian blogging community cannot be compared. A huge Cheers to all Mauritian Bloggers out there.