About The Author

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol’ web with the latest tips and tricks for … More about The Smashing…

Smashing Newsletter: Issue #164

Quick Summary

Table of Contents

This newsletter issue was sent out to 197,267 newsletter subscribers on Tuesday, August 23rd 2016. If you are not subscribed yet, feel free to subscribe to our email newsletter anytime.

Pull out the balloons and lighten up the candles! It’s almost showtime! In preparations for our upcoming 10th birthday, we’ve been working tirelessly to wrap up a few annoyingly mysterious surprises on time before mid-September. We’ve also scheduled a couple of usability tests just to make sure that we aren’t totally off — and get some feedback from you.

So if you’d like to peek behind the scenes and have 15 mins to share your thoughts, please sign up for the usability mailing list and we’ll send you a little something this week. However, please do not share the screenshots and prototypes publicly (well, unless you really want to, of course!)

Smashing Magazine's tenth birthday is coming up!While we are busy designing, debugging and testing in weird browsers, please take a cup of coffee and read through the quick tips we've prepared for you. There is even one on debugging and testing quirks in weird browsers! Not meta enough? Well, it was worth trying! :-) Happy reading! Stay smashing! — Vitaly (@smashingmag)

Table of Contents

1. The UX Of Names

You know how it feels when your name always gets mispronounced? Atif Azam certainly does. Growing up in Central New Jersey, he heard a variety of pronunciations for “Atif” already when he was in kindergarten, and also today, when he meets someone who knows him through his work, there’s always the friction of having to explain how to say his name. So what does a developer do? Well, he adds a sound bit to his website next to his name and open-sources the component for everyone who shares his struggle.
325
Getting the sound to work is simple: All you have to do is download the component, include it on your website, and wrap your name in a span tag. This allows the JavaScript method to store your name in a string and send the request to the Nameshouts API which returns the audio. If your name doesn’t exist in the API, you can also record your own audio file. Genius! (cm)

2. Lean And Friendly HTML Form Controls

How about some friendly and accessible HTML form controls? Some that get by without any JavaScript and need just a bit of CSS magic to work? Mark Otto shares valuable tips on building them — checkboxes and radio buttons, <select> menus, a file browser, and progress bars.
Lean And Friendly HTML Form Controls
Obviously Mark’s checkboxes and radios, for example, are wrapped in a <label> to increase the hit area for checking the control. Another benefit of this solution: It triggers the state of the <input> without requiring JavaScript. Also, in checked states, SVG icons give best control for styling and positioning across browsers and devices. And to make a <select> menu play nicely with assistive technologies, Mark uses a <div> as a wrapper for the <select> instead of a <label> wrapper to prevent unintented behavior. Useful! (cm)

3. Taking The Pain Out Of Large Data Tables

A well-designed data table makes complex data easy to scan and compare. If it’s done wrong, however, it can make the information presented incomprehensible. To prevent you from common pitfalls when designing with data, Matthew Ström compiled tips and tricks to get things right.
Taking The Pain Out Of Large Data Tables
The main thing to keep in mind when presenting large sets of data is typography. Tabular lining figures which are all identically sized line up properly in a column and, thus, make the table easier to scan and less error-prone. Also, pay attention to alignment: Matthew suggests to keep numerical data right-aligned and text left-aligned. Headers could be aligned with the data in the respective column, whereas center alignment probably should be avoided at all cost as it causes the lines to become ragged which makes the table more difficult to read. A properly-aligned table even gets by without any dividing rules. To keep the table as lean as possible, Matthew also suggests to include units — for measurements, for example — only with the first data point in each column and to stick to a monochromatic color scheme. This might sound a bit boring, but it will make your table clearer and, thus, more painless to study. (cm)

4. Takeaways From Responsive Email Design

Responsive emails. Getting them right is a challenge, yet one that is worth taking, especially when you take into account that over 50% of all emails are opened on mobile today — and the number is rising. To get you fit for coping with lacking media query support, persistent inline CSS styles, Retina displays, and the quirks of wearables, Lee Munroe, former Design Lead at the email service Mailgun by Rackspace, collected takeaways, stats, and resources all about designing for mobile email clients.
Takeaways From Responsive Email Design
To cater for best results across devices and clients, Lee uses a hybrid coding approach for his emails, by the way. Instead of solely relying on media queries and breakpoints that start to get complicated as soon as you introduce a grid and columns (and that aren’t supported by all email clients anyway), he combines the best of two worlds — a bit of fluid, a bit of responsive — and throws some hacks for Outlook support into the mix. Definitely a technique that is worth taking a closer look at. (cm)

5. Handy Tools For Travellers

Buying tickets, packing luggage, reporting expenses to the boss — some parts of traveling just aren’t as much fun as others. To make the tedious tasks more efficient, so there’s more time for the pleasant things, here area some tools that are bound to come in handy on your next trip, be it a business trip or a family journey. One of them is Hopper. The mobile app helps you find the right point of time to buy flight tickets. Based on a historical archive of flight prices, Hopper predicts when your flight will be cheapest (with a 95% accuracy as its makers claim). You can watch a flight and Hopper will send you a notification as soon as the price drops. To speed up the booking process, passenger and payment information are already stored in the app, so booking itself takes just a few taps.
Handy Tools For Travellers
To prevent you from arriving at the airport with your passport still lying in a drawer at home, PackPoint Packaging helps you organize what you need to pack. It generates a packing list for you based on the length of the trip, the weather and the activities you have planned. Finally, Flio helps you get around at the airport. It provides you with the information about the Wi-Fi, shows what lounges you can access and even has deals for food and shopping. And once boarding time has come, it shows you the quickest way to the gate. Safe travels! Well, wait, there’s one more thing. If you’re going on a business trip and need to report your expenses, Expensify makes keeping track of them more convenient. It lets you scan your receipts and auto-submits them for approval. As soon as the reports are approved (Expensify uses your company’s policies to determine which ones are automatically approved, a cup of coffee for example, and which ones need a manager’s review), a reimbursement system delivers the money to your bank account. Alright, now enjoy your trip! (cm)

6. Dealing With Weird Browsers

Let’s talk about browsers. Weird browsers. Think of Smart TVs, game consoles, VR headsets, eBook readers. Niels Leenheer recently gave a talk about the problems you will encounter if you want to make your site work on these devices (slides/video of the talk).
Dealing With Weird Browsers
Take the current generation of Smart TVs, for example. Their browsers have significantly improved compared to the generation before them, yet there are difficulties which make it hard to optimize for them. The TV screen, for example, overscans and crops images which leads to a blurry output. Navigation and input are difficult, too. The only reliable way to optimize a website for television is to make two different websites or give the user the ability to switch to a couch mode, argues Niels. Or take eBook readers. Green and red look exactly the same on gray e-ink screens. If you try to identify their browsers, however, to serve them a custom CSS, well, it won’t work, as the browser itself isn’t declared to be monochromatic. Predicting into which direction these kinds of browsers will develop in the future is hard if not impossible. But they remind us of something that we should all keep in mind, as Niels concludes his talk: The web is more than just Chrome, Firefox, Safari, Edge and the likes, and a lot of techniques that make the web more usable in weird browsers are also techniques that improve the web for everyone. So perhaps let’s take a step back every once in a while to look at the web from a different perspective? (cm)

7. Upcoming Smashing Workshops

With so many techniques, tools, pattern 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 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 Freiburg

SmashingConf Barcelona

Workshops at SmashingConf Barcelona

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!

8. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board:
  • Web Developer at Monmouth University (West Long Branch, NJ) “Monmouth University seeks a Web Developer to join a dynamic marketing and communications team that drives overall communication strategy and brand development for the University.”
  • Senior Engineer at Morsum (Argentina, preference Buenos Aires) “Join our fast growing startup team in Argentina. Enjoy regular travel to New York and other USA offices. Fantastic benefits and attractive salary and performance bonus. Remote working.”
  • Product Designer at VONQ (Amsterdam or Rotterdam, Netherlands) “Are you an experienced UX Designer with entrepreneurial mindset that loves simplicity in building successful digital products? […] We want you to be part of the core product team helping us shape our future products.”

9. Smashing Highlights (From Our Archives)


  • Laying Out A Flexible Future For Web Design With Flexbox CSS floats and clears define web layout today. Based on principles derived from centuries of print design, they’ve worked well enough — even if, strictly speaking, floats weren’t meant for that purpose. Neither were tables, but that didn’t stop us in the 1990s. Nevertheless, the future of web layout is bright, thanks to flexbox.
  • Tips For Mastering A Programming Language Using Spaced Repetition Since first hearing of spaced repetition a few years back, I’ve used it for a wide range of things, from learning people’s names to memorizing poetry to increasing my retention of books.
  • A Better 404 Page A lot of funny 404 pages have been shared recently: carefully crafted memes, funny GIFs, even the odd interactive game. But if the 404 doesn’t help your visitors, then what’s the point?

10. Recent Articles On Smashing Magazine


Design Articles

Coding Articles

Strategy, Inspiration, Misc.