Issue #67 | Tuesday, September 4th 2012 | 119,710 subscribers | Previous issues
Cheers,
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 Shop. 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. Every customer who buys at least one 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.
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 Anthology for only $69.30 ($99), and Smashing Book #3 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
01. Where Do Your Users Tap On Mobile?
02. Maintain Your Vertical Rhythm With Baseline.js
03. Major Brand Color Codes
04. Free Sketch Sheets For Web Designers (PDF/PSD)
05. Branch: A Place For Meaningful, Lengthy Conversations
06. Beautiful Typography And Lettering
07. Smashing Highlights (From Archives)
08. Recent Articles on Smashing Magazine
09. New On Smashing Job Board
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.
Plunk 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 Verify (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.js is an answer to this problem. This jQuery plugin helps to maintain a vertical rhythm even when adding inline images with awkward sizes.
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.
In his online project BrandColors, 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)
Advertisement
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 Sneakpeekit and Web Sketch Sheets might be just what you're looking for.
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 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 Worship 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.
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)
Advertisement
7. Smashing Highlights (From Archives)
-
Useful Photoshop Tools and Techniques For Your Workflow
We're continuously searching for recent time-saving, useful Photoshop resources for our readers, to make the search of these ever-growing techniques easier. We hope that these techniques will help you improve your design skills as well as your professional workflow when using Adobe Photoshop.
-
Resolution Independence With SVG
When we look at the breadth of Web-enabled devices, responsive design is sure to provide a better user experience. Fitting the website to the viewport is about more than just layout, though: it's also about resolution. In this article, I'll demonstrate why SVG is a perfect addition to future-friendly Web development.
-
UX Techniques For Good User Interface Design
This post presents the second part of our review: 12 useful techniques for good user interface design in Web apps. We also discuss how to implement these techniques so that they are properly used.
8. Recent Articles on Smashing Magazine
9. New On Smashing Job Board
Here are the job openings published recently at our very own Smashing Job Board:
-
Web Designer at TheFrameworks (London, United Kingdom)
This is an exciting opportunity to join the creative team at TheFrameworks. Based in the London office, this role will involve working with senior agency creatives and client-side stakeholders to deliver outstanding web designs. This is a chance to play a key role in the agency's design and technical organisations, and to help shape the agency's core online marketing capabilities.
-
Full Time Web Developer / Programmer at Optimum7.Com (Coral Gables, FL)
Growing South Florida Internet Marketing Company seeking a dedicated professional with at least 3 years of programming experience. The individual they seek must be able to deal with multiple simultaneous web-based coding projects with excellent communication skills in a fast-paced office environment.
-
Sr Web Developer at Stitch Media (Toronto, Ontario)
Stitch Media is seeking a full-time Senior Web Developer to work in their Toronto office. This position will focus on programming large-scale interactive online projects and may require you to work as the sole programmer and/or eventually leading a team of programmers with unique areas of expertise.
