This newsletter issue was sent out to 226,812 recipients newsletter subscribers on Tuesday, September 19th 2017.
How would you design and build your current project if you couldn’t use any rectangles or circles? Think about it for a second. With conveniently predictable layouts floating around the web, perhaps we could think about one little detail that would become a unique signature of your project. Would you use a lot of whitespace, or typography, or many visuals, maybe audio with conversational UI, or perhaps a quirky and non-traditional layout? Glad you asked! That’s exactly what we want to explore, too.
That’s why we’ve teamed up with Mozilla to set up a CSS Grid Challenge: design an unusual, interesting layout with CSS Grid, and get a roundtrip to Barcelona with accommodation and a SmashingConf ticket included, plus a signed edition of Alla’s Design Systems book. We accept entries until September 30th.
The times are busy, but exciting stuff is coming up. While working on the relaunch of Smashing Magazine, we’re touring through Singapore, Malaysia, Vietnam and Hong Kong to meet local communities, with a local event in each city. We’d love to see you, too! Happen to be in the area? Get in touch via Twitter.
Table of Contents
- The All-New Guide To CSS Support 2017 Is Here
- Four Weeks Left Until SmashingConf Barcelona!
- Detecting Unused Code With Devtools
- Uploading Directories At Once With webkitdirectory
- Make Your A/B Tests More Meaningful
- A Curated Collection Of Newsletters
- The Largest Dictionary Of Color Names
- Rethinking UI Design For TV
- Upcoming Smashing Conferences
- New On Smashing Job Board
- Popular Articles On Smashing
- Most Recent Articles On Smashing
(#)1. The All-New Guide To CSS Support 2017 Is Here
If you’ve ever coded HTML emails, chances are high that you’ve consulted Compaign Monitor’s “Guide To CSS Support In Email” before. However, in the four years since the guide was last updated completely, a lot has changed. New email clients became popular and already popular clients like Gmail have undergone significant improvements. To reflect these changes, Campaign Monitor now released a fully updated 2017 edition of their popular CSS support guide.
The new edition covers a total of 278 CSS features (that’s more than twice as many as its predecessor), including cutting-edge layout techniques like CSS Grid and Flexbox, CSS animations and transitions, and advanced typography properties. All features were tested in 35 email clients, including Android and iOS apps of Gmail, Yahoo! Mail and Outlook, and, to capture the differences in rendering, IMAP and Gmail addresses in the Gmail Android app were even tested separately. Add the guide to your bookmark and you’re equipped for your next email coding adventures. (cm)
(#)2. Four Weeks Left Until SmashingConf Barcelona!
A design wonder as a venue, the sunny Mediterranean Sea nearby, and two days jam-packed with friendly conversations, learning and new ideas — that’s SmashingConf Barcelona. And you know what? It’s just one month left until the one-of-a-kind Palau de la Musica Catalana, which has been our Barcelona home for the past two years already, will open its doors for us again Oct 17–18th. Wanna join us?
With a line-up of 15 knowledgeable speakers (among them are Marcy Sutton, Brad Frost, Sarah Drasner, Chris Coyier and Monica Dinculescu — just to name a few), we’ll dedicate the two conference days to exploring real-life web design problems and techniques that you can apply to your work right away. No fuss, no theory, just things that worked in practice, and enough time for networking, of course. To the tickets →
(#)3. Detecting Unused Code With Devtools
Have you already heard of the code coverage feature in Chrome Devtools? Built into Chrome, it’s a great way to get a quick overview of how much unnecessary code you’re shipping and which files need to be optimized. Ben Edelstein did a quick demo to explore how to use the feature.
(#)4. Uploading Directories At Once With webkitdirectory
If you’ve ever tried to implement a bulletproof, good-looking drag’n’drop, you might have encountered an issue: uploading an entire folder or folders of files usually isn’t possible, and so files in each folder have to be selected manually. Unless you use
input webkitdirectory, an obscure attribute that allows users to pick a directory via a file input. Currently supported in Chrome, Firefox, Opera and Edge. Just pick a directory, and all files in that directory will be listed below, represented by their relative path — a demo by Šime Vidas shows how it works.
The upload works for directories that include sub-folders as well. One click to choose them all is enough. Important to note: the feature is non-standard, so it will not work for everybody. However, it doesn’t break anything and can be used as progressive enhancement. Ah, and if you want to design a slightly better drag’n’drop-experience, Alex Reardon has a few tips on rethinking drag’n’drop altogether. Worth reading! (vf)
(#)5. Make Your A/B Tests More Meaningful
A/B testing is a simple but convincing technique to gain insights into visitor behavior and increase conversion rates. However, when it comes to interpreting test results, things can get tricky. Does the result have enough power? And is it really a consequence of the changes you made or just a result of random chance?
To make your A/B tests more meaningful, the A/B-Test Calculator is there to help. No matter if you want to plan an A/B test or evaluate the significance of a test you already completed, the calculator will give you a better feel for how a lower confidence level, for example, will boost the power or how an increase in test size can make a small CR-difference significant. Handy! (cm)
(#)6. A Curated Collection Of Newsletters
Every two weeks we craft this little newsletter to share resources with you that are just too good to keep to ourselves. And, well, we’re in good company: Just like us, a lot of people in the web community enthusiastically curate, write and send their newsletters on a regular basis. Some of them filled with valuable tips and tricks; others with inspiration or news.
To provide a showcase for all those stellar newsletters out there, Joel Rosen collects them in a curated collection along with other outstanding roundups that are worth subscribing to. The newsletters are sorted by category, so no matter if you’re looking for something about UX, motion design, typography, business, coding, or just some fresh inspiration, there sure is something on the list that has got you covered. A big Thank You to everyone who invests their time into sharing the things they consider worth sharing! (cm)
(#)7. The Largest Dictionary Of Color Names
What comes to your mind when you hear terms like “Bright Nori”, “Paw Print” or “Waffle Cone”? If you’re thinking of colors, well, good guess! Actually, these are only three of the 14,874 unique color names in the massive color dictionary that David Aerne brought to life.
The aim of the project is to create as large a list as possible of unique color names. And, well with almost 15,000 color names featured, the undertaking definitely was successful. The names are merged from various sources and handpicked from thousands of user submissions. You can enter a hex value to find the name for it, indulge in the entire list, or, if you’re feeling creative, submit your own color name. Color inspiration at its finest. (cm)
(#)8. Rethinking UI Design For TV
The way we watch TV is changing. According to a study by Nielsen, over 92% of viewing among US adults still happens on the TV screen. But: What we watch has changed. In fact, Netflix, Amazon, Hulu and the like represent 26% of global online respondents. Given these numbers, shouldn’t we start to think more about designing for the big screen?
To make us familiar with the challenges and the constraints that designing television UIs brings along, Pascal Potvin wrote a valuable introduction into the topic. Because, well, designing such “lean back” experiences, as he calls them, requires designers to take entirely new conditions into account: viewer distance, remote controls limiting interaction to four directions (up, down, left, right), limits when it comes to color rendering, flickering, and the dreaded overscan (a legacy from the predecessors of modern HDTVs), for example. A good read. (cm)
(#)9. Upcoming Smashing Conferences
We create practical, hands-on conferences highlighting techniques, strategies and design patterns used in real-life products by experienced designers and developers. No fluff, no theory: just 2 days packed with practical front-end and UX techniques. Coming up: SmashingConf Barcelona, Spain (Oct 17–18). That — and we love cats, too.
SmashingConf Barcelona, Spain (Oct 17–18)
- SmashingConf Barcelona 2017 Tickets, Oct 17–18
- Atomic Design: Process & Patterns – Brad Frost (October 16)
- Persuasive Design – Horace Dediu (October 16)
- New Front-End Adventures In Responsive Web Design – Vitaly Friedman (October 16)
- Concept, Create, And Sell! – Anton & Irene (October 19) (Sold Out)
- How To Convince Clients And Colleagues The Right Way – Paul Boag (October 19)
- Advanced SVG Animation – Sarah Drasner (October 19)
Public Workshops with Vitaly Friedman
- Vancouver, BC, Canada • Responsive Interface Design Bootcamp, Sept. 29nd, 2017
- Braga, Portugal • Smart Responsive UX Design Patterns, MirrorConf, Oct. 11, 2017
Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at email@example.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!
(#)10. New On Smashing Job Board
Here are some of the most recent job openings at Smashing Jobs:
- PHP Developer at Doghouse Agency (Remote)
“We’re looking for full time PHP developers with demonstrated PHP, CSS + HTML, jQuery and source control experience and a sound understanding of the LAMP stack.”
- Front End Dev : JS + HTML5 + CSS3 + React/Angular at Public Domain (Philadelphia, PA)
“Our office is looking for an experienced / skilled Front End web developer for a number of current and future projects.”
- Senior UX Engineer at GoDaddy (Scottsdale, AZ or Kirkland, WA)
“GoDaddy is looking for a UX-centric, front-end software engineer to join our team and help us grow our business through our online sites.”
(#)11. Popular Articles On Smashing In August
* [Meet XRespond Testing Tool: Let’s Make Building Responsive Websites Simpler](https://www.smashingmagazine.com/2017/09/xrespond-building-responsive-websites-simpler/) As web designers and developers, we keep up with all of the different screen shapes and sizes, learning to create beautiful, flexible software. Yet most of the available tools still don’t reflect the nature and diversity of the platform we’re building for: the browser. The open-source virtual device lab XRespond changes that.
- A Guide To Virtual Reality For Web Developers
Recently, there has been a proliferation of virtual reality (VR) web browsers and VR capabilities added to traditional browsers. In this article, Ada Rose Edwards will look at the state of browsers in VR and the state of VR on the web via the WebVR APIs.
- Is Success Down To The Quality Of Your Work?
One of the biggest fallacies of our industry is that good work speaks for itself. It is a self-delusional lie that those with a good reputation tell themselves to explain their success, argues Paul Boag. But how do you actually build a reputation?
(#)12. Most Recent Articles On Smashing
* [Why I Switched To Sketch For UI Design (And Never Looked Back)](https://www.smashingmagazine.com/2017/09/ideal-sketch-setup-ui-design/) The developers of Sketch have figured out exactly what interface designers have been looking for and have steadily added functionality to address those needs. Ashish Bogawat shares why he never looked back after switching to Sketch for UI design.
- Launching Your Design Career: Which Type Of Education Is Best For You?
With so many resources out there for learning design, how do you choose the perfect method that fits your life? Whether you’re a high-school student getting ready to graduate or have been working in another career for 40 years and are looking for a major change, the right education exists.
- Dwelling On The Past: The Importance Of Project Retrospectives (Part 1)
We should always look for opportunities to grow and improve. Retrospectives and reflections allow you to codify what you’ve learned from experience, to document mistakes and avoid future ones, and to increase your potential to grow in the future.