Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #180

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 navigator.getBattery().

A slide on the interface of the Battery Status API3
Did you know there’s a battery status API in native JS? (Image credit: Sarah Drasner4)

What does this mean for us as designers? If you designed a rich immersive experience, it’s likely to be hardly usable on low battery. So, what about replacing videos with static images, removing parallax effects, Retina images, web fonts, animations and heavy JavaScripts if a user’s battery level is under 5–7% and it is not being charged? We could also save users’ data just in case, and inform them about the low power state.

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)!
Vitaly (@smashingmag)

Table of Contents

  1. The Invisible Parts Of CSS12
  2. Never Give Up! Never Surrender!13
  3. A Curated Directory Of Boilerplates14
  4. Checking For Interaction Feature Support15
  5. FAQs To Smoothen Your Job Hunt16
  6. Export Sketch Designs As HTML Email Templates17
  7. An Online Magazine Dedicated To How Teams Work18
  8. Making Oops Less Awkward19
  9. Upcoming Smashing Workshops20
  10. New On Smashing Job Board21
  11. Smashing Highlights (From Our Archives)22
  12. 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 Invisible Parts Of CSS26

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!

Never Stop Fighting29

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.

Boilrplate34

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.

Hover-dependent interaction38

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.

41

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.

Slinky44

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.

Increment47

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.

404 page50

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.

Smashing Public Workshops52

Workshops at SmashingConf New York — June 12

Workshops at SmashingConf New York — June 15

Workshops at SmashingConf Freiburg — September 10

Workshops at SmashingConf Freiburg — September 13

Public Workshops with Vitaly Friedman

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

Here are the recent job openings published on our Smashing Job Board70:

  • 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

Design Articles

Coding Articles

Inspiration, Freebies, Misc.

Footnotes

  1. 1 https://developer.mozilla.org/en/docs/Web/API/Battery_Status_API
  2. 2 http://caniuse.com/#search=battery
  3. 3 https://twitter.com/sarah_edo/status/856550682580484099
  4. 4 https://twitter.com/sarah_edo/status/856550682580484099
  5. 5 https://twitter.com/sarah_edo/status/856550682580484099
  6. 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. 7 https://bugzilla.mozilla.org/show_bug.cgi?id=1313580
  8. 8 https://www.theguardian.com/technology/2016/nov/01/firefox-disable-battery-status-api-tracking
  9. 9 https://developer.mozilla.org/en-US/docs/Mozilla/Gecko/Script_security#Privileged_to_unprivileged_code
  10. 10 https://www.theguardian.com/technology/2016/aug/02/battery-status-indicators-tracking-online
  11. 11 https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector
  12. 12 #a1
  13. 13 #a2
  14. 14 #a3
  15. 15 #a4
  16. 16 #a5
  17. 17 #a6
  18. 18 #a7
  19. 19 #a8
  20. 20 #a9
  21. 21 #a10
  22. 22 #a11
  23. 23 #a12
  24. 24 #
  25. 25 https://madebymike.com.au/writing/the-invisible-parts-of-CSS/
  26. 26 https://madebymike.com.au/writing/the-invisible-parts-of-CSS/
  27. 27 #
  28. 28 https://www.smashingconf.com/
  29. 29 https://www.smashingconf.com/
  30. 30 https://smashingconf.com/workshops
  31. 31 https://smashingconf.com/registration
  32. 32 #
  33. 33 http://www.boilrplate.com
  34. 34 http://www.boilrplate.com
  35. 35 #
  36. 36 http://highlights.melanie-richards.com/
  37. 37 https://melanie-richards.com/blog/highlights-minisite/
  38. 38 https://melanie-richards.com/blog/highlights-minisite/
  39. 39 #
  40. 40 https://uxdesign.cc/the-faqs-that-got-me-more-ux-interviews-and-ultimately-my-dream-job-2e5dfe09132
  41. 41 https://uxdesign.cc/the-faqs-that-got-me-more-ux-interviews-and-ultimately-my-dream-job-2e5dfe09132
  42. 42 #
  43. 43 https://finchalyzer.github.io/slinky/
  44. 44 https://finchalyzer.github.io/slinky/
  45. 45 #
  46. 46 https://increment.com
  47. 47 https://increment.com
  48. 48 #
  49. 49 http://oops.re/
  50. 50 http://oops.re/
  51. 51 #
  52. 52 https://www.smashingmagazine.com/smashing-workshops/#public-workshops
  53. 53 https://shop.smashingmagazine.com/products/workshop-brad-frost-NY-2017
  54. 54 https://shop.smashingmagazine.com/products/workshop-yuko-shimizu-NY-2017
  55. 55 https://shop.smashingmagazine.com/products/workshop-horace-dediu-NY-2017
  56. 56 https://shop.smashingmagazine.com/products/workshop-umar-hansa-NY-2017
  57. 57 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-NY-2017
  58. 58 https://shop.smashingmagazine.com/products/workshop-eric-reiss-NY-2017
  59. 59 https://shop.smashingmagazine.com/products/workshop-joe-leech-NY-2017
  60. 60 https://shop.smashingmagazine.com/products/workshop-sara-soueidan-NY-2017
  61. 61 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-NY-2017
  62. 62 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-freiburg-2017
  63. 63 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-freiburg-2017
  64. 64 https://shop.smashingmagazine.com/products/workshop-umar-hansa-freiburg-2017
  65. 65 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-freiburg-2017
  66. 66 http://www.webdirections.org/respond/
  67. 67 http://www.webdirections.org/respond/
  68. 68 mailto:vitaly@smashingconf.com
  69. 69 #
  70. 70 http://jobs.smashingmagazine.com/
  71. 71 http://jobs.smashingmagazine.com/j/Talented-Front-end-Developer/2486058
  72. 72 http://jobs.smashingmagazine.com/j/Senior-Front-End-Developer/2485674
  73. 73 http://jobs.smashingmagazine.com/j/Brand-Designer/2485576
  74. 74 #
  75. 75 https://www.smashingmagazine.com/2012/01/how-to-deliver-exceptional-client-service/
  76. 76 https://www.smashingmagazine.com/2012/08/content-blessing-bubble-burden/
  77. 77 https://www.smashingmagazine.com/2011/02/clich-s-and-idea-generation-how-to-turn-clich-in-a-successful-visual-solution/
  78. 78 #
  79. 79 https://www.smashingmagazine.com/2017/04/applications-machine-learning-designers/
  80. 80 https://www.smashingmagazine.com/2017/04/symbols-sketch/
  81. 81 https://www.smashingmagazine.com/2017/04/overview-responsive-navigation-patterns/
  82. 82 https://www.smashingmagazine.com/2017/04/jekyll-wordpress-developers/
  83. 83 https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/
  84. 84 https://www.smashingmagazine.com/2017/04/using-slack-monitor-app/
  85. 85 https://www.smashingmagazine.com/2017/04/amp-retailers/
  86. 86 https://www.smashingmagazine.com/2017/04/prototype-iot-experiences-building-hardware-part-1/
  87. 87 https://www.smashingmagazine.com/2017/04/prototype-iot-experiences-configuring-software-part-2/
  88. 88 https://www.smashingmagazine.com/2017/04/web-development-reading-list-178/
  89. 89 https://www.smashingmagazine.com/2017/04/web-development-reading-list-179/
  90. 90 https://www.smashingmagazine.com/user-experience-revolution/

↑ Back to top Tweet itShare on Facebook

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 designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

Comments are closed.

↑ Back to top