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 #186

This newsletter issue was sent out to 227,520 recipients newsletter subscribers on Tuesday, July 18th 2017.

Editorial

How would you design a perfect slider control? Not an image gallery slider, or the infamous carousel, but rather one of those tricky price range sliders, timeline sliders or mortgage calculator sliders? Too often they are just a bit too difficult to use. Require just a bit too much precision. A bit too difficult to grab and move.

Responsive Slider
Sliders can be helpful in exploring and visualizing options quickly, but not when it comes to precise input. A playful animation by Gal Shir13.

So, where do you start? First, if you have only a few input options, using a slider probably would be an overkill. Perhaps a set of radio buttons, checkboxes or buttons with pre-defined values might work better instead. A slider is definitely a good option to consider when the user’s input is supposed to encourage exploration rather than precision. To be effective though, sliders need space — the track should be wide and tall enough, and a thumb large enough, and padding for both of them generous enough.

It’s critical to ensure that everything stays in sync as slider is being used: the cursor shape, :hover, :focus and :active states, the position of the handle, reaction to click and drag, the change in values, the change of the states inside and outside of the slider area, response to keyboard controls. The feedback should always be smooth and continuous, without a noticeable lag. Finally, a good slider allows for precision if needed, so extending it by turning the chosen value into a plain input field is usually a good idea.

That’s just a quick preview of what’s expecting you tomorrow: just in case it slipped through your fingers, we’ve started a new series of articles on Smashing Magazine, highlighting all the fine microscopic details on designing perfect UI components. After a closer look at perfect accordions14 and perfect date and time pickers15, tomorrow we’ll be looking into many, many fine examples of perfect slider controls. Hopefully that’s something that will bring some ideas to your toolbox!

Happy reading!
Vitaly (@smashingmag)

Table of Contents

  1. Plant 🌲🌳  When You ‘Google’16
  2. Three Months Left: Are You Ready For SmashingConf Barcelona?17
  3. A Collection Of JavaScript Helpers18
  4. Pixel-Perfect Layouts In iOS19
  5. The Power Of Symbols In Sketch20
  6. Drop-Downs As The UI Of Last Resort21
  7. Upcoming Smashing Workshops22
  8. New On Smashing Job Board23
  9. Smashing Highlights (From Our Archives)24
  10. Recent Articles On Smashing Magazine25

261. Plant 🌲🌳 When You ‘Google’

How many times a day do you Google something? Too often to count, right? Now imagine that every time you search for something online, your search helps to plant a tree. Well, that’s no utopian dream, but reality — thanks to the search engine Ecosia27.

Ecosia28

The way it works is actually quite simple: You do your online search via Ecosia, Ecosia gets revenues from ads, and uses them to plant tress. On average, it takes about 45 searches to plant a tree, and until today more than 10,000,000 trees could be planted this way. Monthly financial reports and insights into the reforestation projects that Ecosia supports29, make the undertaking transparent. Definitely worth supporting! So why not give it a try and make Ecosia your default search engine to help reach their ambitious goal: a billion new trees until 2020. (cm)

302. Three Months Left: Are You Ready For SmashingConf Barcelona?

The web is constantly changing. So, where can you get the grips for design systems and how to optimize your websites’ performance? At SmashingConf Barcelona31, for sure! On October 17th and 18th, we’ll be returning to the magical Palau de la Música Catalana with two packed days of hands-on sessions by some of the most respected members of our industry.

SmashingConf Barcelona32

The focus of the conference will be on Design Systems, SVG techniques, performance, accessibility, and user experience, as well as some useful takeaways for those running their own small studio. Tickets are available now33. We’d love to meet you there! (cm)

343. A Collection Of JavaScript Helpers

With so many boilerplates, frameworks, and libraries, it’s hard to keep track of which one fits best to a project. To help us stay on top of things, Chencheng collected a lot of those handy browser-side libraries, resources, and other things in one handy list: the Awesome JavaScript35 list.

Awesome JavaScript36

It features everything from bundlers, to testing frameworks, error detection tools, templating engines, UI modules, boilerplates, and a lot more. If you know of a resource that is missing in the collection, feel free to contribute it. (cm)

374. Pixel-Perfect Layouts In iOS

The iOS design mock-up comes in, polished and perfect, and now you have to implement the UI in the best way possible. While you already may be cringing at the thought, we’ve got good news to reduce the headache: meet Paralayout38, an open-source toolset that might just become your new best friend.

Paralayout39

The tool is basically a set of à la carte utilities, which extends UILabel to provide custom “compact” line wrapping that eliminates the need for manual typesetting. With a single line of code, the toolset can porportionally distribute empty space between titles and buttons. It can also visually balance out any text and space provided, and takes good care of pixel-level rounding. You can read more about it on GitHub40. (il)

415. The Power Of Symbols In Sketch

Organization is key, right? This holds true for almost everything in life, including getting work done on time. If you work a lot with Sketch, you’re probably relieved and grateful for the many ways to keep your work organized. As a matter of fact, as Andrew Couldwell puts it42, all it takes are a few control symbols to help you build a UI in no time.

Power of Symbols43

Symbols are one of the best methods in Sketch that can help you save time. All you’ll only ever need to add are a few control symbols to an artboard, and quickly switch between all component types and states. There’s even a free Sketch file which you can download at the end of the article, so you can get started right away. Handy! (il)

446. Drop-Downs As The UI Of Last Resort

Should drop-down be the UI of last resort? In many ways, yes. A drop-down might seem like an obvious enough pattern: we tap on an icon, get a list of options, choose an option, done. However, a set of radio buttons or buttons would work better if there are only few options available. Longer drop-downs, such as a country selector can be a nightmare to scan through, especially on mobile where keyboard search is usually not available.

Drop-Downs45

And then there are phone drop-downs, birthday drop-downs, salutation drop-downs — all cases where a regular text input or a set of buttons might be a better alternative. A drop-down makes sense with plenty of available options, but it has to be complimented with an autosuggest filter as well. In his article, Dropdown alternatives for better (mobile) forms46, Zoltan Kollin highlights some of the common issues and solutions for better data input. Good suggestions which will make you reconsider using that fancy drop-down in your interface or not. (vf)

477. Upcoming Smashing Conferences

We create practical, hands-on conferences highlighting techniques, strategies and design patterns used in real-life products by experienced designers and developers. No fluff, no theory: just 2 days packed with practical front-end and UX techniques. Coming up: SmashingConf Freiburg, Germany48 (Sep 11–12) and SmashingConf Barcelona, Spain49 (Oct 17–18). That — and we love cats, too.

SmashingConf Freiburg 201750

SmashingConf Freiburg, Germany (Sep 11–12)

SmashingConf Barcelona 201756

SmashingConf Barcelona, Spain (Oct 17–18)

Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com66 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!

678. New On Smashing Job Board

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

  • Art Director Financial Industry69 at Logic State LLC (New York)
    “We have a 6-month contract open for a creative director as part of a Web application initiative at a major financial firm. The candidate must be available locally to work on the client’s premises in Manhattan.”
  • Backend / Microservices’ Developer70 at HQLabs (Hamburg)
    “Develop and maintain a comprehensive Microservice REST API for our SaaS business!”
  • Graduate UX Designer71 at Booking.com (Amsterdam)
    “As a Graduate UX Designer at one of the world’s biggest e-commerce websites you’ll have unparalleled freedom to make a big impact on our business. Your ideas and analyses will find their way into the hands of millions of our users, and you’ll learn quickly about user behavior at scale.”

729. Most Popular Articles In June

  • Building Production-Ready CSS Grid Layouts Today73

    Today, we are in the early stages of such a revolutionary shift, brought about by CSS Grid Layout. Much of what we know about web layouts is effectively rendered obsolete by this new layout module, and in their place we find new possibilities, limitations and best practices that will take us into the next era of web design.
  • Designing Efficient Web Forms: On Structure, Inputs, Labels And Actions74

    Forms are often considered the final step in the journey of completing their goals. Forms are just a means to an end. Users should be able to complete them quickly and without confusion.
  • A Complete Guide To Switching From HTTP To HTTPS75

    Setting up HTTPS can be a bit intimidating for the inexperienced user — it takes many steps with different parties, it requires specific knowledge of encryption and server configuration, and it sounds complicated in general.

7610. Most Recent Articles On Smashing

  • Introducing The Website Speed Test Image Analysis Tool77
    Enter Website Speed Test, a free and drop-dead-simple tool that lets you measure, diagnose and (crucially) communicate about the image performance of any website. Better yet, it’s built on top of, and integrated in, Pat Meenan’s WebPagetest.
  • Building Pattern Libraries With Shadow DOM In Markdown78
    Heydon Pickeing will be sharing a method for easily including code demos in Markdown, with the help of shortcodes and shadow DOM encapsulation.
  • Designing The Perfect Date And Time Picker79
    Not every date picker fits every interface. Quite often it’s just a bit too tedious and annoying to specify that one date, and too often it produces irrelevant results or even a zero-results page, although just a few minor refinements would make it much easier to use.

Footnotes

  1. 1 #newsletter-issues
  2. 2 https://www.smashingmagazine.com/smashing-newsletter-issue-185/
  3. 3 https://www.smashingmagazine.com/smashing-newsletter-issue-183/
  4. 4 https://www.smashingmagazine.com/smashing-newsletter-issue-183/
  5. 5 https://www.smashingmagazine.com/smashing-newsletter-issue-182/
  6. 6 https://www.smashingmagazine.com/smashing-newsletter-issue-181/
  7. 7 https://www.smashingmagazine.com/smashing-newsletter-issue-180/
  8. 8 https://www.smashingmagazine.com/smashing-newsletter-issue-179/
  9. 9 https://www.smashingmagazine.com/smashing-newsletter-issue-178/
  10. 10 https://www.smashingmagazine.com/smashing-newsletter-issue-177/
  11. 11 https://www.smashingmagazine.com/smashing-newsletter-issue-176/
  12. 12 mailto:editorial@domain.com
  13. 13 https://dribbble.com/shots/3499449-Responsive-House
  14. 14 https://www.smashingmagazine.com/2017/06/designing-perfect-accordion-checklist/
  15. 15 https://www.smashingmagazine.com/2017/07/designing-perfect-date-time-picker/
  16. 16 #a1
  17. 17 #a2
  18. 18 #a3
  19. 19 #a4
  20. 20 #a5
  21. 21 #a6
  22. 22 #a7
  23. 23 #a8
  24. 24 #a9
  25. 25 #a10
  26. 26 #
  27. 27 https://www.ecosia.org/
  28. 28 https://www.ecosia.org/
  29. 29 http://blog.ecosia.org/tagged/trees
  30. 30 #
  31. 31 https://smashingconf.com/barcelona-2017/
  32. 32 https://smashingconf.com/barcelona-2017/
  33. 33 http://smashingconf.com/barcelona-2017/registration/
  34. 34 #
  35. 35 https://github.com/sorrycc/awesome-javascript
  36. 36 https://github.com/sorrycc/awesome-javascript
  37. 37 #
  38. 38 https://medium.com/square-corner-blog/introducing-paralayout-d5ac09e93fb0
  39. 39 https://medium.com/@andrewcouldwell/harness-the-power-of-symbols-204448baaef3
  40. 40 https://github.com/square/Paralayout
  41. 41 #
  42. 42 https://medium.com/@andrewcouldwell/harness-the-power-of-symbols-204448baaef3
  43. 43 https://medium.com/@andrewcouldwell/harness-the-power-of-symbols-204448baaef3
  44. 44 #
  45. 45 https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b53
  46. 46 https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b53
  47. 47 #
  48. 48 https://www.smashingconf.com
  49. 49 https://smashingconf.com/barcelona-2017/
  50. 50 https://smashingconf.com
  51. 51 https://shop.smashingmagazine.com/products/smashingconf-freiburg-2017
  52. 52 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-freiburg-2017
  53. 53 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-freiburg-2017
  54. 54 https://shop.smashingmagazine.com/products/workshop-umar-hansa-freiburg-2017
  55. 55 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-freiburg-2017
  56. 56 https://smashingconf.com/barcelona-2017/
  57. 57 https://smashingconf.com/barcelona-2017/
  58. 58 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-barcelona-2017
  59. 59 https://shop.smashingmagazine.com/products/workshop-gemma-obrien-barcelona-2017
  60. 60 https://shop.smashingmagazine.com/products/workshop-horace-dediu-barcelona-2017
  61. 61 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-barcelona-2017
  62. 62 https://shop.smashingmagazine.com/products/workshop-anton-irene-barcelona-2017
  63. 63 https://shop.smashingmagazine.com/products/workshop-brad-frost-barcelona-2017
  64. 64 https://shop.smashingmagazine.com/products/workshop-paul-boag-barcelona-2017
  65. 65 https://shop.smashingmagazine.com/products/workshop-sarah-drasner-barcelona-2017
  66. 66 mailto:vitaly@smashingconf.com
  67. 67 #
  68. 68 http://jobs.smashingmagazine.com/
  69. 69 http://jobs.smashingmagazine.com/j/Digital-Art-Director-Financial-Industry-Contract/2502288
  70. 70 http://jobs.smashingmagazine.com/j/Agile-Frontend-Developer-m-w-E-Commerce/2502260
  71. 71 http://jobs.smashingmagazine.com/j/Graduate-UX-Designer/2501345
  72. 72 #
  73. 73 https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
  74. 74 https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/
  75. 75 https://www.smashingmagazine.com/2017/06/guide-switching-http-https/
  76. 76 #
  77. 77 https://www.smashingmagazine.com/2017/07/website-speed-test-image-analysis-tool/
  78. 78 https://www.smashingmagazine.com/2017/07/pattern-libraries-in-markdown/
  79. 79 https://www.smashingmagazine.com/2017/07/designing-perfect-date-time-picker/

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

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

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

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

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

      2
  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

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

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

    -2

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