WordPress 3.0 is the new current hip. Everybody is switching to the new platform while fearing crashes or great upheavals in the world of blogging. I’ve been a bit worried about all this for some days before taking the leap of the full WordPress 3.0 upgrade. Everything went on really fine until…

Errors through CommentLuv.

I was commenting on a blog I usually visit. When I activated its CommentLuv app, I was greeted with a “No last blog post found” error that got my eyes growing like saucers before starting squinting in pure disbelief, as if staring for 2 minutes at the error message would give me explanation. First thing I did was to check my RSS feed where I found a nice error on line 5 at column 6: XML declaration allowed only at the start of the document error. It dawned to me that the WordPress 3.0 update might have generated this error.

Recurring feed error.

After some research, there seems that this type of error is frequent in WordPress, whatever the version. So I went out to try several feed correcting plugins for WordPress but whatever the solution tried (even that of clearing all WordPress files from blank lines) it didn’t seem to be able to clear the errors out. According to all that I read, it all comes from some trailing blank lines in the feed code. Having tried everything in vain, the only solution to this was to go back to the good old hand coding.

The fix.

Fixing this error was not an easy task but I found an article over at www.w3it.org. The code is fairly simple and its implementation is easy. All in all it takes the feed generated by the WordPress core and clears it all up from any blank line held around.

What you need to do is to open this file:
wp-includes/feed-rss2.php

Open this file in a text editor and look for this line:

header('Content-Type: text/xml; charset=' . get_option('blog_charset'), true);
$more = 1;

Just underneath it add this code

$out = ob_get_contents();
$out = str_replace(array("\n", "\r", "\t", " "), "", $input);
ob_end_clean();

That’s all! Short and sweet. This code clears all empty lines and hey presto, your feed is restored.

Other feed files?

You might be asking why the wp-includes/feed-rss2.php file? Just because it is the one that is really used in the WordPress feed. You can however do like I did, I opened all the other feed files and stitched them up with the same code.

Following your permanent update quest for visibility and content optimisation purposes you may have noticed that, after being so global, web search results pages are becoming more and more local. We do tend toward custom search, and this is just the beginning.

Your goal: do better at SEO rankings.

Creating your own Google Maps file nowadays is still a bonus for your website’s SEO. But let’s bet it will soon become unavoidable. Why is that so?

Google Maps files benefit from a great ranking place in Google’s results pages, and appear almost every time, especially since Google’s upgraded its search interface in March 2010. It firstly concerned keywords with location within the keywords (town, country, zip code …), but has now been extended to many other keywords.

You probably know what this is all about as you may have keywords where your website was at top ranking position, which are now… still in top position, but… After Google Maps results!

I.E. Below with the famous French travel guide www.petitpaume.com : it long has been top of any keywords such as “restaurant + (town)” (“restaurant lyon”). Now, with Google Maps results, it certainly is less visible, and suffers great lost of targeted audience. (click on image for larger view)

Best practices.

Let’s have a look at the specifications required within Google Local to optimise your own dedicated Google Maps business file. In practice, little changes were noticed concerning Google Maps standards, so few optimisations and adjustments in time may be necessary to reach sustainable rankings on specific keywords and keep them.

Criteria:

Content (we will have a deeper look at this section below).

• Use keywords in the title and within the description.
• Choose carefully the categories you will put your Google Maps file in.
• Use pictures (and videos if possible).

Be credible.

• The more your file is closed to be fully complete the better.
• Use a local phone number and local postal address.
• Add your website URL and email contact.
• Seniority counts (as for domain names): so do not wait to create your own Google Maps file!

You must have a landing page (do not rely on your website homepage), and dedicated to your Google Maps file.

• Same address, same telephone number (local, of course).
• Presentation: make it like a VCard.
• Use keywords in the Title and H1.
• Description, contents and URL rewriting optimised on this landing page (on specific keywords).

Popularity ranking exists: use it!

• Notifications to your Google Maps file (links and direct Web users’ posts and positive feedbacks on Google Maps), backlinks quality (keywords within the links).
• Submit to phones / addresses directories (Leshoraires.fr, PagesJaunes.fr, Kompass, 118218.fr…), local directories (Lyon-Web.fr), and directly connected to your field / area of expertise directories (Lyonresto.com …).

What you should absolutely not do:

• Submit several files at the same address, and with the same title.
• Use your landing page to display other addresses (if you have several branches, create one Google Maps file and one dedicated landing page for each).
• Over optimise (excessive keywords density).
• Do not use too many capital letters (spam).
• HTML encoding in description area, titre more than 60 characters.
• Use of reserved and surcharged telephone numbers (0 800 …).

Make your Google Maps file SEO friendly.

Google Maps can be great for keywords optimisation. But be careful: use maximum 2 or three keywords, and these have to correctly describe your business activity. Anyway, you will soon find out by yourself that you will not be able to optimise more unless being blacklisted!

Your Google Map Title (60 characters maximum)

Your Title has to contain keywords (1 or 2). As much as possible, you should write down something that looks like a natural web search.
Your Title must be short as your Google Maps file will be displayed considering your entire Title.

Your description (200 characters maximum)

Description must contain keywords, maximum 3 of them, if possible already used in your Title (for more efficiency, prefer up to 130 characters). This description has to be appalling because the clicks and hard bounce rates matter for your popularity score.

Categories

You can set up to 5 categories on your Google Maps file. You must choose at least one which is referenced in the Google Business local center. Then, you can create specific categories with keywords: these have to match your activity had be as short as possible (please do not make a list of keywords …).

Additional information

Additional field can be added at the end of your Google Maps file. They can participate to your SEO ranking if well used (with keywords). These fields normally can help your business to be more specific, i.e. for a restaurant, specify the nearest parking, or detail the menu. You could add something like “Your restaurant in Lyon suggests …” for your “The Chef suggestion” section …

Pictures (logos and other photos)

Always put a picture in your Google Maps file, as it is a lot more attractive with one, and also can be optimised (name your photos with keywords : “restaurant-in-lyon.jpg”).

“Mayday”, term known for those in need of help! This is also the name coined to the latest Google Caffeine update. If you’re a keen Search Engine Optimiser or webmaster you’ve surely seen some signs of major updates at Google’s. The Google Mayday update has been running for nearly a month now though many have just recently been aware of the reality of this major update. So what is this Google Mayday update, what does it bring, and what specificities does it have?

Why Mayday?

The Google Mayday term might be amusing but it is not really. Mayday has been chosen first because the update is taking place in May and second because it is hitting websites in terms of ranking in the search engine results pages (SERPs). Now, are you spotting any difference in your rankings? If not, you should check if you’ve been ranking on “long tail keywords”. The Google Mayday update has been affecting long tail keywords rankings mostly as the algorithm seems to have been set to reorganise ranking on such keywords. I’ve seen major changes on some of my websites ranking on such keywords. Second, some websites are so affected by this update that it is a real “Mayday” call out that is being made.

Novice watch!

For those who are just finding out this term “long tail keywords”, here is a quick overview. When talking about keywords we usually refer to 1 word keywords being essential to a site such as website, seo, ranking, expert, etc. In many cases we cannot be competitive on such keywords because of the amount of “pollution” in the results pages. The solution is then to use “long tail keywords” especially in Mauritius as we’re targetting a Mauritian audience. We’ll then get long tail keywords like “search engine optimisation mauritius”. This has the disadvantage of not being well indexed on general keywords but do a great job sending highly-targetted traffic from those people searching exactly for these specific information online.

Good news or bad news?

Is Google Mayday update good or bad for your website? The answer is: it depends. Here is what has been noticed. If you’ve been ranking high on some long tail keywords for some time but have not really managed it, chances are that your page might be plummeting in the rankings. On the other side, you might be catching up with some competitors on other long tail keywords if you’ve been working on these. All in all, the Google Mayday update might be positive as well as negative for a same website. Nothing is definitive for the time being as the Google “Mayday” update is still running as of today.

Creating great content is one of the aims of publishing over the web using platforms such as WordPress. Trying to monetize a blog is another aim and advertisement inclusion is always a problem especially when talking about that of Google Adsense. On this very blog, you found out a tutorial on the easy way of including Google Adsense ads with the use of shortcode in WordPress as well as how to improve the quality of your Google Adsense ads and a guest post by Kurt from Icy Tips on the most performing Google Adsense ads size to use.

Publishing Google Adsense ads in single posts content only.

The use of shortcode is easy for such inclusion and quite handy as it comes through. It actually was the way I used to include my Google Adsense ads in my code. Here’s a newbie tip if you’re going to use the shortcode in your posts. Let’s say that you have decided to publish Google Adsense ads in your posts only. You can use your PHP-fu along with your WordPress-fu to generate your Google Adsense blocks in your posts only. This is how it works out. Make sure you’ve implemented your code as described in the post here: easy way of including Google Adsense ads with the use of shortcode in WordPress.

To make sure you publish only when you’re in a single post you need to write this code in your post:

    if(is_single()) {echo "[adsense]";}

What we are doing here is basically asking the code to check if the current page is a single WordPress post page and publish the shortcode if this is the case. Easy as ever. I usually used this to publish 3 Google Adsense slots (maximum Google Adsense slots you can publish on a page) on my single page posts. When the post was published on the blog’s front page, no Google Adsense ad was visible.

Look Ma! No code!

There’s a way to go one step further! The idea is to publish your WordPress single post Google Adsense ad in your content without having to write anycode while publishing. You might not see why this might be handy but believe me, when you find yourself cleaning up hundreds of posts shortcode inclusion, you quickly try to find another way of doing it (yes, I did clean hundreds of posts manually removing Google Adsense ads in my content). There are 2 ways of doing this.

The first one which I would call the brutal way (maybe slightly more efficient for the non PHP experienced) which calls for direct inclusion of the Google Adsense tag in the code of the single post page, single.php file in the theme folder. You just need to add your Google Adsense slot before or after your content (the the_content() tag) as it pleases you:

The classy way of adding Google Adsense slots.

Now the classy way of doing things. It is the way the Google Adsense slots are set on the Web Design Bureau of Mauritius. I wanted to do this just to be able to style the Google Adsense slot right beside the content (the Google Adsense block had to be put right into the content and I did not want to have to put shortcodes all the time). So I had to put it directly into the content. After some research on the code I found out that I could write my own function to modify the code. Basically, I wanted to take all the content sent out by WordPress for my posts and inject my Google Adsense ad into it. Simple. So I had to create a dummy content that could be easily modified. This function must be put in the functions.php file of the WordPress template. Please not that what we are adding here is a filter.

function like_content($content) {
	global $post;
        $original = $content;
		$content = "<div class=\"pub\">";
		$content .= "<script type=\"text/javascript\"><!--
                    google_ad_client = \"pub-XXXXXXXXXXXXXX\";
                    google_ad_slot = \"XXXXXXXXXX\";
                    google_ad_width = 336;
                    google_ad_height = 280;
                    //-->
                    </script>
                    <script type=\"text/javascript\" src=\"http://pagead2.googlesyndication.com/pagead/show_ads.js\">
        </script>
                    ";
		$content .= "</div>";
		$content .= $original;
        $content .= "</div>";
       return $content;
}
add_filter( 'the_content', 'like_content' );

There you go, your Google Adsense slot will always be included directly into your content without having anything to implement. The only thing you will now have to do is to style your content through your CSS file.

One step further: Google Adsense in single posts only.

Now, let’s go even further in this. The idea was to generate a Google Adsense ad slot in the single post content. The function above has the enormous drawback of setting the Google Adsense block in ALL the content. By all, I mean all, i.e. pages and single posts. This was not the main idea was it? So we need to remove the filter from all the “pages” content. For this to happen, we need another filter function which will remove the filter if we are in a page. It looks like this:

function remove_like_content() {
  if (is_page()) {
    remove_filter('the_content','like_content');
  }
}
add_action('wp','remove_like_content');

As you can see, the code analyses if the content is in a page with the is_page() method and then removes the filter from the WordPress loop by adding this Google Adsense slot suppresion.

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.

<div id="navigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about.html">About us</a></li>
        <li><a href="/services.html">Our services</a></li>
        <li><a href="/contact.html">Contact us</a></li>
        <li><a href="/register.html">Register here</a></li>
    </ul>
</div>

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.

    <ul  id="navigation">
        <li><a href="/">Home</a></li>
        <li><a href="/about.html">About us</a></li>
        <li><a href="/services.html">Our services</a></li>
        <li><a href="/contact.html">Contact us</a></li>
        <li><a href="/register.html">Register here</a></li>
    </ul>

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…).

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.

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.

I was hanging about Google making some searches when I got to look for a specific thing involving a “what is” search. Now, everybody knows the game on Google where you use the Google suggest feature to get a good laugh. I however went past the game and found that Google is exploiting this utility more than it has been doing till now.

“What is” v/s “define:”.

As a hardcore Google user I’m used to the tool’s inbuilt utilities such as the “define:” operator to get definitions. This would give these results (the example here is “heavy metal”):

In SEO, one of the first advices we give to clients is to stick to what their target audience usually types in search engines to maximise their visibility. It seems that even Google is now following this advice. With the “what is” game, a new idea must have crept up in the Google engineers’ minds. What if people use more “what is” searches than the “define” operator? This would explain why the automated thesaurus used by Google suggest* is filled with “what is”. This would also mean that the “define” operator is used only by people knowing its existence.

2010, the age of “what is”.

On this basis, Google has made an evolution to the Google suggest feature. If you now type your whole “what is” question, the tool will propose not only the usual “suggest” results but the first available result in its definition list. This would be a full clickable result as below:

I may be wrong but it is the first time that I’m seeing this new option in Google suggest and this is making me wonder about the coming changes on the search engine as well as in search engine results.

The future of search ?

This specific option might itself suggest the future of search engines as Google sees it. The main idea is that the user does not even have to go to the search engine result page (SERP) to get the different proposals or results if the one suggested by Google suggest satisfies him/her. This would mean the fall of organic ranking in SERPS as well as paid inclusion! And what if the visitor is satisfied with the Google suggest answer itself without clicking on it?

In a far-fetched concept, what if Google opens up this suggestion utility to propose the first result of the SERPS on any search keyword and not only in definitions. This would completely change the face of search engine optimisation (SEO) and get people to fight for the first place. This however, will not be the case (at least not now) because it would be a bullet in the foot of Google’s business model based on paid inclusion. But once again… what if?

*Google suggest is a pondered utility that builds and proposes search suggestions based on the popularity of previous searches. E.g: typing “face” would suggest “facebook” as one of the first proposals.

This article is based on a real life project. It aims to show small business owners, whatever the field, how such businesses can drive leads out of a small scale but really optimised website. I’ll be taking the example of a small scale French business (18 employees) specialised in aluminium zinc works with which I worked and which made over a gross million euros over 3 years just through its website.

Website. This word and its concept is rather unclear for a whole lot of users online. Worse, many business owners hear and talk about the Internet and websites without ever getting a grasp of the concept. Some understand the possibilities and power of using the Internet and others just do not want to even hear about “that thing”. Huge mistake, especially when it comes to small businesses. Why? Because small businesses are more flexible and faster than large scale ones which are already missing a lot on the web. Moreover, being small means being more available locally, thus having better conversions locally, therefore securing contracts easily.

Real life example: Euralu.

Euralu Zinguerie is a small family business working locally in the Rhone-Alps and Auvergne regions in France. It employs 18 persons who are all local experts in zinc works and aluminium stripping for roofs. Nothing to do with the Internet, heh? However, the founder of this enterprise is tech savvy and had heard about websites and was ready to give it a try with a relatively low investment. The idea was to compete with its closest competitor regional Dal’Alu. The latter is a big group with small franchises disseminated everywhere in France.

The process.

The Euralu Zinguerie process was rather simple. The aim was to (re)create its identity and build a website that would have permanent calls to action to generate leads. The site would also need to compete with a minimum but long lasting search engine optimisation.

The conversion issue had to be tackled even before getting into the design process. The latter had to be extremely light to be able to give more importance to content (hence content to search engines). After some tries, we settled for the possibility of getting into direct contact with the company from all the available pages. This gave the direction for the design process as well as the upcoming SEO.

Minimal effective SEO.

Based on its nature, the site was more of the static type with minimal PHP just for the contact application. Aluminium zinc works being a really specialised field, it would have been really difficult to find specialised directories, especially in France, to get the site boosted by backlinks and exogenous SEO. The other thing was that the SEO wouldn’t have to be maintained (reducing website costs).

We therefore had to base all the SEO on the content and treated each page as a single, optimised entity. Each page has been built around one theme and we even used the site’s static file structure to optimise the whole lot. Site navigation was set to have it always available at eye level and all the specialised parts have been cross linked to maximise crawling. We also made sure that the business field “zinguerie” was present in the domain name.

Results.

Analysing conversions and results for this website might be done from different points of view but, after a friendly call to the founder, I got material to analyse both sides of the medal: online leads as well as offline.

Online.

Okay, so what goes on online for this website? In 3 years, the website’s PR is 0/10. What? 0? Yes, 0 and this kills all your misconceptions on PR because the site boasts 2nd on “zinguerie aluminium” just after the national leader 4th place on “zinguerie alu” and between first and 10th place on most of its strategic keywords such as: entreprise spécialisée zinguerie.

Along with this, is the conversion rate. Here is a screenshot of the conversions over 3 years.

1.74%, not much? We had set a simple calculation of how much it would have cost to get these persons to convert. The investment over 3 years would have been $495/350€/MRU Rs 14 775. So these are the gross savings made over the Internet for new clients. All in all, about 60% of these clients have hired the company.

Offline.

One of the good ideas we’ve had on this site was to set the phone number just beside the contact form. Notice how easy it is to get contact information from any page of the website. This, on its own, has generated about 150 phone contacts (every new contact is asked how it heard of the company). Here again about 60% of the clients signed for business.

Conclusion

Many are expecting, at this stage to know how much money came in. I have no clear sum to give but this is what I got from the founder. On average, the minimum contract signed (due to the nature of the work and the involvement of raw materials and travel expenses) is 8 000€ (MRU Rs 338 000) and the maximum can go to as much as 30 000€ (MRU Rs 1 260 000). In remaining on the minimum average with an 60% full conversion rate from the web for this small business, the average contracts signed via the website over the past 2 years is a gross 1 008 000€ (MRU Rs 42 504 000). And let’s keep this in mind: Euralu Zinguerie is but a mere small scale local business.

So you’ve spent a lot of time designing your new web pages but are still wondering how they would look like in different browsers. Adobe Browser Lab is the new free tool from Adobe for easier, faster cross browser testing.

Since usability guru Jakob Nielsen recommended the use of mega drop down menus as useful on large scale websites, it has become impossible to ignore the way these menus are built. One of the best tutorials available is that of Soh Tanaka which drives you step by step into the building of mega drop down menus with jQuery.

Typography is not the easiest part of web design to master. It however is the core of web design. Tim Brown has set up Web Font Specimen which allows web designers to test, via simple files the rendering of the selected fonts on different browsers. A really useful tool!

Mollify is a great open source web file manager with a sleek user interface and fast loading allowing you to give access to different users on a file hosting server. Access can be managed by different levels of permissions making this tool extremely useful.

In web design, there’s one category of users that is constantly set aside, colour blind persons. We are Colour Blind is a great resource to help you choose the colours and patterns to help you reduce strain for them.

Every web designer had his/her way of writing mark-up. If you usually start out writing your mark-up with all your classes and ids, PrimerCSS is the tool for you. Just drop in your mark-up and it’ll extract a primer stylesheet with all of these to get you up and running in no time.

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.