There are some great newsletters out there, of course- they’re the ones I always open, because I know they probably a). Look great, and b). Have something interesting to say.

So how to design email newsletters that work well? Here are some tips:

Design at 600-pixel width or below.

It would be wonderful, indeed, if everyone in the world was using widescreen monitors and one email client- but to make sure that even your subscriber with the 12″-screen viewing mail on AOL’s tiny preview pane can read your newsletter, don’t go beyond 600-pixels in width.

Use less images, and always include alt text.

Many email clients- Gmail is one- have images turned off by default, and it’s up to the user to turn them on. I use Gmail exclusively, and I usually only turn images on when the subject interests me. If it’s obvious that all I’ll see are huge promotional give-me-your-money images, I won’t bother. Having alternative text is extremely important, of course.

Embrace tables. That’s right- tables.

Until all email clients portray HTML emails similarly, tables are your best friend when creating newsletters that are design-heavy. You can brush up on your HTML table coding here.

Don’t rely on the external.

Don’t try to load external stylesheets or javascript documents. Instead, use only inline CSS styles. And forget javascript entirely- unless you want your email to be marked as spam.

Be interesting.

Nothing turns me off an email faster than a subject line that reads like a tabloid headline. Subject lines should be well-crafted, reflecting the “style” of the newsletter itself, and intriguing enough so that your readers will want to open the email.

Use a good email service.

Not so long ago, I wrote a post titled 5 Awesome Email Marketing Services. Any of these five services are recommended, but the one I use all the time now is Mad Mimi- not only is their customer support pretty awesome, is it unbelievably easy to craft great-looking, cleanly-coded newsletters in my Mad MImi dashboard.

Have a killer landing page.

After your reader reads the newsletter, you probably want him or her to click on a link that will direct to a page on the web. Work on this page- make sure there’s continuity from the newsletter to the page. You want your reader to feel that their click was worth something.

Test, test, test.

You want to code for all email clients, so try to test on as many as possible. It’s always good practice to send yourself a newsletter before you send it out to hundreds or thousands of people.

What are your tricks for great-looking email newsletters?

That said, I do use handwriting-themed fonts in my projects quite often- and am absolutely delighted anytime I find a good, free one. Here are my top five choices:

JohnLennon

Yes, I’m a fan- and I’ll admit to writing out the lyrics to Imagine using this font when I first got it. Still, there’s no denying this is a great handwriting font- not only are the letterforms well thought-out, it also features a few John Lennon-inspired dingbats, including a facsimile of his signature. Download JohnLennon »

Amandine

It isn’t easy finding handwriting fonts that look both like real handwriting and like art. Amandine, a French-inspired font that makes me think of warm croissants, the Eiffel Tower, and cobblestoned streets, is simply beautiful. Download Amandine »

Daniel

An excellent font that comes in three varieties: Daniel, Daniel Black, and Daniel Bold. Doesn’t sound too exciting, but if you take a look at the full character maps of these variants, you’ll see what makes them special: each one has a distinct look to it, with Daniel being clean and plain, with different pen styles for Black and Bold. Download Daniel »

Luna

I can’t exactly put my finger on what I love about Luna, which is clean and nicely rendered and just a little bit quirky- but I find myself using this one a lot. It looks like handwriting, and yet it so clearly is not. Download Luna »

Santos Dumont

From font genius Billy Argel comes this absolutely lovely handwriting font, perhaps my favorite of the bunch. Great for everything from vintage illustrations to logos to letterheads to scrapbooking. Download Santos Dumont »

Do you use handwriting fonts?

WordPress, which I use to power about 95% of the sites I design, doesn’t have breadcrumbs built-in, so I usually do one of two things:

Use a plug-in

The quicker method, of course. There are a few out there, but my choice is the Navxt plug-in, which really takes me just a minute or so to activate and start using. You can learn more about Navxt including how to install and start using the plugin here.

Don’t use a plug-in

This page by Dimox from Russia describes how to set up automatic breadcrumbs yourself without using a plug-in. It looks like a lot of code, but the truth is it’s really simple to do, especially if you just copy and paste Dimox’s code. Be sure to read through the comments on his post for some ideas on customizing it to your site’s needs.

You will, of course, want to style your breadcrumbs nicely. For that, I recommend this tutorial for creating Apple.com-like breadcrumbs, or the lovely Veerle’s post on simple, scalable CSS-based breadcrumbs.

Do you use breadcrumb navigation on your sites?

Mom: I’m at this website… and I don’t know what to do next!
Me: What links can you click on?
Mom: Links? How do I search?
Me: Is there a search box? A search button?
Mom: Um, no… oh, wait… not here… or there…
Me: Try scrolling down? Look in the upper right area?
Mom: Okay. Oh! There it is! I found it! Thank you. Why are you so good with computers?

This scenario is more common than you think. Sometimes I feel like my mother is almost oblivious to most site navigation designs- like she just doesn’t see them.

If my mom falls at all into your target audience (and she loves online shopping), here are some tips for site navigation design that might make everyone’s lives easier (especially mine):

Make Buttons Look Like Buttons

They don’t have to be all 90’s-style over-beveled buttons, but they should look like buttons. Thin borders are good, “tab” styles are good, and if they change- even slightly in color- on mouseover, even better.

Be Clear

Mom loves buttons that say “Click Here!” Of course, they aren’t recommended. What you should do is be as clear as possible that if you click here, you will be brought here. The w3 explains this well, and basically you want to:

• Provide information when read out of context.
• Explain what the link offers.
• Don’t talk about mechanics.
• Don’t use verb phrases (e.g. “Tell me more”)

Make Search Prominent

When faced with a confusing-looking site, the first thing Mom does is look for the search box- so make it obvious. On the same subject, make your search results easy to understand as well. I wrote more about search about a year ago.

Don’t Hide Things

I love Google, but the way they hide their top navigation bar unless you mouseover it is not cool with Mom- she doesn’t browse like I do, with one hand on the mouse, moving the cursor around constantly. She sits back and says, “What now?” So, if Mom is your target audience, go easy on the hiding.

How do you simplify your site navigation style?

Twitter Buttons

I’ll admit my bias here: I designed many of these buttons, with a wide selection of styles from boxy to glossy to girly. These aren’t meant for downloading- simply input your Twitter ID, hit “Go”, and copy the code directly beneath the button(s) of your choice. Visit Twitter Buttons »

Social Icons Hand-Drawned

There are quite a few “hand-drawn” style buttons out there. These, released on by TheG-Force on Deviant Art, are my favorite. They’re hand-drawn, but still stay true to the social media logo colors, making them easy for your visitors to find on your page. Get Social Icons Hand-Drawned »

Social Bookmark Iconset

I find myself using this one over and over, especially when a particular project could use (or, let’s be frank, a client insists on) a small injection of that Web 2.0-gloss-and-reflection-style. They’re well made, and include most of the popular services today. No Twitter, though- but for that, see Twitter Buttons above. Get Social Bookmark Iconset »

Aquaticus Social

Next to the Iconset above, I use this the most. With 30 buttons to choose from, there’s one for nearly every social media service you can think of- from Twitter to Facebook to Vimeo. Because they’re hip-to-be-square, they require less space than round icons, and when you’re pixel-counting, that’s a very good thing. Get Aquaticus Social »

Cheers

Finally, I couldn’t list my Favorite Five without including Smashing Magazine’s contribution to the free social media icon world. From a RSS beer mug, to a shot of StumbleUpon, to a champagne flute of Twitter- these may not be suitable for every project, but they certainly belong in any designer’s button collection. Get Cheers »

Whatever you personally think of Apple’s iPad, the thing will probably sell like hotcakes. And with wi-fi web browsing as its main feature, you want the sites you design to look great on the iPad’s browser. If they look okay on iPhone screens, just “okay” won’t cut it anymore- not with the large screen on the iPad. Here, some things to keep in mind for iPad-friendly web design:

Fluidity & Flexibility is important.

The iPad has a screen resolution of 1024 by 768- so if you, like most of us, have been designing with 960 pixels (or the 960 grid system), you should be fine. However, it’s important to note that the iPad can and will show your website in both portrait and landscape modes automatically- so having some fluidity or flexibility is a good idea. The multi-touch screen means that visitors will probably put your design to work, pinching and zooming and so forth.

Good Contrast and White Space is important.

Remember: it’s a touch screen. That means people will be interacting with their fingers. Some of these fingers are large- which is why it’s so important to make your clickable links as clear as possible. And use white space wisely- don’t group a bunch of tiny links together. They might be easy to click on with a mouse pointer, not so much with the tip of your finger.

Flash is less important.

The iPad doesn’t support Flash, and probably won’t anytime soon. Create less elements that are wholly dependent on Flash (and hey! We have tips for you!)

Testing is important.

Test, test, test. Until you get yourself an iPad, testing on an iPhone browser or on Safari in OSX is always a good idea. Test that your XHTML and CSS is valid, test whether javascript is supported, and so on.

How important do you think web design for iPads is?

Vector Hearts from DragonArtz

You could just download this and be done with it. There are 63 designs here in 2 eps files, wallpapers, and a bunch of pngs. The hearts themselves don’t really differ in shape- but it’s still some lovely work. Download Vector Hearts from DragonArtz »

Happy Valentine’s Day Icons (Mac OSX)

I’m partial to the “bleeding heart” icons, complete with dripping blood- but maybe that’s just me. In any case, these hearts are beautifully drawn, very useful (e.g. a card screaming “You broke my heart!” + bandaged heart icon) and also available as pngs. Download Happy Valentine’s Day Icons »

Free Hearts

Prefer your hearts a little glossier? This set, free from Spheres Graphics, is something I’ve found many uses for. The hearts are cleanly rendered, and come in 128×128 transparent png format. Download Free Hearts »

Heart Stamp Photoshop Brushes

I love the crafty scrapbooky feel these heart “stamps” lend to a project. This free download includes 4 brushes, with the entire 20-brush collection available for purchase. Also included for free is a pack of png images. Download Heart Stamp Photoshop Brushes »

Vector Heart Box

There are bad vectors and good vectors, and this one’s definitely the latter. Gorgeously rendered, the zipped file includes the Illustrator .ai file, and a 512 x 512 px transparent png. Download Vector Heart Box »

For those Valentine gifts to sell & buy, you must of course use Market Theme!

Do you design for Valentine’s Day?

There’s this wallet:

which you can get for just $15 at Etsy in two colors: Helvetica Evil, (black with white text, shown above), and Helvetica Good (white with black text).

Then there’s the Helvetica tattoo:

“Helvetica modernized type as we know it today. It sends a message to people in a very noncontroversial way. You can’t judge Helvetica. Helvetica can say it all. It can say ‘I love you, I hate you, Will you marry me?’ in a way that communicates effectively and always looks good. Helvetica makes life simple.” – Antonea Nabors, explaining her tattoo

If you’re not quite ready for a tattoo, how about a poster?

Just one of the 45 “absolutely astonishing” Helvetica posters featured here.

And finally: Helvetica cookies!

The very awesome Beverly Hsu crafted these cookie cutters from aluminum and acrylic. I love.

How often do you use Helvetica?

Then, just yesterday, Steve Jobs said “No one will be using Flash. The world is moving to HTML5.”

Now, despite being a self-proclaimed Apple fangirl, I do think that Flash has it’s place online. The truth is, though, that depending on your needs, there are alternative ways of doing things. Let’s take a look at some of them:

Interactive Map (jQuery)

This jQuery plug-in allows you to build zoomable, interactive, absolutely awesome maps without Flash. Look at this demo to see just how awesome.

SmoothGallery (MooTools)

JonDesign’s image gallery and slideshow “system” is built with MooTools, with some gorgeous effects and an elegant interface that’s still fully standard-compliant. See the demo.

CSS Image Gallery

This one’s been around a long time, and is just one of many cool things you can do using pure CSS.

HTML5’s <video> element

Here at Devlounge, we’ve been excited about HTML5 for a long time now- and while we’re not completely there yet, it’s important to realize that we’re getting there. It all depends on what browser supports what. But for some examples, see Dailymotion’s HTML5 Video Demos, or join YouTube’s HTML5 Beta. Also highly recommended: go read Dive Into HTML5’s post on the <video> element.

But what really matters here aren’t necessarily the colors themselves, but how they contrast with each other. Take the following example:

Of all these, Headlines 1 (black background, white text) and 3 (white background, black text) have the highest contrast. While these could arguably be the easiest to read, some people actually find the lower contrast examples in Headlines 2 and 4 more pleasing to the eye- myself included (note: I have bad eyesight, probably from spending too many hours in front of a computer for the past 12 years!) Which is why many designers would rather use #333 for text on a white background rather than #000.

This is also interesting:

I’m not sure about you, but my eyes naturally gravitate to the boxes on the left because of their bold colors. Now I wouldn’t recommend these for long paragraphs of text, but it’s certainly something to keep in mind when choosing colors for things like banners, mastheads and advertisements.

What color choices do you make in your designs? Do you stop and think about how they relate to readability?

Ubuntu Titling

This is a fresh version of one of my favorite free fonts, Ubuntu Title. Ubuntu Titling looks similar, clean and rounded, but is just nicer somehow. It also includes capitals and small capital alternatives. A good choice for contemporary designs. Download Ubuntu Titling »

Sniglet

Another rounded one, Sniglet is a font from the excellent open-source foundry The League of Movable Type. Made by Kingdom of Awesome, Sniglet is fat and delightful and wonderfully rendered. It also comes with a full character set. Download Sniglet »

Katy Berry

I’ll admit to having a soft spot for curly girly fonts like this one, which are perfect for tea party and bridal shower invitations, or simply for adding a free-spirited feel to your next design project. Download Katy Berry »

Patagonia

Another gem from Kingdom of Awesome, this is the kind of font I find myself looking for reasons to use. Lovely letter spacing and just the right amount of boldness make this an easy-to-read font that works particularly well for headlines and announcements. Download Patagonia »

Lane

Best for last again! It’s not always easy finding “thin” fonts that render well, but Lane does so impeccably. Shown here is Lane Narrow, but the free download also comes with “Upper” and “Posh” versions. Download Lane »

Now I won’t delve too deeply into how to code your captions. Some people do it this way:

<p><img src=”image.jpg” alt=”image” /><br />Caption text here</p>

But apparently the proper, semantic way would be to use a definition list, like so:

<dl>
<dt><img src=”image.jpg” alt=”image” /></dt>
<dd>Caption text here</dd>
</dl>

where:
dl = definition list
dt = definition term
dd = definition definition

Got that? Okay, let’s prettify it with some CSS. I want to caption a photo of a nicely sharpened pencil. Here’s the screenshot of what I want:

And here’s how to accomplish it:

HTML:

<dl>
<dt><img src=”images/pencil.jpg” alt=”Sharp Pencil” /></dt>
<dd>I love the smell of freshly sharpened pencils</dd>
</dl>

CSS:

.photographs dt {border:1px solid #ccc;font-size:82%;}
.photographs dd {background-color:#ccc;text-align:center;font-size:82%;font-style:oblique;font-family:Georgia, Times, “Times New Roman”, serif;padding:10px;}

Me, I like my captions plain and simple- I think the photos should stand out more than the captions. But once you know what you can do, you can basically go wild. For example, replacing the dd style with this:

.photographs dd {background-color:#ccc;text-align:center;font-size:82%;font-style:oblique;font-family:Georgia, Times, “Times New Roman”, serif;padding:10px;}

will give you this:

You gotta love CSS.

How do you like to caption your photos?