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


Last Newsletter Issue #192

This newsletter issue was sent out to 225,285 recipients newsletter subscribers on Tuesday, October 17th 2017.Not all digital products are remarkable, but many digital products are designed fairly well. If we want to stand out with our products today, we need to find a signature that defines our personality, and use it consistently throughout the spectrum of our experiences. It doesn’t have to go overboard13 and create a sophisticated visual treatment or advanced campaigns; a consistent 11 degree tilting of the icons14, a lovely transition15 or playful copy16 can be just enough.

Polaroid Originals17

It’s also about a consistency in the design language you are using. Polaroid has just rebranded in Polaroid Originals18, polishing up their brand identity to establish consistency and coherence in their appearance. Even Dropbox has evolved19 into an expressive (some people would probably say “too expressive”) voice; you might not like it, but it speaks in a consistent, unique voice.

Perhaps it’s better to tell a story that a number of folks won’t like, rather than have no story to tell at all? Just one subtle thing used consistently, in a UI that does its job well. No need for grand ideas. Focus is enough. We all just need to figure out what we use our signature for, and what it actually means when we use it consistently enough.

Find your personality, and build on top of it!
From SmashingConf Barcelona,
Vitaly (@smashingmag)

Table of Contents

  1. Learning Flexbox By Doing20
  2. The Secret Recipe To Scaling21
  3. Inclusive Components, Piece By Piece22
  4. Free Fonts: Oraqle Script And Aleo23
  5. Behind The Scenes Of The Slack.com Redesign24
  6. Responsive UX Pattern Inspiration25
  7. On The Artist’s Color Palette26
  8. 24 Hours Of Inclusive Design Goodness27
  9. New On Smashing Job Board28
  10. Popular Articles On Smashing29
  11. Most Recent Articles On Smashing30

311. Learning Flexbox By Doing

Flexbox. The best way to get to grips with it (as with any new technique), is to learn the fundamentals and then get your feet wet and build lots of stuff with it. If you haven’t gotten a chance to wrap your head around Flexbox yet, Ohans Emmanuel’s “The Ultimate Guide to Flexbox32” is a great read to start your Flexbox adventures.

The Ultimate Guide to Flexbox33

The guide illustrates the Flexbox fundamentals at hand of six practical examples: the seventh example then is a little challenge to test your newly aquired skills. The examples start with using Flexbox to build a photo gallery, and slowly get more complex, so that, in the end, you’ll have learned to build cards, grids, website layouts, media objects, form elements and even a mobile app layout with Flexbox. A great base to tackle everyday UI layout challenges. (cm)

342. The Secret Recipe To Scaling

How to grow a company from zero to gazillion? Is there a secret recipe to successful scaling? Reid Hoffman, co-founder of Linkedin and Greylock Partner, has some theories of how it could work. Two examples of Reid’s advise are: “You have to be as skilled at breaking plans as you are at making them” and “If you’re not embarrassed by your first product release, you’ve released it too late”.

Masters of Scale35

To test and turn his ideas, Reid talks to famous founders. And, luckily for us, the conversations don’t happen behind closed doors! Masters of Scale36 is a podcast in which special guests are invited, such as Facebook’s Mark Zuckerberg, Evite’s Selina Tobaccowalla, Airbnb’s Brian Chesky and Crisis Text Line’s Nancy Lublin — just to name a few. A nice detail: The podcast commits to a 50-50 gender balance for guests. Interesting insights into big concepts and small hacks that have the power to change everything. (cm)

373. Inclusive Components, Piece By Piece

The web is full of interfaces which don’t consider different abilities, circumstances and preferences that users bring along. Just take a tabbed interface that isn’t accessible with the keyboard, for example, or a tooltip that doesn’t work with screen readers. To promote good, accessible interface design patterns, Heydon Pickering dedicated a blog to the topic: Inclusive Components38.

Inclusive Components39

Inclusive Components collects interface components that are easy to get wrong accessibility-wise: tabbed interfaces, theme switchers, tooltip, menus, to-do lists, toggle buttons. To help us do better, Heydon dissects the patterns, shows common pitfalls and bottlenecks, and provides tips on how to circumvent them so that everyone can use the interface no matter how they use it. It’s great to see that the awareness for inclusiveness is growing in the community and how people make their contribution to it. Sometimes, something so small such as an interface component (accessible drag & drop40, anyone?) can already make a big difference. (cm)

414. Free Fonts: Oraqle Script And Aleo

Who doesn’t love a free font? Recently, we stumbled across two real gems that are too good not to share. One of them is the brush font Oraqle Script42 designed by 50Fox. With its bold strokes and authentic brush texture, it’s bound to make your design stand out, no matter if it’s a logo, a poster or an invitation. You may use it for free in both personal and commercial projects.

Oraqle Script43

If you’re looking for something less bold and more versatile, Aleo44 could be for you. Designed by Alessio Laiso, the focus of the slab-serif font family lies on readability. It features six weights and shines with its semi-rounded details and sleek structure. Multi-language diacritics make it a good fit for non-English language projects, too. Just like Oraqle Script, Aleo is free to use in personal and commercial projects. Enjoy! (cm)

455. Behind The Scenes Of The Slack.com Redesign

There probably isn’t anything more inspiring as sneaking a peek behind the scenes of how fellow developers tackle their projects. Mina Markham, senior engineer at Slack, now shares valuable insights into the making of the recent Slack website redesign46. In a nutshell: The redesign is powered by CSS Grid and optimized for performance and accessibility.

Slack redesign47

To streamline and simplify the codebase, Slack introduced a new UI framework — with stunning effects. :spacesuit:, as the framework is called, allowed the team to reduce the CSS payload significantly, in one case by nearly 70%. For maximum flexibility in terms of layout, they didn’t force themselves into a fixed number of columns, but created CSS Grid objects for some of the common layout patterns in the design. Flexbox acts as a fallback. Clever!

To be equally adaptable as the layout itself, typography has gotten an upgrade, too, and image art direction using picture and source elements (with Picturefill as a polyfill for older browsers) makes the well-thought-out, responsive experience complete. Apart from that, a lot of small but impactful improvements to color contrast, HTML semantics, and keyboard accessibility were made to provide the best experience to every user. If you want to dive in deeper into their redesign, be sure to check out Mina’s article. Interesting takeaways are guaranteed. (cm)

486. Responsive UX Pattern Inspiration

Sometimes, great inspiration lies where you least expect it. Or would you have thought that you’d find a stellar example of a responsive calendar in a blog post about horror films? Well, we wouldn’t have neither, but the calendar that designer Rob Weychert used on his blog to visualize his annual October schedule of horror films49 is a great example of what a well-done responsive calendar could look like. Minimalistic, clear and clean.

Responsive calendar50

Another interesting design pattern that we stumbled upon rather by accident lately comes from Aegean Airlines. Their solution to a responsive table51 is simple yet efficient. It’s small details like these that remind us to keep our eyes open when browsing the web. After all, one of these lucky findings could come in handy some day. (cm)

527. On The Artist’s Color Palette

Growing up as kids, we all probably had a very intuitive, unbiased feeling of color. Pink and orange? Why not! The selection of shades was limited to the size of our pencil case anyways. Today, as designers, things have gotten more complex, of course. We’ve got thinkable shades and tints at our fingertips almost all of the time. We turn the color wheel, adjust the hex value, always on the hunt for the perfect hue. The possibilities have become endless, and that makes decisions, well, not exactly easy.

Palette53

To give you some fresh color inspiration, and maybe even help you break out of trusted patterns you usually tend to resort to, the folks at digital product studio okay bueno came up with an unusual color inspiration tool: Palette54. Starting base for Palette are contemporary artworks: street art, paintings, photography, collages. Every time you refresh the site, you’ll see a new artwork, along with the colors that have been used to create it. So if you like what you see, just copy the color to your clipboard or take a look at the entire palette in hex and RGB values. Color inspiration has never been so beautiful. (cm)

558. 24 Hours Of Inclusive Design Goodness

24 hours, 24 speakers, and all things accessibility — that’s Inclusive Design 2456. Organized by the Paciello Group, the free, 24-hour long community event is bound to take your inclusive design knowledge beyond the basics to ensure that people with disabilities get full and equal access to the web.

Inclusive Design 2457

Thursday, November 16th, will be dedicated to all things accessibility. Every full hour, #ID24 will present a new session with a new speaker sharing their accessiblity tips and best practices — among them Aaron Gustafson, Estelle Weyl, Vasilis van Gemert and Marcy Sutton, just to name a few. Topics of the talks range from inclusive markup, HTML email accessibility and testing, to aspects that usually stay unaddressed, such as VR and Internet of Things accessibility. Sounds good? All sessions will be streamed live on YouTube, so there’s no need to sign-up or register for anything. (cm)

589. New On Smashing Job Board

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

  • Back-End Developer60 at GatherContent Ltd (Remote, UK only)
    “We’re looking for an experienced, UK-based Back-end Developer who wants to be part of a remote-working, fast growing startup (we’ve been around for a few of years). You will be working as part of our Agile, 8 person team to help deliver iterations to our product.”
  • WordPress Developer & Support Specialist61 at Cornershop Creative (Remote, US Only)
    “The core responsibility for this position will be investigating, troubleshooting, and coding solutions for WordPress-based websites and applications for our non-profit and small business clients.”
  • UX Director62 at CNBC (Englewood Cliffs, NJ)
    “CNBC Digital Product & Design is seeking a Director, User Experience to join our team to drive user analysis, research, and testing of prototypes and designs across all the digital properties and platforms of CNBC.”

6310. Popular Articles On Smashing In October

6711. Most Recent Articles On Smashing

Footnotes

  1. 1 #newsletter-issues
  2. 2 https://www.smashingmagazine.com/smashing-newsletter-issue-191/
  3. 3 https://www.smashingmagazine.com/smashing-newsletter-issue-190/
  4. 4 https://www.smashingmagazine.com/smashing-newsletter-issue-189/
  5. 5 https://www.smashingmagazine.com/smashing-newsletter-issue-188/
  6. 6 https://www.smashingmagazine.com/smashing-newsletter-issue-187/
  7. 7 https://www.smashingmagazine.com/smashing-newsletter-issue-186/
  8. 8 https://www.smashingmagazine.com/smashing-newsletter-issue-185/
  9. 9 https://www.smashingmagazine.com/smashing-newsletter-issue-183/
  10. 10 https://www.smashingmagazine.com/smashing-newsletter-issue-183/
  11. 11 https://www.smashingmagazine.com/smashing-newsletter-issue-182/
  12. 12 mailto:editorial@domain.com
  13. 13 https://www.bloomberg.com/features/elon-musk-goals/
  14. 14 https://staging.smashingmagazine.com/
  15. 15 https://waaark.com/
  16. 16 http://hansbrinker.com/amsterdam/
  17. 17 https://magazine.polaroidoriginals.com/bringing-polaroid-originals-to-life/
  18. 18 https://magazine.polaroidoriginals.com/bringing-polaroid-originals-to-life/
  19. 19 http://dropbox.design/
  20. 20 #a1
  21. 21 #a2
  22. 22 #a3
  23. 23 #a4
  24. 24 #a5
  25. 25 #a6
  26. 26 #a7
  27. 27 #a8
  28. 28 #a9
  29. 29 #a10
  30. 30 #a11
  31. 31 #
  32. 32 https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676
  33. 33 https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676
  34. 34 #
  35. 35 https://mastersofscale.com/
  36. 36 https://mastersofscale.com/
  37. 37 #
  38. 38 https://inclusive-components.design/
  39. 39 https://inclusive-components.design/
  40. 40 https://a11ywins.tumblr.com/post/166008481313/dragon-drop-accessible-reordering-library
  41. 41 #
  42. 42 https://www.behance.net/gallery/57076225/ORAQLE-SCRIPT-FREE-FONT
  43. 43 https://www.behance.net/gallery/57076225/ORAQLE-SCRIPT-FREE-FONT
  44. 44 https://www.behance.net/gallery/8018673/ALEO-Free-Font-Family
  45. 45 #
  46. 46 https://slack.engineering/rebuilding-slack-com-b124c405c193
  47. 47 https://slack.engineering/rebuilding-slack-com-b124c405c193
  48. 48 #
  49. 49 http://v6.robweychert.com/blog/2017/10/robtober/
  50. 50 http://v6.robweychert.com/blog/2017/10/robtober/
  51. 51 https://en.aegeanair.com/milesandbonus/how-to-earn/all-airlines/#AEGEAN
  52. 52 #
  53. 53 https://palette.okaybueno.com/p/59ce422b3a5905064c32b753
  54. 54 https://palette.okaybueno.com/p/59ce422b3a5905064c32b753
  55. 55 #
  56. 56 https://www.inclusivedesign24.org/
  57. 57 https://www.inclusivedesign24.org/
  58. 58 #
  59. 59 http://jobs.smashingmagazine.com/
  60. 60 https://jobs.smashingmagazine.com/j/Back-end-Developer/2503655
  61. 61 https://jobs.smashingmagazine.com/j/WordPress-Developer-Support-Specialist/2503651
  62. 62 https://jobs.smashingmagazine.com/j/UX-Director-CNBC/2503649
  63. 63 #
  64. 64 https://www.smashingmagazine.com/2017/10/naming-things-css-grid-layout/
  65. 65 https://www.smashingmagazine.com/2017/10/functional-minimal-web-design/
  66. 66 https://www.smashingmagazine.com/2017/10/developer-non-disclosure-agreements/
  67. 67 #
  68. 68 https://www.smashingmagazine.com/2017/10/avoid-bias-ux-feedback/
  69. 69 https://www.smashingmagazine.com/2017/10/service-worker-single-page-application-wordpress-sites/
  70. 70 https://www.smashingmagazine.com/2017/10/large-scale-design-system-us-government/

↑ 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

    0
  2. 2

    Nice and useful!

    -1
  3. 3

    done deal.

    1
  4. 4

    Rudra Ganguly

    April 21, 2010 6:19 am

    Done

    0
  5. 5

    I’m there :)

    -3
  6. 6

    vermamaneesh

    May 17, 2010 4:32 am

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

    3
  7. 7

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

    2
  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.

    -2
    • 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.

      1
  9. 10

    Of course !! :)

    -2
  10. 11

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

    Keep it up guys :)

    0
  11. 12

    thank you for being so useful, cheers :)

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

    0
  13. 14

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

    2
  14. 15

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

    0
  15. 16

    Yay, Subscription Confirmed! :D

    3
  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.

    1
  17. 18

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

    1
  18. 19

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

    2
  19. 20

    im in here do smash me :d

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

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

    Thx!!!

    2
  22. 23

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

    -1
  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.

    1
  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!!!!….

    6
  25. 26

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

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

    6
  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.

    2
    • 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!

      Thanks.

      1
  28. 30

    Javier Gomez VE

    July 16, 2011 7:59 am

    ready!!

    1
  29. 31

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

    1
  30. 32

    Love your creativity, will follow through. Thumbs up!

    4
  31. 33

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

    2
  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

    1
  33. 35

    You guys just passed the 100k subscribers mark.
    Congratz!

    2
  34. 36

    Congratz!

    2
  35. 37

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

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

    3
  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?

    1
  38. 40

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

    Thanks in advance

    4
    • 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.

      5
  39. 42

    Werner Swiegers

    April 26, 2012 11:33 am

    Yeah, what happened to the smashing network?

    1
  40. 43

    Subscribed :)
    Got your Tweet

    3
  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.

    0
    • 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!

      2
  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

    4
  43. 47

    done :D

    0
  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

    1
  45. 49

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

    1
  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

    2
    • 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!

      0
  47. 52

    3 words, count me in.

    0
  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.

    1
  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.

    2
  50. 55

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

    6
  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

    0
  52. 61

    This is great! Thanks!

    0
  53. 62

    Fakultet Gashi

    March 18, 2016 8:02 pm

    Hi,

    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 ?

    Regards

    1
  54. 63

    Renata Jourdan

    June 26, 2016 8:16 pm

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

    -1
  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.

    0

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