Tuesday, June 5, 2018

Smashing Newsletter #207: Accessible Cards and The Cost Of Dark Patterns

Cards are a popular web layout component, but there's no standardized way to make them accessible. Let's look into the bottom of this.Issue #207 Tue, June 5, 2018 View in the browser ๐Ÿ’จ

Smashing Newsletter

Dear Friend,

Every company is hiring, and every company is struggling with finding just the right candidate for the job. Best candidates are the ones who keep learning on their own, and the ones that have a broader overview of the tech stack and the design process. That's why our upcoming SmashingConf Toronto — taking place in just three weeks — will be looking into how designers design and how developers build live. That's right: no slides, but refactoring sessions, checkout refinements, accessibility/performance audits and live coding with Vue.js. It really doesn't get more practical than that.

SmashingConf Toronto 2018
Only three weeks left to the inaugural SmashingConf Toronto!

400 friendly attendees, 15 speakers and two full days. We provide group tickets for companies and agencies, as well as students and diversity tickets, too. Your team has been working hard, so maybe they could be rewarded with a practical conference and workshop, too? ;-) To the tickets →

I'm looking forward to meeting you all in Toronto soon!
— Vitaly (@smashingmag)


Table of Contents

1. Inclusive Card Components
2. Text Editing Techniques And Shortcuts
3. The Cost Of Dark Patterns
4. Take Your UI From Good To Great
5. Short And Sweet: An Accessible Character Counter
6. A Way Forward To Prettier Gradients
7. Generate Colorful Backgrounds With A Few Clicks
8. Upcoming In Smashing Membership
9. Upcoming Workshops With Vitaly Friedman
10. New On Smashing Job Board
11. Popular Articles This Month

1. Inclusive Card Components

Cards are a popular web layout component, but there's no unified standard to make them semantic and accessible (e.g. with a <card> element). To help you solve these problems when designing cards, Heydon Pickering explores different permutations of a simple card component and shares tips for keeping the balance between sound HTML structure and ergonomic interaction. (cm)

Inclusive Cards


2. Text Editing Techniques And Shortcuts

Typing and manipulating code often involves a lot of repetitive and—let's be honest—quite tedious tasks. So, knowing your code editor is essential if you want to streamline your workflow. To give your process a little efficiency boost, Ben Frain summarized 18 text editing techniques every front-end developer should know in one handy blog post. (cm)


SmashingConf New York (October 23-24)

We're so happy to announce the 5th SmashingConf New York ๐Ÿ‡บ๐Ÿ‡ธ taking place on October 23–24 in NYC. For this one, our speakers will cover all kinds of failures and the decisions they had to make to turn it all around. We'll look into all those shiny new things in front-end and design, from Progressive Web Apps to (web fonts) performance, CSS Secrets to Design Systems, and how to convince your colleagues and clients the right way. With Sara Soueidan, Dan Mall, Monica Dinculescu, Jason Grigsby, and many other speakers.

SmashingConf New York 2018
The early bird tickets to SmashingConf New York 2018 are now available — grab yours before it's gone!


3. The Cost Of Dark Patterns

We all know that dark patterns do a good job at tricking users into doing things they otherwise wouldn't do. An example would be when adding insurance to an order or signing up for reoccurring billing. It's beyond question that tricks like these are unethical, but they can harm your business, too.

Paul Boag now shares three reasons why you should avoid dark patterns and aggressive persuasion from a business perspective. A good read that dives deep into brand loyality, negative publicity, buyer's remorse, and how all of these intertwine. (cm)


4. Take Your UI From Good To Great

Are you tired of relying on Bootstrap but still need a helping hand when it comes to designing a UI from scratch? Adam Wathan and Steve Schoger have got your back. Their project Refactoring UI explains UI design tactics from a developer's point of view. (cm)

Refactoring UI


Our sponsor:

Online Masters in Information Design and Strategy

Ad

Learn to drive effective digital communication.

5. Short And Sweet: An Accessible Character Counter

It's the details that make the difference. Rik Schennink now introduces a small component that'll make a big difference to screenreader users: an accessible character counter.

Short and Sweet

"Short and Sweet" (as it's called) tells the user the number of characters left when a form field is focused. It was tested with VoiceOver in Safari and NVDA in Firefox, modern browsers, and IE 10+. This little helper comes without any dependencies and is easy to set up. It also updates periodically while typing. You can get a feel for how it works in this demo. (cm)


6. A Way Forward To Prettier Gradients

Gradients often don't turn out looking as smooth as you'd hope them to be. The problem is hard edges, especially where the gradient starts and ends. To help you cater for prettier results, Andreas Larsen built a little Sketch plugin: Easing Gradient.

Easing Gradients

The plugin makes your gradients as invisible as possible so that they don't interfere with text or UI that you place on top of them. You can install the plugin with Sketch Runner or download the package via GitHub. By the way, there's also a PostCSS plugin available that does the same, as well as a hand-coded solution. (cm)


7. Generate Colorful Backgrounds With A Few Clicks

A cool background graphic can draw attention to a blog post, enhance your social media profile, or simply freshen up your phone's home screen. To make creating abstract and colorful backgrounds a breeze, Moe Amaya's project Cool Backgrounds now unites the best JavaScript background generators in one place. (cm)

Cool Background


8. Upcoming In Smashing Membership

Smashing Membership helps our site keep the site alive and go ad-free. Every Member makes a difference, and get valuable content from it, too! Coming up next:

We are really grateful for the kind support of almost 900 members and growing! You can become one of us, as well. ;-)


9. Upcoming Workshops With Vitaly Friedman

๐Ÿ‡จ๐Ÿ‡ฆ Toronto, SmashingConf, June 25 – 28, 2018
๐Ÿ‡ฉ๐Ÿ‡ช Freiburg, SmashingConf, Sept. 10 – 11, 2018

A Workshop with Vitaly Friedman with some happy attendees

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!


10. New On Smashing Job Board

  • UX/UI Interaction Designer at Prototype (Dubai)
    "We are looking for an interaction designer with the passion for telling stories, push digital boundaries and translate ideas into content, user interfaces and digital experiences."
  • Senior Designer at Brainstorm Creative Resources (Bethesda, MD)
    "A Bethesda, MD design firm that has been producing great work for national audiences for two decades, is looking to engage a Senior Designer in a temporary, on-site assignment that will begin in June and continue through mid-November."
  • Product Designer at Ozmo, Inc. (Blacksburg, VA)
    "Ozmo is seeking a product designer who is smart, curious, and loves the challenge of solving problems that improve people's lives."

11. Popular Articles This Month

  • How Do You Know Your Website Is A Success?
    How can we make sure our projects and websites will be a success? Here's a really detailed checklist that's worth checking out.
  • Getting Started With CSS Layout
    We have a lot more choice when it comes to CSS Layout today — should you use Flexbox, Grid or even a float? Rachel Andrew explains the various layout methods you have to choose from in our Guide to CSS Layout.
  • The Ethics Of Persuasion
    The use of persuasive tactics can fall anywhere on a spectrum from black hat at one extreme to white hat at the other, with a large fuzzy gray area separating the two. This article will present food for thought for designers and developers to avoid crossing the ethical line to the dark side of persuasion.

The authors are: Cosima Mielke (cm), Vitaly Friedman (vf), Christiane Rosenberger (research).


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.
Follow us on Twitter Join us on Facebook



No comments:

Post a Comment