Inlining or Caching? Both Please! | Filament Group, Inc., Boston, MA
Last week, I was finishing a section of my slides for a presentation at the Performance.Now() conference. In it, I was exploring patterns that enable the browser to render a page as fast as possible by including code alongside the initial HTML so that the browser has everything it needs to start rendering the page, without making additional requests.
wd  wd-performance  wd-js  wd-js--service-workers 
3 days ago
howler.js - JavaScript audio library for the modern web
howler.js makes working with audio in JavaScript easy and reliable across all platforms.
wd  wd-media  wd-media--audio  wd-js  wd-uses--bower  wd-uses--cdnjs  wd-uses--github  wd-uses--npm  wd-uses--yarn 
4 days ago
UX Debt: How to Identify, Prioritize, and Resolve
Like tech debt, UX debt piles up over time and, if left unaddressed, leads to compounding user problems and costly cleanup efforts. Agile teams can modify their processes to track and resolve UX debt.
ux  wd  wd-src--nn-group 
4 days ago
CSS and Network Performance – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts
CSS is critical to rendering a page—a browser will not begin rendering until all CSS has been found, downloaded, and parsed—so it is imperative that we get it onto a user’s device as fast as we possibly can. Any delays on the Critical Path affect our Start Render and leave users looking at a blank screen.
wd  wd-css  wd-performance  wd-performance--conditional  wd-performance--lazyload 
4 days ago
Optimizing CSS by removing unused media queries – Zoover Engineering – Medium
One of the (supporting) metrics that we are trying to improve for this trimester is the amount of CSS we ship to the browser. CSS is absolutely critical for the (perceived) performance of your website: any render is delayed until your stylesheets have been fully loaded. We’ve given ourselves a budget of 50 kilobytes of uncompressed CSS: not entirely coincidentally the same limit that AMP imposes on stylesheets.
wd  wd-css  wd-performance 
4 days ago
Spectre.css CSS Framework
Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.
wd  wd-framework  wd-framework--css 
9 days ago
Implementing a variable font with fallback web fonts – Zeichenschatz
With variable fonts, more typographic richness and influence is coming to the web and this at a relatively low file size. You want to benefit from that in your next web project, but still, you don’t want to bet everything on this new technique? This article will show you how to integrate a variable font in your website and use classic web fonts as a fallback.
wd  wd-performance  wd-css  wd-typography 
10 days ago
Start page - Access & Use
Access & Use is a small web site that shows what it needs to make dynamic elements in websites accessible and usable for all. It is one part of the results of the COMPARE project, which was funded by the EU via the Erasmus+ programme.
wd  wd-accessibility  wd-accessibility--interactive 
10 days ago
Nicolas on Twitter: "A brief analysis and comparison of the CSS for Twitter's PWA vs Twitter's legacy desktop website. The difference is dramatic and I'll touch on some reasons why."
A brief analysis and comparison of the CSS for Twitter's PWA vs Twitter's legacy desktop website. The difference is dramatic and I'll touch on some reasons why.
wd  wd-performance  wd-css 
10 days ago
When It Comes To Personas, The Real Value Is In The Scenarios
I’ve seen it happen many times. A team launches a project to identify user personas with all the best of intentions. They’ll define three, four, sometimes as many ten or fifteen different personas. Then, when they’re all done, the personas become lifeless mannequins on a closet shelf that are rarely referenced.
ux  ux--personas  wd  wd-src--medium 
10 days ago
Is your software ready for localization? – Adriano Raiano – Medium
So you want people from all around the world to use and understand your software… but how to achieve that?
wd  wd-localisation  wd-src--medium 
12 days ago
Web components: from zero to hero - DEV Community 👩‍💻👨‍💻
Web components are getting more and more traction. With the Edge team's recent announcement of implementing Custom Elements and Shadow DOM, all major browsers will soon support web components natively. Companies like Github, Netflix, Youtube and ING are even already using web components in production. Neat! However, surprisingly enough, none of those huge, succesful companies have implemented a (you guessed it) to-do app!
wd  wd-html  wd-html--web-components 
12 days ago
Web Performance 101: JS, CSS, HTTP, images & fonts | PerfPerfPerf
This is an introduction to the modern web loading performance. Learn why performance is important, what performance optimizations exist and what tools help to understand if your app is doing well.
wd  wd-performance  wd-performance--conditional  wd-performance--perceived  wd-performance--prefetch 
12 days ago
Paging, Scrolling, and Infinite Scroll :: UXmatters
As I’ve noted many times before, people do not necessarily read left to right—and certainly, not in anything that is reliably like an F-pattern. However, once people find your content, they do reliably read it from top to bottom.
ux  ux--patterns  wd  wd-src--uxmatters 
12 days ago
The Pitfalls of running A/B Tests – JoyTunes – Medium
Many people who create digital products have probably heard of the term ‘Designing with Data’. It’s a very obvious practice, that suggests that making intuition-based decisions is not enough, and better decisions are usually supported by quantitative or qualitative evidence.
ux  ux--testing  wd  wd-src--medium 
14 days ago
How to Write Accessible Javascript
You’re wrapping up a web project and just as you’re putting the finishing touches you get sent a list of accessibility errors forwarded to you by your project manager. Inadequate color contrast. Missing alt tags. This interactive component needs to be keyboard accessible.
wd  wd-accessibility  wd-accessibility--aria  wd-accessibility--focus  wd-accessibility--interactive  wd-js  wd-js--vanilla  wd-input  wd-input--keyboard 
19 days ago
Dark Mode and CSS • The Breakroom
The new Dark Mode in macOS Mojave provides users with a new way to customize their desktop environment. It also presents a lot of new situations where developers need to adapt content in their apps and websites. While these changes are currently limited to native macOS apps, the arrival of Marzipan next year makes it likely that iOS developers will be confronted with similar changes in UIKit. A dark user interface would be a reality on all of Apple’s platforms, including tvOS and watchOS.
wd  wd-css 
19 days ago
You're using <em> wrong
It’s been a bumpy road that somehow got us misusing one of the most important text-level semantic tags. In the dark ages of HTML, <em> was barely used at all, despite being part of the specs since really early on (HTML 2.0 standard, 1995). But at that point in time and for some years to come, (almost) no one was thinking of semantics or even separation of concerns. Italics were simply marked up with <i> tags, and we wouldn’t give it a second thought.
wd  wd-html  wd-html--semantics 
19 days ago
Paul Miller — Using dark mode in CSS with MacOS Mojave
MacOS Mojave has been recently released with the Dark Mode option. The option allows you to enable dark interface through all the system, which is very useful while working in the evenings and nights. Native apps are able to take advantage of the mode by following some interface guidelines. What about web apps? Safari 12 that shipped with Mojave does not have a way to detect whether a user has a dark mode or not. The good news is: Safari Tech Preview 68 supports Dark Mode! And Safari 12.1 might support it in a few months too.
wd  wd-css 
22 days ago
Finding the Way: screen reader strategies | Last Call Media
As a sighted person working to improve accessibility on the web, I take lots of inspiration from the many people promoting the idea that empathy is a key element of accessibility. It is always important to bear in mind that a site that is 100 percent WCAG compliant and throws no errors in an automated auditing tool can still be very inaccessible. Sometimes the thing that makes a website difficult to understand for a screen reader user is the absence of information, and that is a problem that is not identified in automated code scans.
wd  wd-accessibility 
23 days ago
Splicing HTML’s DNA With CSS Attribute Selectors — Smashing Magazine
Attribute selectors are magical. They can get you out of sticky problems, help you avoid adding classes and point out some problems in your code. But don’t worry, while attribute selectors are complex and powerful, they’re easy to learn and easy to utilize. In this article, we’ll discuss how they operate and give you some ideas about how to use them.
wd  wd-css  wd-css--selectors  wd-html  wd-src--smashing 
25 days ago
CSS Previous Sibling Selectors and how to fake them
If you ever used CSS sibling selectors, you know there’s only two. The + sibling combinator selects the first match that comes immediately after, and the ~ subsequent-sibling combinator matches all the ones that come after. But there’s no way to select what came before. Either parent selectors or previous siblings selectors are simply not a thing.
wd  wd-css  wd-css--selectors  wd-src--medium 
25 days ago
Is Your Product Designed to Be Calm? – Amber Case – Medium
Since I started speaking about calm technology and designing with attention, designers and developers often ask me if a particular product they’re helping create is calm — i.e. designed to seamlessly, unobtrusively integrate with person’s life and daily habits.
ux  ux--dark-patterns 
26 days ago
Bad Practices on Phone Number Form Fields
Phone number fields, along with birthdate fields, are tricky to get right. There are many phone number formats users can choose from and they’re often unsure which one is valid. Sometimes they’re even unsure if they should include their country code.
ux  ux--patterns  wd  wd-forms  wd-forms--input 
27 days ago
Valid CSS Content | CSS-Tricks
There is a content property in CSS that's made to use in tandem with the ::before and ::after pseudo elements. It injects content into the element.
wd  wd-css  wd-css--pseudo  wd-src--css-tricks 
27 days ago
Apply a Filter to a Background Image | CSS-Tricks
You can apply a filter to an entire element quite easily with the filter property. But what if you want to apply a filter just to the background of an element? It's weirdly tricky.
wd  wd-images  wd-images--background  wd-css  wd-css--filters  wd-src--css-tricks 
5 weeks ago
Creating Horizontal Scrolling Containers the Right Way [CSS Grid]
Ever since Netflix became a household name we’ve been scrolling sideways in mobile layouts. Instead of stacking everything on top of each other, horizontal scrolling containers (or lists) have become a common layout practice, as it helps reduce the vertical space of devices with smaller screens.
wd  wd-css  wd-css--grid  wd-interface--scrolling  wd-src--medium 
6 weeks ago
T-Writer Demo
T-Writer.js is a native typewriter-effect library, designed to be: Fast, Easy to use, Fully-featured, Dependency-free
wd  wd-js  wd-uses--github  wd-uses--npm 
7 weeks ago
Beer Slider is a lightweight vanilla JavaScript plugin. It's basic purpose is to compare two versions of an image, for example the same object shot in two different moments, a pre-edited photo and its processed version, a sketch and the finished illustration, etc. It can be particularly useful with photo presets (Lightroom presets, Photoshop actions, etc.).
wd  wd-js  wd-interface--slideshow  wd-uses--github  wd-uses--npm 
7 weeks ago
What happens when aria-label, aria-labelledby and aria-describedby are on static HTML elements? - David MacDonald Web Accessibility Blog, testing, teaching, and discussion
An interesting Twitter thread sprung up from a Tweet about overriding elements with aria-label with a follow up thread with my colleagues. I was asked to test the results of aria-label on static content. This is what is below, along with aria-labelledby and aria-describedby, as well as an examination of what is "supposed to happen" according to the Accessible Name computation.
wd  wd-accessibility  wd-accessibility--aria  wd-html 
7 weeks ago
10 Things People With Disabilities Wish Online Retailers Knew | Expert Advice | E-Commerce Times
Many shoppers would be just fine if they could never set foot in a retail store again. After all, everything is available online: books, groceries, pizza, household necessities, even big ticket items like mattresses and cars. However, 15 percent of people worldwide have a disability that affects their daily life, according to the United Nations, and many retailers are unaware that their websites are not always accessible to them.
wd  wd-accessibility 
7 weeks ago
How Etsy Localizes Addresses - Code as Craft
Imagine you’re browsing the web from your overpriced California apartment one day and you find a neat new website with some really cool stuff. You pick out a few items, add them to your cart, and start the checkout process.
wd  wd-localisation 
7 weeks ago
Content on hover & focus - Access & Use
Some content is transient: it appears as a pop-up in a layer on top of the page. The pop-up is displayed when the user hovers over a trigger element with the mouse, or focuses the trigger with the keyboard.
wd  wd-accessibility  wd-accessibility--interactive  wd-css  wd-input--pointer 
7 weeks ago
Form Field Usability: Avoid Multi-Column Layouts (13% Get It Wrong) - Articles - Baymard Institute
Our UX benchmark reveals that 13% of sites use a multi-column form layout. This is despite the fact that our large-scale Cart & Checkout testing reveals that multi-column form layouts are prone to misinterpretation.
ux  ux--patterns  wd  wd-forms 
7 weeks ago
5 Easy Ways to Make Your UI More Accessible – UX Planet
Last year, I completed a Fellowship with the City of Austin’s Innovation Office as their UI Design Lead. A big part of my job was ensuring that all of the new sites we designed and built followed the WCAG (Web Content Accessibility Guidelines).
design  wd  wd-accessibility  wd-src--medium 
7 weeks ago
What is Modular CSS?
Modular CSS is a collection of principles for writing code that is performant and maintainable at scale. It originated with developers at Yahoo and Yandex as a way to address the challenges of maintaining a large codebase. Some of the guidelines were controversial when introduced, but have since come to be recognized as best practices.
wd  wd-css 
7 weeks ago
The dialog element | Viget
Let's talk about pop-ups. And modals, overlays, or anything else you like to call them (remember Lightbox?). Despite user experience concerns, these elements remain popular on the web. But technical implementations can be wildly inconsistent. Looking to stop reinventing the wheel? This post will help guide you in your quest to show content on top of other content.
wd  wd-html  wd-html--semantics 
7 weeks ago
ARIA States and Properties
A range of new states and properties were added to ARIA 1.1. These new states and properties have been flagged in the charts below. At this stage, no new states or properties have been added to ARIA 1.2.
wd  wd-accessibility  wd-accessibility--aria 
8 weeks ago
Updating a CSS Variable with JavaScript | CSS-Tricks
Here's a CSS variable (formally called a "CSS custom property"):
wd  wd-css  wd-css--variables  wd-js  wd-src--css-tricks 
8 weeks ago
CSS Grid — The Beginner’s Guide –
CSS Grid’s anatomy is composed of the primary container which is just your standard <div> element that has a margin, border and padding. To make a parent CSS grid container out of any element, add display: grid to it. Grid’s items are children nested inside the parent container. They are usually defined as a list of elements that could represent a header, sidebar, footer or similar website layout elements, depending on your application’s design.
wd  wd-css  wd-css--grid  wd-src--medium 
9 weeks ago
Links List for Print Styles | Adrian Roselli
I have long advocated for making useful print styles and providing users with pages that work on paper without eating their printer ink. My default styles typically have a rule to embed the URL of all links directly after the link text. The problem is that it can eat a lot of ink and not be very usable on paper. Collecting all the links at the end of a page as plain text footnotes mitigates this. Users who want to save paper can choose to not print the final page(s) with the links.
wd  wd-css  wd-js  wd-media  wd-media--print 
9 weeks ago
WebAIM: Understanding WCAG 2 Contrast and Color Requirements
Contrast and color use are vital to accessibility. Users, including users with visual disabilities, must be able to perceive content on the page. There is a great deal of fine print and complexity within the Web Content Accessibility Guidelines (WCAG) 2 that can easily confuse web content creators and web accessibility evaluators. This article pulls together the terms and principles needed to understand WCAG 2 requirements for contrast and color.
wd  wd-accessibility  wd-accessibility--contrast  wd-color  wd-src--webaim 
9 weeks ago
How do you mark up an accordion? — Sara Soueidan – Freelance-Front-End UI/UX Developer
I made a poll on Twitter the other day asking the #lazyweb how they would mark up an FAQ section — or a list of questions and their corresponding answers. I specifically asked for markup suggestions. Turns out, people mark questions and answers up differently. I got some interesting insight from the responses I got that partly changed the way I would approach building an FAQ section, and some validation for the way I always have built them. The discussion was too interesting to not summarize in an article. The different possible markup approaches as well as useful resources are discussed below.
wd  wd-html  wd-html--semantics  wd-js  wd-interface  wd-interface--accordion 
10 weeks ago
Mobile Login Methods Help Chinese Users Avoid Password Roadblocks
In China, QR-code scanning and verification codes are popular mobile-login alternatives that circumvent the problem of remembering and typing passwords.
ux  ux--patterns  wd  wd-localisation  wd-src--nn-group 
10 weeks ago
Inter UI font family
Inter UI is a typeface specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens. The family features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc.
design  design--typography 
10 weeks ago
Conversational Semantics · An A List Apart Article
As Alexa, Cortana, Siri, and even customer support chat bots become the norm, we have to start carefully considering not only how our content looks but how it could sound. We can—and should—use HTML and ARIA to make our content structured, sensible, and most importantly, meaningful.
wd-accessibility  wd  wd-html  wd-html--semantics  wd-src--a-list-apart 
10 weeks ago
CSS Grid
12 column grid using display:grid. It includes the necessary prefixes to work in Internet Explorer.
wd  wd-css  wd-css--grid  wd-grid  wd-uses--github 
10 weeks ago
The importance of text accessibility: how IBM's Content Clarifier shows us what we've forgotten - Hassell Inclusion
Back in 2001, when I first started working in accessibility at the BBC, one of the key things we thought about was the aim to make text as simple as possible. Using Plain Language. Writing designed to ensure the reader understands as quickly, easily and completely as possible. In the Accessibility Guidelines at the time, WCAG 1.0, this was a single-A requirement, recognising it as one of the most important aspects of web accessibility. Accessibility experts and our users agreed that how we used words on our websites was massively important.
ux  ux--content  wd  wd-accessibility 
10 weeks ago
Create your design system, part 4: Spacing – CodyHouse – Medium
In this article we’ll take a look at how to set a spacing system in CSS, and how to take advantage of relative units to handle responsiveness.
wd  wd-css  wd-css--variables  wd-units  wd-src--medium 
10 weeks ago
Designing for suicidal users: preventing suicide the modern way
Every month, over half a million people in the US make suicide-related searches on Google. The automated response that is supposed stop them and save lives feels lifeless.
ux  ux--patterns  ux--dark-patterns 
10 weeks ago
Guidelines to Designing Apps for Mental Health | UX Booth
When you work in UX, you live and die by user research. If a business owner requests a specific feature, the UX designer is typically the one to ask “how would our audience benefit?” and if you build something that users asked for, you’re typically in the clear. But sometimes users don’t know what they want or need. Particularly when it comes to mental health care.
11 weeks ago
The Complete CSS Demo for OpenType Features - OpenType Features in CSS
This project is a comprehensive CSS font-feature-settings demo for OpenType features, a refined version of Syntax for OpenType features in CSS by Adobe, licensed under CC BY-NC-SA 3.0.
wd  wd-css  wd-typography  wd-typography--rendering 
11 weeks ago
A safer alternative to innerHTML with vanilla JS | Go Make Things
The innerHTML property provides a really simple and convenient way to create HTML templates as strings and inject them into the DOM. But, it can leave you exposed to cross-site scripting attacks.
wd  wd-js  wd-js--vanilla 
11 weeks ago
Using feature detection to write CSS with cross-browser support | CSS-Tricks
When working with CSS, it seems that one of the top concerns always ends up being inconsistent feature support among browsers. This means that CSS styling might look perfect on my browsers of choice, but might be completely broken on another (perhaps an even more popular) browser.
wd  wd-wd-browser  wd-browser--support  wd-css--selectors  wd-src--css-tricks 
11 weeks ago
The Annoying Site aka "Power of the Web Platform" V2 - Speaker Deck
It's 2018. The web platform offers dozens of powerful, native-like APIs. What if we used this newfound power for evil? What kind of terrible UX wd-bcould we create if our goal was to build the worst web page in the world?
internet  wd  wd-browser  wd-js 
11 weeks ago
Is placeholder text a sufficient accessible label for form fields - David MacDonald Web Accessibility Blog, testing, teaching, and discussion
In a mobile first world many websites use placeholder text to save space. Let's test to see if its a good idea. In the form field type in a first name. We will want to consider users who are blind, and users with cognitive disabilities.
wd  wd-accessibility  wd-html  wd-forms  wd-forms--input 
11 weeks ago
UX And HTML5: Let’s Help Users Fill In Your Mobile Form (Part 1) — Smashing Magazine
Do you test your forms on real users and real devices? If not, you should. Let’s take a look at some of the techniques that can help you take your forms to the next level and help users fill them in.
ux  ux--patterns  wd  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-src--smashing 
11 weeks ago
Prominence-Interpretation Theory
Prominence-interpretation theory helps determine what shapes users’ perceptions of a site’s credibility.
ux  ux--content  ux--patterns  wd  wd-src--nn-group 
11 weeks ago
Carousels on Mobile Devices
Carousels on touch screens are plagued by low discoverability and sequential access, and not all designs implement swipe as a carousel control.
ux  ux--patterns  wd  wd-interface--carousel  wd-src--nn-group 
11 weeks ago
Checkbox vs Toggle Switch – UX Planet
Forms provide several controls that make it easier to collect input from users. Using the right control at right place is a challenge while designing forms.
ux  ux--patterns  wd  wd-forms  wd-forms--switches 
11 weeks ago
Creating Usability Maturity Models for Large-Scale Projects User Experience Magazine
About a year into a very complex, long-term project, we were sitting in a design meeting when our project manager turned to us and asked, “How are we doing with usability? How will we know that we found all the usability issues and we are ready to ship?” If you were in the room with us, you should have seen our reaction! We were surprised to say the least. We had been reporting on the usability testing outcomes on this project all along; how could he not know if we were ready? After we closed our jaws and took a few deep breaths, we teased him a little by saying, “Weren’t you there for our presentations?”
11 weeks ago
The Generic Sensor API - mobiForge
Today’s devices pack in a vast array of sensors that gather data about the device and the world around it. For web applications, access to these sensors has grown over time through the addition to the browser of various sensor APIs such as the Geolocation API, and the DeviceOrientation Events API.
wd  wd-js 
11 weeks ago
Line-height Crop — a simple CSS formula to remove top space from your text
It’s a natural behavior of text elements to include some space on top (and bottom) of the element itself based on its line-height value. In some cases, you may need to remove those spaces as they can create inconsistencies in your page design.
wd  wd-typography  wd-css  wd-src--medium 
11 weeks ago
Browser painting and considerations for web performance | CSS-Tricks
The process of a web browser turning HTML, CSS, and JavaScript into a finished visual representation is quite complex and involves a good bit of magic. Here’s a simplified set of steps the browser goes through:
wd  wd-performance  wd-css  wd-src--css-tricks 
11 weeks ago
Scroll Bouncing On Your Websites — Smashing Magazine
This article describes the effect of scroll bouncing and how it works on different web browsers. It contains reviews of several different solutions that are suggested on the web that can be used to prevent scroll bouncing.
wd  wd-css  wd-interface--scrolling  wd-src--smashing 
11 weeks ago
Asking the right questions during user research, interviews and testing
Interviewing users is an art — whether you are running usability testing, focus groups, ethnographic research or whatnot. Here are some good practices for asking users the right questions, and asking the questions the right way.
11 weeks ago
Provotypes: how making annoying things can help you design better
Provotypes are an interesting — and extremely fun — way of making designs better by first making the most unusable or provocative versions of them. In this blog post, I explain how and why this technique offers much more than just good laughs.
ux  ux--patterns 
11 weeks ago
Switch font color for different backgrounds with CSS | CSS-Tricks
Ever get one of those, "I can do that with CSS!" moments while watching someone flex their JavaScript muscles? That’s exactly the feeling I got while watching Dag-Inge Aas & Ida Aalen talk at CSSconf EU 2018.
wd  wd-accessibility  wd-accessibility--contrast  wd-css  wd-css--variables  wd-color  wd-src--css-tricks 
11 weeks ago
Your skip links are broken - Axess Lab
Many websites have an accessibility feature called skip links that help some users navigate the site. However, there’s a problem with basically all skip links on mobile devices, which hurts your site’s accessibility instead of improving it.
wd  wd-accessibility  wd-accessibility--interactive  wd-html 
august 2018
A simple visual cheatsheet for CSS Grid Layout
wd  wd-css  wd-css--grid 
august 2018
Designing a complex table for mobile consumption (nom)
Enterprise applications are complex. They often contain large amounts of information from various sources, modules, and users. In order to present this wealth of information, these applications frequently make use of tables. Well-designed data tables allow users to scan, compare, and analyze information to take action. However, creating a mobile-friendly version of a complex web-based table is a challenge. For this particular engagement, I helped a client in the property insurance space consolidate a critical workflow by mobilizing a very large data table for their consultants.
design  design--patterns  ux  ux--patterns  wd  wd-tables  wd-tables--responsive  wd-src--medium 
august 2018
Well-Controlled Scrolling with CSS Scroll Snap  |  Web  |  Google Developers
CSS Scroll Snap feature allows web developers to create well-controlled scroll experiences by declaring scroll snapping positions. Paginated articles and image carousels are two commonly used examples of this. CSS Scroll Snap provides an easy to use and consistent API for building these popular UX patterns and Chrome is shipping a high fidelity and fast implementation of it in version 69.
wd  wd-css  wd-interface--scrolling  wd-src--google-developers 
august 2018
Improve your motion – Erick Leopoldo – Medium
If you are a front-end developer you spend a lot of time researching and trying to understand how motion works and questioning yourself what is the best technique to improve your transitions and show the content in the most fluid way to the user.
wd  wd-animation  wd-src--medium 
august 2018
Differences between Designing Native iOS Apps and Native Android Apps
To create the best native app design, you should bear in mind the differences between the iOS and Android platforms. These platforms differ not only in terms of what native applications look like; they also differ in terms of the structure and flow. You need to keep these differences in mind to provide the best user experience through the native application design.
august 2018
Supporting users who change colours on GOV.UK - Accessibility
By default on GOV.UK we try to use the most accessible colours, however there are still times where some users may need to change them. For example, those who are sensitive to light may find a white background too bright, or a user with dyslexia may find certain colours easier to read than others.
wd  wd-accessibility  wd-accessibility--interactive  wd-color 
august 2018
Bulb Audit
This site represents the report for the inclusive design audit, carried out by Heydon Pickering for Bulb. The purpose of this report is to identify and provide advice for fixing and improving accessibility and inclusive design across three key Bulb sites:
wd  wd-accessibility 
august 2018
Eight Things You Need To Know About Design Systems – Tradecraft – Medium
It’s on every job description. You see it all over the freshest design tool release. You might have even heard your family mention it at Thanksgiving. But what are the facts on these “design systems” that has the whole industry talking?
design  design--patterns  wd  wd-src--medium 
august 2018
Speed up alignment in CSS with Flexbox utility classes
Aligning things in CSS has always been a nightmare (yes, I like drama). Then Flexbox came and with it the possibility to align items in a way that makes sense! In this article, I’m going to share a set of CSS utility classes based on Flexbox that can be used to align things in no time! I originally created these classes for our (upcoming) library of web components. They will probably be included as an optional global CSS file (meaning you can delete it, and nothing will change).
wd  wd-css  wd-css--flexbox  wd-src--medium 
august 2018
ebidel/lighthouse-ci: Run Lighthouse in CI using Docker
This repo contains the frontend and backend for the Lighthouse CI server.
wd  wd-accessibility  wd-performance 
august 2018
HTML5 draggable attribute - Maxability
The HTML5 draggable attribute specifies if the element can be picked for dragging. Links and images are draggable by default. Since this is a global attribute HTML5 draggable can be used on any element of the base markup.
wd  wd-html 
august 2018
« earlier      
color data design design--inclusive 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 technology--computer-software 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 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--notist 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 wd-wd-browser

Copy this bookmark: