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

This newsletter issue was sent out to 108,396 newsletter subscribers on Tuesday, June 26th 2012. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.


At this time of year, summer hasn’t arrived for everybody. Whatever season it may be on your side of the globe, we sincerely hope you’ll enjoy some smashing colors around you with our brand new Smashing posters2 to brighten up your walls! The number of poster sets are limited, so grab your copies as soon as you can. If you’re away on holiday, you can always keep up to date by browsing3 through4 the5 various6 sections7 on Smashing Magazine, or enjoy the Smashing Daily to start your day.

Moreover, if you happen to be in Italy next month, you might be interested in attending the Feed the Brain8 conference and grab a beer (or two!) with Vitaly. The Smashing crew is also on the road every now and then: Iris attended the FFWD9.PRO10 conference in Zagreb two weeks ago, and was honored to meet some of you smashers out there! Thanks again to everyone for their support and feedback.

Last but not least, we’re giving away two sets of Print Handbook posters11. To win a set, let us know why those funky #printhandbook posters should be on your wall! The winners will be contacted by Friday at the latest, so be sure to keep an eye on your inbox.

Have fun exploring, reading and designing!

Yours sincerely,
The Smashing Team

Table of Contents

  1. What’s Possible With SVG?12
  2. Responsive Off Canvas Layouts For The Web13
  3. CodePen: Share Your Code And Get It Featured!14
  4. Markdown Here: Writing HTML In Emails Is Now Much Easier15
  5. Piecemeal Literature In Your Inbox16
  6. Filtrify: A Tag Filtering Plugin17
  7. Free PSD Icons: 350 Free Pixel Perfect Icons18
  8. Syte: Integrate Your Social Profiles Into One Personal Space19
  9. The History Of… Paper Clips! A Centenary Design Piece20

1. What’s Possible With SVG?

We can use SVG today21. Especially with the advent of high-resolution displays, the problem of having low-resolution PNG, JPEG or GIF images on websites is becoming more critical, because the end user will hardly be able to see them or the image will appear pixelated and blurry. David Bushell already discussed resolution independence with SVG22 and the necessary fallbacks for IE<9. But how far can you go with it in practice?

What's Possible With SVG?

In his article, Using SVG clipPath, Sawyer Hollenshead discusses how we can create a clipping path (or mask) that can be used to alter the shape of your images and the boundaries of links—creating links that can take any possible form, and no longer being restricted to a box. Inline SVG and clipPaths are supported in the latest versions of Safari and IE, Chrome 17+, and Firefox 8+. You can use Modernizr to check for support and provide a fallback to a non-clipPath version. Do you use SVG in your projects already? (vf)

2. Responsive Off Canvas Layouts For The Web

On mobile devices, the most difficult (and creative) constraint to work with is the lack of available space. All navigation options just have to be in the right place at the right time for user’s convenience—but it sounds much easier than it is when it comes to the actual development. Off Canvas Layouts23, implemented by ZURB (and invented by Luke Wroblewski and Jason Weaver) might be a nice solution for this exact problem.

Responsive Off Canvas Layouts For The Web24

The Off Canvas pattern for multi-device layout takes advantage of space off the screen to keep content or navigation hidden, until either a larger screen size allows it to be visible, or until a user takes an action to expose it. ZURB has released a batch of responsive templates for layouts which are integrated into their responsive design framework Foundation25. Overall, four templates are available: a layout that moves the nav menu to the bottom of the mobile (enabling a sliding sidebar); a layout that has a sliding top nav (and as a sliding sidebar); a paneled layout; and a “sidebar-on-mobile-only” layout. Demo files are available as well, and a SCSS implementation (Sass and Compass) is provided, too. (vf)

3. CodePen: Share Your Code And Get It Featured!

Communities in which designers and developers can contribute their favorite snippets of HTML/CSS/JavaScript are great for sharing, education and inspiration. The brand new project CodePen26 is one of them—a community of enthusiastic front-end designers who all share their front-end code with fellows. Very much like on Dabblet27, you can enter HTML, CSS or JavaScript, and the combined result is displayed on the website. More interestingly, the results are featured on the front page among popular picks and editors’ picks.

CodePen: Share Your Code And Get It Featured!28

CodePen is a great and useful platform for showing off demos, troubleshooting, demonstrating bugs, or anything else you can think of. CodePen is developed by Alex Vazquez, Tim Sabat and Chris Coyier. Currently it is still in the beta phase, but the founders would love to hear your feedback… or receive your fantastic HTML/CSS demos! (ml)

4. Markdown Here: Writing HTML In Emails Is Now Much Easier

Including links, bullets and code examples in HTML emails can be a real pain. Adam Pritchard found himself writing his emails with Markdown on GitHub in the browser, then copying the preview into the actual email, and then sending it out. Because he thought that this kind of workflow is absolutly absurd, he decided to create a handy assistant. Markdown-here29 is a Chrome, Firefox and Thunderbird extension that lets you write your email right in Markdown and then render it before sending. It also supports syntax highlighting—you only have to specify the language.

Markdown Here: Writing HTML In Emails Is Now Much Easier30

If you experience difficulties learning how to meaningfully integrate the extension into your regular workflow, the author has put together a very detailed documentation page on GitHub. There is also a handy Markdown Here Cheatsheet31 provided if you need it. Of course, there are some compatibility issues as well; Gmail, Thunderbird, Yahoo and Google Groups are perfect examples but Yahoo doesn’t always play nicely with paragraphs, so you’ll have to look out for that. (ml)

5. Piecemeal Literature In Your Inbox

One of the inconveniences of adult life is that you often spend so much time on chores, work, family (all the things that make up living), that certain pleasures go by the wayside. Take reading for example. Who has the time or energy after a full day to sit down and read a classic literary masterpiece? The folks at DailyLit32 found an ingenious solution for this problem.

Piecemeal Literature In Your Inbox33

With DailyLit34, Susan Danziger and her team thought of a way to connect books to their overly busy readers via email. By simply segmenting a book into short, five-minutes-to-read daily emails, they’re making reading part of the email-heavy workday. Just choose your book, subscribe and start reading the classic or contemporary work you’ve been meaning to sink your teeth into for years. So far, the archive has just around 1000 books, but the collection is growing, and it has quite some interesting gems. (jc)

6. Filtrify: A Tag Filtering Plugin

By using tags for navigation you can let the user find needed information much faster. But what to do if you have quite a large amount of tags within one category? Luis Almeida developed Filtrify35, a jQuery tag filtering plugin. Filtrify lets you search for tags within multiple tags from different categories.

Filtrify: A Tag Filtering Plugin36

The plugin creates a menu where users can specify a tag (or a couple of them). Filtrify goes through the chosen tags and offers the information that users are looking for. The plugin is released under the MIT license. It can be downloaded from GitHub, free for commercial and personal use. Luis Almeida provides a very detailed documentation of how to use the plugin for your own website, how to style and enhance it and much more. The plugin works perfectly in IE8+, Chrome, Firefox, Opera, Safari, but is a bit buggy on IE7. (sv)

7. Free PSD Icons: 350 Free Pixel Perfect Icons

Good quality icons are always difficult to come by, especially if you are looking for an icon set that is supposed to be used in a variety of different contexts (online magazine, user interface, or a custom CMS). Finding one set that would include all the icons you need might be very difficult as well as time-consuming.

Free PSD Icons: 350 Free Pixel Perfect Icons37

350 free pixel perfect icons38 provides a comprehensive set of small icons for apps, websites and other related areas. The icons are free for personal and commercial use, available only in PSD format. According to the designers, more icons are coming soon… so look out for updates! (vf)

8. Syte: Integrate Your Social Profiles Into One Personal Space

On our personal websites we tend to set links to our social media profiles. But have you ever been annoyed by the fact that you couldn’t nicely integrate those social media profiles like Dribbble and GitHub into your personal website? Syte39 is a new approach to doing just this. It’s a simple personal website that provides easy social integration with Tumblr, Twitter, GitHub, Dribbble and Instagram.

Syte: Integrate Your Social Profiles Into One Personal Space40

Syte uses Tumblr for blogging; in fact, this blog will be the primary page of your personal website. If you integrate one of the other applications and click on them, a new section will load within the website, including your profile, the newest tweets, list of user’s GitHub repos, latest Dirbbble shots or Instagram pictures. Syte uses LESS CSS preprocessor as well as the Django Web framework to handle requests and call the integration APIs (with Python). Syte also has a responsive layout and looks pretty good on mobile devices. You can see it in action on Rodrigo Neri’s (founder) personal website41. If you need a nice social presence for yourself, Syte might be just what you are looking for. (ml)

9. The History Of… Paper Clips! A Centenary Design Piece

Can you actually imagine how old the paper clip is? Probably older than you thought. In fact, this object—which you probably have in your desk and use all the time—was created over 100 years ago. Different from other objects from our everyday lives (such as pens, cameras and even books), this small piece of metal piece mostly remains in its original design—and still works perfectly.

The History Of... Paper Clips! A Centenary Design Piece 42

In this article by Sara Goldsmith43, you will not only learn about the evolution of paper clips, but also examples of paper clips from around the world, and how the invention of this item was influenced by external factors (like the industrial revolution). It’s amazing to see how simple things that surround us every single day can have a great story behind them. (tts)

10. Beautiful Postcard Illustrations

For some of us, summer has finally arrived. Every year, as the season approaches, our wish to go outside and explore the world wakes up: it’s time to hit the road and leave no stone unturned! During the adventure the longing for sharing experiences with our friends or family back home appears. A good solution is to send a postcard, but what if you choose to visit an unexplored place? How would you send a postcard from a “non-place”?

Beautiful Postcard Illustrations44

This issue was inspiration for this postcards collection called Wander Blog45. The creators of the project asked a couple of illustrators to imagine a postcard from everywhere and nowhere at once. The final result is remarkable. Each postcard has a main slogan such as “Get Lost, Find Yourself”, “Not All Those Who Wander Are Lost” or “Nowhere To Go But Everywhere”, among others. These beautifully illustrated graphics are available as wallpapers for you desktop computer and mobile device. Now if this doesn’t start your summer off with some spicy adventure, what will?! (tts)

The authors in this newsletter are: Melanie Lang (ml), Cameron Chapman (cc), Talita Telma Stöckle (tts), Iris Lješnjanin (il), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), John von Bergen (proofreading).


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12 #a1
  13. 13 #a2
  14. 14 #a3
  15. 15 #a4
  16. 16 #a5
  17. 17 #a6
  18. 18 #a7
  19. 19 #a8
  20. 20 #a9
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45

↑ 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

    Those amazing posters should be hung in my 8th grade Art classroom to INSPIRE, ENCOURAGE, and INTRIGUE young minds!


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