Issue #62 | Tuesday, June 26th 2012 | 108,396 subscribers | Previous issues
Dear Friends,
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 posters 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 browsing through the various sections 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 Brain conference and grab a beer (or two!) with Vitaly. The Smashing crew is also on the road every now and then: Iris attended the FFWD.PRO 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 posters. 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 if you've participated.
Have fun exploring, reading and designing!
Yours sincerely,
The Smashing Team
Table of Contents
01. What's Possible With SVG?
02. Responsive Off Canvas Layouts For The Web
03. CodePen: Share Your Code And Get It Featured!
04. Markdown Here: Writing HTML In Emails Is Now Much Easier
05. Piecemeal Literature In Your Inbox
06. Filtrify: A Tag Filtering Plugin
07. Free PSD Icons: 350 Free Pixel Perfect Icons
08. Syte: Integrate Your Social Profiles Into One Personal Space
09. The History Of... Paper Clips! A Centenary Design Piece
10. Beautiful Postcard Illustrations
11. New On Smashing Job Board
12. Recent Articles on Smashing Magazine
1. What's Possible With SVG?
We can use SVG today. 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 SVG and the necessary fallbacks for IE<9. But how far can you go with it in practice?
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 Layouts, 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 Foundation. 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 CodePen is one of them—a community of enthusiastic front-end designers who all share their front-end code with fellows. Very much like on Dabblet, 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 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)
Advertisement
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-here 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 Cheatsheet 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 DailyLit found an ingenious solution for this problem.
With DailyLit, 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 Filtrify, 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)
Advertisement
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.
350 free pixel perfect icons 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? Syte 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 website. 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.
In this article by Sara Goldsmith, 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"?
This issue was inspiration for this postcards collection called Wander Blog. 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)
11. New On Smashing Job Board
Here are the job openings published recently at our very own Smashing Job Board:
-
Sr. PhP Developer at TheraSim Inc. (Raleigh Durham, NC)
Educational Requirements: Masters in Computer Science or equivalent experience. Must have product delivery experience designing and implementing customer facing multi tier applications. Experience developing Object Oriented PhP on the LAMP stack required. Relational database design, JSON, AJAX and XML preferred but not required.
-
Senior Digital Designer at The Cloud and Compass (London, UK)
Listed as one of NMA's 'ones to watch' digital agencies of 2012, this is a fantastic opportunity for someone who is ready to step their career up a level and really shape the direction of the agency. You will be the go to person for all things creative/design, looking after a small team of junior designers.
-
Jr. Web Designer at no.inc (Baltimore, MD)
The selected candidate will work in a fast paced team environment. no|inc keeps a diverse client list and the selected candidate will be exposed to a wide variety of projects and tasks. These tasks include web design and production, flash design, production, and testing.
12. Recent Articles on Smashing Magazine
Thank You For Reading!
