Smashing Newsletter: Issue #62
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 Daily8 to start your day.
Moreover, if you happen to be in Italy next month, you might be interested in attending the Feed the Brain9 conference and grab a beer (or two!) with Vitaly. The Smashing crew is also on the road every now and then: Iris10 attended the FFWD11.PRO12 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 posters13. 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!
The Smashing Team
Table of Contents
01. What’s Possible With SVG?14
02. Responsive Off Canvas Layouts For The Web15
03. CodePen: Share Your Code And Get It Featured!16
04. Markdown Here: Writing HTML In Emails Is Now Much Easier17
05. Piecemeal Literature In Your Inbox18
06. Filtrify: A Tag Filtering Plugin19
07. Free PSD Icons: 350 Free Pixel Perfect Icons20
08. Syte: Integrate Your Social Profiles Into One Personal Space21
09. The History Of… Paper Clips! A Centenary Design Piece22
We can use SVG today23. 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 SVG24 and the necessary fallbacks for IE<9. But how far can you go with it in practice?
In his article, Using SVG clipPath26, 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)
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 Layouts27, implemented by ZURB (and invented by Luke Wroblewski and Jason Weaver) might be a nice solution for this exact problem.
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 Foundation29. 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)
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)
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-here33 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.
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 Cheatsheet35 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)
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 DailyLit36 found an ingenious solution for this problem.
With DailyLit38, 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)
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 Filtrify39, a jQuery tag filtering plugin. Filtrify lets you search for tags within multiple tags from different categories.
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)
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.
350 free pixel perfect icons42 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)
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? Syte43 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 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 website45. If you need a nice social presence for yourself, Syte might be just what you are looking for. (ml)
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.
In this article by Sara Goldsmith47, 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)
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”?
This issue was inspiration for this postcards collection called Wander Blog49. 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 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 https://shop.smashingmagazine.com/smashing-posters.html
- 3 http://coding.smashingmagazine.com/
- 4 http://mobile.smashingmagazine.com/
- 5 http://fireworks.smashingmagazine.com/
- 6 http://wp.smashingmagazine.com/
- 7 http://uxdesign.smashingmagazine.com/
- 8 http://www.smashingmagazine.com/tag/smashing-daily/
- 9 http://lanyrd.com/profile/smashingmag/
- 10 https://twitter.com/#!/smash_it_on
- 11 http://www.flickr.com/photos/maratz/7403649934/in/set-72157630198476800/
- 12 http://ffwd.pro/
- 13 http://www.printhandbook.com/posters/set-of-3.php
- 14 #a1
- 15 #a2
- 16 #a3
- 17 #a4
- 18 #a5
- 19 #a6
- 20 #a7
- 21 #a8
- 22 #a9
- 23 http://dbushell.com/2012/04/03/svg-use-it-already/
- 24 http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/
- 25 http://sawyerhollenshead.com/writing/23/using-svg-clippath/
- 26 http://sawyerhollenshead.com/writing/23/using-svg-clippath/
- 27 http://www.zurb.com/playground/off-canvas-layouts
- 28 http://foundation.zurb.com
- 29 http://foundation.zurb.com
- 30 http://codepen.io/
- 31 http://dabblet.com/
- 32 http://codepen.io/picks/1
- 33 https://github.com/adam-p/markdown-here
- 34 https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
- 35 https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
- 36 http://www.dailylit.com/
- 37 http://www.dailylit.com
- 38 http://www.dailylit.com
- 39 http://luis-almeida.github.com/filtrify/
- 40 http://luis-almeida.github.com/filtrify/
- 41 http://brankic1979.com/icons/
- 42 http://brankic1979.com/icons/
- 43 http://rigoneri.github.com/syte/
- 44 http://rigoneri.com/
- 45 http://rigoneri.com/
- 46 http://www.slate.com/articles/life/design/2012/05/the_history_of_the_paper_clip_it_was_invented_in_1899_it_hasn_t_been_improved_upon_since_.html
- 47 http://www.slate.com/articles/life/design/2012/05/the_history_of_the_paper_clip_it_was_invented_in_1899_it_hasn_t_been_improved_upon_since_.html
- 48 http://blog.onwander.com/
- 49 http://blog.onwander.com/