Tags: progress

334

sparkline

The power of progressive enhancement – No Divide – Medium

The beauty of this approach is that the site doesn’t ever appear broken and the user won’t even be aware that they are getting the ‘default’ experience. With progressive enhancement, every user has their own experience of the site, rather than an experience that the designers and developers demand of them.

A case study in applying progressive enhancement to all aspects of a site.

Progressive enhancement isn’t necessarily more work and it certainly isn’t a non-JavaScript fallback, it’s a change in how we think about our projects. A complete mindset change is required here and it starts by remembering that you don’t build websites for yourself, you build them for others.

PWA: Progressive Web All-the-things - Tales of a Developer Advocate by Paul Kinlan

Very valuable observations from Paul on his travels, talking to developers and business people about progressive web apps—there’s some confusion out there.

My personal feeling is that everyone is really hung up on the A in PWA: ‘App’. It’s the success and failure of the branding of the concept; ‘App’ is in the name, ‘App’ is in the conscious of many users and businesses and so the associations are quite clear.

The Web is Made of Edge Cases by Taylor Hunt on CodePen

Oh, this is magnificent! A rallying call for everyone designing and developing on the web to avoid making any assumptions about the people we’re building for:

People will use your site how they want, and according to their means. That is wonderful, and why the Web was built.

I would even say that the % of people viewing your site the way you do rapidly approaches zilch.

Seriously, though. What is a progressive web app? – Amberley Romo – Medium

What an excellent question! And what an excellent bit of sleuthing to get to the bottom of it. This is like linguistic spelunking on the World Wide Web.

Oh, and of course I love the little sidenote at the end.

Altering expectations by improving PWA on iOS | Responsive Web Design

Justin responds to a post of mine which was itself a response to a post by Luke.

I love having discussions like this!

abc to SVG | CSS-Tricks

Aw, this is so nice! Chris points to the way that The Session generates sheet music from abc text:

The SVG conversion is made possible entirely in JavaScript by an open source library. That’s the progressive enhancement part. Store and ship the basic format, and let the browser enhance the experience, if it can (it can).

Here’s another way of thinking of it: I was contacted by a blind user of The Session who hadn’t come across abc notation before. Once they realised how it worked, they said it was like having alt text for sheet music! 🤯

Designing for Everyone: Building Great Web Experiences for Any Device

The slides and video from a really great well-rounded talk by Aaron, filled with practical examples illustrating concepts like progressive enhancement and inclusive design.

Appscope

A directory of progressive web apps.

Badging API Explainer

Here’s an intriguing proposal that would allow web apps to indicate activity in an icon (like an unread count) in the same way that native apps can.

This is an interesting one because, in this case, it’s not just browsers that would have to implement it, but operating systems as well.

Introducing ‘My Browser’ - Andy Bell - Front-End Developer

Andy describes the technical approach he took building his handy reporting tool, My Browser:

Although the site is built with bleeding edge technology such as web components, it’s built with a progressive-first approach. This means that in order to get the best experience, you need to be on a modern browser, but to do the most basic function—reporting data, you can still do it by pressing a “generate report” button, which is the default state.

Not only is this a liberating way to work, it really pays off in performance:

We’re given so much for free to make a progressively enhanced website or web app. We’ve got feature detection and @supports in CSS which means that “My Browser” ships with no polyfills, fallbacks or hacks like Autoprefixer. The app degrades gracefully instead.

This has been a very refreshing way to work that I’ve enjoyed a lot. The fact that the whole thing comes in around 25kb tells you how effective progressive enhancement can be for performance too.

Short note on progressive ARIA by The Paciello Group

Léonie makes a really good point here: if you’re adding aria attributes to indicate interactions you’re making available through JavaScript, then make sure you also use JavaScript to add those aria attributes.

10 Progressive Web App Examples that Brand Owners can Learn From - Iflexion

Adriana Blum lists progressive web apps that are doing very, very well from Twitter, Trivago, Starbucks, Forbes, Debebhams, West Elm, Washington Post, Pinterest, AliExpress, and Lancôme.

Instead of choosing between the immediacy of a mobile website and the rich experience offered by native apps, you can now offer your target audiences the best of both and improve the commercial performance of your business to boot.

User agent as a runtime | Blog | Decade City

Ultimately you can’t control when and how things go wrong but you do have some control over what happens. This is why progressive enhancement exists.

Any Site can be a Progressive Web App - Jeremy Keith | DeltaV 2018 - YouTube

Here’s a really quick (ten minute) talk about the offline user experience that I gave at the Delta V conference recently. I’m quite happy with how it turned out—there’s something to be said for having a short and snappy time slot.

There’s a common misconception that making a Progressive Web App means creating a Single Page App with an app-shell architecture. But the truth is that literally any website can benefit from the performance boost that results from the combination of HTTPS + Service Worker + Web App Manifest.

Any Site can be a Progressive Web App - Jeremy Keith | DeltaV 2018

Progressive Web Games – Mozilla Hacks – the Web developer blog

I was just talking about how browser-based games are the perfect use-case for service workers. Andrzej Mazur breaks down how that would work:

  • Add to Home screen
  • Offline capabilities
  • Progressive loading

Web Components Club – A journal about learning web components

Andy Bell is documenting is journey of getting to grips with web components. I think it’s so valuable to share like this as you’re learning, instead of waiting until you’ve learned it all—the fresh perspective is so useful!

Design Patterns on CodePen

This ever-growing curated collection of interface patterns on CodePen is a reliable source of inspiration.

The Amish understand a life-changing truth about technology the rest of us don’t — Quartz

The headline is terrible but this interview is an insightful look at evaluating technology.

I remember Kevin Kelly referring to the Amish as “slow geeks”, and remarking that we could all become a little more amish-ish.

It’s not that the Amish view technology as inherently evil. No rules prohibit them from using new inventions. But they carefully consider how each one will change their culture before embracing it. And the best clue as to what will happen comes from watching their neighbors.

The Slow Death of Internet Explorer and the Future of Progressive Enhancement · An A List Apart Article

Oliver Williams makes the case—and shows the code—for delivering only HTML to old versions of Internet Explorer, sparing them from the kind of CSS and JavaScript that they can’t deal with it. Seems like a sensible approach to me (assuming you’re correctly building in a layered way so that your core content is delivered in markup).

Rather than transpiling and polyfilling and hoping for the best, we can deliver what the person came for, in the most resilient, performant, and robust form possible: unadulterated HTML. No company has the resources to actively test their site on every old version of every browser. Malfunctioning JavaScript can ruin a web experience and make a simple page unusable. Rather than leaving users to a mass of polyfills and potential JavaScript errors, we give them a basic but functional experience.

How to display a “new version available” of your Progressive Web App

This is a good walkthrough of the flow you’d need to implement if you want to notify users of an updated service worker.