How do you figure? | scottohara.me
Often thought of containing images or diagrams, the figure element can host any content (code snippets, quotes, audio, video, etc.) that is referred to from the primary content of the document, but is not redundant information. A figure should be able to be completely removed from the flow of a document without any detriment to the understanding of the primary content.
wd  wd-accessibility  wd-html  wd-html--semantics 
22 hours ago
What Parallax Lacks
Parallax-scrolling effects add visual interest, but they often create usability issues, such as content that is slow to load or hard to read. Consider if the benefits are worth the cost.
ux  ux--patterns  wd  wd-input  wd-interface  wd-interface--scrolling  wd-src--nn-group 
22 hours ago
An introduction to CSS Containment - Rego's Everyday Life
The main goal of CSS Containment standard is to improve the rendering performance of web pages, allowing the isolation of a subtree from the rest of the document. This specification only introduces one new CSS property called contain with different possible values. Browser engines can use that information to implement optimizations and avoid doing extra work when they know which subtrees are independent of the rest of the page.
wd  wd-performance  wd-css 
22 hours ago
How to Migrate to Gulp.js 4.0 — SitePoint
Despite competition from webpack and Parcel, Gulp.js remains one of the most popular JavaScript task runners. Gulp.js is configured using code which makes it a versatile, general-purpose option. As well as the usual transpiling, bundling and live reloading, Gulp.js could analyze a database, render a static site, push a Git commit, and post a Slack message with a single command.
wd  wd-buildtools--gulp  wd-src--sitepoint 
3 days ago
HTML5 Input Types: Where Are They Now? — Smashing Magazine
HTML5 introduced thirteen new types of form input, adding significantly to the number of different fields web designers and developers could add to our forms. These new types all require browsers to support them, and take-up has been slower than some of us would have liked. What is the state of those field types in 2019? Which can we use, and which should still be avoided?
wd  wd-html  wd-forms  wd-forms--input  wd-src--smashing 
6 days ago
Use the :lang pseudo-class over the lang attribute selector for language-specific styles
The problem with having language-specific styles based on the [lang] attribute selector is that the selector isn’t actually aware of the language of the element. It’s just like any other “dumb” attribute selector. This can become a problem if we have a document with multiple, nested elements of different languages. Let’s take this section below. The section has a French lang attribute but, within the section, we have a quote in Spanish.
wd  wd-css  wd-css--selectors  wd-localisation  wd-src--bitsofcode 
6 days ago
Creating Accessible SVGs | Deque
Scalable Vector Graphics (SVGs) have been around since 1999, but they have seen a real resurgence in use as design interactions have become more complex and CSS/JavaScript have replaced antiquated animation programs such as Adobe Flash.
wd  wd-accessibility  wd-html  wd-images  wd-images--svg 
7 days ago
SVG Filters 101 | Codrops
CSS currently provides us with a way to apply color effects to images such as saturation, lightness, and contrast, among other effects, via the filter property and the filter functions that come with it. We now have 11 filter functions in CSS that do a range of effects from blurring to changing color contrast and saturation, and more. We have a dedicated entry in the CSS Reference if you want to learn more about them.
wd  wd-css  wd-css--filters  wd-images  wd-images--svg  wd-src--tympanus 
7 days ago
Beyond the NPS: Measuring Perceived Usability with the SUS, NASA-TLX, and the Single Ease Question After Tasks and Usability Tests
Post-test questionnaires like the SUS measure perceived usability of an entire system; post-task scales suggest of problematic parts of a design.
ux  ux--testing  ux--tools  wd  wd-src--nn-group 
8 days ago
Simple-keyboard - The Slick Javascript Virtual Keyboard
The easily customisable and responsive on-screen virtual keyboard for Javascript projects.
wd  wd-js  wd-input--keyboard  wd-uses--github  wd-uses--npm 
10 days ago
Experimental animated CSS-Gradients with SASS iterations.
With SASS iterations you can easily setup around hunderets, thousands or even more key-frames, with just 5 lines of code, and a little bit of simple maths. This experimental solution comes with extended possibilities of influencing the gradiend, on the other hand, the more key-frames you do, the more GPU power will be needed to render these.
wd  wd-css  wd-css--gradient  wd-sass  wd-sass--mixin  wd-animation 
13 days ago
What to Do If Users Mistap Your Icon Buttons
If you’ve designed a mobile app before, you know how useful and prevalent icon buttons are. But what you don’t know is how often users mistap them when they’re placed too close together.
ux  ux--patterns  wd  wd-forms  wd-forms--button  wd-input--touch 
13 days ago
Pixels vs Ems commentary | AlastairC
An article from Evan Minto did the rounds on Medium a while ago: Pixels vs. Ems: Users DO Change Font Size, and I posted a couple of comments which I’d rather didn’t disappear so I’ll summarise them here: I don’t dispute the data, which showed around 3% of visits didn’t use the standard 16px default text-size setting. However, do question the conclusion, in terms of what we should do about it (i.e. convert everything to EMs/REMs).
wd  wd-accessibility  wd-units 
19 days ago
The new (and old) CSS units you've never heard about - DEV Community 👩‍💻👨‍💻
JavaScript is evolving fast, recently, but it's not like the other web development language companions are set to stone either. CSS is evolving too, and even though Houdini is probably going to set a new breakthrough in CSS development, it's unfortunately far beyond wide adoption. So we have the usual drill of expert meetings, that produce new specifications and so on... Not like TC39's fast-paced progression, but still.
wd  wd-units 
20 days ago
alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
A simple and easy to use library to create fullscreen scrolling websites (also known as single page websites or onepage sites). It allows the creation of fullscreen scrolling websites, as well as adding some landscape sliders inside the sections of the site.
wd  wd-js  wd-uses--bower  wd-uses--npm  wd-uses--github 
4 weeks ago
Cloze Testing— The Leading UX Test for Content Comprehension
Working in the product industry for over a decade, I only learned about Cloze testing in 2016 — and I wish I learned sooner. Often times, we assess content comprehensibility through correlative metrics: like tracking certain events (clicking a button), conversions (signing up), or other content variants (A/B testing). We also ask subjective questions in user surveys: “Which wording is easiest for you to understand?”
ux  ux--testing 
4 weeks ago
New CSS Logical Properties! – Elad Shechter – Medium
Most of us developers used to think in terms of left and right, top and bottom. This is because in the early days of the internet, it was meant mostly for uploading documents, and not for the complex website structures we know today. This is the reason that no one considered the needs of multiple language websites.
wd  wd-css  wd-localisation  wd-src--medium 
4 weeks ago
List of Pseudo-Elements to Style Form Controls
Styling form elements is a pain point when developing web applications. Historically, web developers have had to accept the form controls the browser provided with little hope of customization. However, web rendering engines are increasingly adding hooks through pseudo-elements to give authors some control over the display.
wd  wd-forms  wd-forms--input  wd-forms--button  wd-forms--progress  wd-forms--search  wd-forms--select  wd-forms--slider 
4 weeks ago
Using aria-live
Many web pages today have their content dynamically changed using Javascript. An example of this is the search page on this blog. When the page is initially loaded, the only content in the <main> section of the page is a search form. But, when you type in a query such as “css” and search, several articles related to that term begin to appear on the page.
wd  wd-accessibility  wd-accessibility--aria  wd-src--bitsofcode 
5 weeks ago
Performance Calendar » All about prefetching
Prefetching is a technique that can be used to achieve near-instant page loads. This technique has been used for decades to speed up hardware and compilers; but it’s only been recently, thanks to the introduction of the Network Information API, that it’s usage to speed up web applications has become practical. The Network Information API makes it possible to use different prefetching strategies for different connection types and this vastly improves the performance of prefetching. This article will explain how prefetching works and how developers can start using it.
wd  wd-performance  wd-performance--prefetch 
5 weeks ago
Surya Siddhanta - Wikipedia
The Surya Siddhanta is the name of a Sanskrit treatise in Indian astronomy from the late 4th-century or early 5th-century CE. The text survives in several versions, was cited and extensively quoted in a 6th-century CE text by Varahamihira, was likely revised for several centuries under the same title. It has fourteen chapters. A 12th-century manuscript of the text was translated into English by Burgess in 1860.
media  media--books  science  science--formal  history  history--02-ancient-history 
6 weeks ago
Smooth Text Scaling in JavaScript & CSS – Autodesk TLV – Medium
While working on a new annotations feature, aimed to let the user draw different shapes on a document, I was asked to support text markups as well. Now, text is a tricky thing. On the one hand, you do want to use all the browser’s native APIs, because otherwise, you’ll get into too many edge cases. On the other hand, sometimes the browser has its own limits. Let’s take a look at the following scenario — You have a div with multiple lines of inner text, and you want to be able to zoom in and out to it. How can we approach it?
wd  wd-js  wd-typography  wd-typography--rendering  wd-src--medium 
7 weeks ago
Accessible SVG Icons with Inline Sprites - 24 Accessibility
If we were searching for reasons to use icons on a project, we don’t need to go far in order to find them. As Oliver Reichenstein wonderfully put it in his talk “On Icons” at Smashing Conference Freiburg 2016: “At a certain stage in a project someone always comes in and says: ‘We need icons!'” And why do people need icons?
wd  wd-accessibility  wd-accessibility--images  wd-images  wd-images--svg 
7 weeks ago
Preventing Content Reflow From Lazy-Loaded Images | CSS-Tricks
You know the concept of lazy loading images. It prevents the browser from loading images until those images are in (or nearly in) the browser's viewport. There are a plethora of JavaScript-based lazy loading solutions. GitHub has over 3,400 different lazy load repos, and those are just the ones with "lazy load" in a searchable string! Most of them rely on the same trick: Instead of putting an image's URL in the src attribute, you put it in data-src — which is the same pattern for responsive images:
wd  wd-images  wd-performance  wd-performance--lazyload  wd-src--css-tricks 
7 weeks ago
Everything about CSS environment variables
When the iPhone X came out with the infamous notch, you may have heard of the new safe-area-inset values, which allowed browsers to detect the area of the screen that was covered by the notch and move content around appropriately. Recently, these values have been formalised as part of a new specification for CSS Environment Variables. This specification is still in the stage of Editor’s Draft which means that, although some browsers may begin implementation, it is not yet an official part of the specification. However, it does have good support with browsers that need it, e.g. iOS Safari on the iPhone X, and can be used in a progressive way.
wd  wd-css  wd-src--bitsofcode 
7 weeks ago
Vapid: an intentionally simple CMS
Vapid is an intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML.
wd  wd-cms 
7 weeks ago
The Best Way to Display Text Fields
The most common interface component used to request user information on forms is the text field. They come in various shapes and styles. But what is the best way to display them for optimal usability? The best way signifies to users how the text field functions and how to interact with it. In other words, it follows the principle of Clarity. Strong visual cues are what give text fields clarity.
ux  ux--patterns  wd  wd-forms  wd-forms--input 
7 weeks ago
Inclusive user testing — tips and learnings – UX Collective
I’ve been active in the field of UX Design for a little over twenty years now. I started out as a user researcher, but slowly grew into the role of designer, as that’s where my true passion lies. But I’ve never really let go of the research role. Over the years I’ve organised studies, interviewed dozens and dozens of users and observed even more.
ux  ux--testing  wd  wd-accessibility  wd-src--medium 
7 weeks ago
Drop-Down Usability: When You Should (and Shouldn't) Use Them - Articles - Baymard Institute
Deciding when to use a drop-down — or when to use another interface type, such as a radio button interface or open text field — for a specific input can be tricky.In e-commerce, most users will encounter drop-down menu inputs while navigating the checkout flow, for a wide variety of inputs. However, our large-scale usability testing reveals that using drop-down menus for the “wrong” input types can lead to slower checkout completion times, field validation errors, and unnecessary user attention being devoted to optional fields, all of which increase the likelihood of checkout abandonments.
ux  ux--patterns  wd  wd-forms  wd-forms--input 
7 weeks ago
Accessibility for Visual Design | UX Booth
They say beauty is in the eye of the beholder. As designers, we need to remember that the same is true of color and all visual abilities. It’s estimated that 4.5% of the global population experience color blindness (that’s 1 in 12 men and 1 in 200 women), 4% suffer from low vision (1 in 30 people), and 0.6% are blind (1 in 188 people). It’s easy to forget that we’re designing for this group of users since most designers don’t experience such problems.
design  design--inclusive  wd  wd-accessibility  wd-src--uxbooth 
7 weeks ago
Design Guidelines for Input Steppers
Reduce input effort for fields with values that deviate little from the default by allowing users to increase or decrease the number in a single button press. Avoid this GUI control for values with large variability.
wd  wd-forms  wd-forms--input  wd-src--nn-group 
9 weeks ago
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 
9 weeks 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 
10 weeks 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 
10 weeks 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 
10 weeks 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 
10 weeks 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 
10 weeks 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 weeks 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 weeks 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 weeks 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 weeks 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 
11 weeks 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 
11 weeks 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 
11 weeks 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 
11 weeks 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 
11 weeks 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 
12 weeks 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 
12 weeks 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 
12 weeks 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 
12 weeks 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 
12 weeks 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 
october 2018
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 
october 2018
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 
october 2018
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 
october 2018
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 
october 2018
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 
october 2018
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 
october 2018
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 
september 2018
BeerSlider
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 
september 2018
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 
september 2018
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 
september 2018
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 
september 2018
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 
september 2018
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 
september 2018
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 
september 2018
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 
september 2018
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 
september 2018
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 
september 2018
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 
september 2018
CSS Grid — The Beginner’s Guide – freeCodeCamp.org
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 
september 2018
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 
september 2018
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 
september 2018
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 
september 2018
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 
september 2018
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 
september 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 history history--02-ancient-history humor internet language law mac mac--apple-tv mac--apps mac--ios maps math media media--books psychology science science--formal 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-docker 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:



description:


tags: