About The Author

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 … More about The Smashing…

Smashing Newsletter: Issue #186

Quick Summary

Table of Contents

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

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 accordions and perfect date and time pickers, 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’
  2. Three Months Left: Are You Ready For SmashingConf Barcelona?
  3. A Collection Of JavaScript Helpers
  4. Pixel-Perfect Layouts In iOS
  5. The Power Of Symbols In Sketch
  6. Drop-Downs As The UI Of Last Resort
  7. Upcoming Smashing Workshops
  8. New On Smashing Job Board
  9. Most Popular Articles In June
  10. Most Recent Articles On Smashing

[](#)1. 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 Ecosia.

Ecosia

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

[](#)2. 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 Barcelona, 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 Barcelona

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

[](#)3. 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 JavaScript list.

Awesome JavaScript

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)

[](#)4. 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 Paralayout, an open-source toolset that might just become your new best friend.

Paralayout

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

[](#)5. 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 it, all it takes are a few control symbols to help you build a UI in no time.

Power of Symbols

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)

[](#)6. 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-Downs

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

[](#)7. 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, Germany (Sep 11–12) and SmashingConf Barcelona, Spain (Oct 17–18). That — and we love cats, too.

SmashingConf Freiburg 2017

SmashingConf Freiburg, Germany (Sep 11–12)

SmashingConf Barcelona 2017

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

[](#)8. New On Smashing Job Board

        Here are some of the most recent job openings at [Smashing Jobs](http://jobs.smashingmagazine.com/):

        *   [Art Director Financial Industry](http://jobs.smashingmagazine.com/j/Digital-Art-Director-Financial-Industry-Contract/2502288) 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’ Developer at HQLabs (Hamburg)
    “Develop and maintain a comprehensive Microservice REST API for our SaaS business!”
  • Graduate UX Designer 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.” 

  *   [Building Production-Ready CSS Grid Layouts Today](https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/)  
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.

[](#)10. Most Recent Articles On Smashing

            *   [Introducing The Website Speed Test Image Analysis Tool](https://www.smashingmagazine.com/2017/07/website-speed-test-image-analysis-tool/)  
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 Markdown
    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 Picker
    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.