[網頁設計]MailChimp 郵件版面設計競賽(2010.05.30)

截止日期：2010.05.30

HOW TO ENTER

Between April 5 and 30, you can submit your template code (in a zip file) and a screenshot (jpeg) of your template design here.

Wacom Cintiq 21UX 互動式筆式液晶顯示器 (21吋)

So, young grasshopper. You think you can compete in MailChimp’s bloodsport of HTML email design?

You make me laugh, silly nerd.

Coding HTML emails is a mysterious, complicated art form. The modern web design warrior is spoilt with CSS-3, and css positioning and silly, fancy-pantsy "grids" and such. We have become fat and lazy with technology and the safety of "standards."

Conquering HTML email coding and design requires a fundamental mastery of the ancient art of web design coding, circa 1999.

such techniques are not taught in today’s web design schools.

ICY BOX 酷盒 NAS

School. Ha. You make me laugh.

Lucky for you, those ancient, secret techniques have been documented by the historians at MailChimp…

Combat tip #1

Think Like Monkey. Code Like Monkey.

Take off that beanie and put that Zeldman book down, you hippie. There are no standards in HTML email. Email programs are all over the place in terms of how they render HTML. You will need to think different. Fight different.

Yes, you will need to resort to dirty “street” style tactics to make your email designs look consistent. Medieval stuff like:

• 
  Wacom Intuos4 數位繪圖板(6 X 9)Table layout. No CSS Positioning. Not only that, but…
• Embedded Tables (gasp!) Shim-GIFs (double gasp!)
• Videos, Flash, ActionScript, DHTML, Javascript, and all that other fancyschmancy stuff is not going to work. Most anti-virus software block them from working inside email apps.

Oh yeah. You’ll want to hand-code everything. No WYSIWYGs.

Luckily, once you get into the swing of things, you’ll enjoy how fun this raw, bare-knuckle way of HTML email coding can be.

Combat tip #2

Never Underestimate Your Opponent

HP EliteBook 8440w(WP369PA) 超強四核獨顯尊爵機

Unlike the world of web design, where you deal with 3 or 4 major browsers, there are dozens of different email readers out there. To design great looking HTML emails, one must know how to deal with email readers.

• Webmail apps render differently from Desktop apps. Mainly, webmail apps restrict CSS more, to keep your code from inerfering w/their operation. Inline-CSS is the only reliable way to stylize HTML emails.
• Most email apps use some form of preview pane. In general, you have either 250-px in width (and lots of height), or 250-px in height (and lots of width) to include your most important elements, like logo, top story, etc.
• In general, Microsoft Outlook is the worst to design for. They chose to use Microsoft Word as their HTML email rendering engine, instead of IE. Don’t ask. 

Apple MacBook Air 13吋 1.86GHz 120GB

Combat tip #3

Learn To Fall. Gracefully.

Once you have achieved black belt status, your journey has not ended. In fact, it has only just begun. You’ve mastered the basics, but the rules are always changing. So your design and code must fail gracefully.

• Take your HTML email template, and fill it with lots of real content. Turn off CSS. Turn off images, because so many email apps display emails with images off by default. Does the message still get across? If not, you have failed. Go back to page 1.
• Email applications always change their rendering techniques. You can kill yourself learning all their tactics, or learn to keep things simple and failsafe.
• Use MailChimp’s Inbox Inspector to test your designs.

延伸閱讀：

• via: HTML Email Template Throwdown Contest @ MailChimp.com