August 23, 2016 Smashing Newsletter: Issue #164

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)

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.

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.

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.

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.

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.

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).

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)

Strategy, Inspiration, Misc.

• Five Rules Of App Localization In China: Money, Dating And App Store
• Web Development Reading List #150: Less Code, GitHub’s Security, And The Morals Of Science
• Web Development Reading List #149: CSS Dynamic Colors, Refactoring CSS, And CSP Hashing

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

Smashing Newsletter

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.