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 #67

This newsletter issue was sent out to 119,710 newsletter subscribers on Tuesday, September 4th 2012. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


Time flies by quickly — Smashing Magazine is turning six years old and we are truly happy to celebrate the occasion with all of our loyal fans, contributors and friends from around the world! While many of you have accompanied us ever since the very first round-up hit the Web, some of you discovered Smashing Magazine after it was already an established online publication for designers and Web developers. This has involved 890 authors, 120 expert reviewers, 1,700 articles, over 6,000 drafts, over 650,000 emails and plenty of editing hours to make sure that the article feels right — that it’s smashing enough.


This year we’d like to celebrate this special occasion with all of you and give you the chance to grab a part of Smashing Magazine for your home or your work place. In fact, we have planned four days of limited edition prizes and special Smashing Book discounts in our Smashing Shop3. Please keep in mind that almost every event will only be open for 24 hours (starting at noon CET). Better set your alarm clock so you don’t miss out on the occasion!

Sept. 4th: Limited Edition Smashing Book #3 Giveaway
As a “thank you” note for you, our dear newsletter subscriber, we will have a special treat for our newsletter recipients. Three lucky readers will be randomly picked to win a limited, exclusive edition of the Smashing Book #3 + #3⅓. Only three sets exist — carefully handcrafted in a small book bindery in Freiburg, Germany, home of Smashing Magazine. A unique gift for the dedicated Smashing Magazine readers. This may just be your lucky day!

Sept. 5th: Inside Smashing Magazine Post + Five Extra eBooks
We dedicate this article to everybody who has made Smashing Magazine possible over all these years — our dear authors, editors, reviewers, proofreaders, illustrators and our own team. If you don’t own a Smashing Book yet, you should definitely not let this one pass you by. Everyone who buys a print book gets five Smashing eBooks on top of that for free — Getting the Hang of Web Typography, Mastering Photoshop Vol. 2, Mastering HTML5, Designing Usable Websites and, our bestseller, Responsive Design! Offer will be limited to 24 hours.

Redesign the Web4

Sept. 6th: Limited Edition Posters Giveaway: Comment and Win!
We’ve talked about ourselves on Wednesday, but it’s your turn today. We’d love to get your feedback on the past six years and on how you’d like Smashing Magazine to develop in the future. Check out the article on Smashing Magazine and give us feedback by leaving a comment. All commenters will have a chance to win high-quality prints of the winners from our “Redesign the Web, Redesign the World” poster campaign. These look great on every wall and are a real eye-catcher.

Sept. 7th: Anniversary Discount for Printed Books
With the Smashing Magazine 6th Anniversary only one day away, we are offering a 30% discount on all Smashing print products for 48 hours. Get your Smashing Book Anthology5 for only $69.30 ($99), and Smashing Book #3 Bundle6 for $27.93 ($39). This is the chance to add to your office reference library, or surprise a fellow colleague or department with a great set of Smashing Books!

We sincerely appreciate your support, dear friends. Thank you for being so helpful, engaging and supportive, and for staying with us all this time. It really means the world to us. Cheers, everyone! And here is to the next six years!

Sincerely yours,
The Smashing Editorial Team

Table of Contents

  1. Where Do Your Users Tap On Mobile?7
  2. Maintain Your Vertical Rhythm With Baseline.js8
  3. Major Brand Color Codes9
  4. Free Sketch Sheets For Web Designers (PDF/PSD)10
  5. Branch: A Place For Meaningful, Lengthy Conversations11
  6. Beautiful Typography And Lettering12

1. Where Do Your Users Tap On Mobile?

The future is mobile. Mobile traffic is growing, touchscreen interaction patterns are becoming more important, and responsive design is a viable solution for some of the design issues on the Web. However, do we always know how to create meaningful mobile experiences for our users? Probably not.

Where Do Your Users Tap On Mobile?13

Plunk14 helps you to figure out where on your mobile websites users are actually plunking their fingers. The process is very easy: you upload an image or screenshot of your touchscreen idea and Plunk will create a click-test from it which you can share with some testers (via email or a social network). A results page then shows you where your testers clicked on your work. If you want to know even more, check out Verify15 (the “big sister” of Plunk), where you can create tests to find out emotional connection that users might have, i.e. how a website makes people feel and what impression it leaves. (ea)

2. Maintain Your Vertical Rhythm With Baseline.js

Using a vertical baseline is crucial for bringing your typographic rhythm to perfection. Implementing it for text is easy, but maintaining it is not so much — especially as the use of images quickly turns this task into a tricky one. Baseline.js16 is an answer to this problem. This jQuery plugin helps to maintain a vertical rhythm even when adding inline images with awkward sizes.

Maintain Your Vertical Rhythm With Baseline.js17

Essentially, you just insert the height of your baseline as a variable into the configuration file and the library takes care of the rest. It works nicely with responsive designs, and you are even able to define multiple baselines for different breakpoints. There is also a Vanilla JS version available (if you don’t what to load jQuery). (ml)

3. Major Brand Color Codes

Most of the companies we know have a brand with a name, a logo, a typeface and — very often — a color scheme relating to it. However, if you wanted to recreate the atmosphere that a certain brand stands for (in a style tile, in buttons, or in your checkout form), wouldn’t it be great to have the place where you could find just the right reference that you need? The designer Galen Gidman not only noticed this but he also took actually created a list of famous brands and their colors.

Major Brand Color Codes18

In his online project BrandColors19, you will recognize many companies’ names and the colors they chose for their visual identity — including the hex color codes. It can be a funny game if you cover the part of the link where the names are, and try to discover which brand that color is associated with! (tts)

4. Free Sketch Sheets For Web Designers (PDF/PSD)

We’ve all been there: there’s a new project coming up and we need sketch sheets for the project, yet they are scattered all over the Web (or in dozens of local folders) and first have to be found. If you’ve been looking for one place to get those sketch sheets and ready-to-print templates for your wireframes or prototypes, then Sneakpeekit20 and Web Sketch Sheets21 might be just what you’re looking for.

 Free Sketch Sheets For Web Designers (PDF/PSD)22

Both websites provide dozens of sketch sheets and A4 print-ready PDF templates, including templates for most common grid systems (Bootstrap, 960 Grid System, 1140 CSS Grid, Less Framework 4, The Semantic Grid System, 978 Grid System, and among others that are from 320px up to 1140px). You can download sketch sheets for browsers, iPad, responsive designs and mobile devices. At the moment, all sheets on Sneakpeetkit can be used for free with private projects (but providing attribution is encouraged). Web Sketch Sheets is completely free to use. (vf)

5. Branch: A Place For Meaningful, Lengthy Conversations

Oh brother, I can’t believe it’s true, and I wanna talk to you. We all know how good it feels to have a great conversation, the kind that keeps us up all night, letting our thoughts and ideas grow. However, have you ever had a great conversation on the Web? Can you imagine that’s possible?

Branch: A Place For Meaningful, Lengthy Conversations

Branch wants to bring the intimacy of a dinner table conversation to the openness of the Web and change the way people talk to each other online. Through a simple bookmarklet, you can grab any part of a conversation from the Web — be it tweets, blog posts, music, video, resources or anything else — and start a branch about it.

You can also branch out from a branch, without taking the whole conversation off-track. And you can invite people who, in your opinion, could contribute to the public conversation. Don’t let your ideas get stuck in your head, publish them instead. You can talk about anything with anyone and embed it anywhere — beyond 140 characters and outside of any noise or off-topic debate. (ea)

6. Beautiful Typography And Lettering

A first-time visit on Type Worship23 is like discovering a new store with wonderful things. You immerse yourself in a pleasant conversation with the storekeeper who knows what makes each item on his shelves unique and valuable. The official blog of the 8 Faces Magazine is run by Elliot Jay Stocks and Jamie Clarke. It features inspirational typography and lettering designs as well as reviews and interviews with leading designers — with love for quality and detail.

Beautiful Typography And Lettering24

The illustrated designs are colorful and the descriptions underneath are informative, inspiring reads. Jamie’s dedication and respect for beautiful artwork is contagious and perceptible in each one of his posts, and make this website a great place to visit for all lovers of letters. (ea)

The authors who have contributed in this newsletter issue are: Esther Arends (ea), Melanie Lang (ml), Talita Telma Stöckle (tts), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Jan Constantin (editing), Christiane Rosenberger (research), Elja Friedman (tools), John von Bergen (proofreading).


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

↑ 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. 1

    I would love to see more articles on UX and Interaction Design in the future!


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