Smashing Newsletter: Issue #68

• By Smashing Newsletter Team
• September 25th, 2012
• Smashing Newsletters
• 2 Comments

This newsletter issue was sent out to 120,320 newsletter subscribers on Tuesday, September 25th 2012. If you are not subscribed yet, feel free to subscribe to our email newsletter anytime.

Editorial

Remote communication today requires a delicate balancing act, whether at work or in private conversations. Most workdays require highly efficient time management, so it should come as no surprise that phone communication is being replaced by email, and Skype conferences for particularly important meetings. Yes, we all tend to avoid using the telephone or any immediate channels of communication that interrupt our effective workflow, and rather prefer good ol’ email which is calm, slow and passive. Furthermore, email is also non-proprietary as well as ubiquitous—many communication channels aren’t.

Yet, it seems that we still haven’t quite figured out the right way to manage all the emails that land in our inbox. Some of the tools you will find in today’s newsletter will surely help you heal up the well-known bottomless-mailbox syndrome. Another good way to reduce the email flood is to keep emails short and structure them to save an inordinate amount of unnecessary back-and-forth. Another tip: If you only want to quickly share something with someone, include FYI or NRN (no reply necessary) in your subject line.

And, one of the most important time savers might just be to send one or two kittens-playing-the-piano-images less per day. There is a good chance that the email recipient will actually appreciate it.

Sincerely Yours,
The Smashing Editorial Team

Table of Contents

01. Flipping Content With A jQuery Plugin
02. This Is Responsive Design
03. Free Slab Typeface: Citizen Slab
04. Email Services That Can Save Your Life
05. Modal Lightboxes: Just A Little Bit Better
06. Desks Around The World
07. Smart Time Ago jQuery Library
08. Animated GIFs Made From Analog Doodles
09. Property Numbers With Personality

1. Flipping Content With A jQuery Plugin

There are many ways to create a slideshow or a carousel, but the one we usually go with uses either fading or sliding. If you’d like to present your recent designs in your portfolio website, perhaps having something different, something more original and elegant, would work just a bit better than a more generic solution. For example, what about a booklet-like design of a slideshow?

Bookblock is a jQuery plugin that will create a booklet-like component that lets you navigate through its items using a nifty “flipping” effect. You can specify the speed for the transition, add shadows and opacity, change the perspective and define whether the first item should be displayed after reaching the last item or not. The source is available on GitHub and three demos illustrate what the effect can look like in different settings. (vf)

2. This Is Responsive Design

Today, Responsive Web Design is not just a combination of media queries, fluid grids and flexible images. The approach requires a new mindset, new tools and new solutions to old and new problems. So it’s no wonder that new techniques and best practices emerge out of client work or from collaborative side projects. With the busy routine of daily work, it’s great to have someone keeping a close eye on new responsive designs, emerging design patterns and useful resources.

Brad Frost’s This Is Responsive project presents responsive patterns, techniques, resources and news all in one place. Especially useful is a growing collection of patterns and modules for responsive designs (with demos). All patterns are grouped and thoroughly classified: Layout, Navigation, Images, Media, Forms and Modules. Brad is looking for contributions for his repository, so if you have some time to spare for a good purpose, join the project on GitHub. Now, that’s a project worth bookmarking! (vf)

3. Free Slab Typeface: Citizen Slab

​Have you ever stumbled upon a typeface that looked so beautiful that you knew for sure that you will use it in one of your upcoming design projects? In fact, once you’ve seen that the font weights are available for free download, that’s clearly when not downloading them wasn’t really an option, right? Case in point: Joel Felix, a Californian freelance designer. He designed a typeface that pays homage to a vintage aesthetic without losing its modern sensibility, and has released it as a free download.

Citizen Slab is a very distinctive, almost decorative slab typeface, available only in regular weight and released under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License (which means that it’s available for free use in private but not commercial works). If you’d like to have a typeface to experiment for your side projects, this one will be a great fit, for sure. And if you’re looking for a larger variety of fonts, LostType provides dozens of them — all released under the “pay-what-you-want” license. (ea)

4. Email Services That Can Save Your Life

You arrive at work, start your computer and your face all of a sudden turns purple. There goes your blood pressure! You’ve just run into the plague of today’s office routine. The full inbox: a sizable chunk of every workday and an uninterrupted workflow sacrificed on the altar of connectivity. But there are tools to make the email-plight more bearable.

Tray for example automates predictable actions for you. This service (currently in beta) analyzes your incoming Gmail emails and triggers reactions according to a set of rules you customized. When you just need a break from new incoming emails Inbox Pause can afford you a reprieve from the endless onslaught of requests. The developers have introduced the simplest, most useful analog tool to the electronic mailbox: the pause button.

When you need (or want) to remain undisturbed for a few hours or days, just pause incoming messages at the source and start the flow again (when you’re ready for it). You can even use the tool to notify the people who email you to let them know that their message will not be delivered to your Inbox. And if you want to backup your Gmail archive at once, you could use Gmvault to set up email reminders or schedule emails in Gmail to be sent later, you could use Rightinbox. These services could save you from a heart-attack or just from a frustrating day. (jc)

5. Modal Lightboxes: Just A Little Bit Better

Traditionally, we use modal lightboxes to present either an image or a video in the foreground while leaving the rest of the page (in the background) recognizable, yet darkened. However, we can do a bit more to make the lightbox effect a bit more interesting.

Avgrund is a technique developed by the Swedish Web developer Hakim el Hattab. It aims to add a sense of depth between the page and modal layers. Hakim uses CSS transforms to scale the components and applies CSS filters to add a blur effect to the page. Once a button is clicked, a modal box appears while the rest of the page gets blurred out and fades into the background. A nice little detail that might be just what gives a Web application a nice, memorable touch and feel. You can also use the Avgrund jQuery plugin, developed by Dmitri Voronianski — tested with jQuery 1.4+, with file size under 2Kb and licensed under MIT. (ml)

6. Desks Around The World

Are you also curious to know how designers and artists around the world organize their own workplaces? Does it look the same in Melbourne, New York, London or Cape Town? What are the elements that define the place in which we work? A table, a computer, a notepad, some pens… maybe some exclusive elements that can set you apart from your colleagues (like a picture, or your favorite book)?

Kate Donnelly created the project From The Desk Of to encourage creative professionals to submit photos and a small description about their own desks. It turns out that workplaces look very different from one another, in an interesting and inspiring way. Take a look at the examples and you might just rethink the arrangement of your own desk — or even send a report about it. (tts)

7. Smart Time Ago jQuery Library

Do you remember the hassle you had once your client wanted to implement meaningful relative timestamps in a project? Well, there is a jQuery plugin for it. Smart Time Ago is a tiny jQuery library that helps you update the relative timestamps in your document intelligently. (e.g “2 hours ago”). It is inspired by another jQuery plugin but operates more flexible and intelligent.

Smart Time Ago will first check and update the relative time every 60 seconds. As time proceeds, it will then change its checking time automatically to an appropriate interval. E.g. if the newest timestamp is set to “2 hours ago”, there is no need to check the relative time every 60 seconds, so the new interval will be set to longer than 30 minutes. You can either use it as a jQuery plugin or install it from npm if you use Node. You can also check out the website on how to customize the plugin to your specific needs. (ml)

8. Animated GIFs Made From Analog Doodles

Gone are the times when animated GIFs were merely used for early Internet kitsch. Jamie Beck’s and Kevin Burg’s animated photos showed us how animated GIFs can be used to create something approaching High Art. But now Alma Alloro (from Tel Aviv) combines analog and digital media to interpret GIFs in another way.

Many art students (as well as non-art students) doodle all day long to kill time in class. Some pieces are only meant for the trash bin, others are worth keeping, while some even become great works of art. Alloro took his geometric doodles and reused them to create something completely different, animating them to create a collection called Further Abstracts. Alloro believes that GIFs are replacing video art, and this new development will also bring the Web into the gallery space. You can view the images at Caesura Gallery or check out the artist’s website. (ml)

9. Property Numbers With Personality

Have you ever paid attention to the house number of the building you live in? How does it look: big, small, new, old…? Does it have a modern or unconventional typography? For some people, they’re just identification signs, but these small little numbers are actually a part of the house’s personality.

(Image credit)

The Flickr photo group Property Numbers shows how these characters can be adapted to the house’s architecture or even to the owner’s personality: flowers lovers might have their signs with some flowers painted on it. An old wooden house looks great with rusty iron letters while a modern office gets an extra cool touch with shaded steel digits. If you have a unique example to share, you may also upload your photo to this pool. (tts)

The authors in this newsletter are: Esther Arends (ea), Jan Constantin (jc), Melanie Lang (ml), 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).