The Web Design Bureau of Mauritius » CSS

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.

Speed up your web pages via the CSS file.

Web Design Mauritius — Tue, 15 Dec 2009 13:03:55 +0000

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

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

The Tool

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

The Trick

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

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

More ?

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

Most Web designers do not use CSS frameworks.

Web Design Mauritius — Thu, 12 Mar 2009 16:47:38 +0000

I’ve been hanging around CSS tricks which I didn’t visit for quite some time. It happens that Chris Coyier, Css Tricks editor, made a survey on the use of CSS frameworks. These are used to rapidly prototype website designs. I have jotted on some of them around on the Web Design Bureau : 960gs and Blueprint. As things go on, these are useful tools but I don’t use them as I have my own way of developing websites and writing my own code. I also have a tendency, when I am the code master, to code things from scratch following specific design patterns.

Now, if you don’t use a framework, it doesn’t mean you’re a dork. You might just not have time to try and master a tool or have difficulties that any developer has to dive into other people’s code. I, for some time, thought that I was not doing a good thing for not using frameworks and I have tried some of them. I would like to stress that frameworks should be used for rapid prototyping, I don’t think that they’re good groundwork for complete integration. You might want to have complete control over your code.

All in all, my thoughts were confirmed in reading the CSS Frameworks survey results. I don’t have anything against them but I just like to control and throw my own code. The poll confirms that over 50% of the Web designers (answering it) do not use any framework. Others do use frameworks but the results are disseminated among a variety of those and many build their own. If we look at things the other way round it also means that around 30% of Web designers are using frameworks, meaning that these are gaining as design patterns and standards.

I think that it takes time to master a framework and this is whart hinders their progress in the community. It might change with time and who knows, I might myself be in the new riders of frameworks.

Simple link styling using CSS.

Web Design Mauritius — 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.