Dear Friends,
When we hit the "Publish" button on Smashing Magazine for the very first time (back in September 2006), there was no master plan, only the desire to create something that we found useful and that we hoped others would find useful, too. Now, nine years, countless articles, a library full of eBooks and nine printed books later, we want to take this anniversary as an occasion to give something back.
We dived deep into our books on the look out for timeless treasures and neatly bundled them up in a free eBook "Best Of Nine Smashing Years". It's a humble gift to you, our dear readers, you who made it all possible and with whom we've grown and evolved over the years.
In the end, we chose chapters from all our printed books and opted for a mix of typography, psychology, responsive web design and performance optimization among others. You can download the eBook for free (.zip, 21.4 Mb) (or download the book in each format separately: PDF, ePub, Amazon Kindle).
But that's not it, yet. We're also happy to share a free excerpt of the Smashing Book 5 with you — Vitaly's chapter on responsive design patterns and components. In this chapter, we'll look into clever practical techniques for improving the UX of responsive sites, with innovative approaches to designing "responsive modules" such as mega-drop downs, tables, calendars, accordions, maps, sliders, responsive PDF and responsive iconography.
Enjoy your smashing birthday goodies, and, again, thank you for your wonderful support throughout all these years!
— Cosima and the Smashing Team
Table of Contents
1. Repeating Background Patterns With SVG
SVG images have a lot of benefits: they are typically smaller than bitmap images and remain sharp even on large screen resolutions. Perfect when we want to fill the background of a DOM or SVG element with a repeating pattern. The easiest way to do so is to create an SVG file that defines the pattern and use it as a pattern fill. If you need a little assistance with this or seek some inspiration creating such patterns, Irene Ros' Pattern Fills library is your place to go.
The library offers several premade SVG-based patterns that can be customized to match your color scheme. To define a pattern, you can either use SVG pattern defs or CSS background image URLs — a tutorial shows you how to do it. A nice bonus: Pattern Fills also works from the command line. (cm)
2. Github Healthcheck
When you need to decide on whether or not to use a library, you'll also need to look for how well it is maintained. There are some obvious indicators such as the age of the last update and the number of open bugs to check. Githubhealth does it that way and requires authentication with your Github account first.
A very handy to-go alternative is isitmaintained.com, which checks the relative percentage of open issues and pull requests and the time they stay open. No matter what you prefer, you might sleep a bit better when you can trust on a good support of the platform of your choice. Kudos to Raymond Camden and Matthieu Napoli for two awesome tools! (mse)
Advertisement
3. Prefetching, Preloading, Prebrowsing — Oh My!
In conversations about front-end performance, we tend to focus on good ol' reliable workhorses: minification, caching or gzipping assets on the server. Some of these practices will fade away with HTTP/2, but there are also a few obscure, smart pre-fetching techniques which we can use to tell browsers how to get content to users faster — for example, with DNS-prefetch, subresource, the standard prefetch, preconnect and prerender.
As Patrick Hamann explains, pre-fetching is a way of hinting to the browser about resources that are going to be used in the future. DNS-prefetch helps browser resolve the DNS of a resource as quickly as possible; preconnect additionally makes the TCP handshake, and optional TLS negotiation (e.g. for gravatar images or web fonts). The standard prefetch actually requests a file and stores it in the cache for later reference, and subresource files are the prioritized ones. We can also pre-render a page if necessary (e.g. for a complex data visualization or checkout).
The level of support for these properties varies, but smart modern browsers will have it included. So we can start using them today. A good place to start learning about them? Preconnect, prefetch, prerender slides by Ilya Grigorik and a CSS-Tricks article on Prefetching by Robin Rendle. (vf)
4. Tufte CSS
Edward Tufte's style of presenting information is well known for its simplicity and neat integration of graphics with text. Dave Liepmann has distilled Tufte's approach for the web and created Tufte CSS. With styles for text, tables, code and sidenotes, plus an interesting take on lists, Tufte CSS could be a useful way of bringing some of Tufte's ideas to the web.
As Dave notes: "Tufte CSS is merely a sketch of one way to implement this particular set of ideas. It should be a starting point, not a design goal". If you see ways of adding to or improving the styles, you can contribute to the project via GitHub. (og)
Advertisement
5. The Hyperlink Battle
What do you get when you take two designers, one letter and two hyperlinks every day? Hyperlink Battle! To acknowledge the power and importance of hyperlinks, Murilo Mafra and Zeh Fernandes decided to create a competition around them. Every day they pick one hyperlink each and let them compete for our vote. Who brought the best one?
The most important rule: the links have to be related to the letter of the day (which is illustrated by another artist each time). The battle lasts 26 rounds, after that the winner will be announced — and he'll decide the loser's faith, as Murilo and Zeh state in their rules. A fun project that has some real treasures to offer. (cm)
6. Across The Universe: Stunning Wallpapers For Your Desktop
Space agencies like NASA and ESA are capturing some wonderful images of the awe-inspiring beauty of space and the objects in it. From pictures of the birth of galaxies to the surfaces of alien worlds and our intrepid robotic tools exploring them, Psiu Puxa is releasing photographs as wallpapers for your devices.
You can view the Martian dunes traversed by NASA's Curiosity rover, gaze into deep space at the eye of the Helix Nebula, or wonder at the shredded clouds and flame-like plumes of the magnificent starburst galaxy, Messier 82 – all on your desktop, tablet or phone. Updated weekly, Psiu Puxa is a fabulous photographic resource for anyone inspired by outer space! (og)
Advertisement
7. When Music Meets… Emojis!
What do the Rolling Stones, the Village People and Bob Marley and the Wailers have in common? Well, not too much to say the least. Except perhaps for one thing; they are all part of a very special hall of fame: Bruno Leo Ribeiro's project Music Emojis.
For Music Emojis, Bruno takes the signature, flat emoji guy that we all know from our phones and transforms him into a famous musician. A strand of hair here, some wrinkles there, add a cigarette and our nameless smartphone buddy magically becomes Keith Richards. What sounds so simple is quite an art and requires reduction to the most essential — and that isn't always as easy, as we all know. An impressive — and fun! — project. (cm)
8. Heroes And Villains As We Did Not Know Them
Every hero has an enemy. What would Batman be without Joker, Captain America without Red Skull or Wonderwoman without Cheetah? For his project Really Super Mario vs. Really Super Wario designer Rob Lafratta revives the old heroes and villains topic — with an unforeseen twist.
The heroes and villains in Rob's project seem familiar yet they look so different from the ones we remember from our childhood comic reading sessions. For a good reason: Batman, Catwoman, their capes and suits, it's all there, but this time it's not them who slip into the legendary superpower gear, but… Super Mario and Super Wario! And, well, we have to admit: it makes Mario and Wario look really good. Great fun — not only for comic lovers.(cm)
Advertisement
9. Keep Calm And Attend A Smashing Workshop!
With so many techniques, tools, libraries, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That's exactly what our front-end and RWD workshops are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.
Today's Online Workshop
Full-Day Workshops at SmashingConf Barcelona
Upcoming Smashing Workshops and Meet-Ups:
- SmashingConf Freiburg, Germany, Sep 14–16.
- MakingWeb Talk and RWD Workshop in Oslo, Norway, Sep 22–23.
- Reaktor Breakpoint Talk in Helsinki, Finland, Sep 24–25.
- MobiConf Talk and RWD Workshop in Krakow, Poland, Oct 2.
- UXYerevan Talk and RWD Workshop in Yerevan, Armenia, Oct 11.
- SmashingConf Barcelona, Spain, Oct 20–21.
- RWD Workshop in Tokyo, Japan, Oct 24.
- Web Directions Talk and RWD Workshop in Sydney, Australia, Oct 28.
- SmashingConf San Francisco 2016, US, Apr 5–6.
But what about in-house training instead? We can improve your eCommerce checkout and conversion rates right on spot — or performance, accessibility or UX. Feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you're facing and would like to solve. Don't worry about the cost — we'll find a fair price for sure. Get in touch — it's that easy! (vf)
10. Smashing Highlights
-
Freebie: Boldons Icon Set (45 Icons, PNG, AI) How often do you find yourself searching for lovely, friendly, well-designed icons that would fit well into a rather informal design atmosphere? Well, unless you tend to have only corporate clients, you could definitely use the icon set that we are releasing today.
-
Creating A Client-Side Shopping Cart Session storage is a new feature introduced by the W3C's "Web Storage" specification. It's supported in Internet Explorer 8+, Firefox, Chrome, Safari and Opera Desktop (for a complete list, please consult "Can I Use"). In this series of articles, we'll cover in depth a practical implementation of session storage by creating a complete e-commerce shopping cart with the sessionStorage object and jQuery.
-
Unveiling Photoshop Masks Design is a fluid and shifting process in which layers are constantly modified and tweaked. As complexity builds, so does the need for preserving data in a flexible way. Learning non-destructive editing techniques helps you produce documents that bend along with your creativity. Photoshop Masks are the cornerstone of this process.
11. New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
-
Product Designer at ChefSteps (Seattle, WA)
"ChefSteps is looking for product designers with end-to-end experience designing products and systems that have the potential to invent culture."
-
Mobile UX Designer at Bloomberg (New York, NY)
"Bloomberg is looking for a Senior Mobile User Experience Designer to define the mobile context for our extensive professional offerings. This role will tackle all aspects of the design process from research to prototyping and presenting to internal clients. In addition, this individual will help lead small project teams and guide varied product areas across mobile platforms."
-
UX Designer at Investopedia (New York, NY)
"You live in the user's head and champion for user-centered design. You are a master storyteller. You have the ability to be both a visionary and hands-on as needed. You have the ability to inspire others and mentor junior designers. You care about making great product and have a deep, insatiable desire to bring Investopedia into the future."
12. Recent Articles On Smashing Magazine
