Dear Friends,
Nothing is perfect on the web. We can't make sure that our websites always work as intended, but we can try our best to design resilient and flexible websites that aren't that easy to break — both in terms of interface design and security. Yet neither resilience nor flexibility are usually reflected in our deliverables and mock-ups.
A totally unrelated plug: well, maybe SmashingConf NYC in June isn't going to be perfect, but it will be nothing short of smashing.
In practice, mock-ups usually represent a perfect experience in a perfect context with perfect data which doesn't really exist. A good example for it are "perfect" usernames which are perfectly short, fit on a single line on mobile and wrap nicely, or perfect photography that allows for perfectly legible text overlays. It's not realistic. We need to work with dynamic content in our prototypes, with both average and extremes being represented.
Now, of course usually we don't have the content when we're designing, but it's enough to have the content structure (video) to design an experience around it. It's extremely helpful to know whether you should be expecting regular text paragraphs or many tabbed widgets or quite a few complex tables or a complex magazine layout with pullquotes and indented ads. This knowledge alone helps guide design decisions.
In all of those cases, a good strategy would be to use Forcefeed.js to populate our content areas with random content — sometimes too lengthy, sometimes too short, often with accent characters and perhaps even emojis. It's a great way to build experiences that are prepared for everything that comes their way — and they reflect reality much better than perfect mock-ups with perfect heights and perfect names and email addresses ever would.
P.S.: Oh, talking about perfect things: we just launched SmashingConf NYC tickets sales. Well, it's definitely not going to be perfect, but it will be nothing short of smashing. Just look at the speakers line-up — now try to beat that!
Stay resilient,
Vitaly (@smashingmag)
Table of Contents
1. The State Of Email 2016
Email is constantly evolving. In fact, mobile opens now represent 55% of all email opens, while desktop decreased by 17% in the last year. To help you keep your opening rates high and your email copy effective, Litmus released the 2016 edition of its annual State Of Email Report. The report dives into major email innovations and provides insights and practical tips for email professionals who want to craft more effective emails.
Apart from data on email client market share, the Litmus report covers the peculiarities of new and updated email applications and takes a closer look at how your emails display in them and how you can optimize for them — just think of Apple Watch, Outlook 2016, Yahoo Mail which has gotten support for media queries in 2015, or the new peek and pop feature in iOS 9 which could directly affect your engagement numbers. The report is 55 pages strong — but it requires your email to be downloaded (which is totally worth it!). (cm)
2. Improving Multi-Level Mobile Navigation With The Curtain Menu
When it comes to mobile navigation, there are several solutions, Joey Rabbit, digital designer at PlayStation, however, wasn't entirely satisfied with them. So to optimize the navigation for mobile devices on PlayStation.com, he came up with a quite obscure technique: the Curtain Menu. Its advantage over existing solutions: it retains visibility of all categories even once a selection is made and it allows the user to switch between categories without an unnecessary tap.
To make the most of the limited screen real estate, the Curtain Menu stacks links on top of another instead of side by side. When the user opens the menu, the left curtain slides in to display the primary set of links, as soon as the user has made a selection, the right curtain with the secondary links slides into view. With all top-level categories remaining visible all the time, there is no need to collapse the second level or go back in order to see the primary level as other solutions would require. Clever! (cm)
3. Free Food... Icons!
It's free icecream time — well, almost! Everybody loves good quality goodies, and Food icons is a set 20 beautiful free food-related icons, from icecream to milk to burgers to croissants to (obviously) pizza.
The icons are available in Sketch and SVG formats and are available for free commerical and personal use. You need more free icons? What about Science Icons or The Months Of The Year Icon Set? They could come in handy, too. Happy downloading! (vf)
Advertisement
4. So What's Your Service Workers Strategy?
The adoption of web technologies is running at a remarkably pace. Service Workers, not even specified last year, have now been available in Chrome for a while, and have just landed in Firefox last week, with support in Edge coming up. What does it mean for us? We can use it today to improve performance and user experience for a vast majority of our website visitors.
Now, Service Worker — basically a JavaScript-based proxy engine on user's machine — requires HTTPS, and works only with asynchronous technologies (e.g. not with localStorage which is synchronous). We can use it to progressively enhance experiences both offline and online.
At Smashing Magazine, we're considering having a "fallback" offline page with links to cached "books" and "tickets" pages as well as the latest article — which users can then see offline. Also, since HTTP cache is unreliable, we want to explicitly cache logo, sprite, CSS, JavaScript, fonts and images. Tools and snippets, you ask? You can use Service Workers Cookbook, a collection of working, practical examples of using service workers in modern web apps. Also, useful libraries and articles are available, too. Ah, and to inspect service workers, we will be able to use DevTools storage inspector in Firefox 47 which displays service worker cache contents. (vf)
5. Free Tools For Designers From Bjango
Everybody loves a good resource to make the workflow more efficient and productive. To stock up your toolkit, Bjango, the makers of popular apps like iStat Menu and Skala, provides some practical helpers for designers and developers.
App designers might especially want to take a look at Bjango's app icon templates. The templates are available for Photoshop, Illustrator, Sketch and Affinity Designer and cover all major mobile OSes, Apple TV and Apple Watch. To speed up your process, they are set to automate the export of final production assets. Another collection is Bjango Actions — it includes Photoshop actions and scripts, Hazel rules and even OS X workflows. Good stuff. All resources are free and open-source. (cm)
6. Teletext Time Travel
Do you remember the times when you switched to the teletext for the weather forecast or the sports results? The loud colors on the black background, pixel art graphics, and flashing text? (Well, you might not, and it's perfectly fine!) The Teletext Museum is the perfect place to revive these memories or discover them (if you live outside Europe, for example).
If we didn't have the web, most of us would still be teletext designers and developers since essentially each teletext page is a box with content in it. Sounds familiar? Well, the gallery with images from teletext services from around the world illustrates how the interface design has evolved over time and a timeline gives you more information on what exactly changed and how.
If you ever wanted to take on the role of a teletext designer, well, you can do that, too. Jason Robertson who recovers old teletext data from VHS cassettes in a complicated and time-consuming process provides a plethora of teletext pages from the 80's and 90's. Some of them can be edited right in the browser. The process needs some getting used to, but it's definitely a fun trip back in time. (cm)
Advertisement
7. Best CDN Comparison Table
Network latency is tough to beat. One way to provide a faster response and download time is to make use of a CDN, a network of distributed servers physically located closer to users. This way you reduce the load on the origin, better handle traffic spikes and can scale up or down quickly.
But which CDN service to choose? What options suit your needs best? Well, that's what CDN Comparison table is all about. It's a quick reference with many features compared in one place — from bandwidth pricing, points of presence, video on demand support and security to HTTP/2 support. You are running a CDN service and aren't featured? Well, feel free to contribute to the list then! (vf)
8. Visualizing Painter's Lives
When we hear names like Picasso, Dalí, or Miró, we immediately remember some of their paintings. But what do we actually know about the artists behind the masterpieces? About their lives and love, the events that shaped them and their works? To visualize painter's lives, information designer Giorgia Lupi and her team at Accurat teamed up with illustrator Michaela Buttignol. The result of the collaboration is a stunning series of minimalist infographics that boil the biographies of ten famous painters down to their cornerstones.
The visualizations depict key moments — births, deaths, love affairs, marriages, children, travels — but also interesting tidbits such as astrological sign, left/right handedness as well as connections and influences. By picking up the characteristic colors and other stylistic preferences of each artist, the designs also reflect the painters' styles. A fun way to dive deeper into the history of art. If you'd like to learn more about creating engaging infographics like this one, you should also check out Giorgia Lupi's article on the aesthetics of data narratives. (cm)
9. Optimizing SVGs
When it comes to SVGs, every extra node, path, decimal point and piece of meta information adds to the total vector file size. For some SVG files, this might seem like a negligible increase in file size, but as soon as you use multiple SVGs on your site, things start adding up. If you care about web performance — and we all should! — optimizing your SVGs is a must.
To help you learn how to optimize SVGs and clean up the bloated output your graphics editor delivers, Andres Larsen published a three-part article series on Medium. His tips are very hands-on and will help you shave off file size without any visible changes in appearance. And if that's not enough for you yet, Sara Soueidan has got you covered, too. Her tips for optimizing SVG delivery for the web guide you through seven steps you can follow to make sure that the negative impact of your SVG files on performance stays under control. (cm)
Advertisement
10. Upcoming Smashing Workshops
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.
Workshops at SmashingConf Oxford (Mar 14/17)
Workshops at SmashingConf San Francisco (Apr 4/7)
Workshops at SmashingConf NYC (Jun 13/16)
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!
11. New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
- UX/UI Developer at Massachusetts Institute of Technology (Cambridge, MA)
"We're looking for a great UX/UI Developer to join us to design and build applications, tools, and prototypes to leverage MIT's world-renowned educational experience to design the future of learning. Ideally you'll bridge front-end development and UX and UI design." - Sr. Software Engineer-Front End at Food Network (New York, NY)
"Ever thought of combining your passion of front end engineering with your love of great lifestyle brands such as Food Network, Cooking Channel and Food.com? Now's your chance to work with such award winning websites that attract almost 50 million unique visitors a month in a Sr. Software Engineer-Front End role in our New York City office-headquarters of the Food Network." - User Interface Designer (Remote or On-Site) at iFit (Logan, Utah)
"The world leader in fitness technology, iFit® is pioneering the way people interact with fitness equipment and technology. Our platform is built into millions of fitness machines, wearables and streaming on-demand workout videos. So basically, if you like fitness, building stellar designs, and working with a team of fun, talented people, then this is the place for you."
12. Smashing Highlights (From Our Archives)
- Useful Learning Resources For Web Designers
Fortunately, learning is not limited to only a small minority of people anymore; it is not even limited to visiting a school or a university. The Internet makes it possible for us to distribute knowledge at a small price, and is full of resources to expand everyone's knowledge on an enormous variety of topics. - An Exploration Of Carousel Usage On Mobile E-Commerce Websites
Does this title make you skeptical? I would have been too before I saw the research that led to this article. Ask anyone and they'll tell you that carousels are an anti-pattern. Don't use them. But maybe it's not so cut and dry. Using real data, this article aims for a better understanding of the current argument against carousels and whether they really deserve the reputation they've gained. - If You Love Your Brand, Set It Free
The practice of branding is undergoing a deep transformation — a change brought about by our kaleidoscopic postmodern culture, the development of communication technology and rapid globalization.
