Smashing Newsletter: Issue #103
It seems that we often tend to start caring about things only once they’ve disappeared instead of providing enough value to them every day, but I guess that’s just human nature. Personally, it makes me very sad to see fantastic websites, applications, conferences, tools and articles disappearing2, leaving no trace behind on the Web — good, great ideas that have been transformed into actual products not finding enough traction to survive in our fast-paced, success-driven industry.
There is always a good reason why an app has been taken down, or why the development or designer team has decided to focus on other, more important or less risky enterprises. Sometimes they get replaced by more focused alternatives, and perhaps that’s a good thing. But quite often they leave an empty room full of lost excitement, mislabeled forms and abandoned user profiles. That’s just how it is, but it doesn’t change the fact that it’s a sad state of affairs.
So why not take a minute of your time today to turn to your email client, write a short “thank you” message, and thank an owner of a service or a tool that you have been using for quite some time, to let them know that you appreciate their time and efforts, as well as their pull requests and their endless bug hunting nights. Without these people, the Web would be a much more silent and much less remarkable place, and that’s something we have to care about and value as we use those wonderful, enabling, time-saving services.
— Vitaly (@smashingmag)
Table of Contents
02. User Interface Animations And Interactions5
03. Did You Know, You Might Not Need jQuery?6
04. Long Live Dingbats!7
05. The Style Guide Is Your Friend8
06. Speed Up Your Workflow With Sass/LESS Libraries9
07. Your Data Belongs To You10
08. Animation Meets Geometry And Typography11
09. This Won’t Leave You Out In The Rain12
10. Here’s An Animated Alphabet!13
11. Beam Me Up, Futura!14
12. Full-Day Smashing Workshops15
Let’s say you’re working on a website that requires you to implement a countdown on the front page. Perhaps it’s an online shop that plans to launch a new campaign soon, or perhaps a conference website on which tickets must go on sale at a specific time. How would you build it?
202. User Interface Animations And Interactions
When done properly, transitions and animations can draw users in and create a smooth, enjoyable experience. In fact more often than not, it’s not just about showing a change of state in interfaces but also explaining the purpose of a function or helping users out with clever hints and tips. Finding those nifty interactions isn’t easy though, so whenever a designer or developer dedicates time to collect them all in one place, that place is definitely worth bookmarking and coming back to.
With Use Your Interface22, UX designer Josh Davey has put together a library of “transitional” interaction design patterns that he has found. Six Ux23 is a similar resource containing transitions that last at six seconds, with lots of short animated GIFs showcasing the design patterns. If you’ve been looking for UI animations, make sure to visit UI Animations24, and you can also visit First Time UX25 and Onboarding UX Pinterest Board26 for examples of good onboarding. Now that should be enough for a while! And if you have a nice example to add, the owners of the sites would be more than happy to receive your submissions! (kv)
273. Did You Know, You Might Not Need jQuery?
334. Long Live Dingbats!
When we think about dingbats, we probably think about those obscure system font symbols that are actually rarely used in practice, yet somehow find their way in local ads, school announcements and newspaper adverts. Formally, a dingbat is an ornament, character or spacer used in typesetting. Well, perhaps dingbats deserve a bit more credit after all.
Baynham Goredema from Johannesburg, South Africa, has created Haus Ethnik Dingbats35, a font which is basically a collection of motifs inspired from modifications on ethnic patterns derived from Zimbabwean material culture. Each character is a remarkable, beautiful pattern, with 26 uppercase characters and 26 lowercase characters and is available for free personal and commercial use. (vf)
365. The Style Guide Is Your Friend
In times when responsive design is a de-facto standard in Web design, not only our design and coding techniques change; so do the tools, communication, workflow and our deliverables. In fact, pattern libraries37 — a set of modules used on a website, with code snippets and usage notes — are often a part of the process, and frequently a part that helps speed up the workflow and keep the code clean and maintainable after the website has been released. Why? Because once a style guide is in place, it’s so difficult to make things wrong.
How does it work? Well, all you need to do is simply write a description for important modules and functions right into your code as comments. These tools then grab the content of your comments and output the full pattern library for you. So whenever you change your code, the style guide will be updated right away as well. A good, simple way to ensure consistency and create a more future-friendly code base. (vf)
456. Speed Up Your Workflow With Sass/LESS Libraries
Everybody loves a good toolkit, but not as much as building their very own with tools that help them quickly start new projects and speed up their entire workflow. Preprocessors like LESS or Sass make it even easier to build complex sites, and with extensions built on top of them, front-end development is becoming more manageable every day. But wait, there are so many! How do you make sense of them all and select what works best for you?
Chris Michel and Jared Hardy have released Sache47, a growing repository of Sass and Compass extensions. The entries are included from GitHub and categorized by tags. You can easily add your own Sass/Compass project by either adding the
sache.json file to your public repository or by entering your project’s SSH clone URL. And if you find yourself using LESS instead of Sass, make sure to check LESS Hat48, a comprehensive library with 86 mixins. Also, how about trying to build your own toolkit and releasing it publicly? (ml)
497. Your Data Belongs To You
Most of us have already heard the news: two web services, bookmarking service Zootool and collaboration tool Editorially, have recently announced that they’re shutting down. They’re not the first ones to shut down, and they certainly won’t be the last ones. However, such cases remind us of the fact that any service could shut down any minute, and some may not even offer us the time to adjust and back up our data.
You may be one of those folks that look forward to seeing your personal nonsense finally leave those archives anyway, however, for some, there are tweets and posts that still hold valuable inofrmation that you have saved over the years. If you’d like to have a local backup of your data, you can use Google Takeout51, Facebook Archive52 and Twitter Archive53 — services that let you back up, archive and download all of your data in one nifty ZIP file. In fact, you can search through those archives much better than you can do online, and of course, this way you have everything stored in one place. (ml)
548. Animation Meets Geometry And Typography
Mix the relentless drive of a passionate artist with love for geometry and typography and what do we get? Typoly55, of course, a beautiful free font created and designed by Kristian Kreaktive. This font was the result of a stormy night, and if you take a closer look at the animations, it isn’t that difficult to imagine how stormy that night must have been.
Francis Ford Coppola, director of The Godfather, once said that risk is an essential element of art: “If you don’t take a risk then how are you going to make something really beautiful, that hasn’t been seen before?” Kristian seems to be a designer who lives this up: “I fail again and again because trying new things or pushing my own limits is what keeps me alive.” Make sure to visit Kristian’s portfolio57 which portrays a quite remarkable collection of his other artworks as well. (ea)
589. This Won’t Leave You Out In The Rain
What’s the first thing you do in the morning? You probably check your weather app and ask yourself whether you have to put on that warm sweater today, right? Given the fact that we’re all still quite sleepy and mostly in a rush while making all of these decisions, wouldn’t it be handy to get a little bit of help if possible? Well, hold your horses, here it comes: the What To Wear59 daily report.
Curated by Joshua Porter, a brief report is delivered to your inbox every morning. It contains a simple weather strip (“feels-like temperatures” also included), clothing recommendations to help you stay prepared for what the day might bring, and an extra section with additional information such as road conditions, advice on whether it’s a good idea to bike to work, and the best time to exercise. The service is available for Boston, New York, San Francisco, Chicago, and Seattle, and subscribing to it is free. Simple, yet brilliant! (cm)
6110. Here’s An Animated Alphabet!
Ever had the inkling to design your own drop cap? If so, well then you have to check out CSS A–Z62! Basically, it’s a set of animated sketches for each letter of the alphabet, created entirely using HTML and CSS. Just take a look at the lovely “E” for “Espresso”. There’s little that is quite as fitting to explain the life of a designer as their daily caffeine intake. A new letter animation is published as a new post regularly, and there are just a few days left!
If you’re interested in how these letters and animations are made, you can check out each post to take a closer look at the code. The tools used are Keyframer64, jsfiddle65 and good-ol’ faithful pen and paper. Still keen to give it a go? Why not create your own interpretation of the alphabet? (sh)
6611. Beam Me Up, Futura!
Typography aficionados watch out for typography everywhere, even in places where others normally wouldn’t think of. For example, how about… the future? Dave Addey has recently started a blog dedicated to typography and iconography in sci-fi and fantasy movies: Typeset In The Future67.
Stanley Kubrick’s classic 2001: A Space Odyssey and Duncan Jones’ Moon are the first movies that Dave examined for every howsoever small snippet of typography — be it on the buttons of futuristic gadgetry, on the patches of spacesuits, or in the film opening credits. There’s quite a lot of research behind it, but Dave’s entertaining writing style makes reading the extensive analysis of the typographic bits and pieces anything but dry. The project is not only great fun, but also a fascinating example of how design can tell and shape stories. We’re definitely looking forward to seeing more! (cm)
6912. Full-Day Smashing Workshops
You’ve probably already been there: as a good design agency or a front-end team, you have many projects going on and you never really find the time to actually study new techniques, tools and alternative workflows for your work. You could encourage your designers and developers to attend conferences and meet-ups, but what about having an in-house workshop instead — a workshop tailored exactly to your needs?
Well, that’s what we do as well. Beyond our regular workshops71, we also organize in-house workshops72 and help solve issues that designers and developers have been running into. Responsive design, advanced front-end techniques, performance optimization, UX — we’re quite flexible about the topics, the length and the format of the workshops.
If you’re interested, just get in touch with Vitaly at firstname.lastname@example.org and briefly describe what problems you’d like to solve. Don’t worry about the costs either — we’ll find a fair price for sure. Yes, it’s that easy! (vf)
The authors in this newsletter are: Kristina Vogt (kv), Shavaughn Haack (sh), Melanie Lang (ml), Esther Arends (ea), Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).
- 1 http://www.smashingmagazine.com/the-smashing-newsletter/
- 2 http://www.smashingmagazine.com/2013/09/19/good-content-is-too-valuable-to-die/
- 3 http://www.smashingmagazine.com/2013/09/19/good-content-is-too-valuable-to-die/
- 4 #a1
- 5 #a2
- 6 #a3
- 7 #a4
- 8 #a5
- 9 #a6
- 10 #a7
- 11 #a8
- 12 #a9
- 13 #a10
- 14 #a11
- 15 #a12
- 16 #
- 19 http://codepen.io/averyvery/pen/IvDLB
- 20 #
- 21 http://useyourinterface.com/
- 22 http://useyourinterface.com/
- 23 http://sixux.com/
- 24 http://ui-animations.tumblr.com/
- 25 http://firsttimeux.tumblr.com/
- 26 http://www.pinterest.com/designshard/onboarding-uiux/
- 27 #
- 28 https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o/edit
- 29 http://youmightnotneedjquery.com/
- 30 http://youmightnotneedjquery.com/
- 31 http://blog.jquery.com/2013/04/18/jquery-2-0-released/
- 32 http://projects.jga.me/jquery-builder/
- 33 #
- 34 https://www.behance.net/gallery/Haus-Ethnik-Dingbats-%28Free-Font%29/13447241
- 35 https://www.behance.net/gallery/Haus-Ethnik-Dingbats-%28Free-Font%29/13447241
- 36 #
- 37 http://alistapart.com/blog/post/getting-started-with-pattern-libraries
- 38 http://style.codeforamerica.org/
- 39 http://style.codeforamerica.org/
- 40 http://www.yelp.com/styleguide
- 41 http://barebones.paulrobertlloyd.com/
- 42 https://github.com/hagenburger/livingstyleguide
- 43 http://jacobrask.github.io/styledocco/
- 44 http://kaleistyleguide.com/
- 45 #
- 46 http://www.sache.in/
- 47 http://www.sache.in/
- 48 http://lesshat.com/
- 49 #
- 50 https://twitter.com/settings/account
- 51 https://www.google.com/settings/takeout
- 52 https://www.facebook.com/help/131112897028467
- 53 https://twitter.com/settings/account
- 54 #
- 55 http://www.kristiankreaktive.com/?portfolio=tipoly-free-font
- 56 http://www.kristiankreaktive.com/?portfolio=tipoly-free-font
- 57 http://www.kristiankreaktive.com
- 58 #
- 60 http://whattowear.io/
- 61 #
- 62 http://cssaz.tumblr.com/
- 63 http://cssaz.tumblr.com/
- 64 http://alexberg.in/keyframer
- 65 http://jsfiddle.net/
- 66 #
- 67 http://typesetinthefuture.com/
- 68 http://typesetinthefuture.com/
- 69 #
- 70 http://www.smashingmagazine.com/workshops/
- 71 http://www.smashingmagazine.com/workshops/
- 72 http://www.smashingmagazine.com/workshops/#in-house-workshop
- 73 http://www.flickr.com/photos/theilluminated/5386099858/sizes/m/