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 file16 (226 MB) for you starting from Issue #14.

Last Newsletter Issue #179

This newsletter issue was sent out to 231,209 newsletter subscribers on Tuesday, April 11th 2017.


Whenever we invite designers and developers to speak at our conferences, it’s always because we sincerely believe they have something valuable to share with the community: Insights, experiences, failures, successes, and lessons learned in small as well as large projects. Having a diverse line-up of speakers has always been important to us, and we take pride in not giving up easily — sometimes chasing speakers until it becomes remarkably difficult to say “No.”

Sara Soueidan at SmashingConf SF 201717
Sara Soueidan speaking in San Francisco, interviewed by Christian Heilmann after her talk. (Image credit: Marc Thiele18)

A lot of communication goes on behind the scenes, and usually planning an event means planning way ahead of time. For San Francisco, we tried very hard to make sure that our dear friend and colleague Sara Soueidan19 from Lebanon could speak at the conference, despite the recent travel ban in the US. Sara has been through a tedious visa issue in the past already, but Marc was stubborn enough not to give up20. We’re happy to have convinced Sara to still come and speak despite of all the ongoing issues that might occur along the way. She wasn’t allowed to take a laptop on the plane, but she still was able to share her insights from a friend’s laptop on stage.

Sara will also be speaking at SmashingConf New York21, and she’ll be running her brilliant SVG workshop22 as well. As a conference organizer, don’t get discouraged by the limitations imposed by authorities or rumours, and keep on bringing good people to great events — events with a fantastic, caring community around it. The community support for Sara was remarkable, and we know that we are doing the right thing. If something happens to your event, we’d be happy to step up — it’s worth it.

Stay stubborn!
– Vitaly @smashingmag

Table of Contents

  1. Popular Brand Logos As SVGs23
  2. Mastering CSS Grid Layout24
  3. Custom Font-Face Code Made Easy25
  4. Service Workers: Guides, Tutorials, And Copy-Paste Snippets26
  5. Freebie: Editable And Scalable Vector Emoji27
  6. Saving GitHub Issues Offline28
  7. The State Of Email29
  8. Making The Web A Better Place30
  9. Loopy: A Tool To Visualize Complex Systems31
  10. An Alphabetical Adventure32
  11. Upcoming Smashing Workshops33
  12. New On Smashing Job Board34
  13. Smashing Highlights (From Our Archives)35
  14. Recent Articles On Smashing Magazine36

371. Popular Brand Logos As SVGs

Every now and again, you need to include a brand logo in a mock-up. Not only the common social media icons but also assets that are less common, like the logo of a certain online service, a programming language, banking provider, or an app maybe. If you need a brand logo next time, be sure to check Simple Icons38 — chances are they have what you’re looking for.

Simple Icons39

Maintained by Dan Leech, the site features a huge collection of more than 300 SVG brand icons ranging from big players and online services like Google, Instagram and MasterCard to programming languages, browser vendors, apps, and everything else tech- and web-themed. A nice bonus: Simple Icons also provides you with the matching hex color code for each logo. And if you’re looking for a logo that isn’t part of the collection yet, you can make contributions and requests via GitHub. One for the bookmarks. (cm)

402. Mastering CSS Grid Layout

Easter is just around the corner, and, well, what better way could there be to make an Easter bunny happy as with some tasty carrots? To plant the carrots, however, you need a special skill, but none you can’t master, we’re sure of that: CSS Grid. To teach us the basics of it, Thomas Park came up with Grid Garden41, a browser game in which you need to write CSS code to grow — you probably guessed it already — carrots.

Grid Garden42

There are 28 levels in total and each one has a little challenge you need to master to make your garden flourish — using grid-column-start to water the areas of the garden that have carrots, for example, or to kill the weeds so that your plants can grow nicely. The tasks will get harder as you approach, of course.

Once you’ve grown familiar with CSS Grid and are ready to use it out in the wild, be sure to take a look at Anthony Dugois’ CSS Grid Template Builder43 and Drew Minns’ Griddy44. Tools help you build layouts by providing you with the necessary templates and a visual interface to see the layout in action. Handy!(cm)

453. Writing @Font-Face Declarations Made Easy

Writing @font-face declarations can be a tedious task that requires a lot of repetitive typing. Just think of the mass of code you need to write just to define each font weight and font style you want to add to your site. A remedy now comes from Daniel Tonon. His font-face-generator npm package46 handles all the repetitive @font-face styling for you.

Font Face Generator47

All you have to do to get things up and running is import the file, and after you’ve assigned some custom settings, you can enjoy the magic behind the little SCSS-powered helper. Instead of typing the usual string of code for each font weight and style individually, you only enter a minimum of information and the $fonts variable generates the CSS code from it. It even works with multiple fonts. A real time saver. (cm)

484. Service Workers: Guides, Tutorials, And Copy-Paste Snippets

To create reliable, fast experiences on the web, there’s no getting around service workers. But where to begin if you want to implement them on your site? We’ve collected some helpful guides, tutorials, and copy-paste snippets that are bound to make your service worker endeavor a lot smoother. One of them is Jake Archibald’s Offline Cookbook49.

The Offline Cookbook50

Just like in a real cookbook, Jake provides different recipes for different occasions. What kind of caching patterns are suitable for what kind of content (static content, dynamic content, bigger resources that aren’t needed right away, for example)? And how exactly are requests handled? The tutorial also provides tips for using service workers in combination with the Push API and for implementing a “Save for offline” button so users can select the content they want available offline themselves. Handy!

Another valubale resource comes from Lyza Danger Gardner. After giving her “The Pragmatist’s Guide To Service Workers51” talk at last year’s SmashingConf Freiburg, she collected the accompanying code examples in a GitHub repository52. They cover everything from providing an offline message and responding to fetches for content and static assets differently to adding a fallback offline image. And if you’re looking for even more practical examples of service worker usage, check out the ServiceWorker Cookbook53 that Marco Castelluccio put together on GitHub with service worker recipes that illustrate a number of APIs. Suitable for both beginners and experts. (cm)

545. Freebie: Editable And Scalable Vector Emoji

Who doesn’t love emoji? Well, here comes good news if you can’t get enough of the little yellow guys with their smirks, puzzled looks, and rosy cheeks. Thanks to Michael Flarup who recreated 68 popular smileys as layered PSDs55, you can now scale and edit the round fellows to your liking. For free.

Vector Emoji56

Design-wise, the vector versions appear just as you know the emoji from Apple platforms, and, in fact, all the familiar faces are included in the Photoshop kit spreading their joy, mischief, anger, and despair and pretty much every other feeling you can think of. Yes, even the nerdy guy with the rabbit teeth and the friendly poop join the fun. Happy editing! (cm)

576. Saving GitHub Issues Offline

Wouldn’t it be great if you could work on fixing GitHub issues even when you’re offline? When travelling with a bad internet connection, or on a plane, for example? Well, actually you can. A little Node.js helper called offline-issues58 makes it possible.

Offline Issues59

The command line application fetches the GitHub issues you specify and conveniently saves them in HTML and Markdown formats on your computer. You can even decide if you want to make one issue, all issues or multiple respositories and issues available offline. Filtering for open or closed issues is also possible. To use the tool, you need to have Node.js installed on your computer. Convenient. (cm)

607. The State Of Email

Let’s face it, designing for email can be tough. Email client rendering quirks, spam flagging, getting lost in the shere mass of emails users receive these days — if you’re sending out newsletters or are doing email marketing, you know the pitfalls that email brings along. To help us stay on top of trends in all things email, Litmus has been publishing their annual State Of Email Report for a few years already, and, well, the 2017 edition61 is now here and just as useful as always.

2017 State Of Email Report62

Over the past year, Litmus tracked 13 million email opens and distilled valuable knowledge about new and updated email clients from them just like tips to make your email stand out from the crowd. Among other things, their State Of Email report dives deep into mobile, webmail and desktop trends and sheds a light into the things you need to know to avoid spam complaints. Practical tips for streamlining your email workflow and automating the more mundane aspects of email creation so that there’s more room for experiments (think personalization, dynamic content, and gamification, for example) are also part of it. Definitely worth a read. (cm)

638. Making The Web A Better Place

In a fast-moving industry like the web industry, staying on top of current trends and developments is key. But despite all the excitement for hot new technologies, techniques, and tools, we shouldn’t forget about the more human aspects of our work either — the community, diversity, and workplace culture, for example. Design.blog64 provides a place for all those things that often get lost in this loud industry oh so easily.


The blog shares essays of over 50 thought leaders, their voices on design, inclusion and tech. A good opportunity to consider the power and relevance of inclusion, not only when designing and working but in our lives in general. (cm)

669. Loopy: A Tool To Visualize Complex Systems

We are surrounded by complex systems — not only seen from a technical perspective, but in every other aspect of our lives, too, be it social, political, economical, or environmental. Grasping how the different parts of these systems interact and how they depend from each other can already be hard. However, if you need to explain them, things get even more challenging.


A new tool that can provide a solution for all those occasions when you need some visual aid to explain a complex system is Loopy68. Loopy lets you create explorable diagrams simply by drawing circles and connections with your mouse. No need to install anything, it all happens right in the browser. Easy as pie. (cm)

6910. An Alphabetical Adventure

“A” is for “Albert”, “B” is for “Bounce”, “C” for “Cowabunga”. If you have no idea what this all is about, well, no worries, we’ll tell you: it’s the beginning of a very special piece of eye candy. Brought to life by design agency Studio Lovelock, “A Is For Albert70” explores the moments of happiness and the little mishaps that life with kids brings along — with an animated alphabet.

A Is For Albert71

Each letter from A to Z tells the story of how Albert, a blonde little boy, explores the world in his own cute yet chaotic (and seen from his parents’ perspective sometimes maybe even a bit annoying) way. He decorates the livingroom wallpaper with his brush artworks, for example, and shows his love for the family cat by hugging it a bit too tight. Simple geometric shapes and a soft color palette are everything the project needs to breathe life into Albert’s (and his parents’) everyday adventures and make us smile. (cm)

7211. 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 Workshops73

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

9012. New On Smashing Job Board

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

  • Mobile UIUX/Motion designer92 at Touchlab (New York)
    “As an experienced UIUX/Motion designer, you have a deep understanding of mobile design patterns and you’re fluent in the design languages of both Android and iOS. You know the rules and know how to break them to create amazing interfaces centered around the user.”
  • UI Designer93 at Achievement Network (Boston, MA)
    “We are looking for a talented UI Designer to create visual design (storyboards/prototypes, proof of concepts and content layout) and information architecture (site structure/organization, navigation/findability etc.) for ANet’s online assessment creation, delivery, reporting and resource applications.”
  • Full Stack Developer94 at Superrb (Hayling Island, Hampshire, UK)
    “You’re an experienced web developer. Your code is tidy and your stack is phat. You know the drill but you’re willing to experiment. You’re borderline geek and so are we. But your ability to communicate with humans as well as computers keeps you from full nerd metamorphosis. And critically your eye for what looks hot makes you the perfect fit for our studio.”

9513. Smashing Highlights (From Our Archives)

  • How To Stop Designing For Ourselves96
    How often do we look at a website or app and remark to ourselves (and on Twitter) that “these designers must have been blind!” Sometimes we’re just being whiney about minute details (as we should be), but other times we do have a point: “What were they thinking?”
  • When You Learn Something, Write About It!97
    Noone can deny that the Web has changed the way people teach, learn, and do research. Of course, this doesn’t mean that everything we read online is true and accurate — far from it. But through honest discussion and objective collaboration, accurate and useful information is much more likely to be the end result of any educational endeavor.
  • Understanding The Difference Between Type And Lettering98
    Coming out of the grunge, graffiti and David Carson era through the ’90s, there has been a major resurgence of interest in typography. We have seen a number of designers and artists make their careers out of designing type or custom lettering, and it has become common to list typography among our skills and disciplines. Unfortunately, as with any popularity surge, there have come with it a lot of misunderstandings of some of the terms and concepts that we use.

9914. 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 #a1
  24. 24 #a2
  25. 25 #a3
  26. 26 #a4
  27. 27 #a5
  28. 28 #a6
  29. 29 #a7
  30. 30 #a8
  31. 31 #a9
  32. 32 #a10
  33. 33 #a11
  34. 34 #a12
  35. 35 #a13
  36. 36 #a14
  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
  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
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115

↑ 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