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

Last Newsletter Issue #181

This newsletter issue was sent out to 229,582 newsletter subscribers on Tuesday, May 9th 2017.


Constraints. Great ideas usually come unexpectedly, and sometimes when you are forced into creating something within a limited amount of time, creativity is the only way to break out of the imposed boundaries. In design, we tend to use “mobile first” to bring a sharp focus to our design and radiate our experience from the core messages we want to communicate. We might be looking into mobile, small, portrait, slow, interlace, monochrome, coarse, non-hover first19, which is a good starting point for any bulletproof and resilient experience.

However, we need to know what exactly we are building first. One of the very first things we do when starting a new project is to explore the specifics of the content as well as the content types that we are supposed to deliver. Every interface can be broken down into content modules, responsively re-arranged, and scaled up and down according to the designer’s intent. So, why don’t we design something as seemingly obvious and trivial as error messages first? In many ways, these open the door to an understanding and purpose of what we are designing for while showing the way we frame and shape the visual language to communicate that exact purpose.

Error Messages on the new SmashingMag20
Error messages on the new Smashing Magazine21 (currently in beta), define the personality of the brand and its new site.

“Designing” the interface in a text editor forces you to fully comprehend what you are about to design, and helps formulate goals and the language of a project respectively. That’s why some companies hire professional stand-up comedians to write the first draft of copy so to communicate a message in a clever and memorable way. Once you have the tone and voice settled, you can translate it into an appropriate visual form regarding type, color, and iconography — be it mobile, desktop or both — and proceed to technicalities afterward.

It’s all about gathering precisely the right understanding of what is in front of you and finding just the right angle to address your client’s current problems. Once you have achieved this, you have a guiding rule to constrain your design and technical decisions, and that can be very beneficial to any process.

Embrace boundaries just to break out of them.
Cheers from Melbourne,
Vitaly (@smashingmag)

Table of Contents

  1. Office Design By An Office Hater22
  2. Enter The Next Level Of Front-End: SmashingConf Barcelona Is Coming!23
  3. An Interactive Map Of Typefaces24
  4. Designing With Real Content Made Easy25
  5. A Color Blindness Simulator For Sketch26
  6. Italian Graphic Design At Its Best27
  7. A Pure CSS Crossword28
  8. Upcoming Smashing Workshops29
  9. New On Smashing Job Board30
  10. Smashing Highlights (From Our Archives)31
  11. Recent Articles On Smashing Magazine32

331. Office Design By An Office Hater

Do you feel comfortable in the office you work in? Or do you feel it’s too loud, too crammed, too hot or maybe too cold? Well, you’re not alone. Office spaces are often created with representative reasons in mind, the people who work there have to adapt. But let’s be honest, open floor plans, randomly distributed work stations and meeting spots sprinkled within aren’t fostering an atmosphere in which knowledge workers can undisturbedly do what they are supposed to do: think.

Office Design By An Office Hater34

Markus Tacker, software developer, hates offices for exactly these reasons. But instead of complaining, he set out to do better and created a 3D model of his ideal office35. The key idea behind his design: To create dedicated spaces for different purposes that don’t interfere with each other and, thus, keep distraction to a minimum. The offices are designed for three people (or six if team size requires it), for example, with walls shielding the tables from the entrance to reduce visual noise. You’ll also find dedicated places for one-on-one meetings just like a social space which brings everyone together during lunch time or for a quick standup, of course. Warm colors, natural materials and plants also help cater for an inspiring atmosphere. Now who wouldn’t love to work there? (cm)

362. Enter The Next Level Of Front-End: SmashingConf Barcelona Is Coming!

The web is constantly changing. So, what could be better than learning first-hand from people who know their craft? Well, SmashingConf Barcelona37 is returning to the magical Palau de la Música Catalana once again this fall (October 17th and 18th) to boost your front-end game. Two packed days of hands-on, practical sessions by some of the most respected members of the community.

SmashingConf Barcelona38

Join us on our journey to the sunny Mediterranean seaside where we’ll explore new front-end challenges, UX strategies, and design patterns that can immediately be applied to your work. No fluff or theory, just things that have worked in real-life projects — with enough time for networking, of course. Tickets are now on sale39. See you there? (cm)

403. An Interactive Map Of Typefaces

The potential of machine learning is huge. But what can be done with it already today? The team at IDEO wanted to find out how they could use maching learning to address one of the most common challenges that designers usually face: choosing a font. And, well, their experiment was successful indeed.

Font Map41

Font Map42, as the endeavour is called, is an interactive map of more than 750 fonts that are organzied by a machine learning algorithm based on their visual characteristics. As designers usually tend to fall back on fonts they used before or start their search within categories, Font Map provides an opportunity to think outside the box and explore fonts in an entirely new, unbiased way. And in case you’ve already got a font on your mind that could make a good fit for your project, you can also use the tool to search for it and find similar alternatives. Clever! (cm)

434. Designing With Real Content Made Easy

Nothing beats designing with actual data. It caters for real-life conditions and helps you detect weak spots in your design already in the mockup phase. And thanks to Julien Perriere, doing so now became just as painfree as using the good ol’ lorem ipsum.


How? Well, Julien bundled real content conveniently together into lists45. Lists with names, lists with prices, lists of countries, addresses, credit card numbers, email subjects, and much more. In fact, whatever else you can think of, there’s probably a list for that. He describes the collection as “an App Store for fake content”, advocating that inserting the content into your mockup shouldn’t take up more time as designing it. True. One for the bookmarks. Ah, you could also use Content Generator Sketch plugin46 and Craft for InVision47. (cm)

485. A Color Blindness Simulator For Sketch

Accessibility matters and should be treated with the same attention and care as every other aspect in the design process — to make sure that everyone can get access to the same information without any hassle. The Sketch tool Stark49 now makes it easy to check for an accessibility hurdle that we oversee so easily but which affects more people as you would have thought: color blindness.


One in twelve men and one in 200 women are color blind. Our color choices, however, often aren’t made with them in mind. Contrasts are too low and content becomes hard or impossible to read. Stark simulates what your design looks like seen through the eyes of a color-blind person (eight color profiles are available to match different varieties of color blindedness) and the integrated color checker ensures that your colors, visuals and typography work hand in hand to offer a great reading experience — for everyone. Stark can be downloaded for free. (cm)

516. Italian Graphic Design At Its Best

What comes to your mind when you think of Italy? Pasta? Espresso? La dolce vita? Well, actually, Italy is the home of some real graphic design classics, household names like Massimo Vignelli, Giovanni Pintori, or Lora Lamm. The Archivio Grafica Italiana52 is dedicated to these gems and the stories behind them.

Archivio Grafico Italiana53

Scrolling through the archive feels like taking a trip back to the golden days of graphic design, when styles were simple yet the overall look bold and striking. The featured works — advertisements, posters, typefaces, logo and packaging design — date back mostly to the period between the 40s to the 70s, but you’ll also find some contemporary pieces in the collection. A great reminder that it doesn’t take sophisticated tools to create something memorable. (cm)

547. A Pure CSS Crossword

Last but not least, a nice little experiment to puzzle over. Literally. Adrian Roworth built a working crossword puzzle only with HTML and CSS55. The accompanying Codepen lets you dive right into the code.

Pure CSS Crossword56

A cool feature: The crossword checks for valid squares in real-time as you type in your answer and even highlights the clues that refer to the field that is active at that point of time. Impressive! (cm)

578. 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 Workshops58

Workshops at SmashingConf New York — June 12

Workshops at SmashingConf New York — June 15

Workshops at SmashingConf Freiburg

Public Smashing Workshops

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

749. New On Smashing Job Board

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

  • Greenhouse Studios Design Technologist76 at UConn Library (Storrs, CT)
    “The UConn Library is expanding its commitment to scholarly communications and is seeking to fill the new role of Greenhouse Studios Design Technologist with a flexible, collaborative, self-directive, and innovative individual. This is a two year, grant funded position and the successful candidate will serve as a foundational member of a team of researchers taking on a major Mellon-funded initiative to redefine scholarly communication in the digital age.”
  • Web Content Manager77 at CTA (Wageningen, Netherlands)
    “CTA seeks to recruit a highly motivated and results-oriented individual as Web Content Manager to oversee the development and publishing of well-targeted content for its corporate and programmatic web sites. The overall purpose of the post is to manage timely and quality delivery of content via CTA’s online corporate and thematic web sites and social media accounts to reach its target audiences around the world.”
  • WordPress Developer78 at Cornershop Creative (Virtual, US Only)
    “The core responsibility for this position will be building and styling WordPress-based websites and applications for our non-profit and small business clients. This position will be responsible for things like setting up WordPress custom post types, fields and taxonomies; coding HTML, CSS (SASS), and JS for custom themes; and styling & configuring pre-built WordPress themes for our clients. Additionally, this position may be responsible for developing and maintaining custom plugins.”

7910. Smashing Highlights (From Our Archives)

  • Best Practices Of Combining Typefaces80
    Creating great typeface combinations is an art, not a science. Indeed, the beauty of typography has no borders. While there are no absolute rules to follow, it is crucial that you understand and apply some best practices when combining fonts in a design. When used with diligence and attention, these principles will always yield suitable results.
  • Stop Designing Pages And Start Designing Flows81
    For designers, it’s easy to jump right into the design phase of a website before giving the user experience the consideration it deserves. Too often, we prematurely turn our focus to page design and information architecture, when we should focus on the user flows that need to be supported by our designs. It’s time to make the user flows a bigger priority in our design process.
  • When 24/7/365 Fails: Turning Off Work On Weekends82
    The web has continued evolving since its inception, as have those who have devoted their professional lives to working in and around this massive communication tool. We have had to roll with the changes, and like with any major environmental shifts, we have had to adapt.

8311. 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 #a1
  23. 23 #a2
  24. 24 #a3
  25. 25 #a4
  26. 26 #a5
  27. 27 #a6
  28. 28 #a7
  29. 29 #a8
  30. 30 #a9
  31. 31 #a10
  32. 32 #a11
  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
  94. 94

↑ 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