Congratulations to our final winner of February, Bjarni Wark! Bjarni’s name was randomly picked (via random.org) Thank you to everyone who entered. Please stay tuned for more contests and promotions.

Week 4 of our weekly contests of February has arrived. It’s the final chance to win, so make sure you enter! Simply email us at newsletter@xhtmlized.com with the project you’d like us to slice (a JPG would be fine). It’s that easy! The winner will be announced on March 1st and we will start your project that day.

Good Luck!

Congratulations to our third winner of the month, David of ticktockdesign.com! David commented on our blog entry, Comment to win!. David’s name was randomly picked (via random.org) Thank you to everyone who entered and if you didn’t win, don’t worry! Your chance for winning the final week has just begun. Stay tuned for more information!

Every now and then we come across a platform which makes us swoon. It’s happened! Everyone, please meet BigCommerce. BigCommerce provides an easy way to get up and running with an online store. See what people have to say about it.

We’ve had the pleasure of talking to the folks at BigCommerce over the last week and they are super folk. We’re cutting our teeth on BigCommerce, and as a special promotion, we’re offering a big deal for one lucky person! For the first person that gets in touch, we’ll do a BigCommerce template for 50% of our standard pricing!

Please email dave at xhtmlized.com if you have an online store you want to launch and let’s get to work!

The Olympic fever has overcome us at XHTMLized. We decided to have our own little game and we want you to compete with us! How fast are you in image slicing? Are you able to beat the fastest slicer on the XHTMLized team? Check your skills in this image slicing speed trial (use Online Stopwatch to track your time):

1. Download trial PSD (2.5 MB)
2. Slice 40 photographs from the PSD
3. Store them to a separate folder with file names from 01.jpg, 02.jpg, 03.jpg … to 40.jpg. Start with the first row from the left to the right, then continue with the second row, third row and so on.
4. Store JPGs with the quality you think is best in this case so the images still looks good. Count time for experimenting with the quality into the total time.
5. Post the time it took you to complete the trial, along with the technique you used in the comment section below

The fastest time on our team was 3:30. Can you beat it?

Have fun!

Week three of the contest (Win a PSD to HTML conversion) is easy for you blog readers! Just comment, “enter me” in the comments of this post and you’ll be in the running to win. One entry per person.

Good luck!

Congratulations to our second winner of the month, @typeoneerror of typeoneerror.com! Ben tweeted about our contest and was randomly picked (via random.org) Thank you to everyone who entered and if you didn’t win, don’t worry! Your chance for winning week three has just begun. Stay tuned for more information!

Newsletter designing, coding and/or creating templates is not well documented on the web. There are articles here and there, but there’s really no complete guide. A guide could be far more in-depth than what we are about to offer you, but this is valuable information we consider and follow on a daily basis when designing and coding newsletters. Let’s get started:

Keep it thin

The width of the newsletter design is very important. Your subscribers should not have to see a horizontal scroll-bar or have to scroll to the right to see your full newsletter. To be safe, it is recommended to have a maximum width of 550-600 pixels. On a more conservative approach, you would have a maximum width of 550-575 pixels. This will allow for the viewing space in most email clients and web mail viewing areas. If the email is likely to be printed, you should keep to 550 pixels to ensure the email will print on one page.

No background images

Outlook 2007 (and soon-to-be Outlook 2010), a not-so-fine contender in the email client world, does not show background images. You have to take this into special consideration when developing a newsletter. This doesn’t mean your newsletter has to be boring or image-less. Just be aware that background images are not supported by Outlook 2007. For instance, shadows along the sides of your content area won’t be seen by Outlook 2007 users. However, you can still have a background color fallback in this event. Disappointed in Microsoft? Use Twitter to send a clear message to Microsoft via fixoutlook.org

Code with tables

Hello 1990s! It’s table-based layouts and spacer gifs, all the way. It’s cringe-worthy, but it’s the only way to successfully code a newsletter and have compatibility across the board. So open up your Photoshop, slice n’ dice, crop and chop… whatever it is you did back then. It’s a little bit nostalgic, isn’t it? OK, maybe not! But yes… tables, within tables… within tables. Here’s a tip: cellspacing and cellpadding may actually become your friend.

Internal stylesheet

Keep your styles in the head of your document. Keep in mind that CSS is also poorly supported so some clients may not recognize margins, paddings, borders, float, position, background-image and more. It really is trial and error. Once you become familiar with what is and is not supported by various clients, your work-flow will be faster and easier and you’ll come up with ways around these issues. For instance, using spacers gifs or line-breaks instead of padding & margins or using a divider image instead of a border.

Don’t expect pixel precision

It’s not as easy to make things pixel-perfect in newsletters. Sometimes you just have to accept that the final outcome will, most of the time, deviate from the original design. We’re not talking big changes, we’re talking a few pixels here and there, different amounts of paddings in certain areas.

Accept that you won’t have perfection

Similar to the above point, not every email client will view the newsletter the same way and not every client will even look good. At XHTMLized, we’re able to get the majority of designs working on all the major email clients, or suggest alternative ways for content to be displayed if it cannot be made to look good on all major email clients.

Use semantic markup, where possible

Even though you’re using tables, spacers and other not-so-POSH markup, make sure to use your header tags, paragraph tags, etc. whenever possible.

Fonts

There’s no Cufon or sIFR in newsletters so if you do plan on using specialty fonts for titles, be aware that you will have to create new images each time you send out a newsletter. This can become a nuisance or problematic if your client doesn’t know the first thing about Photoshop. Which leads us to our text point…

Keep it as text-friendly as you can

A lot of people prefer to read newsletters without images, or their email client blocks images. For this reason, all content should have a text alternative. This means, use your alt attribute on images and keep as much as possible in plain text. Don’t go image crazy and don’t take shortcuts making the entire newsletter an image. There’s nothing worse than this.

Test it!

Don’t drop the ball on this one. It’s the most important of all. Because email clients differ vastly, it’s very important that you test your newsletter on all the major email clients. It might cost a pretty penny, but it’s well worth it. We use and love limusapp.com for testing our newsletters.

So there you have it, a brief – yet important and informative guide to designing and coding for newsletters. We hope to have saved you a few gray hairs! Please post comments with your additional suggestions.

Newsletters are becoming more and more popular for companies and even individuals, and for good reason. Newsletters allow you to keep your clients or customers informed of promotions, sales, contests, and of course, news. The great thing about newsletters is being able to communicate with a highly specific audience – your niche audience. Since signing up for a newsletter is generally done by the user, it means your subscribers are interested in your company and/or what you have to offer.

Sending out newsletters can establish yourself or your company as a market leader and being one that is reputable. You encourage buyers and you remind users of your company’s presence. However, it’s not good enough to just have a newsletter these days. A successful newsletter is one that gets read. In order to get your newsletter read, you must have a well planned, well written and well designed newsletter. The good news is, it’s not hard to get started and we can help you at any or all stages.

It’s as simple as one, two, three… (OK, four):

1. Find a company that can send your newsletter

   We recommend the leader of the pack, Campaign Monitor. Campaign Monitor is email marketing software for web designers and their clients. You can send beautiful email campaigns, track the results and manage your subscribers. It’s cheap too, at only $5 per campaign + 1 cent per recipient. That means you can send your newsletter to 500 people for just $10!

   We’ve been using Campaign Monitor and we have to say, the most encouraging information is the powerful analytics. You can see which subscribers opened your newsletter, which unsubscribed, what email clients they are using, what links they clicked and more. It’s powerful information that can help you redefine the way you send future newsletters.

2. Find or create a template

   Campaign Monitor offers a variety of free templates, all tested and proven to work in all the major email clients. It’s as simple as adding your own content. If you want to distinguish yourself from others, you may want to design your own newsletter, or have us design one for you. When coding a newsletter, you have to be very careful. If you thought web browser support was bad (hello, IE), once you see the world of email clients, you’ll be surprised by the poor support. Microsoft, again, shames us with Outlook 2007 and it’s upcoming 2010 (tweet about it). However, have no fear! We have a great team of newsletter coders who just love to get down and dirty with tables.

3. Fill in your interesting content

   There’s two ways you can do this. You can (or have us) create an email template for Campaign Monitor. This will allow you to change your content each month, with great ease. No messing around with the code, you use Campaign Monitors WYSIWYG editor and see your changes in real-time. Change your titles, content and images easily with use of a template. Or, if your a code monkey, you can make the changes to the code yourself, but with a powerful editor like in Campaign Monitor, there’s no reason to.

4. Send your Campaign

   Follow the steps in Campaign Monitor and send your campaign. It’s simple, intuitive and fast. That’s all there is to it!

At XHTMLized we offer newsletter designs, newsletter copy and of course, newsletter coding & templates. Contact us today for an estimate!

You know, while we’re on the topic of newsletters… how about you join ours? Put your email address in the form at the bottom of this page and you’ll be able to hear our exciting news each month! Oh, and in case you were wondering, Campaign Monitor supplies you with the form code, so you too can add a newsletter registration form on your website with a quick copy and paste. See? Campaign Monitor really is great! (and no, we’re not getting paid to say that, we truly are blown away)

When it comes to blowing mulch We Blow offer the best mulch blow-in service in Melbourne, Australia.