Skip Navagation

Full On Design

A Web Development & Technology Blog

 

Lt

Task Bar Support for your Website

IE9 - Bing JumplistInternet Explorer 9 (IE9) Beta was recently launched and in it was a really neat feature to allow users to pin your website onto the task bar. Here are a few tips to make sure your website makes the most of feature.

Make the most of your Favicons

Make sure you have a high quality transparent Favicon, if you don’t then your website logo will look small and out of place while on a users taskbar. If you don’t have one to hand, use favicon.cc to build one. I suggest making one which is 64px x 64px (but feel free to go up to 128px) so your icon does not look pixelated in the task bar.

Read the rest of this entry »

Making Zebra Stripes with CSS3

Zebra Stripping is the technique of having different colours per each line on a list. It generally is considered to help users read large tables of information; however there is evidence suggesting the effectiveness of zebra stripes is somewhat overrated. Having said that, in CSS3 it’s very easy to implement so it’s worthwhile adding.

To add Zebra Strips to a list, all you need to do is adding the following pseudo-class to the end of the CSS element you wish to edit:

ul#example_list li:nth-child(odd) {
 background-color:#FFF;
}

Read the rest of this entry »

Decrease loading times via .htaccess

Here is a really nifty trick I’ve been using for a while to decrease the time a page takes to load. Add the following lines of code to your .htaccess file:

FileETag none # Turn off eTags
<IfModule mod_expires.c> # Check that the expires module has been installed
ExpiresActive On
ExpiresDefault "access plus 10 years"
ExpiresByType image/gif "access plus 10 years"
ExpiresByType image/jpeg "access plus 10 years"
ExpiresByType image/png "access plus 10 years"
ExpiresByType text/css "access plus 10 years"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType text/javascript "access plus 10 years"
ExpiresByType application/x-unknown-content-type "access plus 10 years"
ExpiresByType application/x-javascript "access plus 10 years"
</IfModule>
<IfModule mod_gzip.c>  # check if gZip support has been installed
mod_gzip_on         Yes
mod_gzip_dechunk    Yes
mod_gzip_item_include file          \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler       ^cgi-script$
mod_gzip_item_include mime      ^text\.*
mod_gzip_item_include mime      ^application/x-javascript.*
mod_gzip_item_exclude mime      ^image\.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

This quick and easy method tells the user to cache files which are unlikely to change for 10 years (feel free to change the amount of time) and HTML for 1 second. It also turns off eTags.

Update: I also added a another piece of code I use which turns on Gzip, which reduces the amount of bandwidth required to transfer a file.