This newsletter issue was sent out to 230,055 newsletter subscribers on Tuesday, May 25th 2017.
When we talk about responsive design in the community, we usually tend to focus on screens alone. However, responsive design isn’t just about mapping an experience from one viewport to another.
During my presentation at FITC Toronto yesterday, I mentioned the possibilities for the use of the Battery Level API1 to adapt the experience in a responsive way. The API (which is quite well supported2) communicates with the device’s hardware and exposes data about the device’s charging state, accessible via
I wasn’t expecting the backlash of security, privacy and fingerprinting concerns5 about the API, referencing mischievious tactics of abusing the API6. In fact, it has been removed from WebKit7 as well as from Firefox8. From Firefox 52 onwards, the Battery Status API is only available in chrome/privileged code9. Why? The combination of battery life as a percentage and battery life in seconds offers 14m combinations10, providing a pseudo-unique identifier for each device.
There are always ways to misuse technology, unfortunately. Be it by displaying install prompts on mobile screens, or using “Like” buttons in a wrong way, slowing down users and sending data about their behaviors to Facebook or Google. It’s not a reason for promising APIs to disappear though.
Responding to the battery level meaningfully and respectfully can make a user experience better by removing barriers on their way to completing tasks on a draining battery. Perhaps the API could be modified to sandbox the impact of modified behavior and styling, like it is the case with restrictions on :visited pseudo-class in CSS11. The spec and implementations will only get better if we, as designers and developers, actually use them in our projects.
Can you see a way how your website or app could benefit from the API? Why not add it to a project or two and see if it bears any benefits? Your users just might appreciate it.
Stay charged (or not)!
Table of Contents
- The Invisible Parts Of CSS12
- Never Give Up! Never Surrender!13
- A Curated Directory Of Boilerplates14
- Checking For Interaction Feature Support15
- FAQs To Smoothen Your Job Hunt16
- Export Sketch Designs As HTML Email Templates17
- An Online Magazine Dedicated To How Teams Work18
- Making Oops Less Awkward19
- Upcoming Smashing Workshops20
- New On Smashing Job Board21
- Smashing Highlights (From Our Archives)22
- Recent Articles On Smashing Magazine23
241. The Invisible Parts Of CSS
As a developer you wrangle with CSS on a daily basis. But let’s be honest, could you describe in simple terms what
display: block actually does? Well, it could be difficult, because, most of the time, we tend to care more about correct syntax and the visual results instead of how the underlying principles work. To help us gain a better understanding of how CSS actually works, Mike Riethmuller wrote up an exhaustive CSS refresher25 that is great for beginners and experts alike.
The article sheds a light into the hidden, invisible parts of CSS, the ones that hold everything together and make things work as they should. It removes misunderstandings about the Box Model, Visual Formatting Model, Cascade, and positioning schemes, for example, so you don’t have to rely on your intuition any longer when coding CSS but have a profound knowledge that can help you write better code. (cm)
272. Never Give Up! Never Surrender!
While designing web experiences today, it seems like sorting through all the ever-changing variables requires superpowers. And yet, don’t you feel like Wonderwoman or Superman when you finally squash your bugs? We do, and we’re inviting you to share your superpowers, skills, and experiences with us at SmashingConf New York28 on June 13–14!
This 2-day-one-track-event brings together smart and friendly people willing to share their tricks and training methods, like Sara Soueidan, Jake Archibald, Yiying Lu and Eric Reiss.
We are also running 10 Smashing Workshops30 on June 12th and 15th! Learn about amazing illustrations from Yuko Shimizu, fighting UX and design battles with Joe Leech, and commanding Responsive Web Design with Vitaly Friedman, plus so many more! We sold out all workshops in the last year, so please don’t wait too long to secure your seat!31 (cm)
323. A Curated Directory Of Boilerplates
Boilerplates can always come in handy when starting a new project. But there are so many out there that you can easily loose track of what’s available and, most importantly of all, which one is the best fit for you. Boilrplate33 provides a remedy.
The curated collection neatly sorts existing boilerplates by language/technology, so that you can easily find what you’re looking for — be it a simple HTML boilerplate, or one for React, Bootstrap or Android, for example. A nice detail: The directory provides the most important information about each boilerplate such as size, creation and update date at one glance. Worth bookmarking. (cm)
354. Checking For Interaction Feature Support
Side projects give you the freedom to think outside the box and tinker with new techniques. And some might even have the potential to inspire fellow developers. Melanie Richards, developer at the Microsoft Edge browser platform, for example, reads a lot, and, thus, wanted a place where she could keep highlights from books and articles. So she whipped up a small Jekyll site36 hosted on GitHub Pages. Nothing too fancy, but with one neat little detail that’s interesting for all of us; she uses interaction feature queries to handle hover-dependent interactions37.
The index of her highlights site presents rough papercut-style illustrations of the book covers. If you hover over an illustration, it fades to a high-fidelity version of the cover. A beautiful effect, but so far still nothing groundbreaking, because, well, what if your device doesn’t have hover capabilities? That’s where the media query which detects whether the hover feature is available or not comes into play. If the hover feature query is false or unsupported, there’s still visual feedback on the element. Melanie describes in detail what this could look like. Inspiring! (cm)
395. FAQs To Smoothen Your Job Hunt
When UX designer Allison Milchling was hunting for a job at the end of last year, she needed to answer the same interview questions again and again. What does design mean to you? What’s the difference between a good and a great designer? What’s the most interesting project you worked on? That’s when she decided to collect her favorite questions and wrote down exhaustive answers for each40.
The undertaking turned out to have two positive effects: It helped Allison think about her true answers for each question and, thus, gave her more confidence during the actual interviews. For hiring managers, on the other hand, the fact that she linked to the FAQs in the cover letter also meant a better opportunity to assess Allison and her way to tackle UX design projects more thoroughly. An ingenious idea. (cm)
426. Export Sketch Designs As HTML Email Templates
Designing HTML emails can be tough. The Sketch plugin Slinky43 now attempts to change that, with a simple yet clever idea: Once installed, it lets you export your Sketch designs into ready-to-send HTML email templates with just one click.
As the plugin is still in an early phase, it isn’t free of bugs yet, of course. So there’s a few things to keep in mind when using it. Links are still a bit hacky, for example, and it’s also suggested that you use cross-platform fonts only as Slinky doesn’t check the template for custom fonts yet. If you encounter any issues, you can contribute them to the GitHub repository and help the plugin improve. Promising. (cm)
457. An Online Magazine Dedicated To How Teams Work
Keeping team members on call is a necessity in the tech business — to be prepared for those moments when something unexpected happens that needs to be fixed quickly. But how do you handle on-call efficiently? And how do big players like Google, Amazon, and Netflix do it? These are just two of the questions that the first issue of the new online magazine Increment46 wants to answer.
Increment tackles the aspects of how software engineering teams can work together more effectively to achieve their goals smarter and faster. The issues are released quarterly and focus on testing, deployment, development tools, and code review topics. A good read that also shines with unique illustrations. (cm)
488. Making Oops Less Awkward
Mistakes happen. 404 pages are the best example. But what’s crucial is how you deal with pages that aren’t found and links that end in an impasse. A friendly tone and some wit can make the situation for your users — but especially for you — a lot less awkward. Yes, things have even gone so far that a creative 404 page can help shape your brand’s identity and make you stand out from the crowd. Just take a look at the “Oops” pages49 that Andreas Storm collected from all over the web.
The showcase is full of surprising, clever, and funny ideas on how you can give an unpleasant 404 error a nice twist. Some are kept rather simple but shine with great copy, others seek inspiration in popular memes, yet others spin their visual identity further to develop little pieces of “Oops” art. Even if we try hard to prevent 404 situations, putting some love into their pages can never hurt. (cm)
519. 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 New York — June 12
- Atomic Design: Process & Patterns53 – Brad Frost
- Good Ideas Make Great Illustration54 – Yuko Shimizu
- Persuasive Design55 – Horace Dediu
- The Modern Front-End Workflow Bootcamp 56 – Umar Hansa
- Smart UX Design Patterns57 – Vitaly Friedman
Workshops at SmashingConf New York — June 15
- An Introduction To Service Design58 – Eric Reiss
- How to Design With Science Without Losing The Magic59 – Joe Leech
- Mastering SVG60 – Sara Soueidan
- New Front-End Adventures in Responsive Design61 – Vitaly Friedman
Workshops at SmashingConf Freiburg — September 10
Workshops at SmashingConf Freiburg — September 13
- Modular Design63 – Alla Kholmatova
- Modern Front-End Workflow Bootcamp64 – Umar Hansa
- Advanced CSS Layouts With Flexbox and CSS Grids65 – Rachel Andrew
Public Workshops with Vitaly Friedman
- Sydney, Melbourne, Brisbane — Australia • Smart Responsive UX Design Patterns66, Web Directions, May 4–12, 2017
- Hamburg — Germany • New Front-End Adventures in Responsive Design67, 25hours Hotel Hamburg HafenCity, July 3rd, 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!
6910. New On Smashing Job Board
- Talented Front-End Developer71 at Codigo Vision (Remote)
“We’re looking for talented front-end developers with a passion for creating pixel perfect interfaces with clean, organized code that is easy to maintain.”
- Senior Front-End Developer72 at Simantel (Peoria, IL)
“We are looking for a senior professional with strong technical and UX skills and a focus on delivering high-quality software.”
- Brand Designer73 at Honor (San Francisco, CA)
“We’re looking for an experienced designer who will help create visually stunning and consistent brand assets, and contribute to our constantly evolving brand identity.”
7411. Smashing Highlights (From Our Archives)
- How To Deliver Exceptional Client Service75
We often hear companies, including Web agencies, boast about how they provide exceptional client service. But how do they define exceptional?
- Content: A Blessing, A Bubble, A Burden76
Everyone is talking about content. Googling the phrase “content strategy” retrieves almost 50 million results — a clear indicator that interest in content is very much in the zeitgeist. But the way we talk about content is beginning to sound a lot like the way we talk about money. So how can we truly respect content?
- Examining The Design Process: Clichés And Idea Generation77
Where do good ideas come from? It’s a question that matters a great deal to designers, yet seems to be curiously discounted in the common perception of graphic design.
7812. Recent Articles On Smashing Magazine
- Applications Of Machine Learning For Designers79
- Unleashing The Full Potential Of Symbols In Sketch80
- A Brief Overview On Responsive Navigation Patterns81
- Jekyll For WordPress Developers82
- It’s Time To Start Using CSS Custom Properties83
- Using Slack To Monitor Your App84
Inspiration, Freebies, Misc.
- AMP For Retailers: Is It Worth It?85
- How To Prototype IoT Experiences: Building The Hardware (Part 1)86
- How To Prototype IoT Experiences: Configuring The Software (Part 2)87
- Web Development Reading List #178: On CAA, Pong.js, And Meaningful Work88
- Web Development Reading List #179: Firefox 53, The Top Web Browsers, And Vue.js Authentication89
- It’s Here. Meet “User Experience Revolution”, A New Smashing Book (Print + eBook)90
- 1 https://developer.mozilla.org/en/docs/Web/API/Battery_Status_API
- 2 http://caniuse.com/#search=battery
- 3 https://twitter.com/sarah_edo/status/856550682580484099
- 4 https://twitter.com/sarah_edo/status/856550682580484099
- 5 https://twitter.com/sarah_edo/status/856550682580484099
- 6 http://www.independent.co.uk/life-style/gadgets-and-tech/news/uber-knows-when-your-phone-is-about-to-run-out-of-battery-a7042416.html
- 7 https://bugzilla.mozilla.org/show_bug.cgi?id=1313580
- 8 https://www.theguardian.com/technology/2016/nov/01/firefox-disable-battery-status-api-tracking
- 9 https://developer.mozilla.org/en-US/docs/Mozilla/Gecko/Script_security#Privileged_to_unprivileged_code
- 10 https://www.theguardian.com/technology/2016/aug/02/battery-status-indicators-tracking-online
- 11 https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector
- 12 #a1
- 13 #a2
- 14 #a3
- 15 #a4
- 16 #a5
- 17 #a6
- 18 #a7
- 19 #a8
- 20 #a9
- 21 #a10
- 22 #a11
- 23 #a12
- 24 #
- 25 https://madebymike.com.au/writing/the-invisible-parts-of-CSS/
- 26 https://madebymike.com.au/writing/the-invisible-parts-of-CSS/
- 27 #
- 28 https://www.smashingconf.com/
- 29 https://www.smashingconf.com/
- 30 https://smashingconf.com/workshops
- 31 https://smashingconf.com/registration
- 32 #
- 33 http://www.boilrplate.com
- 34 http://www.boilrplate.com
- 35 #
- 36 http://highlights.melanie-richards.com/
- 37 https://melanie-richards.com/blog/highlights-minisite/
- 38 https://melanie-richards.com/blog/highlights-minisite/
- 39 #
- 40 https://uxdesign.cc/the-faqs-that-got-me-more-ux-interviews-and-ultimately-my-dream-job-2e5dfe09132
- 41 https://uxdesign.cc/the-faqs-that-got-me-more-ux-interviews-and-ultimately-my-dream-job-2e5dfe09132
- 42 #
- 43 https://finchalyzer.github.io/slinky/
- 44 https://finchalyzer.github.io/slinky/
- 45 #
- 46 https://increment.com
- 47 https://increment.com
- 48 #
- 49 http://oops.re/
- 50 http://oops.re/
- 51 #
- 52 https://www.smashingmagazine.com/smashing-workshops/#public-workshops
- 53 https://shop.smashingmagazine.com/products/workshop-brad-frost-NY-2017
- 54 https://shop.smashingmagazine.com/products/workshop-yuko-shimizu-NY-2017
- 55 https://shop.smashingmagazine.com/products/workshop-horace-dediu-NY-2017
- 56 https://shop.smashingmagazine.com/products/workshop-umar-hansa-NY-2017
- 57 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-NY-2017
- 58 https://shop.smashingmagazine.com/products/workshop-eric-reiss-NY-2017
- 59 https://shop.smashingmagazine.com/products/workshop-joe-leech-NY-2017
- 60 https://shop.smashingmagazine.com/products/workshop-sara-soueidan-NY-2017
- 61 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-NY-2017
- 62 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-freiburg-2017
- 63 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-freiburg-2017
- 64 https://shop.smashingmagazine.com/products/workshop-umar-hansa-freiburg-2017
- 65 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-freiburg-2017
- 66 http://www.webdirections.org/respond/
- 67 http://www.webdirections.org/respond/
- 68 mailto:firstname.lastname@example.org
- 69 #
- 70 http://jobs.smashingmagazine.com/
- 71 http://jobs.smashingmagazine.com/j/Talented-Front-end-Developer/2486058
- 72 http://jobs.smashingmagazine.com/j/Senior-Front-End-Developer/2485674
- 73 http://jobs.smashingmagazine.com/j/Brand-Designer/2485576
- 74 #
- 75 https://www.smashingmagazine.com/2012/01/how-to-deliver-exceptional-client-service/
- 76 https://www.smashingmagazine.com/2012/08/content-blessing-bubble-burden/
- 77 https://www.smashingmagazine.com/2011/02/clich-s-and-idea-generation-how-to-turn-clich-in-a-successful-visual-solution/
- 78 #
- 79 https://www.smashingmagazine.com/2017/04/applications-machine-learning-designers/
- 80 https://www.smashingmagazine.com/2017/04/symbols-sketch/
- 81 https://www.smashingmagazine.com/2017/04/overview-responsive-navigation-patterns/
- 82 https://www.smashingmagazine.com/2017/04/jekyll-wordpress-developers/
- 83 https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/
- 84 https://www.smashingmagazine.com/2017/04/using-slack-monitor-app/
- 85 https://www.smashingmagazine.com/2017/04/amp-retailers/
- 86 https://www.smashingmagazine.com/2017/04/prototype-iot-experiences-building-hardware-part-1/
- 87 https://www.smashingmagazine.com/2017/04/prototype-iot-experiences-configuring-software-part-2/
- 88 https://www.smashingmagazine.com/2017/04/web-development-reading-list-178/
- 89 https://www.smashingmagazine.com/2017/04/web-development-reading-list-179/
- 90 https://www.smashingmagazine.com/user-experience-revolution/