Screenshot of Page Speed in Firebug
I find the Page Speed tool from Google extremely helpful for optimising my websites. I have a tip which can save time if your website is failing the “Optimize Images” test. Using the in-built Smush.it is one option but if most of your images are jpegs, you can achieve the same result and save time using a command line tool called jpegtran with the -optimise parameter to do lossless compression and the -copy none parameter to strip out image meta-data.

Disclaimer: As with any image processing always keep a copy of the original images.

To install jpegtran in Ubuntu, do:
sudo apt-get install libjpeg-progs

  • To optimise a single jpeg image:
    jpegtran -copy none -optimise -outfile image.jpg image.jpg
  • To optimise all jpegs in the current directory:
    for img in `ls *.jpg`; do jpegtran -copy none -optimise -outfile $img $img; done
  • To optimise all jpegs in the current directory and all child directories:
    find . -name “*.jpg” -print0 | xargs -0 -I filename jpegtran -copy none -optimise -outfile filename filename

If you need to optimise various image formats, there is a PHP CLI tool called smusher which uses Smush.it and can work recursively on directories. Might be worth a look. It would be nice if Smush.it had a API – their FAQ mentions they are working on it.

Look at the difference between these two 50px headers that use the Georgia font:

Windows/Ubuntu font comparison - Georgia

The top one is from IE8 on Windows Vista, whereas the bottom one is from Firefox 3.0.15 on Ubuntu 9.04. On Windows, the text is clearly less pleasant on the eye? It is has jagged edges, has a pixel or two cut off the end of the ‘s’ and is 17 pixels less wide.

This is the styling code:

#logo h1 {
font-family:Georgia, Arial, sans-serif;
font-size:50px;
font-weight:normal;
letter-spacing:-0.05em;
line-height:normal;
}

Read on…

If you are making a WordPress theme you owe it to the user of your theme to make sure image alignment works as expected. Most of the Visual Editor formatting buttons use inline CSS which won’t be affected by the theme but this is not the case with the alignment buttons in pages/posts when applied to images.

The red labels show what Visual Editor buttons I’m talking about:

Wordpress visual editor image alignment buttons

Read on…

If you want to use the “Purisa Light” font on your Linux hosted website, you can follow the following steps:

  1. Copy the font file from your desktop machine to your webserver. On Ubuntu the “Purisa Light” font file is located at /usr/share/fonts/truetype/thai/Purisa.ttf. e.g:
    scp /usr/share/fonts/truetype/thai/Purisa.ttf <username>@<webhost>:/<pathToWebsite>/fonts/Purisa.ttf
  2. Add the font face to your stylesheet:
    @font-face {
        font-family: 'Purisa';
        src: url('fonts/Purisa.eot'); /* For IE */
        src: local('Purisa'),
             url('fonts/Purisa.ttf') format('truetype');
    }
    
  3. Now you should be able to use it in your site pages. e.g.
    <div style="font-family:Purisa,arial">
    This should be in the "Purisa Light" font...
    </div>
    
  4. BUT, we’re not done yet because unfortunately, IE does not support TrueType (ttf) fonts – only Embedded Open Type (eot) fonts.
  5. Download ttf2eot from http://code.google.com/p/ttf2eot/ – it is a open-source font format converter.
  6. Extract it to your home directory. Then build it:
    cd ~/ttf2eot-0.0.2-2
    sudo apt-get install build-essential
    make
    
  7. Convert the font:
    ./ttf2eot < /usr/share/fonts/truetype/thai/Purisa.ttf > Purisa.eot
  8. Copy it to your website, e.g
    scp /usr/share/fonts/truetype/thai/Purisa.eot <username>@<webhost>:/<pathToWebsite>/fonts/Purisa.eot
  9. Now it should work on IE. If you don’t have time to convert this font, you can grab mine – use “view source” to find the URL from the stylesheet.

@font-face is a HTML5 feature supported by Safari 3.1+, Firefox 3.5+, Opera 10+ and IE 4+. At the time of writing Google Chrome currently doesn’t support @font-face (but the beta version does so it won’t be long).

This post was inspired from an excellent article called @font-face in Depth.

What is a “Amazon Carousel”? It is a advert showing a bunch of items you can buy on Amazon:

Amazon put a limit on the number of items in a carousel. However, if you have more than 10 items, you can use a little javascript to select 10 at random so a different set are shown on each page view.

This is some javascript that randomises an array of ASIN numbers:

var asinArray = new Array('0874477182', '0764138057', '0764136321', '0375428569', '0375764313', '037576433X', '0375428607', '141955252X', '141955039X', '0874477565', '0874477727', '037576593X', '0375429115', '0375765891', '0375765883', '0375429093', '0375429077', '0375429123', '0375429085', '0953265978', '0856609781', '1402209592', '0375428720', '0312366914', '0142003085', '0374525137', '0143112821', '0099479028', '1932080309', '0140620184', '0141185570', '014023750X', '014103534X', '0312361785');
document.write('Normal : ' + asinArray + '<br />');
asinArray.sort(function(){return (Math.round(Math.random())-0.5); });
document.write('Random : ' + asinArray + '<br />');

To select 10 from the randomised array:

if (asinArray.length > 10)
 asinArray.length = 10;
document.write('Random 10: \'' + asinArray.join(',') + '\'<br />');

To apply this to the Amazon Carousel:

<script type='text/javascript'>
var asinArray = new Array('0874477182', '0764138057', '0764136321', '0375428569', '0375764313', '037576433X', '0375428607', '141955252X', '141955039X', '0874477565', '0874477727', '037576593X', '0375429115', '0375765891', '0375765883', '0375429093', '0375429077', '0375429123', '0375429085', '0953265978', '0856609781', '1402209592', '0375428720', '0312366914', '0142003085', '0374525137', '0143112821', '0099479028', '1932080309', '0140620184', '0141185570', '014023750X', '014103534X', '0312361785');
asinArray.sort(function(){return (Math.round(Math.random())-0.5); });
if (asinArray.length > 10)
	asinArray.length = 10;
var asinText = "'"+asinArray.join(',')+"'";
var amzn_wdgt={widget:'Carousel'};
amzn_wdgt.tag='<your Amazon id>';
amzn_wdgt.widgetType='ASINList';
amzn_wdgt.ASIN=asinText;
amzn_wdgt.title='New Video Game titles from Amazon';
amzn_wdgt.width='600';
amzn_wdgt.height='200';
amzn_wdgt.marketPlace='GB';
</script>
<script type='text/javascript' src='http://wms.assoc-amazon.co.uk/20070822/GB/js/swfobject_1_5.js'>
</script>

Are you looking for website templates you can buy or borrow? Here’s a handy list:

Good Engineering Plus Good Art Equals Happy Users

Buy:

Borrow:

Also, here’s some good links for inspiration:

Do you ever use <br style='clear:both' /> or <div style='clear:both'></div> in your webdesign? If you do, stop now, there is a better way to prevent subsequent page elements being affected by the previous floating sections:

Bad:

<div style="float:left;width:300px">left text block</div>
<div style="float:right;width:300px">right text block<br> (which takes more vertical space than the left)</div>
<br style='clear:both' />
Text that you need to appear below the previous text blocks

Why is it bad?

  • <br style='clear:both' /> is bad because it introduces a blank line when you actually only want a newline. It adds vertical spacing when you don’t necessarily want it. It is using a HTML element for more than it’s specific purpose.
  • <div style='clear:both'></div> is bad because you shouldn’t use empty HTML elements.

Better:

<div class='clearAfter'>
    <div style="float:left;width:300px">left text block</div>
    <div style="float:right;width:300px">right text block<br>which takes more vertical space than the left</div>
</div>
Text that you need to appear below the previous text blocks

where the clearAfter css class is defined by:

.clearAfter:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden
}
.clearAfter {zoom:1}   /*IE necessary workaround*/

I got this trick from the Yahoo! grids CSS framework – so it is a rock solid enterprise tested technique: “No matter which column is longer, the footer stays at the bottom“. Also, see http://snipplr.com/view/86/clear-floats-without-structural-markup/

What is the zoom:1 for? This is a hack needed for IE to force the element to be given a position component.