Full On Design » Lt

Task Bar Support for your Website

Rogem — Sun, 19 Sep 2010 02:00:17 +0000

Internet 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.

Set a Default Name and URL

It’s handy to point your users to your website start page so here is the code you need to add to the head of your HTML page:

Add Tasks

If your website is split into very definite sections you may find it worthwhile to split add tasks to your jump list. Here is the code you need to add:

You can add as many tasks as you like. You can find more information on Pinned Site over at MSDN.

Making Zebra Stripes with CSS3

Rogem — Fri, 30 Oct 2009 22:01:35 +0000

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;
}

In this example, I’ve used an unordered list element. The data in the brackets refers to the “nth” number to affect, for example putting “(even)” will affect every even

. You can also put number in, for example “(3)” would affect every 3rd

Below is a link to a working example of the code in action (Feel free to copy & share).

If you want to read a bit more about the nth-child pseudo-class I recommend the sitepoint CSS reference.

Decrease loading times via .htaccess

Rogem — Wed, 15 Apr 2009 23:30:46 +0000

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
 # 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"

  # 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.*

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.