Toolwatch is a weekly roundup of the latest tools available online and for free – Phwoar!

gomockingbird.com – Allows you to make mock-ups and wireframes quickly and easy. It supports all the nifty bits you’d normally use (e.g. shapes, links, and text) and even allows you to export to a PDF or PNG file. It’s great for freelancing on the move.

ajaxload.info – When using Ajax it is customary to include a small animated gif file that gets displayed while JavaScript fetches the information from the server. At Ajaxload, they generate those animated gif files as per your order: No more complicated software – simply click, click, voila!

browsersize.googlelabs.com – Ever wondered which parts of your website would be visible by what percentage of people? The folks at Googlelabs allow you type in your website and then overlay it automatically with a picture file indicating what is the most visible. This is sure to influence the way we design.

cleanCSS.com – Did you know that whitespace is the number one cause of obesity in CSS files? With CleanCSS you get to minify your files significantly. Be aware though, depending on the settings you choose, your file might be nigh impossible to read by humans.

patterntap.com – Tired of trolling through substandard template websites in search of cutting-edge inspiration? Patterntap gathers the best of user interface designs under one roof and allows you to store your favourites under neatly organized lightboxes. Patterntap is the prescription for the “blue-Monday-creative-block” illness: take high volumes at regular intervals.

Got any suggestions for tools that need to be in this list? Leave a comment, and we’ll be sure to check it out before the next issue. Remember, it’s got to be online and free…

PicMarkr.com – As the tagline hints, this website allows you to watermark all those images you want protected – ideal for photographers, illustrators, and of course paranoid people.

Pixlr.com – Think Photoshop. Think online. Think Free. Simple and straightforward to use, ideal for when you’re on the road or when Adobe busts your chops for that cracked version you’ve been running. Not as powerful as the software, but VERY nifty and does everything you need in a rough and tumble sort of way.

Browserlab.adobe.com – Developing a website and you need to test it in a few browsers… like IE6… Blegh! Obviously (or perhaps not so obviously for some), you can’t have ALL the version of IE on your pc (Or Mac for that matter) which is why you’d want to bookmark this website – it allows you to run your website online and see how they’d look in other browsers. It’s a good alternative to VMWare and it’s pretty decent!

Typetester.org – Stuck in deepest darkest Africa (Or London this time of year) where the locals think JavaScript is akin to a Coffee menu? Well, that rules out using fancy fonts through SIFR framework… you’ll have to use old school safe list fonts (Blegh!). With Typetester you can compare the various fonts against one another. This includes the ability to change things like bold, italic, font size, colour, backgroug colour, and even word spacing… Pretty cool!

Fontsquirrel.com – Are you tired of wading through fonts that… in all honesty… suck? Font squirrel does all the hard work for you by trolling the web in search of free fonts with HIGH quality. High-five anyone?

infosthetics.com – The name sounds all la-di-da but it’s quite a fascinating site. In short, they explore the link between graphic design and presenting information visually. Think of charts… but really, really cool charts!

Colourlovers.com This website monitors the use of colour trends in websites. Not only this, you get to see cutting edge colour palettes and even amazing patterns. Of course you get to download these palettes and see the websites they’re used on.

This concludes this week’s review of free stuff – in the very likely event that you’ve stumbled upon some free stuff that you think should be in these Toolwatch Thingamabobs, please get in touch now. Not as soon as possible, now! Just kidding of course.

In order for you to understand what’s going on in this article, make sure you’ve got a firm understanding of the basics (Check out our basic web ninja guide to optimizing Wordpress blogs for a refresher).

I’ve intentionally left this section out of the basics guide as it can REALLY mess up your website if you’re even slightly squeamish about changing code (WYSIWYG ninjas beware…). We’ll be playing around in our .htaccess file and also write some PHP code for our CSS / JavaScript files.

1. Geeeeeee…zip

Gzip is a feature that’s been around since the cavemen first commercialized fire production. It’s built into the modern browsers by default, so you don’t need to buy / download / crack some software and zip your whole website; that would be… a waste of time.

For a brief explanation on how it works, check out BetterExplained’s website article. Suffice to say, the way it works is that you tell you server that whenever someone is loading my website, zip all my file automatically using the Gzip compression (just a fancy title) and while you’re at it, tell the users browser to automatically unzip on his side. The beauty of this is that now you’re sending smaller files across the interweb, which means it gets delivered A LOT faster. And don’t worry about complicated settings or anything on the users side – everything’s automatic.

First off, locate your .htaccess file. This is usually based in your website root directory. In windows you can open it notepad or word (in Mac… erm… pick something). Once opened, you should see some commands in there already (don’t worry if there’s nothing – it happens). At the bottom of the .htaccess file, starting on a new line (you could leave a line open if you get the urge to), type the following:

# compress all text & html: AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
# Or, compress certain file types by extension:
<files *.php>
SetOutputFilter DEFLATE
</files>

Obviously save your file (in the same place you found it) and voila – you’ve just zipped your website. To verify that you’ve actually done it (thereby allowing you to flex your Jedi coding muscles), try one of the following:

• Online: Go to the online Gzip Testerpage.
• Firefox: Use the Firefox add-on Web Developer Toolbar » Information » View Document Size to see if it’s Gzipped

2. Setting Futures Headers

The idea behind Futures Headers is that it puts a date stamp on images in your website. It won’t make much of difference for first time visitors to your site, but subsequent visits (perhaps even followers, members, or stalkers) will see a marked difference. You see once they visit your website, and download all those pretty pictures, it comes with a date when it needs to be refreshed; that way, if they return again and the “expires” date is still the same (and that date obviously hasn’t been reached yet), they don’t need to download those image again (it just gets loaded from your computers brain – smart, eh?)… making your blog a lot faster.

Eager to get your grubby Jedi paws on the code? Well, once again, open your .htaccess file as shown above and on a new line type in the following:


# Expire images header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
# BEGIN ETag
FileETag None
# END ETag


Rest assured that A2592000 is not a secret number that displays your credit card number, it’s simply the date at which it should expire. Still not making any sense? A2592000 is the amount of time IN SECONDS that should expire before the user needs to check for a newer version of the image. It’s worked out as

Time = 60 (seconds per minute) * 60 (minutes per hour) * 24 (hours per day) * 30 (days)
= 2592000 Seconds.

Remember you can set the expiry date to anything you want, as long as you work it out in seconds (as shown above) first. I know it’s tedious, but it separates the ninja’s from the jedi’s.

I trust that after following the advice on this blog, and that of the basic ninja guide, you’ll have a zipping website (pun intended). If you’ve got any questions, post ‘em below and “the force” will answer them asap.

For Further reading check out these websites:
Tips and Tricks HQs’ guide on Wordpress Optimisation
Using Gzip Compression at Better Explained”
Paul Stamatiou on Gzipping CSS and Javascript files

So you’ve got your theme set up, the CSS file loads perfectly, the sidebar is happy, the content displays nicely and you’re in generally good mood… until one of those pesky little beta testers flag something your way. Usually they say something along the lines of “Oh, it’s very nice and all, but it takes so long…Can you, like, uhm, make it like Google or something?”.

Rest assured, there are solutions. Sadly these solutions come at a price (don’t worry you don’t need to pay us… unless you really, really want to): firstly, the willingness to experiment, and secondly you’ll have to download and install some tools (perhaps even a new browser).

Step 1 – Get Firefox and the Plugins.

If you haven’t down so already, get the latest version of firefox. Any web ninja worth his salt will have this on his desktop as the button most clicked (next to Dreamweaver of course). Then go to tools » add-ons at the top (right above where you enter the web address). Click on “Get Add-ons” and in the space provided type “Firebug” to download and install.

As soon as that’s done, pat yourself of the back as you’ve taken a very important step into adulthood. You can now talk about Wordpress Optimisation with gusto at parties.

Step 2 – Find out what’s wrong. Exactly.

At the bottom right of your page, there should be two icons (a bug-like looking creature, and a speedometer). These are the things that you’ve just installed. Click on the bug, it should either open in a new window or take up half the space of your browser window. Alternatively, go to tools » firebug and click on “open firebug”.

Once open, click on “Net” and make sure it’s enabled. If it’s not, next to the tab there’ll be a arrow for a drop down menu where you can enable it.

As soon as it’s enabled, you’re set to go. Make sure you clear your browser cache – otherwise we’ll have a fake benchmark. Navigate to your website and be amazed. It maps out exactly which part of your website takes how long to load and where the problem is at. Based on the Tiny Giant Studios, the un-optimised version of it loaded up in 4.2 seconds. Which isn’t too bad considering, but there’s still a lot more that could be done.

Usually the biggest culprit in taking up loading time is un-optimised pictures. Unless it’s transparency you’re after, you’re going to want to save them as jpg’s, make sure you reduce the dpi to 72 (that’s all you’re going to need online), and perhaps even reduce the quality. To find out how, you can check out Lynda’s Blog on how to do this in Photoshop.

3. Stop Being so Needy, when Requests go too far.

Failing images, the design of any theme is usually littered with HTTP requests. If you haven’t got a clue as to what this is: if you open up a theme’s index.php, header.php, and footer.php there’s usually a lot of code that looks something like this:

This is what makes your theme so flexible and generally makes your code a lot more DRY (Don’t Repeat Yourself – Go on, Google it). But on the other hand, it makes for a lot of unnecessary HTTP requests. HTTP requests are things that ask you server for information: every time there’s a request, your browsers asks the server “I need something, could you send it to me please?”. And this is what takes A LOT of loading time!
Now how am I supposed to know what to hardcode into the theme? Glad you asked. As soon as your page had loaded and everything is in order, go to view » page source. In IE it’ll be view » source.

Voila, this is what your page looks like once the browser has digested all the commands and requests. Now can you see that where there was once PHP code there’s simply HTML code. Now you want to copy that HTML code and replace the PHP code. For example instead of using

<link rel="stylesheet" href="" type="text/css" media="screen" />

You could hardcode it into your header.php like this:

<link rel="stylesheet" href="http://tinygiantstudios.co.uk/wp-content/themes/TGS/style.css" type="text/css" media="screen" />

You could do this for all of the following:

• Your stylesheets URL;
• Your pingback URL;
• Your Feed URL;
• Removing your Wordpress version altogether;
• Making you themes Name and Tagline / description static;
• Removing your Blog name in the footer;
• Removing the Feed URL in the footer; and
• Removing the Comment RSS Feed URL.

4. Mini-Me

Loading pages are affected by filesize. Obviously. Now we’ve covered images earlier, but there’s another thing you could do to make a very important file even smaller. Unless you’re a Jedi coder (I’m in the training academy), you need to shrinkwrap your CSS File. On the Tiny Giant Studios website I took my CSS code to a website called Clean CSS, reducing it from 1500’ish lines of code to just fewer than 200.

Also, when using JavaScript libraries you’ve got two options, either embed the file onto your website, or send an HTTP request to your server to ask another server for that file. In short, you’re asking your webhost to go hang out at a place like Google, ask if they’ve got the JavaScript Library you’re looking for, and then send it back to you. There’s pro’s and con’s to each side, as for me, I prefer embedding my own version. Remember to embed the shrinked version of the library and not the full version (they’re actually identical, but one is coded to be much smaller than the other).

An example in the Tiny Giant Studios website is that we use jQuery to power the cool Lightbox effects on the portfolio page. As you’ll see in the source code it is the jquery-1.3.2.min.js that makes this possible, and I’ve included the “min” (presumably for minimum) version of the file. When using a JavaScript Library, always include the “min” version…

5. Plug(in) & Play

No optimisation would be complete without touching on Wordpress plugins and their effects on loading times. Every plugin in you install, from Akismet to SEO, will directly affect your load time. One of the worst offenders according to popular lore is a plugin called Lightbox (that is the Wordpress plugin and not the JavaScript plugin). So how do you go about, checking which one should be doomed to the abyss? Glad you asked. Again.

The easiest way is to go into the Wordpress admin area and deactivate all of your themes plugins. Now it’s simply a matter of going back to your browser, clearing your browser cache, and reloading your page with the Firebug running at the bottom.

This is now an example of a site that is as optimised as it can get without getting mental with the code in the nether regions of your theme. Make a note of the loading time at the bottom. Now start re-activating your plugins one by one. As soon as you start noticing a significant jump in the loading time, you’ve got your culprit. What you do with the result though is up to you. You could delete it and find another, similar, plugin; Or you could try our last ditch optimisation trick.

6. Cache’ing in your chips

Contrary to what you may think, adding yet another plugin might save your bacon in terms of loading time. At the same time, however, if your site is heavily visited (or commented on) then it might prove bothersome.

The plugin in question is wp-cache or wp-super-cache. My preference goes with the former. Essentially what it does is it takes an HTML “snapshot” of how your page is displayed once everything is loaded. Once a user comes to your website, instead of waiting for Wordpress to finish up all the HTTP requests, it simply displays an HTML generated version which is A LOT faster to load. The downside to all of this is that the page displayed to the user is not necessarily the freshest copy! In other words, if this page was cached (or you could say “loaded into memory”) 3 days ago, then the page displayed will be that of 3 days ago… along with the comments that were made… 3 days ago. Fortunately, however, you get to adjust the settings as to how long a cache lasts for.

I sincerely hope this has given you a firm grounding in making your Wordpress theme load faster. There’s still a few more tips and techniques out there, but they require your too mess around with the code considerably and risk messing around stuff that aren’t supposed to be messed with. If you know of any other techniques, please respond below – I love learning new ways of doing things.

Further Reading

Yahoo’s Bible on optimising websites for loading times.
Dan Masters on how to find the culprit by deactivating plugins
Wordpress Forum on slow loading Blogs
Using Firefox to diagnose slow performance
Joost de Vaal on speeding and cleaning up Wordpress

Edit

I’ve written an advanced guide on optimising a Wordpress blog – Click here to check it out!

99designs.comEver needed a logo designed that’s professional yet cheap. Head on over to 99designs, it’s like ebay for logos.

themeforest.netSo Wordpress is slowly but surely taking over the world. I bet you North Korea’s nuclear ambitions rests on whether they can use Wordpress in their country or not. Wordpress makes use of themes (as some of you might know), and finding those stupendous themes for which celebrities would give a nod in our direction is a worthwhile pursuit. Themeforest has made that pursuit exhilaratingly easy. Click. Buy. Simple.

EM Calculator Designing a fluid website with EM values requires you to keep your wits about you. Keeping wits about in Christmas time is difficult. With that in mind, we present you with a tool to make you life easier, and also reduce your trips to the AA.

Client Questionnaire So forming a relationship with a prospective client when all he want is a price is difficult. The conversation usually leaves one, if not both, parties feeling disillusioned. Knowing what to ask is crucial, saves time, and gives you that warm feeling of inner peace and happiness. This questionnaire gives you the low-down on what you need to ask before starting.

Website Launch ChecklistLaunching in a few days? Got every base covered? You sure? Willing to bet a baby seal’s life on it? Make sure with this launch checklist – it cover everything from marketing to styling…

Festive greetings to our fellow web ninjas!
The Tiny Giant Studios Team

Just to make sure you know what we’re talking about, each week we run a section called “Tool Watch“. In it we provide aspiring (but never clueless) designers / developers tools that is online, free, cool, and amazingly helpful. And yes, for those of you wondering, we here at Tiny Giant Studios do use these tools ourselves… Like we said, it’s cool.

Without further ado, this weeks selection:

patterncooler.com – Use your own colours to make patterns, alternatively, browse through a large list of pre-designed patterns and download them for Mahala (Translation: Free).

stripemania.com – Ever needed to create stripes and just got plain annoyed that Photoshop doesn’t have this function in built already? Create and download your custom stripes in png format quickly and easily.

Dotter – Creating dotted backgrounds that vary in size will drive even the best designers to drink, fortunately there’s a tool online that’ll create them for you as easy as saying “Supercalifragilisticexpialidocious”… Just kidding, it’s real easy.

theleagueofmoveabletype.com – Ever wanted fonts only to end up paying by selling a kidney on the black-market? This website gives them away for free… Absolutely high quality fonts. Go on, save your kidney.

iconfinder.net – Like google but for icons. Enough said.

Got a tool that you use alot? Is it free? Do you like people stopping you in the street and thanking you for that link you posted on this website because it changed their lives? Well, reply below and I’ll make sure to make a donation to that rent-a-crowd charity we’ve both come to love and admire.

wordle.net – Wordle is a toy for generating “word clouds” from text that you provide. The clouds give greater prominence to words that appear more frequently in the source text. You can tweak your clouds with different fonts, layouts, and color schemes. Check out the gallery for some interesting examples.

html-ipsum.com – Need to create dummy text to fill your layouts while waiting? This website creates valid html dummy text for you automatically.

colorschemedesigner.com – Ever wondered what would work best with that colour you’ve got? Stick the hex value into this website and see where it lies on the colour wheel and what colours will work best with it.

lovelycharts.com – Sometimes we need to design charts and diagrams (think sitemaps?) for our clients. Now Photoshop is brilliant, but when it comes to designing charts, it’s about as useful as Nuclear inspector in Iran. Create a free account with lovelycharts and the Iranian nuclear issues will be a thing of the past.

vectormagic.com – Ever got that “vector” image where everything is pixilated to hell and you have to enlarge it even further to suit your needs? Feed you image into this website and see that rasterised image turned into a vector image that can easily be resized. I got the offline version of this website, and it’s a must.

That’s it for this edition folks, keep a beady eye out for some free stuff and let us know which ones you’d like to see included.

Today’s selection comes from the countries where Engrish (with an “R”) is the international language of choice – much to the delight of native speakers of course:

We trust you’re now basking in the “warm-fuzzy-glow-of-inner-peace-and-happiness”. Feel free to send an email and direct us to some funny sites you’ve discovered…

This instalment of our popular Engrish series will be the last for the year as the Tiny Giant Studios offices close until mid January. For those of you unfamiliar with the Engrish series, it’s simply our way of giving back to the community. You see, as web ninjas we get to sample some of the best humour around on the web. Naturally we couldn’t do this without out extensive range of informants and spies… We would like to thank everyone for their contributions for the latest Christmas edition of Engrish. Without further ado, the humour:

Merry Christmas to all and we look forward to some new developments in the new year that’s going to AWESOME!

Kind Regards,
The Tiny Giant Studios Team