Tag Archives: html

Colour Tool for Designers & Developers

Ever seen a website and thought ‘what a great colour they are using here’. Well now, to make your life easier, there is a tool called Colour Tool.

You bookmark the link in your browser, and when you see a site that you love and want to know what colours are used, you click the link and the site will bring up all the colours and variations used on the site.

No need to file through CSS files, and trying to screen capture then use your little eyedropper. Simply click the bookmark and you have everything you need!

The Colour Tool can be found here.

Found other awesome tools like this? Leave a comment below and let us know.

Yours in making life easier,

Making your website tick

Having a website is great for business. In fact these days, it’s probably one of the most important things to have. But, it’s absolutely vital that your website is fast. Why? So your users will stay there and not get frustrated by waiting for your site to load.

What’s the process behind the speed of using a website? I’ll explain it in a nutshell. Even though you may think your website is small; and you may run it on say, WordPress, this still uses a database. Databases are used on the majority of websites these days and they may run PHP, ASP etc. It’s this server scripting that will run at the server, produce the HTML, and send it back to the browser. Got it?

But what makes a server fast? First of all, you need a reliable web hosting provider. Then you need to be able to optimise your database to run as fast as possible. After all, if your site is run on a database, then this is being queried every page load (therefore it needs to sharpen its act up to keep up!).

Smashing Magazine has provided a great article on how to speed up your database.

Yours in making your website fast enough for your user by creating an optimised database,

HTML Email Campaigns

When it comes to HTML email campaigns, what you want to keep in mind is that tables are your friend… actually, your best friend! I generally use tables for every email I create at Brio Group. You need to make sure that you know the limitations of your users’ email client, whether it be GMail, Yahoo, Hotmail, Outlook etc.

A key point is to set the width in your table <td> tags. Don’t assume that if you don’t specify a width, the cell will just work it out, as I can tell you now, it won’t. Stick to pixels, percentages are not rendered properly in some email clients, especially Outlook 2007 which seems to have gone back in time. Avoid using CSS padding and margins on your cells –  if you can get away with using a nested table to do it, then use that. You will get a much better result in the real picky email clients.

When setting a background colour to your email, avoid doing it in the <body> and <head> tags using CSS. Use it in a table that is stretched 100% with the <td> cell background. E.g. <td bgcolor=”#000000″> for a black background. Unfortunately, Windows Live is not playing nice and requires a little more additional coding. Simply place the below code into the <head> section of the HTML email and that should do the trick.

<style type=”text/css”>
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}

Never use CSS style in the <head> tag. As much as you want to, and are used to, stay away from it. It generally gets stripped by the email client. Use inline styles instead, you will be surprised on what does work with CSS inline styles on <p> tags for example. Most developers like to keep using the horrible and outdated (this really should have the same standing as ye faithful <blink>), <font> tag.

With your CSS styles, don’t use shorthand! Email clients might not accept that as a proper colour for instance. E.g. <p style=”color: #000;”>. Always use #000000 instead of #000.

Images in emails … well, try not to use to many of them! Using excess images may well cause your email campaign to end up in the spam bin. Also, most clients these days by default do not show images when the email is received, the user has to enable them.

Hotmail, for some baffling reason, adds some extra pixels of padding below images. A simple hack for this is to give a style of the image display as block. E.g. <img src=”your image in here” style=”display: block;” /> This should remove the padding and still give you results in other email clients.

There you go, some basics to HTML email creations. On a last note, just be wary of screen resolutions and the fact that there is an outside container for email clients such as folder listings, tool bars etc… so keep your design within a 650 pixel width.

And… Don’t forget to test!

Yours in HTML,