That’s a harsh headline but it is unfortunately deserved. We should indeed hold Mozilla to a higher standard.
Sunday, December 17th, 2017
Monday, November 6th, 2017
Installing Progressive Web Apps
It used to literally say “add to home screen.”
Now it simply says “add.”
I vaguely remember there being some talk of changing the labelling, but I could’ve sworn it was going to change to “install”. I’ve got to be honest, just having the word “add” doesn’t seem to provide much context. Based on the quick’n’dirty usability testing I did with some co-workers, it just made things confusing. “Add what?” “What am I adding?”
Additionally, the prompt appeared immediately on the first visit to the site. I thought there was supposed to be an added “engagement” metric in order for the prompt to appear; that the user needs to visit the site more than once.
You’d think I’d be happy that users will be presented with the home-screen prompt immediately, but based on the behaviour I saw, I’m not sure it’s a good thing. Here’s what I observed:
- The user types the URL
archive.dconstruct.orginto the address bar.
- The site loads.
- The home-screen prompt slides up from the bottom of the screen.
- The user immediately moves to dismiss the prompt (cue me interjecting “Don’t close that!”).
This behaviour is entirely unsurprising for three reasons:
- We web designers and web developers have trained users to dismiss overlays and pop-ups if they actually want to get to the content. Nobody’s going to bother to actually read the prompt if there’s a 99% chance it’s going to say “Sign up to our newsletter!” or “Take our survey!”.
- Because the prompt now appears on the first visit, no trust has been established between the user and the site. If the prompt only appeared on later visits (or later navigations during the first visit) perhaps it would stand a greater chance of survival.
It’s still possible to add a Progressive Web App to the home screen, but the option to do that is hidden behind the mysterious three-dots-vertically-stacked icon (I propose we call this the shish kebab icon to distinguish it from the equally impenetrable hamburger icon).
I was chatting with Andreas from Mozilla at the View Source conference last week, and he was filling me in on how Firefox on Android does the add-to-homescreen flow. Instead of a one-time prompt, they’ve added a persistent icon above the “line of death” (the icon is a combination of a house and a plus symbol).
When a Firefox 58 user arrives on a website that is served over HTTPS and has a valid manifest, a subtle badge will appear in the address bar: when tapped, an “Add to Home screen” confirmation dialog will slide in, through which the web app can be added to the Android home screen.
This kind of badging also has issues (without the explicit text “add to home screen”, the user doesn’t know what the icon does), but I think a more persistently visible option like this works better than the a one-time prompt.
Firefox is following the lead of the badging approach pioneered by the Samsung Internet browser. It provides a plus symbol that, when pressed, reveals the options to add to home screen or simply bookmark.
I don’t think Chrome for Android has any plans for this kind of badging, but they are working on letting the site authors provide their own prompts. I’m not sure this is such a good idea, given our history of abusing pop-ups and overlays.
Sadly, I feel that any solution that relies on an unrequested overlay is doomed. That’s on us. The way we’ve turned browsing the web—especially on mobile—into a frustrating chore of dismissing unwanted overlays is a classic tragedy of the commons. We blew it. Users don’t trust unrequested overlays, and I can’t blame them.
For what it’s worth, my opinion is that ambient badging is a better user experience than one-time prompts. That opinion is informed by a meagre amount of testing though. I’d love to hear from anyone who’s been doing more detailed usability testing of both approaches. I assume that Google, Mozilla, and Samsung are doing this kind of testing, and it would be really great to see the data from that (hint, hint).
But it might well be that ambient badging is just too subtle to even be noticed by the user.
On one end of the scale you’ve got the intrusiveness of an add-to-home-screen prompt, but on the other end of the scale you’ve got the discoverability problem of a subtle badge icon. I wonder if there might be a compromise solution—maybe a badge icon that pulses or glows on the first or second visit?
Of course that would also need to be thoroughly tested.
Thursday, October 19th, 2017
It must be the day for documenting the history of CSS. Here’s an article by Aaron on the extraordinary success story of CSS Grid. A lot of the credit for that quite rightly goes to Rachel and Jen:
Starting with Rachel Andrew coming in and creating a ton of demos and excitement around CSS Grid with Grid by Example and starting to really champion it and show it to web developers and what it was capable of and the problems that it solves.
Then, a little bit later, Jen Simmons created something called Labs where she put a lot of demos that she created for CSS Grid up on the web and, again, continued that momentum and that wave of enthusiasm for CSS Grid with web developers in the community.
Tuesday, October 3rd, 2017
A ten-part tutorial on CSS Grid from Mozilla.
Friday, September 29th, 2017
Wednesday, September 27th, 2017
I was in Singapore last week. It was most relaxing. Sure, it’s Disneyland With The Death Penalty but the food is wonderful.
But I wasn’t just there to sample the delights of the hawker centres. I had been invited by Mozilla to join them on the opening leg of their Developer Roadshow. We assembled in the PayPal offices one evening for a rapid-fire round of talks on emerging technologies.
We got an introduction to Quantum, the new rendering engine in Firefox. It’s looking good. And fast. Oh, and we finally get support for
But this wasn’t a product pitch. Most of the talks were by non-Mozillians working on the cutting edge of technologies. I kicked things off with a slimmed-down version of my talk on evaluating technology. Then we heard from experts in everything from CSS to VR.
The highlight for me was meeting Hui Jing and watching her presentation on CSS layout. It was fantastic! Entertaining and informative, it was presented with gusto. I think it got everyone in the room very excited about CSS Grid.
The Singapore stop was the only I was able to make, but Hui Jing has been chronicling the whole trip. Sounds like quite a whirlwind tour. I’m so glad I was able to join in even for a portion. Thanks to Sandra and Ali for inviting me along—much appreciated.
In these times of centralised services like Facebook, Twitter, and Medium, having your own website is downright disruptive. If you care about the longevity of your online presence, independent publishing is the way to go. But how can you get all the benefits of those third-party services while still owning your own data? By using the building blocks of the Indie Web, that’s how!
‘Twould be lovely to see you there.
Thursday, September 21st, 2017
Make Twitter Great Again:
Fix Twitter is a browser extension to always show “replying to” in replies and threads along with an option to restore the old-school @-mentions.
Tuesday, August 22nd, 2017
Lin gives a deep dive into Firefox’s new CSS engine specifically, but this is also an excellent primer on how browsers handle CSS in general: parsing, styling, layout, painting, compositing, and rendering.
Monday, May 25th, 2015
I believe that Mozilla can make progress in privacy, but leadership needs to recognize that current advertising practices that enable “free” content are in direct conflict with security, privacy, stability, and performance concerns — and that Firefox is first and foremost a user-agent, not an industry-agent.
Friday, December 19th, 2014
This page does a great job of explaining Mozilla’s thinking behind “pinned apps”—an idea that would be great for the whole web, not just Firefox users.
Tuesday, August 23rd, 2011
This abuse of the !important declaration in Firefox’s user-agent stylesheet was driving me crazy recently. Roger proposes a CSS patch, but this is really something that needs to be fixed in the browser.
Wednesday, August 17th, 2011
Finally. Hyphenation on the web.
Pretty much the only forms of Western literature that don’t use hyphenation are children’s books and websites. Until now.
Wednesday, April 6th, 2011
More brilliant and useful code from Glenn: copy and paste contact details from one URL into a form on another URL.
Wednesday, March 9th, 2011
A rather vicious evaluation of browser support for the audio element and the audio API. It is divided up into:
- Browsers From Companies That Actually Care About HTML5 Audio
- Browsers From Companies That Hate the Web Enough to Not Support Ogg/Vorbis, but do Have an Audio Tag So They Can Say They Have an Audio Tag (Seriously, Fuck You)
- Browsers That Say They Support HTML5 Audio But Actually Don’t Support HTML5 Audio
Monday, January 3rd, 2011
A heated discussion around the decision in Firefox 4 to remove the RSS icon from the address bar.
Wednesday, November 10th, 2010
A quick run-through of some of the new HTML5 form features coming in Firefox 4.
Tuesday, May 11th, 2010
Henri Sivonen gives the lowdown on the HTML5 parser that will ship with the next version of Firefox. This is a huge development ...and yet users won't even notice it (by design).
Tuesday, November 24th, 2009
Aza Raskin share's some mockups of ideas for incorporating identity management into the browser.
Wednesday, August 5th, 2009
Plug in and huffduff
Beer o’clock in Brighton begins shortly after work ends on a Friday evening. That’s when the geeks of Brighton unshackle themselves from their keyboards and monitors to congregate in a pub. If the weather is good, it’ll be a sunny pub. Last friday the Clearlefties descended on The Eagle where we were joined by Ribotians and others.
Glenn showed up and we proceeded to geek out on our usual favourite topics; microformats and data portability. He had spent the day hacking on a Firefox plug-in. If you haven’t tried his Identify extension, do yourself a favour and install it—it’s quite astounding.
I mentioned that I had tried to hack together my own Firefox extension for Huffduffer but was thwarted by my lack of skill in reverse-engineering and penetrating the documentation. I wanted to provide a fairly simple behaviour: right-click on a link to an audio file and select an option to huffduff it.
Two days later I got an email from Glenn with a file attached …a Firefox extension he built for huffduffing. Fantastic!
Anyway, grab the Huffduffer Firefox plug-in for yourself and give it a whirl.
Next time it’s beer o’clock in Brighton, I owe Glenn a beer.
Monday, August 3rd, 2009
Thanks to the brilliant Glenn Jones, there is now a Firefox plug-in for Huffduffer. Right-click on a link to an audio file and select "Huffduff it" and you will get the pre-filled Huffduffer form in a pop-up window.