Your Site’s Logo – The SEO Way
A site’s logo is an element that’s always there, but a lot of designers still treat it as just an image.
It’s time to change that. If we treat the logo as just an image, google will treat it that way too. But we want google to treat your company’s logo like an important heading element, right?
Using the stechnique I will describe now, we will make <a> element that holds your logo, and can still display an alternative heading to search engines.
The Code
HTML:
<a href="link-to-your-homepage.html" class="logo"><h1>Company Name<h1></a>
CSS:
a.logo {
background-image: ('link-to-your-logo-image.jpg');
background-repeat: no-repeat;
width: 200px; //* Change to correct width *//
height: 200px; //* Change to correct height *//
text-indent: -9999px;
display: block;
}
As you can see, the core of the code up here is the usage of a background-image for the link element, and the usage of text-indent.
Text indent makes sure your text indents (duh). What this means in our case is that it is effectively moving the text 9999 pixels off-screen, so that we as end users do not see it.
The search engine bots that crawl your site however, will see the content in there.
So now, in stead of showing search engine bots an image, we are giving them the heading they need: your company name.
Last notes
This approach has another minor design advantage, you can give your logo a nice and fancy hover effect (check the logo on top of this site). It was created using the same technique, and adding a simple :hover element in the css.
Continue Reading...Creating An Email Newsletter
Lately I’ve been working on email newsletters a lot for clients, and although there are plenty of good resources on this subject, I thought I’d summarize things for you guys.
Email newsletters are a populair and effective way for company’s to reach their clients.
Of course, all this emails have to be designed, and coded. That’s where we come in.
But how to this the proper way? Most email clients respond differently to the code that’s is valid on the web today, and to make it even harder there are services like hotmail and gmail that display your emails in a browser. So, we have got to make sure that we test. Testing is the key here, next to a number of guidelines that I will point out later in this article.
For testing, make a virtual machine, and install all the mainstream email clients on it. This way, you’ll keep your host PC clean!
Use VirtualBox to make a VM, and use the list below to download the email clients.
Also, do not forget to create a wide variety of email adresses, with all the mayor players like gmail, hotmail, yahoo etc.
All right, now to the practical bit of this article: the guidelines.
Base rule
As designers, you probably are familiar with XHTML and CSS. For email coding I can say only one thing; remember the syntax, forget the aesthetics.
In email design you can’t work like you are used to.
Inline Styles
Email clients do not accept external stylesheets, in stead you have to use inline styles.
Bad:
<link href="http://www.gport.nl/public/css/base.css" rel="stylesheet" type="text/css">
Also bad:
<style>
a {
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
font-size: 14px;
color: #5f1d54;
}
</style>
Good:
<a style="font-family: Verdana, Geneva, sans-serif; font-weight: bold; font-size: 14px; color: #5f1d54;" href="http://www.google.com">Text here</a>
JavaScript
This is a very simple, but important not to break rule. DO NOT use JavaScript. It will make sure your emails will not arrive at their desitantion, and they will be marked as spam.
Also, most email clients do not know how to execute JavaScript code, and it will break up your beautifully crafted design.
Use tables
Use tables for your email design, and forget about div’s. Tables are widely supported throughout email clients, and div’s are not.
Also, forget about everything around your tables. Do not use the body tag with a background attribute applied to it, but instead add an overlapping table that contains the background.
Make sure that you declare width, cellpadding, and cellspacing for all tables and table cells. This makes sure that your tables look the same in every email client.
Bad:
<table> Content Here <table>
Good:
<table width="550" height="29" border="0" cellspacing="0" cellpadding="0"> Content Here </table>
Do not use background images
A lot of email clients, including Gmail, block background images, because they can contain malicious code. So use this as little as possible.
If you are still determined to use a background image, make sure use the background attribute, as well as an inline style with the background-image property. This makes sure the image will display in most clients. If you use this technique, do not forget to add the background-color as well in your inline style, so that if images are not displayed, it still strokes with the rest of your layout.
In this case, also make sure that you seperate the visual and message part. Use the image for the visual, and plain text for your message. This way you can still present a fancy image to most of your users, and the people with no support for this will still read the message.
Bad:
<table style="background-image: url('http://www.url.com/img.jpg')">
No content here, content is in image
</table>
Good:
<table width="550" height="29" border="0" cellspacing="0" cellpadding="0" bgcolor="#EAEA" style="background-color: #EAEA;"> Content Here </table>
Alternative:
<table width="550" height="29" border"0" cellspacing="0" cellpadding="0" background="http://www.url.com/img.jpg" style="background-image: url('http://www.url.com/img.jpg'); background-color: #EAEA;">
Content Here
</table>
Images are either way blocked untill the user allows to display them, so it is important not to use images for important messages you want to communicate with your users.
Make sure that for the images you use, you do apply alt tags to them, so that the user that sees no images still sees the message you want to communicate. This will also make sure that visually impaired people that have turned off images can still get the message. Sadly, Outlook 2007 dropped support for this tag. The peeps at Microsoft apparently don’t like the visually impaired..
Also make sure that you apply width and height attributes to each image, so that all email clients will display them properly.
Bad:
<img src="http://www.url.com/img.jpg"/>
Good:
<img src="http://www.url.com/img.jpg" alt="Description" width="200" height="100"/>
Last Notes
The most important thing – I mentioned it before – is to test. So test, test, test and test a bit more before you send your newsletter to your clients.
You don’t want to give them the wrong impression, right?
Sources
Guide to CSS success in email – A list of all email clients and what CSS code they support.
Microsoft takes email design back 5 years – An article about Outlook 2007’s crippled render engine.
Download list of mail clients
Sadly, I cannot find a trial for Outlook 2003 anymore, suggestions are welcome, also for other unmentioned email clients!
Continue Reading...Book: Guidelines For Online Success
Last saturday I stumbled upon a very nice read for us webbies; Guidelines For Online Success published by Taschen.
I’ve found it to be extremely useful, instead of most of the books out there it has a good mix of text and images.
The text bits are short, and give you clear do’s and dont’s for your online success.
It is divided into relevant chapters like Interface, Marketing & Communication, Technology & Programming and Content Management.
Things like SEO, writing, designing, programming and more relevant subjects are explained in it, and in my humble opinion it’s a must-read for all beginning and experienced webbies.
Check some other reviews on the subject here: Reviews at Taschen.com
And buy the book here: Amazon.com
Enjoy this good read!
Continue Reading...
This is the blog of Gerben van Dijk. Front-end developer, music and movie fanatic, photographing enthousiast.