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 interested in reading any of the older issues of the Smashing Newsletter, feel free to reach out to the Smashing Editorial14 team and we’ll happily share them with you upon request.

Last Newsletter Issue #188

This newsletter issue was sent out to 227,450 recipients newsletter subscribers on Tuesday, August 15th 2017.


One of the most common questions asked when hiring designers and developers is whether they have a side project or contribute to open source. In a way, it’s almost expected that a candidate is willing to spend their spare time on something that will keep them on their toes after working hours and weekends. For companies, that’s a sign that a candidate is willing to learn and improve things, rather than just work through 9 to 5. And so indeed many of us work on such projects: often not only to polish up our CVs, but to stay up to date with modern technologies, help others, scratch our own itch, and just get better at our work.

Think about the products, libraries and services you love and use every single day. Think about the people crafting those interfaces or maintaining those repos for all of us to use. They’re working hard and investing a lot of their limited time because they care. Yet, too often a lot of work goes unnoticed and uncredited. Support them. Drop them an email today saying “thank you”, give them a shout-out on Twitter or Facebook, recommend them to your friends and colleagues and total strangers. Or perhaps send them a little gift or a small donation.

It might not sound like a big deal, but it just might make someone’s day after a long weekend of redesigning a broken UI or fixing way too many bugs. Give them the motivation they need to keep going and improve something you use.

Cheers to all you hardworking folks out there!
Vitaly (@smashingmag)

Table of Contents

  1. Better Breadcrumbs The Scotch Egg Way15
  2. Ready To Master New Challenges? SmashingConf Barcelona Is Coming!16
  3. Freebie: Scaramella, A Typeface With A Story17
  4. A Way Forward To More Meaningful Animations18
  5. Flexbox And Grid Explained For Designers19
  6. A Video Podcast To Learn Accessibility20
  7. Safari About To Support Service Workers21
  8. Style Encapsulation With Shadow DOM22
  9. Upcoming Smashing Workshops23
  10. New On Smashing Job Board24
  11. Popular Articles On Smashing25
  12. Most Recent Articles On Smashing26

271. Better Breadcrumbs The Scotch Egg Way

Do you remember the fairy tale about Hansel and Gretel and how they dropped breadcrumbs onto the forest ground to find their path back home? Well, on the web, breadcrumbs play a similar role. Breadcrumb navigation can improve how users find their way around by giving them a sense of where they are within a site’s structure. But not all breadcrumbs are equally helpful.

Breadcrumb Navigation28

As Andy Beaumont points out29, static breadcrumb menus often prevent users from finding something that is on the same level as an already open level. The solution: Scotch Egg Navigation30. It allows the user to see all available options at each level of the hierarchy, thanks to a dropdown. This way, they can move to any point in that hierarchy without backing out and in again. If you want to see examples of what such user-friendly breadcrumbs can look like in action, check out the website of household appliance manufacturer Liebherr31, or the navigation on the site of the Parisian-based school École Estienne32. (cm)

332. Ready To Master New Challenges? SmashingConf Barcelona Is Coming!

The web is constantly changing. So, what could be better than learning first-hand from people who know their craft — Marcy Sutton, Brad Frost, Sarah Drasner, Chris Coyier and Monica Dinculescu, among others? Well, SmashingConf Barcelona34 is returning to the magical Palau de la Música Catalana once again this fall (Oct 17–18th) to boost up your skills. Two packed days of hands-on, practical sessions by some of the most respected members of the community.

SmashingConf Barcelona35

Join us on our journey to the sunny Mediterranean seaside where we’ll explore new front-end challenges, UX strategies, and design patterns that you’ll be able to apply immediately to you work. No fluff or theory, just things that have worked in real-life projects — with enough time for networking, of course. Grab your ticket and see you there!36 (cm)

373. Freebie: Scaramella, A Typeface With A Story

Scaramella. What a fine-sounding name. What’s hiding behind it, is a real goodie, too. With the idea in mind to create a free typeface for feminist projects, Scaramella38 was designed by Brazil-based designer Camilla Scaramella whose family name was passed down to her by two generations of women.


Scaramella shines with its unique handwriting style and comes in two versions: Regular and Brush. To let the connections between the letters flow as naturally as possible (which is one of the main challenges with handwriting typography), Camilla analyzed each and every letter carefully. And, well, the result speaks for itself. You can download Scaramella for free — and use it for non-feminist purposes, too, of course! (cm)

404. A Way Forward To More Meaningful Animations

Animation can be a powerful tool to enhance the user experience, but only if used carefully can they unleash their real power. Too much of it, on the other hand, might cause confusion or dislike.

3 Types Of Animations That Improve The User Experience41

To help us gain a better understanding of when animation makes sense, Roman Kalina summarized the three types of animation that actually bring benefits42 for the user: Animations that grab the user’s attention, animations to guide your users through your app and show them what to do, and, last but not least, the ones that are visually pleasing and cater for little sparks of delight. To help us get animation right, Roman also provides a four-point checklist with questions we should ask ourselves whenever we plan to use animation effects in a project. With these guidelines in mind, we can make animation a lot more meaningful. (cm)

435. Flexbox And Grid Explained For Designers

Here we go again. Without any doubt, Flexbox and CSS Grid have completely changed how we design for the web today by giving us entirely new possibilities to create the layouts we imagine — without weird hacks or workarounds. For designers, however, it might not always be that clear what the fuss is all about when they hear developers mentioning them in a conversation.

Designer’s Guide to Flexbox and Grid44

But no worries, Jon Yablonski’s “Designer’s Guide to Flexbox and Grid45” sheds some light into the dark and explains everything designers (and devs who haven’t gotten a chance to get their hands dirty with the concepts yet) need to know about these transformational layout tools. Light-bulb moments guaranteed. (cm)

466. A Video Podcast To Learn Accessibility

According to the WHO, over a billion people have some form of disability47 — that’s 15% of the world’s population. With these figures in mind, it’s just about time to get a better grasp at accessibility as many of us are struggling with it48. If you want to broaden your knowledge on accessibility, the Chrome Developers video podcast49 hosted by Rob Dodson is a good place to start.


22 episodes of A11ycasts have already been released, all of them between 5 to 12 minutes long, demonstrating real-world accessibility problems and solutions to fix them. Among other things, you’ll learn the basics of ARIA, how to check your project for accessibility, how screen readers work, and why semantics matter. Be sure to tune in. It’s worth it. (cm)

517. Safari About To Support Service Workers

A WebKit ticket and associated patch created by Apple Engineer Brady Eidson provoked collective glee in the web community. Apple is finally working on supporting service workers in Safari. Great news, especially since Service Workers are the foundation of progressive web apps.

Apple Starts Work on Progressive Web Apps52

Does that mean that Apple will fully support PWAs? Jason Grigsby points out that it’s too early to tell53 what these news actually mean for the full list of features that are part of the PWA definition. He also stresses that PWAs have always worked in Safari, so you shouldn’t wait on Apple to build one. Once service workers will be supported, Safari users will get an upgraded experience.

Speaking of PWAs, did you know that there’s a community-approved logo for them54 now? Peter O’Shaughnessy shares more details55 about how it came to be. (cm)

568. SVG Magic That’ll Leave You In Awe

You thought you knew SVG? Well, Sarah Drasner will teach you better. Her slides titled “SVG can do THAT?!57” are full of SVG experiments that bend the rules of what we thought is possible with scalable vector graphics. From extraordinary UI elements to stunning animations that are not only interactive but also responsive, the slides are a treasure chest full of SVG inspiration.

SVG Can Do That?58

Along the way, Sarah will take you on a journey through fancy SVG techniques and animation effects and unravel the secret behind SVGs that draw themselves. The presentation is also a great way to discover some real SVG artists and their works. Have you heard of Sullivan Nolan, for example? Her morphing SVG slider59 uses SVG to paint women of the 20th century. Stunning! (cm)

609. Style Encapsulation With Shadow DOM

A small and snappy page is the ideal of what we all are striving for. Something that gets by without a lot of code but relies on reusable components instead. To keep your code as simple and fast as possible, encapsulated styles can do wonders. And to make them happen without any external tools, there’s no getting around Shadow DOM, as Monica Dinculescu argues61.

Shadow DOM62

Shadow DOM hasn’t been around for too long yet, but it comes with a mighty power: It encapsulates the CSS and markup you bundle with your implementation, hiding the implementation details of your elements. To help you wrap your head around the concept and understand why it might be a more elegant solution as faking style encapsulation with CSS Modules or <iframe>, for example, be sure to check out Monica’s blog post63. Watch out, though: Since Shadow DOM is still a relatively new spec, older browsers might need a polyfill. (cm)

6410. 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 Freiburg, Germany65 (Sep 11–12) and SmashingConf Barcelona, Spain66 (Oct 17–18). That — and we love cats, too.

SmashingConf Freiburg 201767

SmashingConf Freiburg, Germany (Sep 11–12)

SmashingConf Barcelona 201771

SmashingConf Barcelona, Spain (Oct 17–18)

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

8111. New On Smashing Job Board

Here are some of the most recent job openings at Smashing Jobs82:

  • Javascript Expert83 at Yugen (Anywhere)
    “We are looking to hire a Javascript expert with canvas and 2.5/3d graphics experience and single page application experience.”
  • Front-End Developer84 at 1&1 Mail & Media Applications SE (Munich, Germany)
    “For our Scrum teams we are searching for a talented, passionate and self-motivated front-end developer for creating user friendly websites, with clean and well organized code.”
  • PHP Developer85 at kmo (Brisbane, Australia)
    “kmo is looking for a PHP developer with excellent PHP skills, source control experience, and the ability to integrate custom functionality with open source platforms.”

8612. Most Popular Articles On Smashing

9013. Most Recent Articles On Smashing

  • Designing The Perfect Feature Comparison Table91
    When shopping online, users might need a bit of extra help to decide on a product. That’s where feature comparison tables come in. This article looks into all the fine details to make your next feature comparison table helpful and accessible.
  • How To Work Out What To Charge Clients: The Honest Version92
    Paul Boag shares his honest approach to working out what to charge clients for the work you deliever. A method that doesn’t use any complex value-based pricing formulas and that might sound inelegant at times — but, well, it has proved itself successful.
  • Building A Simple AI Chatbot With Web Speech API And Node.js93
    Learn to use the Web Speech API and Node.js to create an artificial intelligence voice chat interface in the browser. The app will listen to the user’s voice and reply with a synthetic voice.


  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 #a1
  16. 16 #a2
  17. 17 #a3
  18. 18 #a4
  19. 19 #a5
  20. 20 #a6
  21. 21 #a7
  22. 22 #a8
  23. 23 #a9
  24. 24 #a10
  25. 25 #a11
  26. 26 #a12
  27. 27 #
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33 #
  34. 34
  35. 35
  36. 36
  37. 37 #
  38. 38
  39. 39
  40. 40 #
  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

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

  55. 64

    Dear Vitaly,

    Just a thought about that you wrote in the last newsletter …

    I had a similar experience with the cell phone: five years ago I’ve forgotten my cell phone in Iran and … since five years I don’t have a cell phone.

    This helped me to be free from all the “noises” that everyone has to face every day. No text messages, no WhatsApp, no Facebook and so on. When I’m not at home or in the office, I’m totally disconnected.. or connected only with myself.

    I’m a programmer, a web developer.. so if I, an IT worker, can “survive” without a cell phone, everyone can do it.


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