Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Smashing 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 Shir1.

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 accordions2 and perfect date and time pickers3, 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’4
  2. Three Months Left: Are You Ready For SmashingConf Barcelona?5
  3. A Collection Of JavaScript Helpers6
  4. Pixel-Perfect Layouts In iOS7
  5. The Power Of Symbols In Sketch8
  6. Drop-Downs As The UI Of Last Resort9
  7. Upcoming Smashing Workshops10
  8. New On Smashing Job Board11
  9. Most Popular Articles In June12
  10. Most Recent Articles On Smashing13

141. 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 Ecosia15.

Ecosia16

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 supports17, 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)

182. 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 Barcelona19, 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 Barcelona20

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 now21. We’d love to meet you there! (cm)

223. 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 JavaScript23 list.

Awesome JavaScript24

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)

254. 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 Paralayout26, an open-source toolset that might just become your new best friend.

Paralayout27

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 GitHub28. (il)

295. 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 it30, all it takes are a few control symbols to help you build a UI in no time.

Power of Symbols31

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)

326. 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-Downs33

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) forms34, 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)

357. 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, Germany36 (Sep 11–12) and SmashingConf Barcelona, Spain37 (Oct 17–18). That — and we love cats, too.

SmashingConf Freiburg 201738

SmashingConf Freiburg, Germany (Sep 11–12)

SmashingConf Barcelona 201744

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

558. New On Smashing Job Board

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

  • Art Director Financial Industry57 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’ Developer58 at HQLabs (Hamburg)
    “Develop and maintain a comprehensive Microservice REST API for our SaaS business!”
  • Graduate UX Designer59 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.”

609. Most Popular Articles In June

  • Building Production-Ready CSS Grid Layouts Today61

    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 Actions62

    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 HTTPS63

    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.

6410. Most Recent Articles On Smashing

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

Comments are closed.

↑ Back to top