handcodedwithlove

How To Code HTML Email Newsletters

2010-10-13T02:34:00.001+02:00

Great article with lots of links about How To Code HTML Email Newsletters on www.reachcustomersonline.com.

Redesign for my design studio website

2009-06-26T02:52:00.000+02:00

Even though I have been really busy during the last months I managed to get something done I've been working on FOREVER – the redesign of my design studio website. I actually launched the new design several weeks ago but not I haven't gotten around to show it here. I just updated it and added some of our recent work. So – drum roll – here's the new website of my design studio holisticdesign. If you want to see more visit: holisticdesign.de

Outlook 2007 is messing up HTML newsletter code

2009-06-17T22:40:00.000+02:00

Even though coding websites is part of my daily job, coding HTML newsletters is always a challenge. Today optimizing an HTML newsletter for Outlook 2007 made me almost lose it. Nothing seemed to work. And after a while (well, after hours and hours and tons of changes) I did some research about HTML coding for Outlook 2007 and found some helpful information. And even though this may not be great news to most developers I wanted to add some links and the most important functions that Outlook 2007 does no longer support to this post. Actually this is more a note to myself as I always tend to forget these unsupported funstions and get mad each time I develop a HTML newsletter anew.

This post by David Greiner is more than 2 years old I think it is still relevant and I feel exactly the same:

Microsoft takes email design back 5 years...As I type this post I still can't believe it. I'm literally stunned. If you haven't already heard, I'm talking about...Outlook 2007...will stop using Internet Explorer to render HTML emails and instead use the crippled Microsoft Word rendering engine.
...
Microsoft have released a full run down of what is and isn't supported, including a downloadable validator that helps you validate your HTML for their engine. Word of warning though, it only works with Microsoft software and Dreamweaver.

So, for the record. Outlook 2007 will no longer support:

background images
CSS float, display or position
1px transparent/spacer gifs (Outlook 2007 imposes a 2-pixel height minimum for cells. No idea why...well, having to use spacer gifs AT ALL makes me want to scream but if 99% of all CSS properties do not work anymore?!)
animated gifs
Flash or other plug-ins
forms
other HTML elements and commands: button, frame, marginheight, marginwidth, onclick, onfocus, title
and the following CSS properties: background-attachment, background-image, background-position, background-repeat, bottom, clear, cursor, display, float, list-style-image, list-style-position, overflow, position, text-transform, word-spacing, z-index

Links:

Warning! Outlook 2007 Might Trash HTML Again: http://www.emaillabs.com/email_marketing_articles/outlook_2007_html_email.html

Outlook 2007 users angry over Office 2007 HTML-e-mail changes: http://blogs.zdnet.com/microsoft/?p=200

Are Your Email Messages Designed for Outlook 2007? Handy Tip Sheet of What NOT to Do: http://www.marketingsherpa.com/article.php?ident=29953#

Was man beim Erstellen eines Newsletters alles beachten sollte: http://blog.netformic.de/2009/04/03/was-man-beim-erstellen-eines-newsletter-alles-beachten-soll/

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2): http://msdn.microsoft.com/de-de/library/aa338201%28en-us%29.aspx#Word2007MailHTMLandCSS_Introduction

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2): http://msdn.microsoft.com/de-de/library/aa338200(en-us).aspx

Most Common Usability Mistakes In Web Design

2009-02-22T11:16:00.000+01:00

Based on Dmitry Fadeyev's list of the 9 Common Usability Mistakes In Web Design I made my own list of the most common usability mistakes. Things that bug me as a avid web user and as a designer and front end developer with 9 years experience. If you are interested in the solutions he recommends check out his article on smashingmagazine.com. He also added some great examples that show what to do and what better not to do.

Tiny clickable areas
Hyperlinks are designed to be clicked, so to make them usable. It makes sense to ensure that the clickable area is large enough and easy to click.
Pagination used for the wrong purpose
Pagination should be used for its original purpose - but also only when necessary. Nothing is more annoying than endlessly flipping through pages without any useful content. Unfortunately pagination is also often misused to increase page views.
Content that is difficult to scan
People do not necessarily read websites top to bottom - they start reading whatever pops out at them first, and then move to the next thing that captures their interest. So concentrate on a few focus point, provide a descriptive heading for each, highlight them and keep them informative yet concise.
No way to get in touch
Give your visitors an easy way to get in touch with you. Do not hide contact information or make your visitors read pages and pages of FAQs first. If you are afraid that someone contacts you, you better have no website.
Too much functionality that requires registration
Do not force your users to register when not mandatory. User participation on your website is affected by how many barriers there are. Removing barriers such as unnecessary registration forms will most likely increase user participation. Why make your visitors register if they have forgotten the password next time anyway? How many passwords does the average web user have nowadays? 10? 20? 100?
Long registration forms
If you have to have some registration forms on your website keep them sort and simple. Do not ask for more information you do not need.
Dead links
Make sure there are no broken links on your site and just in case have a 404-page.
Pop-up windows
Pop-up windows often disturb while browsing. If can not to go without them at all offer your visitors to open them if they want to. This means: Do not open them unasked and/or in the background. Most browsers nowadays come with pop-up blockers anyway. So it's not a good idea to put relevant information in a pop-up as it might remain unnoticed.
Too small font sizes
Make sure people can read what you are writing about because what's the use if not? You might even think about offering adjustable font sizes to increase the accessibility of your website.
Hidden and unclear links
Links should be easy to find and precise. Tell your visitors where a link is going to take them. Highlight your links.
Forced line breaks
Do not coerce your front end developer (aka me) to format the text on your website with forced line breaks. Please, my dear designer friends ;-)