Designing for dyslexia: a style guide to make reading easy for everyone
The British Dyslexia Association has put out guidelines that aim to encourage designers, businesses and teachers to consider those who struggle with reading and writing when making typeface, colour, spacing and imagery choices.
ux  ux--content  wd  wd-accessibility  wd-typography 
2 days ago
Combobo
Combination Box built with accessibility in mind.
wd  wd-accessibility  wd-forms--select 
2 days ago
How to display a "new version available" of your Progressive Web App
Have you ever been on a website and noticed a popup notification that suggests that there is a new version of the site available? I recently visited Google’s Inbox and noticed a notification a little like the image below.
wd  wd-pwa 
2 days ago
The Perception of Control | UX Booth
Every day, at the street by my house, I press the “walk” button, and I wait. Each time, as soon as the traffic cycle is complete, I get the walk signal. On a whim, one day I didn’t press the button… but at the end of the traffic cycle, I got the walk signal. The button I press every day has absolutely no impact on when the light will change. Is it still worth having the button?
ux 
4 days ago
Functions to Add ARIA to Tables and Lists | Adrian Roselli
I am not writing a WordPress plug-in. I have, however, written a couple vanilla JavaScript functions that you can drop into your site. They might benefit from some optimizations, and how you call the functions is up to you (and your chosen platform).
wd  wd-accessibility  wd-accessibility--aria  wd-tables  wd-js 
4 days ago
How I structure my JavaScript plugins | Go Make Things
There’s no one right answer here, but today I wanted to share how I structure most of my scripts and plugins.
wd  wd-js  wd-js--vanilla 
9 days ago
A Strategy Guide To CSS Custom Properties — Smashing Magazine
CSS Custom Properties (sometimes known as ‘CSS variables’) are now supported in all modern browsers, and people are starting to use them in production. This is great, but they’re different from variables in preprocessors, and I’ve already seen many examples of people using them without considering what advantages they offer.
wd  wd-css  wd-css--variables  wd-src--smashing 
12 days ago
I Used The Web For A Day With JavaScript Turned Off — Smashing Magazine
This article is part of a series in which I attempt to use the web under various constraints, representing a given demographic of user. I hope to raise the profile of difficulties faced by real people, which are avoidable if we design and develop in a way that is sympathetic to their needs. This week, I’m disabling JavaScript.
wd  wd-performance  wd-src--smashing 
17 days ago
The a11y Monthly: Making modals accessible • Yoast
Modals are a pretty common interface on the Web. Developers and designers might give them different names: lightbox, modal window, dialog, overlay… but they’re basically the same thing. A modal is a window that appears on top of the page overlaying other content. In this post, I’ll try to explain what needs to be done to make modals accessible.
wd  wd-accessibility  wd-accessibility--interactive  wd-interface--modal 
17 days ago
Quantitative User-Research Methodologies: An Overview
Do you need numerical data about your product’s user experience, but you aren’t sure where to start? The first step is choosing the right tool. Check out this list of the most popular types of quantitative methods.
ux 
17 days ago
Display: Contents Is Not a CSS Reset | Adrian Roselli
CSS resets are a collection of CSS styles that undo the default browser styling of many or most HTML elements. Recently I have seen cases of developers using display: contents on lists and headings to remove the margins and padding, and generally to visually do what a CSS reset might do. Essentially, they are using display: contents as a quick and dirty CSS reset.
wd  wd-accessibility  wd-css 
22 days ago
Finger-friendly numerical inputs with `inputmode` | CSS-Tricks
Forms are often a nightmare on mobile. We can make the process as pain-free as possible by reacting to context. Input fields that expect numerical values should have a numerical UI. Bringing up a number keyboard on small screens is easy on most platforms — just use a <input type="number">.
wd  wd-forms  wd-forms--input  wd-input  wd-input--keyboard  wd-src--css-tricks 
23 days ago
Top 10 Design Mistakes in the Unsubscribe Experience
Summary: Canceling email subscriptions should be a one-click process, with no additional hurdles for users.
ux  wd  wd-email  wd-src--nn-group 
23 days ago
Measuring Websites With Mobile-First Optimization Tools — Smashing Magazine
Performance on mobile can be particularly challenging: underpowered devices, slow networks, and poor connections are some of those challenges. With more and more users migrating to mobile, the rewards for mobile optimization are great. Most workflows have already adopted mobile-first design and development strategies, and it’s time to apply a similar mindset to performance.
wd  wd-performance  wd-src--smashing 
23 days ago
Amazon Internet Browser: what is it? - mobiForge
The latest web browser to hit your phone comes from Amazon, and it’s called Internet. It follows the recent trend of “lite” versions of products aimed at emerging markets and patchy networks—India in this case—and joins other “lite” products like Google Maps Go, and Facebook Lite, that offer slimmed down versions for these markets.
wd  wd-browser 
23 days ago
CSS Grid: More flexibility with minmax() by Michelle Barker on CodePen
One of the things that can put people off trying out CSS Grid is there’s so much choice when it comes to defining your grid layout and placing your content, so it can be hard to know until you’ve been using it a while which is going to to be the best option for a particular layout. It’s only recently that I got around to fully appreciating the power of minmax() and how it can be such a huge helper when coding many of the layouts I’m required to build, so I’d like to share one way in which it’s been beneficial to me.
wd  wd-css  wd-css--grid 
23 days ago
A Guide To The State Of Print Stylesheets In 2018 — Smashing Magazine
Today, I’d like to return to a subject that has already been covered in Smashing Magazine in the past — the topic of the print stylesheet. In this case, I am talking about printing pages directly from the browser. It’s an experience that can lead to frustration with enormous images (and even advertising) being printed out. Just sometimes, however, it adds a little bit of delight when a nicely optimized page comes out of the printer using a minimum of ink and paper and ensuring that everything is easy to read.
wd  wd-css  wd-src--smashing 
25 days ago
The Fast and Slow of Design
"Move fast, break things. Fail forward. Fail fast. Always be shipping."
These idioms are all around us in the tech industry. Establishing themselves in small, garage-band startups, they are now deeply entrenched in working cultures of even the most traditional publicly listed companies.
design  ux 
26 days ago
How to count & pay down design debt – Poll Everywhere – Medium
Design debt is easy to see. You see it in apps with six different button styles, websites with 4 different modals, or microcopy that is obviously written by different people.
design  ux  ux--patterns 
26 days ago
Working Memory and External Memory
Human working memory holds information relevant to the current task; when tasks are too hard, users should be able to offload some of the working-memory burden to user-interface features that can serve as an external memory.
ux  wd  wd-src--nn-group 
26 days ago
Using pseudo-elements with CSS Grid by Michelle Barker on CodePen
This week I’ve had a couple of scenarios where I’ve needed to build a hero section with a full-width image, a large heading and a translucent sidebar overlaying the image – where the sidebar bleeds to the edge of the viewport but (crucially) the content of the sidebar aligns to what I like to call the “wrapper” grid columns – i.e. the columns of the grid where we actually want to place our content. (I have a whole other post almost written on this!)
wd  wd-css--grid  wd-css--pseudo 
28 days ago
gridtoflex.com
CSS grid is AMAZING! However, if you need to support users of IE11 and below, or Edge 15 and below, grid won't really work as you expect (more info here). This site is a solution for you so you can start to progressively enhance without fear! Things to Note: CSS grid allows for specified styling using the vertical area as well as horizontal. Flexbox doesn't allow for this, so we'll be using fixed heights in these examples.
wd  wd-css  wd-css--grid  wd-grid 
28 days ago
How to Create Interfaces that Benefit All: Accessibility Testing and Inclusive Design Principles
Ian Macrae is a man with a visual impairment. His story appeared in The Guardian in 2015. Ian uses VoiceOver software to navigate through the web in a way unlike most people do. The voice assistant basically “reads” interfaces and allows him to interact with the web sight unseen.
ux  ux--patterns  wd  wd-accessibility 
28 days ago
xx45/dayjs: ⏰Fast 2KB immutable date library alternative to Moment.js with the same modern API
Day.js is a minimalist JavaScript library for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js.
wd  wd-js  wd-uses--github  wd-uses--npm 
4 weeks ago
The Best Place for Error Messages on Forms
Where are you placing the error messages on your form? If they’re not placed where users expect to see them, you could jeopardize their capability to complete your form. When users make mistakes, they need to understand what those mistakes are so they can correct them and re-submit the form. They want to complete your form, but if doing so takes too much effort they’ll change their minds.
ux  ux--patterns  wd  wd-forms  wd-forms--validation 
4 weeks ago
Writing Accessible Web Content | Sparkbox | Web Design and Development
There are many things to take into account when creating an accessible web. Caralyn shares her tips for writing accessible content.
wd  wd-accessibility  ux  ux--content 
4 weeks ago
sindresorhus/slugify: Slugify a string
Slugify a string. Useful for URLs, filenames, and IDs.
wd  wd-js  wd-uses--github  wd-uses--npm 
4 weeks ago
This web form is preventing online shopping from taking off in many African markets — Quartz
I have attended several tech events where they invite so-called gurus and experts to explain the digital landscape in Africa, but I have never been satisfied with any of their answers as to why e-commerce has not caught on.
wd  wd-localisation 
4 weeks ago
Traversing the DOM with JavaScript | Zell Liew
A good JavaScript developer needs to know how to traverse the DOM—it’s the act of selecting an element from another element.
wd  wd-js  wd-js--vanilla 
5 weeks ago
hotkeys.js - A robust Javascript library for capturing keyboard input.
HotKeys.js is an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint (~3kb) (gzipped: 1.73kb), and has no dependencies. It should not interfere with any JavaScript libraries or frameworks.
wd  wd-js  wd-input--keyboard  wd-uses--github  wd-uses--npm 
5 weeks ago
Delighters
Add CSS animations to delight users as they scroll down.
wd  wd-css  wd-animation  wd-interface--scrolling  wd-uses--github 
5 weeks ago
Introduction - Purgecss
​Purgecss is a tool to remove unused CSS. It can be used as part of your development workflow. Purgecss comes with a JavaScript API, a CLI, and plugins for popular build tools.
wd  wd-css  wd-performance  wd-buildtools--grunt  wd-buildtools--gulp  wd-buildtools--webpack 
5 weeks ago
Cutting the Mustard with CSS Media Queries — SitePoint
Cutting the Mustard is a term coined by Tom Maslen at the BBC. The method uses JavaScript that checks for browser capabilities before loading further CSS and JavaScript to give the user an ‘enhanced’ experience, otherwise the browser will only load the files necessary for a ‘core’ experience.
wd  wd-css  wd-responsive  wd-performance  wd-src--sitepoint 
5 weeks ago
Super-powered layouts with CSS Variables + CSS Grid by Michelle Barker on CodePen
We’ve been using CSS Grid in production at Mud for a few months now and I absolutely love the flexibility it’s giving me when coding layout. For so long we've got along without a true layout solution for the web - hacking it with floats and flexbox was just how we did things. But now, I honestly cannot imagine life without Grid!
wd  wd-css  wd-css--grid  wd-grid 
6 weeks ago
Fonts for Complex Data | News, Notes & Observations | Hoefler & Co.
Retail displays, packaged goods, financial reports and apps all present readers with a dizzying array of data. Here are a few ways to make quick work of their long lists, tiny annotations, and mighty stacks of numbers.
data  design  design--typography 
6 weeks ago
Data Tables
The first thing I was told when I embarked on learning web standards about twelve years ago was, "don't use tables for layout." This was sound advice in spirit, but not very well qualified. As a result, there have been some unfortunate interpretations. Using table markup inevitably results in a visual layout, which has led some to abandon HTML tables altogether. Tables: bad.
wd  wd-accessibility  wd-accessibility--aria  wd-accessibility--interactive  wd-tables  wd-tables--sorting 
7 weeks ago
Contextual styling with custom properties
Something I’ve been wanting for a long time, define different regions like a footer section, or side bar and not have to deal with all the contextual styling hassle. A.k.a. “Now that this button is used on a dark background, the button needs to change its colors too. Where should the styles live?”. Here an old post about struggling with contextual styling.
wd  wd-css  wd-css--variables 
7 weeks ago
How display: contents; Works
As I frequently mention, every element in the document tree is a rectangular box. Broadly speaking, this "rectangular box" consists of two sections. First we have the actual box, which consists of the border, padding, and margin areas. Second, we have the contents of the box; the content area.
wd  wd-css  wd-src--bitsofcode 
8 weeks ago
Cropping Away Negative Impacts of Line Height – EightShapes – Medium
Every web font includes whitespace above and below the text, making it difficult to render space in UI components systematically. I created the Text Crop Tool to empower designers and developers to remove this whitespace and more accurately render their components. This is how I did it.
wd  wd-typography  wd-sass  wd-src--medium 
8 weeks ago
Accessible Autosuggest Dropdown
This is a heavily modified version of an accessible autosuggest from Intopia's autosuggest article and code example by Adem Cifcioglu.
wd  wd-accessibility  wd-accessibility--interactive  wd-forms  wd-forms--input  wd-interface--autocomplete 
9 weeks ago
Tips For Conducting Usability Studies With Participants With Disabilities — Smashing Magazine
Over the last few years, I ran several usability studies with participants with various disabilities. I thought it would help others if I shared some of my experiences.
wd  wd-accessibility  ux  ux--testing 
9 weeks ago
Five Models for Making Sense of Complex Systems – Christina Wodtke – Medium
In one of the classes I teach at CCA, students were confused by mental models, conceptual models, concept maps, etc. I ended up drawing a taxonomy for models on the whiteboard, and it may help others. This post is for them first, then you!
design 
9 weeks ago
w descriptors and sizes: Under the hood / Observable
If you’re not familiar with srcset, w descriptors, and/or sizes, the best, shortest guide to what you should put where when you’re just trying to put a dang image on a friggin’ website might be this one, from Jake Archibald. Go! Read it!
wd  wd-images  wd-images--responsive 
9 weeks ago
Accessibility and Performance | MarcySutton.com
When pages heavy with content and ads load in web browsers, such as CNN.com (Youtube video), the experience can be very clunky and unpleasant for all users; not to mention how much of their monthly allotted data is used up loading all those resources. For screen reader users, it’s exacerbated: visual content streams in while an auditory progress counter struggles to reach 100% so the page can be consumed.
wd  wd-accessibility  wd-performance 
9 weeks ago
How do you design a design doc? – Dropbox Design – Medium
When you think about design, the word “documentation” probably isn’t the first thing that comes to mind. But documentation is a key part of the design process for many teams.
design  design--patterns  wd  wd-styleguide 
10 weeks ago
Questions To Ask Before Building a Component Library | Chromatic
At this point it feels safe to say that component-based design and development is here to stay. Gone are the days of designing and building pages in isolation. Instead, we're building collections of components that all follow a shared design system and can be used anywhere on any page. This is increasing the consistency and predictability of our user experiences. It's also speeding up our development.
wd  wd-styleguide 
10 weeks ago
Accessible Landmarks | scottohara.me
Landmarks can be useful to screen reader users as they can be used to help orient a user to, and easily navigate, an appropriately structured web page or application screen.
wd  wd-accessibility  wd-accessibility--aria 
10 weeks ago
Adactio: Journal—Minimal viable service worker
I really, really like service workers. They’re one of those technologies that have such clear benefits to users that it seems like a no-brainer to add a service worker to just about any website. The thing is, every website is different. So the service worker strategy for every website needs to be different too. Still, I was wondering if it would be possible to create a service worker script that would work for most websites. Here’s the script I came up with.
wd  wd-js  wd-js--service-workers  wd-src--adactio 
10 weeks ago
Short note on what CSS display properties do to table semantics | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)
The CSS display properties are powerful. You can change the visual display of elements to match your desired styling, but sometimes doing this can have an unintended effect of nuking the semantics of the elements, as conveyed to screen reading software, in the browser accessibility tree. Screen readers and other assistive tech, in general, do not have direct access to the HTML DOM, they are provided access to a subset of information in the HTML DOM via Accessibility APIs. Sometimes what an element represents in the HTML DOM is not how it is represented in the accessibility tree.
wd  wd-accessibility  wd-css  wd-html  wd-html--semantics  wd-tables  wd-tables--responsive  wd-src--paciello-group 
11 weeks ago
Consolidating Design Systems – EightShapes – Medium
An enterprise usually has many concurrent design systems. Separate groups chart paths loosely aware or even willfully ignorant of what others do. Many systems isn’t necessarily bad. Different programs may support different experiences and teams with different tools, and that’s ok.
design  ux  ux--patterns 
11 weeks ago
Notifications
The key difference between a website and a web app is… highly contested. On the whole, I'd say the more links there are, the more site-like, and the more buttons, the more app-like. If it includes a page with a form, it's probably a kind of site. If it essentially is a form, you might call it an app. In any case, your web 'product' is really just interactive content, consumed and transmitted by an app we call a 'browser'.
wd  wd-accessibility  wd-accessibility--aria  wd-accessibility--interactive  wd-interface--toast 
11 weeks ago
Comparison Table of WCAG 2.0 to Existing 508 Standards - United States Access Board
The WCAG 2.0 Success Criteria are more explicit than the existing 508 Standards. Careful attention has been given to ensure that the Success Criteria are written as objectively testable requirements. In addition, unlike the existing 508 Standards, WCAG 2.0 is written in a way that is technology neutral and is therefore directly applicable to a wide range of content types and formats.
wd  wd-accessibility 
february 2018
Everything you need to know about CSS Variables – freeCodeCamp
Most programming languages have support for variables. But sadly, CSS has lacked support for native variables from the very beginning. You write CSS? Then no variables for you. Well, except if you were using a preprocessor like Sass. Preprocessors like Sass sell the use of variables as a big add-on. A reason to try them. And you know what? It’s a pretty darn good reason. Well the web is moving fast. And I’m glad to report that CSS now finally supports variables.
wd  wd-css  wd-css--variables  wd-src--medium 
february 2018
Parallax scrolling with CSS variables | basicScroll
basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want.
wd  wd-css  wd-css--variables  wd-interface  wd-interface--scrolling  wd-uses--github  wd-uses--bower  wd-uses--npm 
february 2018
Why the vanilla JS matches() method won't work with event listeners and nested links | Go Make Things
I often use event delegation with click event listeners in my scripts, with the matches() method to check which element was clicked.
wd  wd-js  wd-js--vanilla 
february 2018
Writing a Good Research Question - Center for Innovation in Research and Teaching
The following unit will discuss the basics of how to develop a good research questions and will provide examples of well-designed questions.
ux 
february 2018
Writing Research Questions | Research Rundowns
This review is a collection of views and advice on composing research questions from problem statements. It mostly reads as a list of tips and suggestions.
ux 
february 2018
Default function arguments with vanilla JavaScript | Go Make Things
Yesterday, we looked at two different approaches for passing arguments into a function. Today, let’s look at how to set default values for your arguments.
wd  wd-js  wd-js--vanilla 
february 2018
Toast! Is it accessible? - Maxability
A toast is a non modal that appears on the screen for few seconds and auto expires. The toast shares an alert containing a message to the user. For example: In an email client, once you hit the send button the toast can display a message that says “Sending message” and disappears once it is sent. This message pops only for few seconds and does not require user interaction.
wd  wd-accessibility  wd-accessibility--interactive  wd-interface  wd-interface--toast 
february 2018
(More) Tips for Building Your Sketch UI Library – The Customer Service Blog By Help Scout – Medium
I recently read this excellent article by Hudl on their tips for building usable Sketch Libraries — and was relieved to find that I’d been following a similar path in creating our UI Libraries over at Help Scout. So for those of you deep in the trenches, I wanted to share a couple of additional things that have made my life immeasurably easier when creating and maintaining our shared components.
design  design--sketch 
february 2018
wix/rawss: Generic CSS polyfill framework, with a CSS variables implementation
A generic framework for polyfilling CSS Aiming for a fully functional polyfill for CSS variable
wd  wd-css  wd-css--variables  wd-js  wd-polyfill  wd-uses--github 
february 2018
How to not break your site with Service Workers · loxodrome.io - James Milner's personal blog
Over the past few months I’ve been dabbling with Progressive Web Apps (PWA), but earlier this month I was lucky enough to be invited onto a PWA training course at Google. The course was fantastic and it was good to get a more granular understanding of the underpinning technologies. Coincidently, you may have seen (very) recent announcements about support for Service Workers in Edge and also support in preview for Safari. This feels like a great time to use my recent experience at work turning our web app into a PWA and my learnings from the course to explain how to avoid getting into some very tricky situations.
wd  wd-performance  wd-performance--offline  wd-js  wd-js--service-workers 
february 2018
Easing Gradients
Linear gradients often have hard edges where they start and/or end. We can avoid those by controlling the color mix with easing functions.
wd  wd-css  wd-css--gradient 
february 2018
A beginner’s guide to Service Workers – Samsung Internet Developers – Medium
This guide is aimed at people who have some experience with HTML, CSS, and JavaScript. It covers the basics of service workers and how to use them without going into too much detail, with the aim of letting you build a prototype as quickly as possible.
wd  wd-performance  wd-performance--offline  wd-js  wd-js--service-workers  wd-src--medium 
february 2018
aria-label is a xenophobe | HeydonWorks
Internationalization is a major component of inclusive design. But with automatic translation features provided by Google and Microsoft, it’s mercifully simple to support — at least at the most basic level. Just include a default language for the page, like lang="en", on the <html> element to give translation services a helping hand.
wd  wd-accessibility  wd-accessibility--aria  wd-html  wd-html--semantics  wd-localisation 
february 2018
Let’s make multi-colored icons with SVG symbols and CSS variables
Long gone are the days of using images and CSS sprites to make icons for the web. With the explosion of web fonts, icon fonts have become the number one solution for displaying icons in your web projects.
wd  wd-images  wd-images--svg  wd-images--icon  wd-css  wd-css--variables  wd-src--medium 
february 2018
Why Japanese Web Design Is (Still) the Way It Is
Anybody who visits Japanese websites will be struck by their loud banners, dense text, multiple columns, lots of tiny images, and an overall busy, crowded look. There are many articles explaining the reasons for this phenomenon, and I agree with them…but I also believe there is something deeper that continues to keep Japanese web design this way despite years of progress.
wd  wd-localisation  design  geography  geography--japan 
january 2018
Enter The Dragon (Drop): Accessible List Reordering — Smashing Magazine
Over the years of being a web developer with a focus on accessibility, I have mostly dealt with widely-adopted, standardized UI components, well supported by assistive technologies (AT). For these types of widgets, there are concise ARIA authoring practices as well as great tools like axe-core that can be used to test web components for accessibility issues. Creating less common widgets, especially those that have no widely-adopted conventions for user interaction can be very tricky.
wd  wd-accessibility  wd-accessibility--interactive  wd-input  wd-input--drag-and-drop  wd-src--smashing 
january 2018
Keeping aspect-ratio with HTML and no padding tricks
For a long time we’ve been told the only way to have a DOM element keep a fixed aspect ratio without Javascript is with the % padding trick. Like here: https://css-tricks.com/aspect-ratio-boxes/
wd  wd-css  wd-css--grid  wd-src--medium 
january 2018
Plasma design system · GitBook
WeWork creates inspiring shared workspaces, with an emphasis on community. Our operations are complicated, so we design and build our own internal digital tools to meet our business needs, and to manage our global network of buildings and members. The Plasma design system is created for these internal business tools.
wd  wd-styleguide 
january 2018
selectWoo – An accessible replacement for select2 – Develop WooCommerce
The select2 library makes it simple for anyone to add full-featured, good-looking dropdown menus to their site. According to Wappalyzer, at least 850,000 websites are currently using select2. WooCommerce uses it in many places to enhance the look and usability of stores.
wd  wd-accessibility  wd-forms  wd-forms--input  wd-forms--select  wd-forms--search 
january 2018
The Vanilla JS Toolkit
A growing collection of code snippets, helper functions, polyfills, plugins, and learning resources, by Chris Ferdinandi.
wd  wd-js  wd-js--vanilla 
january 2018
propublica/column-setter: Custom responsive grids in Sass that work in older browsers.
Column Setter is a Sass tool that lets you easily set up a custom responsive grid for your website and build a float- or flexbox-based layout that aligns to it. It uses one simple function and a small handful of optional mixins to generate CSS percentage widths based on your settings. And for the most part, it leaves the structure of your HTML and CSS entirely up to you.
wd  wd-css  wd-sass  wd-sass--mixin  wd-grid  wd-uses--github 
january 2018
CSS Scroll Snap: What Is It? Do We Need It?
It can be difficult for web developers to guarantee a well-controlled scrolling experience, but luckily a CSS module entitled “Scroll Snap” promises to help. It will enforce where a scroll position ends after a scrolling operation has completed. Amongst other things, this module contains features to control facets such as panning, combined with “snap positions”, and produces a particular alignment of content within a scrolling container.
wd  wd-css  wd-interface  wd-interface--scrolling 
january 2018
aria-expanded does not require a fallback
When building a control that toggles content in a web app, we can use aria-expanded to let the control know whether the content is shown or hidden. Expanded or not expanded. In assistive technologies (AT) that support this attribute, AT users can figure out whether the element was expanded.
wd  wd-accessibility  wd-accessibility--aria  wd-interface  wd-interface--accordion 
january 2018
Make Your Site Faster with Preconnect Hints | Viget
Requesting an external resource on a website or application incurs several round-trips before the browser can actually start to download the resource. These round-trips include the DNS lookup, TCP handshake, and TLS negotiation (if SSL is being used). Depending on the page and the network conditions, these round-trips can add hundreds of milliseconds of latency, or more. If you are requesting resources from several different hosts, this can add up fast, and you could be looking at a page that feels more sluggish than it needs to be, especially on slower cellular connections, flaky wifi, or congested networks.
wd  wd-performance  wd-performance--prefetch 
january 2018
« earlier      
color data design design--logos-and-branding design--objects design--patterns design--sketch design--terminology design--typography geography geography--china geography--japan git humor internet language law mac mac--apple-tv mac--apps mac--ios maps math psychology sociology technology technology--computer-hardware unicode-and-emoji ux ux--content ux--conversational ux--dark-patterns ux--device ux--haptic ux--ia ux--patterns ux--personas ux--states ux--testing ux--tools wc-css wd wd-accessibility wd-accessibility--aria wd-accessibility--audio wd-accessibility--contrast wd-accessibility--focus wd-accessibility--hiding-content wd-accessibility--images wd-accessibility--interactive wd-accessibility--tabindex wd-accessibility--tools wd-accessibility--video wd-accessibility--wcag wd-animation wd-approach wd-browser wd-browser--battery wd-browser--cookie wd-browser--notification wd-browser--support wd-browser--url wd-buildtools--grunt wd-buildtools--gulp wd-buildtools--npm wd-buildtools--webpack wd-cms wd-cms--kirby wd-cms--koken wd-cms--metalsmith wd-cms--netlify wd-cms--orchard wd-cms--wordpress wd-cms--yellow wd-color wd-css wd-css--background wd-css--borders wd-css--centering wd-css--element-query wd-css--filters wd-css--flexbox wd-css--functional wd-css--gradient wd-css--grid wd-css--layout wd-css--pseudo wd-css--selectors wd-css--variables wd-email wd-formatting wd-forms wd-forms--button wd-forms--input wd-forms--label wd-forms--password wd-forms--progress wd-forms--search wd-forms--select wd-forms--slider wd-forms--switches wd-forms--validation wd-framework wd-framework--css wd-framework--frontend wd-graphs wd-grid wd-hosting wd-html wd-html--amp wd-html--iframe wd-html--microdata wd-html--rel wd-html--semantics wd-html--web-components wd-images wd-images--background wd-images--favicon wd-images--icon wd-images--optimization wd-images--ratios wd-images--responsive wd-images--sprites wd-images--svg wd-input wd-input--drag-and-drop wd-input--keyboard wd-input--pointer wd-input--touch wd-interface wd-interface--accordion wd-interface--autocomplete wd-interface--breadcrumb wd-interface--carousel wd-interface--coachmark wd-interface--cursor wd-interface--datepicker wd-interface--editor wd-interface--filtering wd-interface--gallery wd-interface--lightbox wd-interface--menu wd-interface--modal wd-interface--pagination wd-interface--progress wd-interface--scrolling wd-interface--slideshow wd-interface--sticky wd-interface--tabs wd-interface--tags wd-interface--thumbnail wd-interface--toast wd-interface--toc wd-interface--tooltip wd-js wd-js--angular wd-js--d3 wd-js--ember wd-js--jquery wd-js--knockout wd-js--meteor wd-js--moment wd-js--promises wd-js--raphael wd-js--react wd-js--service-workers wd-js--this wd-js--vanilla wd-js--vue wd-js--zepto wd-less wd-linting wd-localisation wd-media wd-media--audio wd-media--bigscreen wd-media--embeds wd-media--print wd-media--vertical wd-media--video wd-performance wd-performance--conditional wd-performance--lazyload wd-performance--localstore wd-performance--offline wd-performance--perceived wd-performance--prefetch wd-polyfill wd-postcss wd-pwa wd-responsive wd-responsive--js wd-sass wd-sass--extend wd-sass--maps wd-sass--media-queries wd-sass--mixin wd-sass--variables wd-server wd-src--a-list-apart wd-src--adactio wd-src--bitsofcode wd-src--cloud-four wd-src--codyhouse wd-src--creative-bloq wd-src--css-tricks wd-src--google-developers wd-src--lullabot wd-src--medium wd-src--nn-group wd-src--paciello-group wd-src--quirksmode wd-src--sitepoint wd-src--sixrevisions wd-src--smashing wd-src--thenewcode wd-src--tympanus wd-src--ux-magazine wd-src--uxbooth wd-src--uxmatters wd-src--webaim wd-styleguide wd-tables wd-tables--responsive wd-tables--sorting wd-testing wd-typography wd-typography--icon-font wd-typography--modular-scale wd-typography--opentype wd-typography--rendering wd-typography--type-locks wd-units wd-uses--bower wd-uses--cdnjs wd-uses--coffeescript wd-uses--component wd-uses--github wd-uses--homebrew wd-uses--npm wd-uses--packagist wd-uses--ruby wd-uses--yarn

Copy this bookmark:



description:


tags: