Menu Search
Jump to the content X X

The Smashing Email Newsletter

We love useful stuff, and we love quality writing, that’s why we send out an editorial email newsletter twice a month with useful tips, tricks and resources for designers and developers — thoroughly collected, written and edited by us exclusively for our readers. Once subscribed, you’ll receive a small token of appreciation — a free eBook just for you.

Mailchimp Subscriber Count /

Of course, you can cancel your subscription at any time (just check the “unsubscribe” link in the footer of the last newsletter issue). The Smashing Newsletter will always be free of charge. We respect your privacy; we will never give your data to third parties, nor would we ever spam you. You have our word!

Please keep in mind that we keep the number of ads per issue to a minimum; and to help us cover our costs, we send out at most one monthly special issue which is dedicated to Smashing projects and products. We appreciate your support, and we’ll make sure to keep your subscription worthwhile.

If you’re looking for older issues of the Smashing Newsletter, we’ve prepared all of them in a downloadable ZIP file17 (226 MB) for you starting from Issue #14.

Last Newsletter Issue #180

This newsletter issue was sent out to 230,055 newsletter subscribers on Tuesday, April 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 API18 to adapt the experience in a responsive way. The API (which is quite well supported19) 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 API20
Did you know there’s a battery status API in native JS? (Image credit: Sarah Drasner21)

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 concerns22 about the API, referencing mischievious tactics of abusing the API23. In fact, it has been removed from WebKit24 as well as from Firefox25. From Firefox 52 onwards, the Battery Status API is only available in chrome/privileged code26. Why? The combination of battery life as a percentage and battery life in seconds offers 14m combinations27, 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 CSS28. 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 CSS29
  2. Never Give Up! Never Surrender!30
  3. A Curated Directory Of Boilerplates31
  4. Checking For Interaction Feature Support32
  5. FAQs To Smoothen Your Job Hunt33
  6. Export Sketch Designs As HTML Email Templates34
  7. An Online Magazine Dedicated To How Teams Work35
  8. Making Oops Less Awkward36
  9. Upcoming Smashing Workshops37
  10. New On Smashing Job Board38
  11. Smashing Highlights (From Our Archives)39
  12. Recent Articles On Smashing Magazine40

411. 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 refresher42 that is great for beginners and experts alike.

The Invisible Parts Of CSS43

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)

442. 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 York45 on June 13–14!

Never Stop Fighting46

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 Workshops47 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!48 (cm)

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

524. 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 site53 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 interactions54.

Hover-dependent interaction55

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)

565. 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 each57.


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)

596. Export Sketch Designs As HTML Email Templates

Designing HTML emails can be tough. The Sketch plugin Slinky60 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)

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

658. 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” pages66 that Andreas Storm collected from all over the web.

404 page67

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)

689. 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 Workshops69

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.com85 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!

8610. New On Smashing Job Board

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

  • Talented Front-End Developer88 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 Developer89 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 Designer90 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.”

9111. Smashing Highlights (From Our Archives)

  • How To Deliver Exceptional Client Service92
    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 Burden93
    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 Generation94
    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.

9512. Recent Articles On Smashing Magazine

Design Articles

Coding Articles

Inspiration, Freebies, Misc.


  1. 1 #newsletter-issues
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29 #a1
  30. 30 #a2
  31. 31 #a3
  32. 32 #a4
  33. 33 #a5
  34. 34 #a6
  35. 35 #a7
  36. 36 #a8
  37. 37 #a9
  38. 38 #a10
  39. 39 #a11
  40. 40 #a12
  41. 41 #
  42. 42
  43. 43
  44. 44 #
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49 #
  50. 50
  51. 51
  52. 52 #
  53. 53
  54. 54
  55. 55
  56. 56 #
  57. 57
  58. 58
  59. 59 #
  60. 60
  61. 61
  62. 62 #
  63. 63
  64. 64
  65. 65 #
  66. 66
  67. 67
  68. 68 #
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86 #
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91 #
  92. 92
  93. 93
  94. 94
  95. 95 #
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107

↑ 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!

  1. 1

    I’ll subscribe

  2. 2

    Nice and useful!

  3. 3

    done deal.

  4. 4

    Rudra Ganguly

    April 21, 2010 6:19 am


  5. 5

    I’m there :)

  6. 6


    May 17, 2010 4:32 am

    have subscribed…. now let’s see…. how useful is it? I’ll be patient…

  7. 7

    It is really awesome to have all these issue. I am enjoying a lot, thank you very… very much.

  8. 8

    Richard Diamond

    June 5, 2010 4:38 am

    I am trying to subscribe to your newsletter which was forwarded to me by a friend. You need to “confirm my address by having me click on the link in the email you just sent me”, but that is not clear, and does not seem to work for me. Can you help?
    Thank you.

    • 9

      Vitaly Friedman

      June 27, 2010 4:22 am

      Exactly. You should receive an e-mail with a confimation link. Once you clicked on it, your subscription will be confirmed and you will receive the next issue of the newsletter.

  9. 10

    Of course !! :)

  10. 11

    One of my favourite newsletters. I look forward to it every fortnight!

    Keep it up guys :)

  11. 12

    thank you for being so useful, cheers :)

  12. 13

    I like it a lot, so much so I forward your recent newsletter to a couple of friends who I’m sure will sign up for it also!

  13. 14

    Smashing is one of the best magazine i have ever come across. Thanks, i lyk it guys.

  14. 15

    I just found out about this and I’m so excited! Thanks.

  15. 16

    Yay, Subscription Confirmed! :D

  16. 17

    Speaking of good design, enjoyed the article, but it’s not easy to print. You may want to think of having a print icon at the top and bottom of the article/ print friendly version that doesn’t include the comments. Great work on the content though.

  17. 18

    Subscription done..You are really good to miss out..:)

  18. 19

    On holidays at the moment and stumbled over your website while reading up on colour theory it’s fantastic thank you! Cheers

  19. 20

    im in here do smash me :d

  20. 21

    I’ve read many of your articles and I like the way they’re written and the info provided and that is the reason I am subscribing.

    Thanks! :)

  21. 22

    Oh, I always thought it’s just another way of receiving your blog articles. Good to know that the newsletter contains exclusive information! :)


  22. 23

    I find newsletters useful and generally interesting. They are a way to go beyond my inbred work inviornment.

  23. 24

    I’m happy to be here today, I had no idea that you guys sent out a newsletter! Now I’m a grateful subscriber.

  24. 25

    i am a regular visitor of Smashing MAG and i love it like anything. It acts as a supplement to my creative thrust. Although i have zillions of ideas bouncing inside my gray head, most of them are quenched and remaining pondering for something more. So i always want to be in touch with SM…. u ROCK!!!!….

  25. 26

    Great Work Guys but, Please keep the Subscribe option in an easily locatable place. I spent 10 Mins to find it.

  26. 27

    Exceptional straight forward subscription process. Also, sharing the .vcf is a great idea to forestall false-positive SPAM. Looking forward to you next issue, thanks!

  27. 28

    Its odd that I missed the last two edition, issue 35 and 36. Can you guys check my subscription status. My email is the one i used for this very comment.

    Thank you.

    • 29

      Vitaly Friedman

      July 4, 2011 11:06 pm

      Hi Joe,

      The status is perfectly fine. Perhaps your mail server marks our emails as “spam”? Could you please double-check it? Please make sure that our newsletters are whitelisted!


  28. 30

    Javier Gomez VE

    July 16, 2011 7:59 am


  29. 31

    Every single newsletter beats its reader count from the one before … amazing.

  30. 32

    Love your creativity, will follow through. Thumbs up!

  31. 33

    I love how well they express their ideas! geek ever!

  32. 34

    Strange for such an excellent site and webdeveloper-oriented bunch of geeks to have such an appalling email-signup process… ever heard of Campaign Monitor, guys?
    Just kiddin. I’m quite busy tuning MailChimp myself for some clients and it is a bit daunting to say the least. Didn’t expect to see default stuff coming from Smashing Mag though.

    cheers Peter Emil

  33. 35

    You guys just passed the 100k subscribers mark.

  34. 36


  35. 37

    you are a super team!!! great work!!!!

  36. 38

    Landon Cahow

    March 9, 2012 4:36 pm

    I’ve been subscribed to the Smashing Email Newsletter for a while now, it’s always full of great info and I look forward to getting it every time.

    Keep up the good work guys!

  37. 39

    Stefan Hansel

    April 23, 2012 9:40 pm

    Thanks for the great magazine! I’ve been reading your articles for a long time. And the Smashing Network has been a great resource too. Where has it gone?

  38. 40

    Dear Smashing Magazine , i can’t find anymore the smashing Network section !!! is it canceled ?

    Thanks in advance

    • 41

      You “have” to subscribe to get back into the network, still cant find a way round it.

      I am on my work PC, having already subscribed at home, seems like I cannot get into the network without re-subscribing….

      The smashing newsletter is great but I do not agree with the, seemingly, forceful way of gaining subscribers.

  39. 42

    Werner Swiegers

    April 26, 2012 11:33 am

    Yeah, what happened to the smashing network?

  40. 43

    Subscribed :)
    Got your Tweet

  41. 44

    Is there a way to update the emails for the subscription, I want to reroute the old email address and replace it with a new email address. The “cancel your subscription” link is not working today.

    Also is there a way get the older newsletters resent mailed, to your re-confirmed new address, just found I missed a few when they changed the work spam filters, I want the complete set in my mailbox. The newsletters are that great.

    • 45

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      December 18, 2012 3:29 pm

      The “cancel your subscription” link is actually working. Could you please try again, Eric? Thanks for your kind words!

  42. 46

    wow, looking at this list I realise just how many newsletters there have been! I signed up for the very first newsletter and have had them coming to my inbox for more than 2 years. How time flies!

    Always looking forward to the next newsletter, good stuff!

    ~ Steven Noble
    Graphics Cove

  43. 47

    done :D

  44. 48

    Heather Slabosz

    May 4, 2013 8:38 pm

    I was interested in receiving your newsletter (that I just signed up for) on this kindle fire (which I have not purchased yet) Is that possible? I will definitely not be running a data plan with it. I would just like to download to the kindle and read from there.

    I understand I can purchase the ebooks and use them on my kindle – but I am wondering if I can do the same with your newsletter.

    Much thanks, Heather

  45. 49

    How can i get regular update on activities, is there any subscribtion ?

  46. 50

    I’m trying to subscribe. I’m being sent to a wordpress login page for your domain which states that “this plugin is already installed” when i enter my email and hit the subscribe button

    • 51

      Vitaly Friedman (editor-in-chief of Smashing Magazine)

      July 26, 2013 1:05 am

      It must have been a temporary issue! Please try again, Meag!

  47. 52

    3 words, count me in.

  48. 53

    Let’s say we have an interesting article to share, could we post it for review somewhere?
    Would be nice to have to people read or opinion and tips / tricks.

  49. 54

    Jose Almonte

    March 21, 2014 6:46 pm

    I was jsut looking for some pdf books and free templates to practice what i´m learning about Semantic Web, SEO, HTML5, CSS, Prototyping, Responsive Web Design and i´m sure i´ve came to the right place.

    Thanks for sharing this wonderful content. Best regards to all.

  50. 55

    I’m surprised I can’t find anything on this! Any chance to subscribe to your newsletter by RSS?

  51. 60

    Hello, I downloaded your WP theme, but I have a problem with it. WordPress said that there is no style.css stylesheet
    Where can I get it?

    Kind regards Judith

  52. 61

    This is great! Thanks!

  53. 62

    Fakultet Gashi

    March 18, 2016 8:02 pm


    I can’t find any text about using your data on other websites. I’m gonna create a website and I want to use some of your articles. Can I do that or not ?


  54. 63

    Renata Jourdan

    June 26, 2016 8:16 pm

    Please!!! When can we have workshops in Lisbon!! :)


Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top