WebDesign Bureau of Mauritius » Design

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

Web Design Mauritius — Tue, 20 Jul 2010 09:10:36 +0000

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:



	FIR technique


	This is the text to be replaced

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):

<

	FIR technique
	


	This is the text to be replaced

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.



	FIR technique
	


	This is the text to be replaced

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:



	FIR technique
	


	This is the text to be replaced

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.

The secret of strong and em tags.

Web Design Mauritius — Mon, 10 May 2010 08:39:37 +0000

Some HTML tags often draw confusion because of their similarities with other tags as well as the way in which they display and style content. Examples of these are blockquote, cite, strong, em or i. Each element has features and, though they might accomplish the same goal, they might be altogether really different. Knowing those differences will help improve the markup of some pages. We’ll concentrate on those important tags that are strong, b,em and i.

Conveying structure.

These tags, though small ARE important. They are actually more used than we would like to admit and their first use is to give better sense to the content. Putting a word in bold or in italics cannot mean anything else but that the word is important and that we want to draw the reader’s attention to that word. Well, the W3C has created the strong and em tags so that the markup can convey the same importance given to that word. This is the basic idea of it all. So the first thing you need to know about these tags is that b and i are presentational elements while strong and em are structural. This explains why so many web designers would be telling you to swap the use of b for strong and i for em.

How and why?

Big question now. How and why (and probably when) to use these. The question might sprout especially when considering the fact that the b and i elements are not deprecated. Let’s look at how the W3C defines these tags: em indicates emphasis and strong indicates stronger emphasis. Bingo, the answer has been here all the time. Both of them are a way to convey importance to a word or a text but there are 2 levels of emphasis here. This tells you when and why you should use them in your code though b and i would have the same presentational effects but will only be giving information on the fact that the text is in bold or italics or not.

But wait, there’s more to this. The use of those tags have an impact on the way screen readers and search engine robots see the content.

Accessibility.

In terms of accessibility, a screen reader uses the strong and em tags are emphasis levels. Screen readers will, as the W3C puts it, “change the synthesis parameters, such as volume, pitch and rate accordingly”. This surely nails it. If we were using b and i to have visual representation we can get to a higher level by using strong and em as they will be doing the same visual job while conveying the structure and working towards more acessibility.

Search engine optimisation.

This information should be used regardless of whether you’re using strong, em, b or i tags. These participate in search engine optimisation. How?

Simply by taking advantage of the human element in the search engine robot’s algorithm. Here is the general concept: if a word is set under emphasis, it means that the author wants this particular word to stand out of the rest to catch the reader’s attention. This might therefore be considered as a KEYWORD! This is how the strong and em elements are treated as conveying emphasis, therefore helping SEO.

However, don’t run over and start stuffing keywords in your content and emphasising them with half a dozen strong and em tags around them. You’d be telling the robots you’re spamming them.

One step further

Some extra points here. If you need to have presentational enhancements to your strong or em tags the common practice is to wrap a strong tag around an em tag like this:

This is the emphasised text

The problem here is that you are giving a level 2 emphasis to an already level 1 emphasised text. This would not mean anything in terms of structure though it will in terms of presentation. Let alone in terms of accessibility.

There is a solution to this: Cascading Style Sheets. Let’s imagine you need all texts in bold and in italics but still want to keep your levels of emphasis, you would style your tags like this:

strong {
    font-style: italic;
}
em {
    font-weight: bold;
}

Digging even more into this, you can add classes to those tags which will give you 4 visual presentations of emphasised texts while keeping the 2 levels of emphasis.

strong {
}
em {
}
.bold {
    font-weight: bold;
}
.italic {
    font-style: italic;
}

You would be using them in your code as such.

This is the emphasised text
This is the emphasised text

A final word.

There you have it then. A full overview of the secret of the strong and the em tags compared to the b and the i tags. Any questions? Drop them in the comments!

Search Engine Optimisation (SEO) for “coming soon” pages.

Web Design Mauritius — Fri, 23 Apr 2010 10:22:44 +0000

You might have been working on a new website project for some time or are planning to launch a new site. You have prepared your project, secured your host and domain name and prepared your database. You will now be heading for either deployment or development but know that your site will not be online for some time. You will most of the time use a dummy, a “coming soon” page. This page must be optimised for search engines!

Anatomy of a “coming soon” page.

Most of you have heard of “coming soon” pages. There’s a huge collection of those online teasers for great new apps or sites that will be found on the server some time in the future. For many projects, a deadline for launch is settled, for others the launch can vary from a week to a year in extreme cases, and maybe more… So it might be a good thing to prepare your “coming soon” page.

Such page usually consists of:

Information on what the future website will be about.
What the website will be marketing.
Launching date.
Update/launch signup forms to acquire prospects.
Providing short updates for buzz.

Other uses?

Many companies use their “coming soon” page to pre-establish their brand-name by working a lot on the visual impact and the message. Other strategies include the creation of Twitter accounts to gather some followers as well as Facebook pages, all interlinked with the “coming soon” page. There is a lot to get from such a page but you can try getting even more by SEO-ing the page.

Why should you SEO it?

The “coming soon” page must be optimised for search engines for many reasons. First of all we must take one important fact into consideration with search engines basing ourselves on the Google algorithm.

The Google Sandbox.

Google gives weight to older pages and domain names. This is why the Google Sandbox exists. It is here to prevent younger sites from hitting on older ones which already have the big G’s respect. You might not know when your site will be launched but optimising it will help you have an online presence and above all be out of the Google Sandbox when you launch it if you have been lagging a bit behind.

Nurturing your future ranking.

You have competitors on your main keyword on Google. Optimising your “coming soon” page for that keyword will get the domain name and the page to start competing for better rankings on it. At the time of the launch you might even be surprised by how fast your ranking will be evolving. This is one extremely good reason to do this.

Getting Google page rank.

Google page rank is one thing some webmasters live by. Even if it is not as important a factor as it was before it is an indication of the good health of a site. Good page rank is simply built through backlinks and site age. If your site is taking a whole year for launch, why should you lose one year’s PR and backlinks (which you can start building through comments or links from other sites)? A good example is inhousegrind which has a Google page rank of 3 while still bearing a “coming soon” page.

Let’s talk about this.

Using search engine optimisation techniques for “coming soon” pages is a great option on a whole site’s SEO. All the SEO juice gained over the “coming soon” period will be redistributed to the other parts of the website when the latter is launched. I have personnally tested and used this technique and the returns are always positive. Why not try it then?

Dropping unnecessary tags in your HTML code.

Web Design Mauritius — Tue, 20 Apr 2010 09:31:07 +0000

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.


    
        Home
        About us
        Our services
        Contact us
        Register here

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.

    
        Home
        About us
        Our services
        Contact us
        Register here

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.

You should be (over-) using the H (heading) tags.

Web Design Mauritius — Thu, 15 Apr 2010 11:00:12 +0000

Heading tags (h1, h2, h3, h4, h5, h6) have always had a bad reputation in web designing. The main reason for this is the beastly appearance these tags when they have their default styling. Many a time web designers have thrown the H1 tag out for the use of a H4 one just because the latter has a smaller font size. The H tags are, however, core elements of page building and SHOULD be used and even overused.

The ugliness can be put aside as all this can be styled (as they have always been) with cascading style sheets (CSS).

Semantic web and standards.

With the advent of standards, web designers have understood that clean semantic code is what must be produced be it for maintainability, load time or cross browser compatiblity. Heading tags are part of this semantic code as they are here to structure a page. Their mark-up has been created to give the maximum structuring possibilities to pages. Some tips on their usage:

The top level heading (bearing the title or theme of a page) should always be a H1.
There can be only one H1 in the entire page.
Use heading tags logically, there cannot be suh-headings (H2/H3/…) before a H1.

Search engine optimisation.

In semantic web, headings bear the “titles” of pages and sections. These are therefore important information that a page is giving out to its visitors. Search engine robots have algorithms that take this into consideration. Heading tags are thus analysed by these robots and keywords included in titles are given more weight (this is not an incentive to go for keyword stuffing in headings). Using headings is therefore a good way of working on a page’s ranking.

Another interesting angle on headings and search engine optimisation is the fact that links are allowed in headings. Using headings and keywords along with links result in good optimised anchor text for any page. This can be taken into consideration when working on onsite deeplinking and SEO strategies. The current trend is to put a site’s logo and link in the H1 tag. This does not bring much in terms of SEO as it would do by optimising a page on its own theme and content.

Heading tags and usability.

Nobody likes to read huge boring text blocks on screen. The boredom is usually accentuated by the monotonous looks of long texts. Adding headings reduces this in the first place. Second, headings will allow a visitor to quickly scan a page and the different themes or points the page holds on a particular subject. This comes as a usability tool in this case.

Let’s talks about this…

Headings have a lot of advantages and are here to help web designers improve their code, its structure, usability as well as SEO. So why are they still not being used as such? Try some of the premium WordPress theme sites and check the code on some of their live demos, the designs are great but the code rarely makes good use of the headings.

Speeding your page load time will improve your Google ranking.

Web Design Mauritius — Tue, 13 Apr 2010 12:00:55 +0000

It is now official. Speeding up a site’s page delivery will be beneficial for each page’s ranking in the the Search Engine Results Pages (SERPs). So speed is now a ranking factor at Google. This has been officially announced on the Official Google Webmaster Central Blog.

Speeding up websites is important — not just to site owners, but to all Internet users. Faster sites create happy users and we’ve seen in our internal studies that when a site responds slowly, visitors spend less time there. But faster sites don’t just improve user experience; recent data shows that improving site speed also reduces operating costs. Like us, our users place a lot of value in speed — that’s why we’ve decided to take site speed into account in our search rankings. We use a variety of sources to determine the speed of a site relative to other sites.

Satisfied users.

If you still haven’t grasped the concept: Google has always emphasized that it liked pages made for users and not for search engines. A faster loading page means a satisfied user and as Google has all to win when it concerns satisfied users it is using what satisfies them, fast pages, as a ranking tool. Now, those having never seen the usefulness of Google Webmaster Tools can start running there to open their accounts.

How to?

There are some simple ways of improving a site’s speed. First things first, use pingdom tools to evaluate your page’s load time. What I like with this new factor is that web designers will have to go back to the basics, re-use the core of web design coding, i.e. writing standards based code.

Standards.

Great day for standards. Using semantic and clean code will definitely help improve a page’s loading time. Using basic and clean tags will help your pages load in a whizz. Make sure you do not use deprecated tags and keep to your document definition (strict, transitional…etc.). Moreover, when using standards you get yourself a step ahead in optimising your code as the latter is easily maintained and you can just get any other coder to dive into your page to optimise it.

With the use of standards, you are bound to reduce the number of lines of code you would have originally used. Thus, pages are lighter and load time is decreased. All benefits!

External CSS.

Using standards implies the separation of presentation and content. This is done through the use of Cascading Style Sheets (CSS) and, more important, the use of external CSS. This also has an impact on your page load time. Why? Having all CSS in one external file means that the file will load only once (on the first page a site is visited) then, the same file is used by the browser to load all the other pages’ presentation. This means that your site’s pages will load faster as the CSS will be read only once and you will not have duplicate code to maintain all the time in each page if your CSS is written in them.

To get the most out of your CSS in terms of load time you can also improve the CSS file itself. Check out a previous article on how you can make pages load faster by minimising the CSS file.

External behaviour.

Should you be having behaviour on your pages (be they through Java or DOM scripting), the same advice as that for CSS goes. You need to externalise all the code to one external page to avoid constant recalls to all your functions each time a page is loaded. You can also think about progressive enhancement to improve the page loading when scripts are not activated or fail to load. All in all, keeping these simple and short will help improve your page loading capabilities. Other enhancements include the loading of all scripts after the content.

More…

These here are some simple examples on how the code can help pages in improving in terms of load times. It is very important to take these into consideration at the beginning of a project to maximise its ROI. This is a great example on how code and coding strategies can improve SEO, and Google is now making use of it.

You can push further in the ways a page’s load time can be improved for example, the choice of your server or image optimisation strategies.

Failure of the web design community in Mauritius?

Web Design Mauritius — Wed, 07 Apr 2010 10:19:34 +0000

Understanding and mis-understanding form part of our daily life. Mauritians have a particularity though. The “outside” view is really important in our society. Showing-off. Along with that we hold on to concepts that everybody rejects publicly but doing all the time. I would put it as it is sometimes the case of “doing better than the Joneses”. How many tuned cars do you find in Mauritius? How many “competition lacaze” have you seen? All in all, in our society it is a “I’m [better/smarter/richer/...insert adjective here] than you” race.

Coming to this, I thought that by launching the Web Design Bureau of Mauritius, I would be able to join a real community of Mauritian web designers. I was dreaming of networking and exchanging passionate findings with other web designers from Mauritius. I was longing to help them in understanding SEO and web design to its core with an objective of bettering the whole system. I hoped for a strong social media driven network where all Mauritian web designers would be exchanging and showing with pride what we could accomplish from our small island. How wrong was I in believing this! There is no community in Mauritius and will not be for a long time.

There’s no “I’m better than you” in my endeavour but a real want for networking and sharing. The problem is that the Mauritian ego is what pervades and that ends up in people not accepting positive criticism. For them only the word “criticism” comes out and they forget the “positive”. Everybody in Mauritius is best at what it does (irony!). Others are even declaring themselves guard dogs of the Internet in Mauritius. You can’t be all. Either you’re a web designer and can at least discourse on Zeldman’s “Web Designing with Web Standards” or you’re a jack of all trades and master of none.

Working in a specific field means that you have to know what is going on in the office next to you where UI designers or web marketeers are working. You have to listen and learn from them all while explaining your job to them. You have to know what is the use of community management as well as that of server redirects through a .htaccess file. You have to see what are the advantages of deploying a website through a CMS than building from scratch. You have to understand why such type of code is incompatible with SEO… Where the magic happens is when new techniques are uncovered, great ROI is achieved or just simple genius is created from the mixed research of all these teams.

Networking seems to work right with all people in other fields gravitating around web designing: SEO, expert web management, content building, copywriting or programming but never with web designers. Problem: ego again. You can have a point of view and stand behind it but you also have to accept that others’ ideas can be different. You can discuss about the pros and cons without adding a “g*g*t” or a “f*l**r m*m*”. Sadly though, I’ve seen too many of these around. Few web designers are in for community building and sharing. Many treasure their misconceptions as gold because in the world of the blinds the one-eyed are kings. This goes for companies too.

The web is not mature enough in Mauritius and the cultural tissue very strong. The Internet is an online society that recreates part of our common culture. This is what is happening, the Mauritian culture is seeping through on the online community and recreating what they usually do in everyday life. This is where the Mauritian web design community is failing!

Let’s talk about this.

All this might look like I’m trying to do “better than the Joneses” but it is not the case. It is a real plea to have a strong network in Mauritius.

Now, let’s see what’s really happening: most of the companies and web designers would say that others will steal their work and clients if they enter a community. None actually thinks the other way round. Imagine the impact on a client when you say that you are active in the Mauritian web design community, that you are working hand in hand with others to give better results for that client, to make the web a better place. This would imply that you are not only after your client’s money, this would also imply that state of the art techniques will be used for that client’s site thus reassuring it, this would imply that all the buzz around web communities would also shine on your own business!

Do you think that the industry would get better if a real web design community is built? Do you think that Mauritian web design companies could be real engines of such communities? Would Mauritian web designers gain from having an online community? Does this really imply a change in the way of thinking (I might be getting it all wrong)?

Nobody needs web designers.

Web Design Mauritius — Sun, 28 Mar 2010 16:28:51 +0000

What have we done? What has “web 2.0″ brought upon us? The web is maturing and democratisation is on its way. This is why non-techs are making heaps of money over the web with blogs while having 0 knowledge of the way it all works. Mind you this is great as the web is now open to everybody and people are using it as easily as possible but some things are really hard on us web designers and web project managers.

We are family!

Buy computer, get broadband ADSL, surf! This will turn you into a web expert. It is true story that a lot of web designers face the problem of having people who use their own experience and have the “my kid made his own website” syndrome when faced to web professionals. Below are some of the glorious things I personally heard.

“My boyfriend spends hours surfing the web and is a huge Internet consumer, and he says that this website is crap”. This is what I once heard from one of our SAAS managers in a company where I used to work. She was good at selling the web service but when it came to criticising any web designer’s work it was the boyfriend that got into the picture just because he spent hours over the net.

“I have led the reflection over what my website should be doing. I only want people having the same level of approach to my business as I have to surf my site. Others can just sod off. I know it is easy to filter them. I am a pioneer and not a follower, so I will not accept SEO oriented text and I want my site to be WOW but not use the same codes as others. I am used to the web, I surf all night and I want to be on everything that a person types in terms of keywords on Google. Build a website that seduces me!” All this nonsense is what I have been hearing from… a private school director in need of a new website to bring in new recruits!

“We want a paper archive (800 PDFs) on our website. I believe it is an easy add.” This one came from a director preparing a huge conference.

The problem.

The underlying problem in all this is not that these people will end up having websites that will not work or will be the opposite of all the objectives they should be aiming for along with the loss off money, it is that web designers have made things too easy. Actually, they have not made things too easy but they have made things look easy from the outside.

This is the core of our work, building tools that accomplish goals but in a specific way: being user centred. The sole fact that the tool is user centred means that the use of the website must be thought out beforehand and that the user navigates easily and has a great experience and accomplishes the goals without feeling the technology lying behind. We all did a great job and succeeded in this endeavour but the problem is that a majority now thinks that if the front-end is easy to use, the back-end’s implementation must be as easy.

This also runs for web project management where, for some clients it all boils down to choosing the titles of each navigation tab or SEO experts where clients just end up saying “stuff the damn thing with keywords as well as our competitor’s name and we’ll get the first place on Google”. All seems too easy now.

No way out.

I won’t be getting into the details here but apart from the horrors I hear in my day job, the Web Design Bureau of Mauritius does get its share of eccentric demands everyday. However, a great resource to see what type of incongruous thoughts clients have is Clients From Hell. So what happens now? How do web designers and all work with such type of people?

Well, major web design blogs have lists of personae of the type of client you should avoid. For others, it is experience that makes it all. You see the client, you judge him/her at the first contact and you run off if necessary. Just don’t waste your time. It is sad to say so but if one has to spend precious work hours trying to educate a client, that person should leave the business. This said, it can be done is you work as an in-house web designer.

Let’s talk about this.

Do you think we made a mistake in making things look so easy? Is there a way of changing client mentality (which I think will never change)? How do you/would you react in such situations? What is YOUR view of the Internet, do you think that things look too “easy” now?

Optimising your site to get Google sitelinks.

Web Design Mauritius — Mon, 22 Mar 2010 14:36:24 +0000

Google has unveiled a lot on the way its algorithm works and on how the company actually works to promote its own products on the engine. Google Webmaster Central has published an article on the SEO report cards that Google uses to maximize its products’ visibility on its own search engine. There is a lot of things present in there and it all gravitates around tuning up one’s pages for better ranking and increased user interest. One part on which I really perused is the building up of sitelinks.

Sitelinks for the dumb.

Google sitelinks are very easy to spot. They are direct inputs to a site’s inner links, categories, themes… The advantage of such an option is that it allows the user to go directly to some specific part of a site, thus maximising conversion by, for example, removing any redundant step like going through the main page. Sitelinks look like this:

The Google SEO report card defines it as such:

Sitelinks are often a signal to users that they’ve found the result they’re looking for and can help in finding information faster.

How to get sitelinks?

This is the trick question in the whole system. Webmasters can’t choose when sitelinks are shown. Up to now, nobody knows when, how and who triggers the sitelinks. There are different assumptions on the subject but no one really knows if it is human powered or not. However, the report card shows that there is a 56% of changes to have an incoming click through sitelinks on a search engine results page. So what can you do to get sitelinks then?

The SEO report card states that an improved site organisation and good internal linking strategies can improve the chances of getting them. Here are the instructions:

use a hierarchical site structure
use descriptive anchor text and links pointing to internal pages
avoid deep nesting of content behind many subdirectories

Bonus feature.

The bonus given by Google concerning the sitelinks is that they can be optimised for providing relevant information, helping the users find the content they want faster and, a really nice way of putting things, taking up more real estate on the search results page (the result taking more space on the page).

The card coins good sitelinks as “Appealing Google Sitelinks”. These sitelinks are those that really do the job, those that give the relevant information or provide the user with the best options. For those oblivious of the use of Google Webmaster tools, there is an option in it that allows the webmasters to block unappealing sitelinks.

Let’s talk about this…

There you go then. Have your say on sitelinks. I think that some of the information must not be taken as rules of law but believe that they are nice starting points for such optimisations.

Have you been trying to get them for specific sites? Have you been working on them and have you had positive results? Will you be using the Google Webmaster Tools to get those links?

Facebook login issue: how Facebook shows that the web will never be conquered.

Web Design Mauritius — Tue, 09 Mar 2010 12:30:20 +0000

Some weeks back, Read Write Web published an article on how Facebook Wants to Be Your One True Login. So far, no problem. The author, Mike Melanson, did not however cater for the possibility of indexation of the post on Google based on the “Facebook Login” keyword.

The Google trap.

What happened is that the post made it to the top of the search engine’s results page on the “Facebook Login” search. Next thing was hundreds of Facebook users flooding on the post and trying to connect to Facebook via the “Facebook connect” plugin in the sidebar. This ended with a hilarious (from a web project manager’s point of view) thread of angry/confused/insulting/[add adjective here] comments from lost users, many complaining about the forthcoming death of their cows on Farmville.

Here’s an excerpt of the comments found over there.

User interaction with search results.

This sheds some light on how the average Internet user deals with websites. Let’s get back to how these users got to the Read Write Web website: most of them typed “Facebook login” in Google and clicked on the first result. This means that the use of Google as navigation tool is now one of the trendy uses of the search engine and that people click with confidence on the first result even without reading the result! Blind usage, that would be it. This also stresses on the importance of being in the first, if not being the first, on a given keyword.

User interaction with a website.

Now things become serious. The Read Write Web interface is red and white and has nothing at all in common with the Facebook login page. Nothing here reminds of Facebook except for the article title and the logo copied off Facebook.

This however did not give the information to the people getting on the website that this was not Facebook or Facebook’s login page. Does this mean that colour branding fails? Does this mean that people not only DO NOT READ urls nor TITLES or other elements NEITHER? Does this mean that if you deliver a specific content to people when they are here to do just one specific thing, they will not read the content. So, if Facebook sets up an info saying that all accounts will be linked to the users’ bank accounts on the Facebook Login page, all these persons will automatically click “OK” and get in?

Pushing the observation further.

After a whole lot of thinking and working in the web design field, this Facebook Login issue shows that we will never really understand the web user. The latter is an entity whose usage of our tools will never really succeed in giving out the best service to all users because they will always do what they want. Another thing is that the web user is emotional. It will be browsing the web with passion and just as something unexpected crops up, the mood takes over and confusion leads to anger.

Let’s talk about this…

If you are not a web professional, do you browse websites in the way the people on Read Write Web did? Do you think that web users are credule and their frame of mind will never be understood? Do you think that enhanced usability and site building can help in such situations? Do you agree with the statement that this shows that a user comes to a website for one thing and can only be satisfied by getting that thing?