Thursday, May 18th, 2017
Friday, May 12th, 2017
A really interesting and well-executed portfolio site, utterly let down by the tone of this demeaning and insulting piece of copy:
WARNING: Do not proceed if you suffer from vertigo or if you find experimental interfaces offensive.
(Pssst: copy is also interface.)
Tuesday, May 2nd, 2017
A smart approach to creating patterns as symbols in Sketch. Sounds like diligence and vigilance is required to make it work, but then, that’s true of any pattern library.
Monday, May 1st, 2017
Photos of analogue interfaces: switches, knobs, levers, dials, buttons, so many buttons.
Wednesday, April 12th, 2017
A collection of interface patterns for granting or denying permissions.
There’s a lot of great knowledge in here that can be applied to plenty of other interface elements too.
Tuesday, March 21st, 2017
Sunday, March 5th, 2017
An interview with Batesy that gives a nice insight into life at Clearleft.
He’s sketching mad, that one!
Tuesday, January 31st, 2017
The ‘Credit Card Number’ Field Must Allow and Auto-Format Spaces (80% Don’t) - Articles - Baymard Institute
A deep dive into formatting credit card numbers with spaces in online forms.
Sunday, January 22nd, 2017
Under the hood it’s the same Blink engine that power’s the regular Opera browser (and Chrome) but I really like the interface on this experiment. It’s described as being a “concept browser”, much like a “concept car”, which is a nice way of framing experiments like this. More concept browsers please!
Thursday, January 19th, 2017
Some interesting insights from usability and accessibility testing at the Co-op.
We used ‘nesting’ to reduce the amount of information on the page when the user first reaches it. When the user chooses an option, we ask for any other details at that point rather than having all the questions on the page at once.
Ever been on one of those websites that doesn’t allow you to paste into the password field? Frustrating, isn’t it? (Especially if you use a password manager.)
It turns out that nobody knows how this ever started. It’s like a cargo cult without any cargo.
Monday, January 16th, 2017
A thoroughly fascinating look at which parts of a browser’s interface are available to prevent phishing attacks, and which parts are available to enable phishing attacks. It’s like trench warfare for pixels.
Tuesday, January 3rd, 2017
When I was first styling Resilient Web Design, I made heavy use of
vh units. The vertical spacing between elements—headings, paragraphs, images—was all proportional to the overall viewport height. It looked great!
Then I tested it on real devices.
Here’s the problem: when a page loads up in a mobile browser—like, say, Chrome on an Android device—the URL bar is at the top of the screen. The height of that piece of the browser interface isn’t taken into account for the viewport height. That makes sense: the viewport height is the amount of screen real estate available for the content. The content doesn’t extend into the URL bar, therefore the height of the URL bar shouldn’t be part of the viewport height.
But then if you start scrolling down, the URL bar scrolls away off the top of the screen. So now it’s behaving as though it is part of the content rather than part of the browser interface. At this point, the value of the viewport height changes: now it’s the previous value plus the height of the URL bar that was previously there but which has now disappeared.
I totally understand why the URL bar is squirrelled away once the user starts scrolling—it frees up some valuable vertical space. But because that necessarily means recalculating the viewport height, it effectively makes the
vh unit in CSS very, very limited in scope.
In my initial implementation of Resilient Web Design, the one where I was styling almost everything with
vh, the site was unusable. Every time you started scrolling, things would jump around. I had to go back to the drawing board and remove almost all instances of
vh from the styles.
I’ve left it in for one use case and I think it’s the most common use of
vh: making an element take up exactly the height of the viewport. The front page of the web book uses
min-height: 100vh for the title.
But as soon as you scroll down from there, that element changes height. The content below it suddenly moves.
Let’s say the overall height of the browser window is 600 pixels, of which 50 pixels are taken up by the URL bar. When the page loads,
100vh is 550 pixels. But as soon as you scroll down and the URL bar floats away, the value of
100vh becomes 600 pixels.
(This also causes problems if you’re using vertical media queries. If you choose the wrong vertical breakpoint, then the media query won’t kick in when the page loads but will kick in once the user starts scrolling …or vice-versa.)
There’s a mixed message here. On the one hand, the browser is declaring that the URL bar is part of its interface; that the space is off-limits for content. But then, once scrolling starts, that is invalidated. Now the URL bar is behaving as though it is part of the content scrolling off the top of the viewport.
The result of this messiness is that the
vh unit is practically useless for real-world situations with real-world devices. It works great for desktop browsers if you’re grabbing the browser window and resizing, but that’s not exactly a common scenario for anyone other than web developers.
It’s such a shame. A piece of CSS that’s great in theory, and is really well supported, just falls apart where it matters most.
Update: There’s a two-year old bug report on this for Chrome, and it looks like it might actually get fixed in February.
Friday, December 23rd, 2016
Wednesday, December 14th, 2016
Monday, December 5th, 2016
I always loved the way that Gov.uk styled their radio buttns and checkboxes with nice big visible labels, but it turns out that users never used the label area. And because it’s still so frickin’ hard to style native form elements, custom controls with generated content is the only way to go if you want nice big hit areas.
Sunday, December 4th, 2016
Henrik points to some crucial information that slipped under the radar at the Chrome Dev Summit—the Android OS is going to treat progressive web apps much more like regular native apps. This is kind of a big deal.
It’s a good time to go all in on the web. I can’t wait to see what the next few years bring. Personally, I feel like the web is well poised to replace the majority of apps we now get from app stores.
Thursday, November 24th, 2016
An illustrated history of digital iconography.
Wednesday, November 23rd, 2016
This is so wonderful! A 3D fly-through of the Apollo 11 command module, right in your browser. It might get your fan whirring, but it’s worth it.
Click through for lots of great details on the interface controls, like which kinds of buttons and switches were chosen for which tasks.
And there’s this lovely note scrawled near the sextant by Michael Collins (the coolest of all the astronauts):
Spacecraft 107, alias Apollo 11, alias ‘Columbia.’ The Best Ship to Come Down the Line. God Bless Her.