This newsletter issue was sent out to 198,064 newsletter subscribers on Tuesday, September 20th 2016. If you are not subscribed yet, feel free to subscribe to our email newsletter anytime.
Have you ever built a responsive HTML email? Chances are likely that you have. But let’s be honest: Nobody really enjoys crafting those nasty table-based layouts, even more so because they have to behave responsively. Well, we have to build them nevertheless. It’s probably the most hostile environment to code for: JavaScript support is non-existent, CSS support is limited, images are (often) not displayed and media queries support is often an adventure of its own.
Did you know that you can build entire eCommerce checkouts in an email (without JavaScript), and with some truly dirty CSS tricks? Even though media queries support is limited, we can still use the Fab Four technique by Rémi Parmentier to make it work. Also, just last week, Gmail announced its upcoming support for media queries in Gmail and Inbox, which will be rolled out later this month. It’s not quite clear if the support will come to Gmail app on Android as well though. And there are some workarounds for the Gmail app as well. So, if you have to build a responsive HTML email, take a look at Responsive Email Patterns and Responsive Email Resources — they’ll have you covered (well, in most situations)!
If you’re not that much into responsive emails but rather want to know more about shiny, new front-end techniques, UX strategies and design patterns, we have SmashingConf Barcelona 2016 coming up on October 25–26, so you may want to join us there as well. ;-) We’d love to welcome you in sunny Barcelona!
Happy emailing (whether it’s responsive or not-so-responsive)! – Vitaly (@smashingmag)
Table of Contents
- Think Big: Designing For Television
- A Podcast About Being A Pro
- Measuring Web App Performance
- Get Paid When Your Flight Is Delayed
- Animating SVG Letters
- What’s In A Sound?
- A Visual Listening Experience
- Upcoming Smashing Workshops
- New On Smashing Job Board
- Smashing Highlights (From Our Archives)
- Recent Articles On Smashing Magazine
[](#)1. Think Big: Designing For Television
Have you ever designed a user interface tailored to television? Well, it’s still a relatively new field and a challenging one, too. Just think of the given circumstances that are different from anything we are used to from web design: The average distance between the user and the screen is 10 feet with television, the input method usually limited to a simple remote control. It’s things like these that require us to fundamentally rethink what works in a user interface and what doesn’t. But where to begin?
In her article “Designing For Television”, Molly Lafferty shares practical tips for prototyping the user interface for TV screens. You’ll get behind the basics of prototyping navigation behavior using a game controller, the Gamepad API and some basic HTML, CSS and JavaScript, as well as learn how to use animation to create a natural and responsive interface. A very important takeaway: Even though the screen is large, less is more. What looks great on a phone or laptop, can be overwhelming and distracting on a TV. A good read. (cm)
[](#)2. A Podcast About Being A Pro
How about a new podcast to add to your playlist? We recommend Workmode. Produced by André Valle, Max Kaplun and Rebecca West, Workmode went live in August this year and currently has six episodes in its archive. The connection between all of them: leading creatives talk about how they get their work done.
In the first episode, Tobias van Schneider talks about staying productive in the age of distraction, in another one Patti Schmidt discusses the challenges of pushing creative boundaries, and Mikal Cho explains how attention to ‘detail’ in design could be better translated as attention to ‘people’. Good stuff. Each episode is between 20 and 30 minutes long — perfect for a coffee break. (cm)
[](#)3. Measuring Web App Performance
How fast does your web app load? How long did a JSON file take to execute? When did the first paint take place? To improve performance, you have to track it first. A handy tool to ease the job, now comes from Eric Bidelman: appmetrics.js. With 1.5KB gzipped, the library may be small, but, well, it’s mighty indeed.
Built as a small wrapper around the User Timing API, appmetrics.js does not only track the performance of your web app, it also reports the metrics to Google Analytics if you want and integrates with DevTools, so you have all the measurements at one glance in the timeline. The library works with any browser that supports performance.now(), which means all modern versions of Chrome and Firefox, as well as Safari 9.2+, Edge, IE 10, Android Browser 4.4, and UC Browser. Sweet! (cm)
[](#)4. Get Paid When Your Flight Is Delayed
Flight delays happen, but this doesn’t mean you have to accept them. How? Well, if you’re flying in and out of the US, you’re eligible for compensation in case your flight gets delayed or is overbooked. The same applies when flying to and from Europe; flights that are canceled and delayed due to reasons the airline could control can be compensated for. But let’s be honest: Who likes to do the paperwork with the airline when they don’t even know if they’ll be successful with their claim?
AirHelp wants to change that by acting as the middleman between you and the airline, trying to get you the compensation that you’re due to. All you need to do is is send AirHelp your flight details via their website or app and they’ll take care of the rest (even of a lawsuit if necessary). Once the claim is successful, the money is transferred to your bank account, minus a 25% fee. The good thing: If you don’t get paid, AirHelp won’t either. By the way, did you know that you might be eligible for compensation for flights you took in the last three years? (cm)
[](#)5. Animating SVG Letters
Do you have a sweet spot for lettering? Hah, thought so! Manoela Ilic’s fancy SVG letter animation experiment is just for you. Inspired by a similar animation done by Jake Bartlett, Manoela used anime.js to animate the strokes of SVG letters and create a fun and playful effect. And this is not even as hard as it sounds.
Each letter is made up of several layers; in order to create the desired effect, every stroke gets animated with a slight delay. The magic ingredient which caters for smooth transitions and ensures that the lower layers disappear without leaving any jagged edges is an opacity animation of the lower layers. If you want to tinker with the concept yourself, be sure to check out the write-up over on Codrops. In it, you’ll find the markup structure as well as the styles for the SVG and the paths. Have fun! (cm)
[](#)6. What’s In A Sound?
Some coding experiments are just too wicked to believe. Suz Hinton who is known for showing off her cool hacks at conferences now leaves us in awe with what she does with the Web Audio API. Based on the question “what does a sound look like?”, she paints visual art with sound. In fact, what you see in the image below is the sound of a rooster crowing. No kidding.
The idea behind the experiment is to use the Web Audio API to harvest audio data from a WAVE file. The data is essentially a set of raw numbers which Suz then transforms into something visual by mapping out the individual data pieces to certain colors. Each value is represented by one colored pixel — together they create a unique pattern. The same also works in the opposite direction: Suz feeds the pixel data back into the Web Audio API to test if it sounds like the original. Impressive! If you want to play around with the idea, you can fork it on Codepen, or dive into Suz’s comprehensive write-up of the experiment. (cm)
[](#)7. A Visual Listening Experience
Take 25 music tracks, add some WebGL magic, and you have the basis for the Adult Swim Singles 2016 project. Each week for 25 weeks, Adult Swim brings you a new, free music track to listen to. So far so good. But what makes the project even more special are the interactive 3D WebGL visuals accompanying each track.
Brought to life by the creative minds at digital production agency Active Theory, each animation is made up of colorful, organic shapes, scraps, bits and pieces that float around and assemble to form small works of art. Eye (and ear) candy! (cm)
[](#)8. Upcoming Smashing Workshops
With so many techniques, tools, style guides, 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 classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.
Workshops at SmashingConf Barcelona
- Mastering SVG with Sara Soueidan (Oct. 24th)
- RWD Workflow with Stephen Hay (Oct. 24th)
- UX Patterns with Vitaly Friedman (Oct. 24th)
- Modular CSS with Jonathan Snook (Oct. 27th)
- Checkout Optimization with Christian Holst (Oct. 27th)
- RWD Techniques with Vitaly Friedman (Oct. 27th)
Or, if you’d like to run an in-house workshop at your office, 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 costs — we’ll find a fair price for sure. Get in touch — it’s that easy!
[](#)9. New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
- Senior UX Designer at Virtru (Washington, D.C.) “We believe that everyone has the right to private and secure communication. Although encryption tools have existed for some time and are freely available, poor user experience makes them a non-option for most people. Therefore, to act on our belief, a great user experience is at the forefront of Virtru’s mission. This is where you, as a Senior UX Designer, come in.”
- Freelance Front-End Developer at Fancy Hands (New York or Remote) “Based in NYC, Fancy Hands pioneered the concept of on-demand virtual assistants for individual consumers and small businesses, and we have now grown to be an industry leader. We connect busy people with professional US based assistants who will quickly and thoroughly complete everything from the most mundane to the most time consuming tasks.”
- User Experience Designer at The American Speech-Language-Hearing Association (Rockville, Maryland) “The User Experience Designer will help support ASHA’s mission and vision by ensuring that its digital products are developed from a user-centric design perspective. The individual in this position will work collaboratively with a broad range of ASHA staff and consultants to envision and design user experiences that meet the needs of ASHA members and the public.”
[](#)10. Smashing Highlights (From Our Archives)
- Lean Mobile UX Lessons To Keep Your App From Sinking Like The Vasa Ship For many months, your entire team has worked their butts off to create an awesome mobile app. Finally, with your team exhausted and excited, it’s showtime! But then, your dream app turns into the ultimate nightmare: Eager customers download the app, use it once and never return. All the sacrifice and months of hard work — wasted. What went wrong?
- Making Modal Windows Better For Everyone To you, modal windows might be a blessing of additional screen real estate, providing a way to deliver contextual information, notifications and other actions relevant to the current screen. On the other hand, modals might feel like a hack that you’ve been forced to commit in order to cram extra content on the screen. These are the extreme ends of the spectrum, and users are caught in the middle. Depending on how a user browses the Internet, modal windows can be downright confusing.
- Land Your Next Web Development Job: The Interview Process During his career as a software developer and manager, Dean Hume has been involved in many interviews. Whether the interviewer or interviewee, he has always paid special attention to the interview process.
[](#)11. Recent Articles On Smashing Magazine
Design Articles
- The Thumb Zone: Designing For Mobile Users
- Driving App Engagement With Personalization Techniques
- Boosting Your Rates With Psychologically Validated Principles
- Reducing Cognitive Overload For A Better User Experience
- Redesigning SGS’ Seven-Level Navigation System: A Case Study