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 newsletter, of course.

Table of Contents

01. Free High-Quality HTML Email Templates
02. The Grammar Cheat Sheet
03. Beautiful CSS Font Stacks
04. Showcase of Flyers and Posters
05. Free Video Talks, Screencasts and Lectures for Web Designers
06. Make Bees Buzz ’n Fly with CSS3 and Sencha Animator
07. Color of the Year 2010 (Infographics)

1. Free High-Quality HTML Email Templates

Designing HTML emails is tricky. Because of the lack of proper CSS support 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 Newsletter

The Gallery of HTML Email Templates 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 Mailchimp. 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 Sheet by Alexander Ross Charchar serves as a great guide in the language jungle.

The Grammar cheat sheet

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 “The 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.

Screenshot

Awesome Fontstacks 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.

Screenshot

Flyer Design Goodness 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.

Screenshot

Ontwik 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 Animator does it all for you. You can download the basic tool for Mac, Windows or Linux for free. You just have to register.

Screenshot

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 2010, proves that visualizing data can be quite refreshing.

Keywords for top three hues

Top hues by gender

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).

The Smashing Newsletter Team 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

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top