Learn the principles behind the interface
From design to website
Build visually in Webflow, just like you design. Fine-tune typography, spacing, layout, and interactions until everything looks right, then publish your site live.
Adam Silver · Jul 1, 2016
Designers love to remove labels from inputs to save space and create a minimal aesthetic. But minimal doesn’t always mean simple . And in the case of labels they improve UX because: - sighted users can see them. - visually-impaired users can hear them with a screen reader. - motor-impaired users can more easily set fo.
Heydon Pickering · Jun 30, 2016
In September of last year, I decided I wanted to hear stories about how screen reader users access The Web. I suspected, as a sighted web user, I made a lot of incorrect assumptions. Accordingly, I composed seven questions to find out about strategies for reading and operation . Following are the raw, unedited respons.
CSS Wizardry · Jun 20, 2016
Giving talks is stressful. Follow these tips to make the logistics of it a little simpler.
Adam Silver · Jun 16, 2016
The placeholder attribute can be used to put hint text inside text inputs. When the user types, the placeholder text disappears to make room for the user’s answer. Placeholders are popular because they save space and have a minimalist aesthetic. But using placeholder text for labels or even just hint text is problemat.
CSS Wizardry · Feb 21, 2016
A look at managing typography more practically on larger sites and apps
Heydon Pickering · Feb 4, 2016
Tweet // !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); //
Adam Silver · Jan 8, 2016
According to Paul Adams there are 4 aspects to design : outcome, system, interaction and visual. Unfortunately, I think we often focus our attention on the visual side of things. This can create all sorts of different usability issues. Here I‘ll share some of the most common examples of this and why it’s problematic..
Adam Silver · Dec 27, 2015
Hover menus open and close when the user moves their mouse over or out of a menu. Despite their popularity they have several downsides. Here, I’ll explain what they are and what to do instead. 1. They’re easy to open by accident Hovering the cursor over part of the interface is not an intention to activate it. Technic.
Heydon Pickering · Dec 5, 2015
(This post was originally published on Medium, put has a permanent home here.) Flexbox—not to be confused with Sex Box , the British TV show wherein Mariella Frostrup interviews people who’ve just had sex in a box—is the CSS layout toolkit de rigueur . Of all the celebrated features of Flexbox, it is the l.
Adam Silver · Oct 9, 2015
I admit: I’ve bent the web many times in the past. For example, I’ve: - used tables for layout - given submit buttons a pointer cursor - used a select box as a makeshift navigation bar In A Dao of Web Design , John Allsopp says: “If you’ve never watched early television programs, it’s instructive viewing. Television w.
Heydon Pickering · Sep 18, 2015
They say accessibility is about people. Inaccessibility is about people too, of course. In either case, it's people — flesh-and-blood, living, breathing people — that interfaces are built to cater for, successfully or otherwise. What we learn in user research is that people are unpredictable, resistant, hesitant, cont.
Adam Silver · Sep 14, 2015
James Archer has explained why the hamburger menu can cause usability problems . I thought I’d jot down a few alternative designs here. 1. Medium Medium’s success is down to it’s simplicity which can be seen in its navigation which simply drops underneath the header. Medium’s navigation stacks on small screens 2. Prod.
Lea Verou · Jul 26, 2015
As you might be aware, these days a good chunk of my time is spent working on research, at MIT . Although it’s still too early to talk about my research project, I can say that it’s related to the Web and it will be open source, both of which are pretty awesome (getting paid to work on cool open source stuff is the dr.
Heydon Pickering · Jun 28, 2015
TL;DR I'm putting together an album to raise money for an organization that supports web accessibility. I had this brainwave while nursing a hangover in Brighton after Responsive Day Out: There are a load of folks working in the overlapping fields of web standards and accessibility who are musicians. Some really quite.
Heydon Pickering · Jun 11, 2015
I have a long-held suspicion of anything directed at me — especially anything commercial — that sells itself on its "experiential" qualities. I hate the word "immersive" in particular. "Here, let me waterboard you with my new web app! You're going to love it!" Basically, I'm suspicious of anything that seeks to appeal.
Heydon Pickering · Jun 5, 2015
Frame Based Animation with Sass I wanted an easy way to create traditional animations, wherein each frame is a different drawing. I created this Sass @mixin which generates keyframe animation blocks for nth children, placing each of these "frames" in an animated sequence. Note the use of the steps(1) timing function&h.
Adam Silver · Mar 11, 2015
The role of the front-end developer extends far beyond translating designs into code. They should be involved in many other aspects of the design and development process too. User experience and interaction design Everyone is responsible for UX and front-end developers play an essential role due to their intimate rela.
Adam Silver · Sep 17, 2014
Some forms that let users sort a list sometimes consist of single select box without a submit button. Instead the form is submitted when the user selects an option ( onchange ) using JavaScript. Top: a select box without a button (bad). Bottom: a select box with a button (good). The reason for this is usually to declu.
Heydon Pickering · Aug 17, 2014
Practical ARIA Examples I have written a book about web application accessibility using WAI-ARIA for Smashing Magazine — the first of its kind. This popular page hosts all of the examples from the book and more. Explore the examples
Heydon Pickering · Aug 1, 2014
Hi everybody! I've just done a lot of cocaine on the company expense account and I want to talk to you about navigational action controls called "hyperlinks" and how to design them into your enterprise-level web application portfolio. YEEEHAWWW . What is a hyperlink? Back in the days of websites, long before The Web A.
