Archive for December, 2008

What was your greatest accomplishment in 2008


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.

Simple link styling using CSS.

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

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

Here is a sample link:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Link styling test document</title>
    </head>
    <body>
        <p>
            This is a link to the <a href="http://www.webdesign-bureau-of-mauritius.com">Web Design Bureau</a>.
        </p>
    </body>
</html>

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

link01

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

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

Fonts

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

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

Dave Shea style

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

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

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

By this time, your text should look like this.
Dave Shea style
link02
Sans-serif
link03

Link pseudo-classes

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

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

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

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

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

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

The link will thus go though the following stages.
Normal link
link
Hovered link
hover
Visited link
visited

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.

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.

Best Web and SEO niche blog 2008

Grab your blank wordpress template.

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

You might also vote for the Web Design Bureau at the blog of the year 2008 contest.

Some time ago, a website known as Tomorrow’s Laundry was offering free blank wordpress themes which were a great basis for starting new blogs. Tomorrow’s Laundry has been off line for some time now and these precious blank templates have disappeared. Your lucky host has succeeded in retracing 4 of these templates and you can download them here! Here we go then:

2 columns blank template with Fixed Right Menu
2 columns blank template with Fixed Left Menu
2 columns blank template with Fluid Right Menu
2 columns blank template with Fluid Left Menu

The honours eventually go back to the original authors: Tomorrow’s Laundry. Thanks for these templates guys!

Templatica Giveaway by Web Design Bureau.

Welcome to the Web Design Bureau Bouquet Banané Bash. This is a Mauritian Web designer oriented contest but is also open to anybody wanting to have their hands in Web Design as well as people wanting serious premium blog/site templates (you don’t have to be a designer to use them). You can also offer it to somebody who’s into this. So, what’s the Bash about? A GIVEAWAY!

templatica

Web Design Bureau of Mauritius is offering you a full year Rs660/$24 worth membership at Templatica, the new brainchild of CSS Globe‘s frontman Alen Grakalic. Templatica is a premium template club aiming to provide premium CSS templates to its members for commercial use as well as for educational purpose.

What does the membership give you?

An unlimited access to all Templatica templates which have been cross browser tested and implemented. A new upload section will soon be set up by the Templatica team to give you access to premium templates built and sold by other Web designers.

How do you enter the contest?

Leave a comment on this post on how/why you first got into the Internet and what you felt when you did so? The contest is open until the 11th of January and there will be a winner will be drawn from the list of commenters. So Mauritian Web designers/non-Web Designers, fire it up! :grin:

Get your pro website/blog free of charge.

Mauritian Web designers (and Mauritian budding/experienced bloggers), go pro while saving your money! One of the major hindrances web designers go through in Mauritius is the availability of ressources. Along with that comes the price to be paid for hosting and domain name. There has been a good discussion about domain names over at Islandcrisis some time ago.

I don’t really know if this is true but I think that it gives credit to a Web designer to have his/her own website on a hosted domain name. The problem remains that foreign currencies are still too much compared to the Mauritian rupee and with the economic crisis, things are not that easy. So here’s the deal: get yourself a free hosting, a free domain name and a free CMS or blog platform and get it running.

How can this be done? Easy, just use the free things available to you over the Internet while trying not to fall in the traps that hosting companies tend to prepare for you.

You asked for a “free” domain name?

First of all you’ll need a domain name. Get it free for life over at Co.cc. What is interesting with this domain name offer is its free for life guarantee. There you have a domain name free of charge. Opposed to well-known hosting companies offering you free domain names and hosting, co.cc does not trick you. Most of the forementioned companies usually offer a domain name and ask you to pay for it a year after.

Your site needs a home.

Hosting is what usually costs the most. You don’t need to go for professional ultra user centered hosting with dedicated servers and what not. You might be interested in paid hosting over at big hosting companies. If you still want to keep the money in your pocket head over to 000 Web Host where your hosting will cost nothing. Not nothing like in “very cheap” but nothing like in “nothing”, completely free hosting.

You now need a site.

Well, for Mauritian Web designers, I’m sure you have your own recipes. For non developers and designers alike here is a series of 13 CMS (CMS = Content Management System) that you can use. Designers, you might even get inspired by one or several of them. For bloggers, you might get on with a WordPress install which will be different from the Saas usually found like blogger or wordpress.com. WordPress is also interesting in the sense that it can absorb all blogger (and several other platforms’) posts.

The good thing about CMS or blogging platform is that you don’t need to be a developer or designer to have a great site. Most CMS have skins or templates that you just have to download and add to your site to change its look and feel. This is the case actually for the Web Design Bureau of Mauritius.

Your turn to work now!

So here you have it. The recipe to go “pro” while saving all your money. This is a real investment in terms of visibility. Best of luck to you all.

Saas: your new business model?

What are Saas?

Saas means Software As A Service. It might seem obscure and you but you might also be using saas equivalents without noticing it. The other question is also, why Saas on a web design site? Simply because it might trigger ideas and change your way of seeing the services or solutions you are building for each client. As far as I know, Saas solutions are not actually offered by Mauritian companies.

Saas concept.

The idea behind Saas is simple. It is a full blown application that is hosted on a remote server and which is accessed through the Internet meaning that the user has access to the service only and is not hindered by the issues of upgrades, server versioning, OS compatibility or all the minor glitches that might crop up when dealing with a desktop software.

Saas example.

A simple real life example of Saas is “free” web based email offered on the Internet such as Gmail, Yahoo! Mail or Microsoft Hotmail/Live. Each system follows a same scheme, the application is developed, maintained, managed and hosted by the vendor and the user subscribes to the service via the Internet. The software is thus maintained by the vendor and the service it offers is the only thing the user has access to.

On a much much simpler basis, an extranet can be considered as a Saas. Thus Saas can be used either by end users such as free web based email users, facebook users or blog platform (blogger or wordpress for example) users in the same way as companies can do it. For example, Campaign Monitor is an email marketing service built on the Saas concept.

How does it work and the advantages?

Contrary to traditional softwares, the Saas work on a subscription basis (free or paid, free being supported by advertising) compared to the one-time fee offered. The software is not the property of the user and s/he does bit have to download and install a software. This results in:

  • Lower costs for the user.
  • Smaller storage requirements.
  • Fewer personnel to handle and maintain.

The vendor also gains from this as it can rely on a continous stream of income which might be more than traditional licensing. Piracy and unlicensed use of the software are also reduced and, in some cases, cleared resulting in the reduction in losses associated to these.

Interested?

Saas is getting important and more companies are adhering to it. It seems to be the future of web based services and softwares. Below are 3 articles that might help you see how Saas works in real life and what are the pros and cons of such solutions.

An ultimate CSS layout guide.

Search Light Digital has published an interesting article on the different CSS layouts you’ll come to build a website. Check out the last guide to css layout you’ll ever need.

Copywriting?

There has been a large number of website publications in Mauritius these last weeks along with disastrous concepts such as the L’Express website (discussed over here). One of the major problems that seem to be quite difficult to get over is copywriting.

As stated in my last post on Fantasmédia and in the discussion over the new L’Express website, the use of language, be it French or English, is always biased in terms of quality and consistency. Many a Managing Director thinks that a post or a description of an online activity is either a transcription of what is written on their printed ads or just a way of trying either some black hat seo or a stupid challenge of putting the largest number of adjectives in one go.

Web users actually don’t care. They want concise yet informative texts. They do not want to read lengths of “how we are a great company and will conquer the world for you as all our employees are Supermen disguised in Batman with Spider-Man’s super powers.” What they need is “show us the needs and what solution you have and what do I gain in using it.”

Using good copywriting techniques will not only deliver a quick and insightful message but also help your SEO because one thing companies usually forget, the person looking for information will be using just plain everyday {insert language here} to find the product, so cut the grass under your challenger’s feet with this.

Want to know how to do this? Check out this old but still up-to-date article on A List Apart by Erin Kissane, learn the techniques and spice up your website with the simple yet to the point advice.