This newsletter issue was sent out to 227,520 recipients newsletter subscribers on Tuesday, July 18th 2017.
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.
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!
Table of Contents
- Plant 🌲🌳 When You ‘Google’4
- Three Months Left: Are You Ready For SmashingConf Barcelona?5
- Pixel-Perfect Layouts In iOS7
- The Power Of Symbols In Sketch8
- Drop-Downs As The UI Of Last Resort9
- Upcoming Smashing Workshops10
- New On Smashing Job Board11
- Most Popular Articles In June12
- 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.
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.
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)
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.
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.
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.
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, Germany (Sep 11–12)
- SmashingConf Freiburg 2017 Tickets39, Sep 11–12
- Smart Responsive UX Design Patterns40 – Vitaly Friedman (September 10)
- Modular Design41 – Alla Kholmatova (September 13)
- Modern Front-End Workflow Bootcamp42 – Umar Hansa (September 13)
- Advanced CSS Layouts With Flexbox and CSS Grids43 – Rachel Andrew (September 13)
SmashingConf Barcelona, Spain (Oct 17–18)
- SmashingConf Barcelona 2017 Tickets45, Oct 17–18
- Reaching For Particles On The Web: Modular Design46 – Alla Kholmatova (October 16)
- Lettering47 – Gemma O’Brien (October 16)
- Persuasive Design48 – Horace Dediu (October 16)
- New Front-End Adventures In Responsive Web Design49 – Vitaly Friedman (October 16)
- Concept, Create, And Sell!50 – Anton & Irene (October 19)
- Atomic Design: Process & Patterns51 – Brad Frost (October 19)
- How To Convince Clients And Colleagues The Right Way52 – Paul Boag (October 19)
- Advanced SVG Animation53 – Sarah Drasner (October 19)
Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at email@example.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!
558. New On Smashing Job Board
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.
- 1 https://dribbble.com/shots/3499449-Responsive-House
- 2 https://www.smashingmagazine.com/2017/06/designing-perfect-accordion-checklist/
- 3 https://www.smashingmagazine.com/2017/07/designing-perfect-date-time-picker/
- 4 #a1
- 5 #a2
- 6 #a3
- 7 #a4
- 8 #a5
- 9 #a6
- 10 #a7
- 11 #a8
- 12 #a9
- 13 #a10
- 14 #
- 15 https://www.ecosia.org/
- 16 https://www.ecosia.org/
- 17 http://blog.ecosia.org/tagged/trees
- 18 #
- 19 https://smashingconf.com/barcelona-2017/
- 20 https://smashingconf.com/barcelona-2017/
- 21 http://smashingconf.com/barcelona-2017/registration/
- 22 #
- 25 #
- 26 https://medium.com/square-corner-blog/introducing-paralayout-d5ac09e93fb0
- 27 https://medium.com/@andrewcouldwell/harness-the-power-of-symbols-204448baaef3
- 28 https://github.com/square/Paralayout
- 29 #
- 30 https://medium.com/@andrewcouldwell/harness-the-power-of-symbols-204448baaef3
- 31 https://medium.com/@andrewcouldwell/harness-the-power-of-symbols-204448baaef3
- 32 #
- 33 https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b53
- 34 https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b53
- 35 #
- 36 https://www.smashingconf.com
- 37 https://smashingconf.com/barcelona-2017/
- 38 https://smashingconf.com
- 39 https://shop.smashingmagazine.com/products/smashingconf-freiburg-2017
- 40 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-freiburg-2017
- 41 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-freiburg-2017
- 42 https://shop.smashingmagazine.com/products/workshop-umar-hansa-freiburg-2017
- 43 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-freiburg-2017
- 44 https://smashingconf.com/barcelona-2017/
- 45 https://smashingconf.com/barcelona-2017/
- 46 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-barcelona-2017
- 47 https://shop.smashingmagazine.com/products/workshop-gemma-obrien-barcelona-2017
- 48 https://shop.smashingmagazine.com/products/workshop-horace-dediu-barcelona-2017
- 49 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-barcelona-2017
- 50 https://shop.smashingmagazine.com/products/workshop-anton-irene-barcelona-2017
- 51 https://shop.smashingmagazine.com/products/workshop-brad-frost-barcelona-2017
- 52 https://shop.smashingmagazine.com/products/workshop-paul-boag-barcelona-2017
- 53 https://shop.smashingmagazine.com/products/workshop-sarah-drasner-barcelona-2017
- 54 mailto:firstname.lastname@example.org
- 55 #
- 56 http://jobs.smashingmagazine.com/
- 57 http://jobs.smashingmagazine.com/j/Digital-Art-Director-Financial-Industry-Contract/2502288
- 58 http://jobs.smashingmagazine.com/j/Agile-Frontend-Developer-m-w-E-Commerce/2502260
- 59 http://jobs.smashingmagazine.com/j/Graduate-UX-Designer/2501345
- 60 #
- 61 https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/
- 62 https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/
- 63 https://www.smashingmagazine.com/2017/06/guide-switching-http-https/
- 64 #
- 65 https://www.smashingmagazine.com/2017/07/website-speed-test-image-analysis-tool/
- 66 https://www.smashingmagazine.com/2017/07/pattern-libraries-in-markdown/
- 67 https://www.smashingmagazine.com/2017/07/designing-perfect-date-time-picker/