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 Editorial11 team and we’ll happily share them with you upon request.

Last Newsletter Issue #191

This newsletter issue was sent out to 226,457 recipients newsletter subscribers on Tuesday, October 3rd 2017.


Chances are high that you’ve already experimented with a pattern library or a design system, and chances are perhaps even higher that your thoroughly crafted design language is already outdated. It’s not due to the lack of focus or design skill that it happens; more often it’s the lack of established process and tooling that makes it infinitely more complicated and time-consuming to maintain a design language. We’re all trying to figure things out, and while we often fail, we sometimes succeed, too. So what can we learn from those failures and success stories to avoid mistakes down the line?

Design Systems by Alla Kholmatova12

After one and a half years of research and writing, we are honored to now finally release Alla Kholmatova’s book on Design Systems13 — a book on what makes an effective design system that can empower teams to create great digital products. The hardcover is now shipping worldwide, and the full eBook version is already available in PDF, ePUB and Amazon Kindle (a free PDF sample14 is available as well).

We’ve already received a few testimonials15 from well-respected members of the industry, and we’re very proud to finally release that fully fledged guide on everything you need to know about design systems today to create better design systems tomorrow. Check the table of contents.16Hopefully the book will help you get on the right path to tame that sneaky pattern library of yours! You can get the hardcover + eBook17 or eBook18 right away.

Happy reading!
Vitaly (@smashingmag)

Table of Contents

  1. Visualize Changes On Live Websites19
  2. Freebies: Polygonal Animal Illustrations And Textured Patterns20
  3. Drag & Drop Tricks To Grab On To21
  4. Diving Into CSS Grid Concepts22
  5. Insights Into Font Purchasing Habits23
  6. Iconic Brands, Fuzzy Memories24
  7. Marvin Visions: The New Edition Of A Classic Sci-Fi Typeface25
  8. An Illustration Tribute To Famous Guitars26
  9. Upcoming Smashing Conferences27
  10. New On Smashing Job Board28
  11. Popular Articles On Smashing29
  12. Most Recent Articles On Smashing30

311. Visualize Changes On Live Websites

Developers have DevTools if they want to tinker with live pages and visualize changes. But what about designers who aren’t that skilled with code? What if they want to see what a different typeface, different color combination or maybe a different kind of button would look like on an existing page? Well, good news, a free Chrome extension now lets you visualize changes like these, without touching any code: Visual Inspector32.

Visual Inspector33

Visual Inspector shines with a row of nifty features. It lets you inspect design properties from positioning to styling, for example, measure the distance between elements on the page, make design and text changes, adjust typography or try new color combinations — all without losing the comfort of a familiar design tool interface. And if you like the adjustments you made, you can export the page as PNG and share it with stakeholders. Nifty! (cm)

342. Freebies: Polygonal Animal Illustrations And Textured Patterns

A Tyrannosaurus Rex, a dragonfly, and a deer don’t really have much in common at first sight, do they? Or perhaps they do? Well, these particular ones are entirely made up of polygons, with subtle color gradiations giving them a magical 3D effect. Made by the folks at Blauananas, Polygonal Animals35 is a set of 20 fully editable animal illustrations depicting everything from delicate insects to mighty predators.

Polygonal Animals36

Minimalistic yet full of life, that’s probably how to best describe these little works of art. You can download the illustrations for free in EPS and high-resolution JPG formats. Now you only need a project that could use a bit of roaring — or some howling, maybe?

Another beautiful freebie comes from Simphiwe Mangole. His Awesome Patterns37 are a set of ten textured, geometrical patterns that look great on anything from illustrations and iconography to backgrounds and even printed goods. The vector patterns are available as ready to use swatches and are completely scalable, customizable and seamless. Enjoy! (cm)

383. Drag & Drop Tricks To Grab On To

There are some scenarios when good ol’ drag-and-drop is helpful — moving tasks around in a to-do app is just an example. However, you don’t have to build it from scratch — and building an accessible drag’n’drop is always a challenge. draggable39 has a large list of examples that can help you take complete control over the drag and drop behaviour.


The code base is new, and built specifically for fast DOM reordering, accessible markup and a bundle of events to grab on to. Released under the MIT license, you’re free to use the code from the library for both personal and commercial use. In case you find any issues worth sharing, contributions are welcome41 anytime. (il)

424. Diving Into CSS Grid Concepts

Nowadays, most folks who’re just starting out in the web industry may quickly feel overwhelmed when learning how to code. Especially when it comes to the CSS Grid specification which was shipped into production in March this year; developers have been busy experimenting and building with CSS Grid Layout even more ever since.

CSS Grid Playground43

For those who’re having a bit of a hard time getting their head around CSS Grid, the developers at Mozilla created a CSS Grid tutorial44 that explains all the basic terminology you need to know, how to create your first grid with CSS Grid Layout, and provides examples of everything that’s possible with only a few lines of code. Rachel Andrew also answers the most common questions and sheds lights onto CSS Grid gotchas45 that folks have stumbled upon. Mind a game? CSS Grid Garden46 takes you through 28 levels of Grid challenges. So, what’re you waiting for? No more excuses! (il)

475. Insights Into Font Purchasing Habits

The number of typefaces available out there is constantly growing. But what do designers and developers who use fonts really care about? To find out, Mary Catherine Pflug from Monotype conducted a survey that looks at font purchasing habits48 from various perspectives. The goal: To gain new insights into how aspects like discounting, pricing, marketing and foundry loyalty, among other things, influence buying behavior.

Font Purchasing Habits Survey Results49

2,600 people took the survey in May and June this year, 67% of them usually purchasing fonts for professional use. One of the main takeaways from the survey: When it comes to typeface features that buyers care about, the number of styles is at the top of the list with 85%, followed by kerning, alternates, ligatures, spacing and the number of glyphs. So if you’re designing fonts, be sure to advertise characteristics like these.

When it comes to evaluating a font to decide if it’s worth buying, almost all respondents want to see the entire character set. Typing out words and phrases in the font and seeing the ligatures and alternates are also aspects that can influence the buying decision positively. More than half of the respondents also appreciate a bit of inspiration when making their buying decisions — through images, for example. If you’re up for more valuable insights like these, be sure to take a look at the complete survey results. (cm)

506. Iconic Brands, Fuzzy Memories

Sherlock Holmes said, we “see, but do not observe”. Now what about you? Could you draw the Burger King logo from memory, for example? Or Apple’s maybe? A recent study called “Branded In Memory51” shows that the logos we are confronted with on a regular basis are far from being stamped perfectly in our memory. Instead they largely exist as fuzzy visions in our mind’s eye.

Branded In Memory52

To find out how accurately we can remember the features and colors of famous icons, the study asked 150 Americans to draw ten famous logos from memory as accurately as they could: Adidas, Apple, Walmart, IKEA, Foot Locker, Target, Domino’s, Seven Eleven, Starbucks and Burger King. 22% of the participants drew the Apple bite on the wrong side, while 16% forgot it completely. Or take Starbucks: 55% drew the mermaid but forgot her crown. 14% even associated wrong brand colors with the iconic blue and yellow IKEA logo. By the way, the level of brand engagement made no difference to the participants’ ability to accurately recall logos. Instead, it seems that the logos of giant corporations are so widespread that we don’t feel the need to have a photographic memory of them to recognize and engange with these brands. Seems like Sherlock was right. (cm)

537. Marvin Visions: The New Edition Of A Classic Sci-Fi Typeface

What comes to your mind when you hear the term “science fiction”? Time machines, parallel universes, extraterrestrial life? Certainly! But what about typography? Some typefaces just scream “sci-fi”54, right? Just think of vintage sci-fi book covers or movie posters. A new interpretation of a real sci-fi typography classic now comes from Mathieu Triay: He gave the 1969 typeface Marvin a makeover that treads the line between a modern look and a retro feel. Say hello to Marvin Visions55.

Marvin Visions56

Marvin Visions is a real workhorse, a typeface with character that is made to stand out. A geometrically perfect construction and the tight, not-touching default spacing are characteristic for it. Just like the original, Marvin Visions is uppercase only and, thus, best suited for display use. It supports most European languages, and to make it even more versatile, it also comes with Cyrillic glyphs. You can downlad Marvin Visions for free for personal use, professional licenses start at £10. And if you want to learn more about the design process, Mathieu also gives some interesting insights into how the typeface came to be. (cm)

578. An Illustration Tribute To Famous Guitars

Gibson Flying V. Jackson PC1 Phil Collen. Dean Michael Batio Rocket. If you’ve got a sweet spot for music, you might know that these are the tools of the trade that helped Jimi Hendrix and fellow guitarists make music history. But more than that. These three renowned guitar models also are only a small fraction of the 69 guitars that designer David Navarro dreams of having in his collection. A very ambitious dream, and that’s why David decided to collect them at least digitally, in an ongoing illustration project dedicated to his passion: FlatGuitars58.


For FlatGuitars, David illustrates one of his favorite guitars each week. High-performance music instruments, some of them gentle beauties with maple necks and rosewood fingerboards, others eccentric rockstars, colorful and edgy. A beautful piece of eye candy, not only for guitar lovers — and along the way, you’ll also learn something about the guitar heros who made the artefacts so famous. (cm)

609. 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 Barcelona, Spain61 (Oct 17–18). That — and we love cats, too.

SmashingConf Barcelona 201762

SmashingConf Barcelona, Spain (Oct 17–18)

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

7210. New On Smashing Job Board

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

  • Software Engineer Team Lead74 at Kickboard (Remote)
    “At Kickboard, we’re looking for an ambitious, thoughtful and experienced software engineer to lead our growing engineering team.”
  • Front End Engineer75 at StudyPortals (Eindhoven, Netherlands)
    “As Front-End Engineer, you will play an important role in enhancing and safeguarding the usability of both our student-facing websites and our internal tools.”
  • Web Developer (Back-End + Front-End + Basic Design)76 at Baymard Institute (Remote)
    “Would you like to envision and develop the web platform for a team of dedicated usability researchers conducting cutting-edge e-commerce research used by UX teams at some of the biggest brands in the world (clients include Nike, Lenovo, Etsy, etc.)?”

7711. Popular Articles On Smashing In September

  • How New Font Technologies Will Improve The Web78
    Variable fonts and parametric fonts are tools that will undeniably revolutionize responsive web type. They will allow graphic and web designers to explore shapes and sizes on their own and to tailor typefaces to their needs. Let’s learn the ins and outs of these new tools and how to take control of our typography.
  • Building Inclusive Toggle Buttons79
    On/off switches (or toggle buttons) are not all alike. Although their purpose is simple, their applications and forms vary greatly. In this post, Heydon Pickering explores what it takes to make toggle buttons inclusive.
  • Playing With Color: Vibrant Options For Apps And Websites80
    Color is one of the most powerful tools in a designer’s toolkit. Color can draw attention, set a mood, and influence the user’s emotion, perception and actions. Nick Babich summarizes a few popular techniques of using vibrant colors in web and mobile design.

8112. Most Recent Articles On Smashing

  • CSS Grid Gotchas And Stumbling Blocks82
    CSS Grid is such a different way of approaching layout that there are a number of common questions that weigh heavily on the minds of web developers. Rachel Andrew attempts to answer some of them.
  • An Overview Of The Most Common UX Design Deliverables83
    What do UX designers do on a daily basis? A lot of things! UX professionals need to communicate design ideas and research findings to a range of audiences. They use deliverables (tangible records of work that has occurred) for that purpose. This article takes a look at the most common types of deliverables.
  • Exploring Animation And Interaction Techniques With WebGL (A Case Study)84
    Getting animation right can be tricky, especially when the behavior is supposed to respond programmatically to user input. Karim Maaloul shares how he breathed life into the animated characters in his WebGL project “Moments of Happiness”.


  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 #a1
  20. 20 #a2
  21. 21 #a3
  22. 22 #a4
  23. 23 #a5
  24. 24 #a6
  25. 25 #a7
  26. 26 #a8
  27. 27 #a9
  28. 28 #a10
  29. 29 #a11
  30. 30 #a12
  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

↑ 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