Tag: CSS

CSS Sprities and Website Optimization

One of the latest and most well established design practices are CSS sprites. This is the practice of combing multiple images into a larger and single, composite image. By using the CSS background-position property selected portions of that master image (or sprite) are displayed. The main issue here is how can a larger image witha larger file size be beneficial, especially when compared to several smaller images? The answer lies in HTTP requests and Yahoo’s 80/20 rule explains this much better than I could! To summarise, the numbers of HTTP requests to the websites is drastically cut, thus loading the page much faster in  single request. Another major beenfit is that not Javascript is required for mouseover code, so you can make image rollovers easily. I have used this technque in the past, but like a lot of people never knew it was called sprites.

In fact, using sprites are so effective many of the internets biggest site’s are using them, all in slightly different ways. On such sites a truely huge number of requests are saved every day. For example, Youtube, Google, AOL,  Amazon and Apple all use CSS sprites. Take the mimilist example of Google (left):

Google CSS Sprite

Youtube, does things slightly different and uses a absolutely very simple sprite and applied the background-position property to each link class. Here’s the simple HTML used for the list: Continue reading CSS Sprities and Website Optimization

301 Redirects for SEO Using htaccess

301 Redirects Prevent 404 Errors
301 Redirects Prevent 404 Errors

Google treats www.website.com and website.com as two totally different websites. This is very bad for your (or even a client’s) website as it may lead to duplicate content and different pageranks to those sites.  This is how Google “canonicalizes” the url and is very bad from an SEO standpoint.

In essence, a web server could return totally different results for each of those pages. I have also encountered the situation where clients have set their preferred domain in Google webmaster tools, have given out the opposite version for SEM and wonder why they don’t see results :)You can easily check the above by using the “site:” operator in Google search. E.g. site:www.website.com and site:website.com

You can use “mod rewrite” rules as a powerful method for redirecting many URLs from one location to another.  This is a simple server level technique for handling redirects. The way people handle this canonicalization issue is purely a personal choice, although the below method can be altered for directing to the none www version of the url.

The .htaccess file is simply an ASCII file created with any normal text editor. You need to save the file as ‘.htaccess’ (no filename, .htaccess is the extension!). Open you newly created .htaccess file in your favoured text editor and add the following lines of code, replacing domain.com with your domain:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^domain.com
RewriteRule (.*) http://www.domain.com/$1 [R=301,L]

Upload the .htaccess file to the root folder of your website and you’re done. All your traffic will be permanently redirected from a non-www version of your website to a www version of your website. To do the opposite (direct all traffic to the non www version use the below code in the .htaccess file):

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.domain.com
RewriteRule (.*) http://domain.com/$1 [R=301,L]