The Best Of The Internets

Extensible remote browser debugging via node.js. ’Nuff said.

Air travel is a great real-world analogy for progressive enhancement. Kudos to Christian for coming up with it!

Progressive enhancement is not about adding more work to your product. It is about protecting the main use case of your product and then enhance it with new functionality as it becomes available. Google is a great example of that. Turn off JavaScript and you still get a form to enter information in and you get a search result page with ads on it. This is how you find things and Google makes money. Anything else they added over time makes it more convenient for you but is not needed. It also offers them more opportunities to show you more ads and point at other services.

Many thanks to Ben Frain for surfacing these issues.

The stock Android browser that shipped with Android 2.1–4.3 used the old version of the Flexible Box Layout Module. … Those are the principal devices you are likely to encounter these issues on.

A good overview of why the “hamburger” can’t stand alone.

“I did multiple tests,” says James Foster, a web developer based in New Zealand, who has surveyed users’ interactions with the button over the course of many months. “The results all came out the same—the icon is not as clear to some users as developers and designers think it is.”

Adding the word “menu” underneath the three lines increases the button’s use by 7.2%, according to Foster’s tests.

Putting the hamburger inside a box, so it looks like a button, increases use by 22.4%.

Switching the lines for the word “menu” makes 20% more people click, Foster found.

An interesting look at color blindness from Aaron Tenbuuren, a designer living with it. He offers some great examples of good design for color blind users from Trello, Google, and more.

[W]hen designing apps, we should not look at individual colors and ask if they are ‘visible’, but rather look at groupings of colors, and see if they are distinguishable. Even then, we may require more visual aids to make sure that users will not mistake one color for another.

Still one of my favorite examples of reduced support improving usability (emphasis mine):

By contrast, the method used here at A List Apart (XHTML for structure, CSS for layout and design) ensures that every reader has access to the site’s text, but allows the design to “disappear” if the browser can’t handle it. No 4.0 browser can handle it.

We assume that those who choose to keep using 4.0 browsers have reasons for doing so; we also assume that most of those folks don’t really care about “design issues.” They just want information, and with this approach they can still get the information they seek. In fact, since we began hiding the design from non–compliant browsers in February 2001, ALA’s Netscape 4 readership has increased, from about 6% to about 11%.

This piece echoes much of what was said at Responsive Day Out: Step outside your bubble. Learn about how others experience the web. Design for a continuum and you will support more users with fewer headaches.

Microsoft’s Frank Oliver has a nice write-up on the importance of browser interoperability and what the browser team has done with Microsoft Edge.

A bit from Akamai’s Guy Podjarny on the high cost of images and what you can (and should) do about it.

Images are also the single biggest resource type on a page, making up 63% of overall page weight. If we removed all images from the top 1,000 websites, these sites would load 30% faster on average over 3G.

The highlights:

• Scroll snapping (see also David Storey’s write-up on this)
• Some ECMAScript 6
• CSS Filters
• Removing some vendor prefixes

The yawners:

• Pinned sites
• Force touch
• HTML Video picture in picture

Overall I’m kind of meh on the updates. I was hoping for more.