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 massive sprite 2800px in height! You’ll notice that some sprites are tightly packed together and other have spacing around each image. This is to allow for browser based text sizing, that would otherwise display multiple background images. A good example of planning for such an occurance is Digg’s sprite, where each image is highly spaced out.
The CSS is relatively simple. Take the example of a simple unordered list with a different image for each item. I made a very simple sprite and applied the background-position property to each link class. Here’s the simple HTML used for the list: » Read more…
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]
http://www.web-design-talk.co.uk
I am a full-time developer for an internet company located in Staffordshire (Midlands) of the United Kingdom. I have been designing and coding websites for over 2 years using PHP, ASP, JQuery, XHTML, CSS and JavaScript. I have been lucky to work on a wide variety of projects from small intranet sites, personal websites and full e-commerce storefronts. I am currently available on a limited basis for interesting freelance work. I also offer the following services (although you can contact me via email to discuss web services not mentioned here):
- SEO / Website Marketing / Offsite SEO
- Bespoke Website Design/Development
- Website Updates
Recent Comments