Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #21

This newsletter issue was sent out to 45,349 newsletter subscribers on November 9th 2010.

Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming issue. The newsletter is sent out on Tuesdays, and contains unique tips and tricks for designers and Web developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1, of course.

Table of Contents

  1. Free High-Quality HTML Email Templates2
  2. The Grammar Cheat Sheet3
  3. Beautiful CSS Font Stacks4
  4. Showcase of Flyers and Posters5
  5. Free Video Talks, Screencasts and Lectures for Web Designers6
  6. Make Bees Buzz ’n Fly with CSS3 and Sencha Animator7
  7. Color of the Year 2010 (Infographics)8

1. Free High-Quality HTML Email Templates

Designing HTML emails is tricky. Because of the lack of proper CSS support9 in many email clients, Web designers often have to resort to nasty coding techniques or restrict their emails to simple layouts. But emails — whether newsletters, corporate memos or communications based on generic templates — don’t have to be ugly and boring.

HTML Email Newsletter10

The Gallery of HTML Email Templates11 proves just that. The page presents 38 free HTML email templates (including PSD and HTML files), created by talented professional designers. Every template has been tested in more that 20 popular email clients, including Outlook 2010, Gmail, Lotus Notes, Apple Mail and the iPhone. All of the Photoshop documents are layered and ready to be tweaked. You can download all of the templates for free (320 MB) and use them for any private or commercial project.

In case you use Campaign Monitor to send out newsletters, you’ll also get Campaign Monitor’s templates as an extra goodie. Mailchimp users can choose from the professional templates for Mailchimp12. Quick tip: don’t forget to include a plain-text version for recipients whose clients do not have advanced HTML and CSS support. (vf)

2. The Grammar Cheat Sheet

Creating and publishing content has never been easier. Many of us have stumbled across useful and inspiring websites, only to be shocked by the lack of even the most basic grammatical competency on the part of the author. Following a few simple pieces of advice to improve your copy does not take much effort. The Grammar Cheat Sheet13 by Alexander Ross Charchar serves as a great guide in the language jungle.

The Grammar cheat sheet14

Never mix up your dashes again; learn how to set quotations marks; and remind yourself to keep paragraphs short and topical. Overall, it’s a nice little catalog of suggestions that would help every content creator meet the expectations of their audience. Take five minutes to peruse the sheet; your visitors will appreciate it! For a closer look at what else might go wrong, check out “15The Trouble With EM ’n EN (and Other Shady Characters)” by Peter K Sheerin. (sp)

3. Beautiful CSS Font Stacks

Designers are rejoicing over the fact that we’re no longer limited to a few “Web-safe” fonts. After all this time, we were getting a bit tired of them anyway (hence the proliferation of font-replacement solutions). Yet there are still challenges with creating nice CSS font stacks of typefaces that work well together, especially now that we have so many more choices than before.


Awesome Fontstacks17 to the rescue. Here you can create your own stacks from 45 fonts that are free and licensed for online use. To create a CSS font stack, just visually select your headline font, then your body text font, and then download the CSS. The service also has a growing library of font stacks that you can use as is. To top it off, each font stack has a back-up stack for those using browsers that don’t support @font-face. You can preview the default fonts with a single click. (cc)

4. Showcase of Flyers and Posters

Spending a bit of time looking at beautiful inspiring designs is a great way to commence a new project. Too often, though, we look only at images that directly relate to the project we’re working on. There are so many other varied places to find inspiration.


Flyer Design Goodness19 is one such place. The website showcases beautifully designed flyers and posters daily. Included are gig posters, show flyers, movie posters, screen prints, club flyers and more. You can submit your own posters for inclusion. (cc)

5. Free Video Talks, Screencasts and Lectures for Web Designers

Staying up to date on what’s happening in the field of Web design and development is difficult and time-consuming. Things move at a fast pace, and your knowledge can get dated quickly. Frequenting lectures and conferences is crucial if you want to keep up, but time and money often pose constraints.


Ontwik21 might be your solution. The website brings together lectures, screencasts and conferences from around the world. Both expert and novice developers and designers should be able to find topics of interest, whether it’s CSS and HTML5 or start-ups and creativity. Ontwik is free, and anyone can suggest content for the website; you can even submit your own lectures. (ks)

6. Make Bees Buzz ’n Fly with CSS3 and Sencha Animator

With the latest in CSS3 and HTML5, you can produce beautiful, striking animations, and you don’t even have to code them: Sencha Animator22 does it all for you. You can download the basic tool for Mac, Windows or Linux for free. You just have to register.


The tool’s interface recalls Dreamweaver and Flash and offers a wide variety of CSS3 styles for objects, such as border radius, box shadow and opacity, along with a lot of animation effects. The interface is not exactly intuitive, but it’s not too difficult either, and there are video tutorials to guide you. Once you’re happy with an animation, you can export the project into a separate HTML file in two clicks. From this file, you can copy and paste to another style sheet or template. The generated code is quite lengthy and not very semantic, so you might need to adjust it. Try it out and see what sticks. (mm)

7. Color of the Year 2010 (Infographics)

Who said charts and graphs have to be boring? Sure, old Matt from college didn’t notice half the class asleep by the first 30×20 data matrix of his presentation on the mating behavior of the Micronesian bed bug. He should have checked Colourlovers’ way of getting the point across. Its recent survey, Color of the Year 201024, proves that visualizing data can be quite refreshing.

Keywords for top three hues25

Top hues by gender26

Information is only useful when it is understood. Infographics are concentrated nutrition for data consumers, like multi-vitamins, fulfilling basic info requirements hassle-free while keeping readers occupied and entertained. If there is room to deliver complex information in a clearer and more interesting way, then Colourlovers’ visualization is definitely a step in the right direction. (sp)

The authors are: Vitaly Friedman (vf), Stephan Poppe (sp), Cameron Chapman (cc), Katrin Svana (ks).


  1. 1
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8 #a7
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' web with the latest tips and tricks for designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top