Of the Web

This isn’t anything new. If you think about it, sites that used the Flash plug-in to deliver their experience were on the web, but not of the web. They were using the web as a delivery mechanism, but they weren’t making use of the capabilities of the web for universal access. As long as you have the Flash plug-in, you get 100% of the intended experience. If you don’t have the plug-in, you get 0% of the intended experience. The modern equivalent is using a monolithic JavaScript library like Angular. As longer as your browser (and network) fulfils the minimum requirements, you should get 100% of the experience. But if your browser falls short, you get nothing. In other words, Angular and its ilk treat the web as a platform, not a continuum.“Angular momentum” by Jeremy Keith

As I try to expand my knowledge of web technologies, and try to learn more about back-end development, I keep looking at frameworks like Angular or Ember. As a front-end developer that eventually wants to be full stack, it would seem the natural progression for me would be similar to the same approach progressive enhancement takes. I started by learning HTML and CSS. Then, I started learning JavaScript. Now, I’m trying to learn more about creating complex websites and web applications that go beyond what just front-end technologies can do. When looking into Angular a few months ago, at first I was amazed “Wow! I don’t really have to touch the server much and I can use my JavaScript knowledge to make a sweet web app!”

But something kept nagging me in the back of my mind. This isn’t the web if I turn off JavaScript the site is just a blank white screen. The more I’ve done web development, the stronger I believe in web standards and progressive enhancement as fundamentals of the web. I love using the latest browsers on fast machines with fast Internet. It’s really awesome what some web sites/applications are doing today...and that’s great. But I’m rare. Not everyone is using the latest Chrome on a retina Macbook. When I make a site, I do use cool new CSS3 technologies and optimize for devices like mine, but I don’t want visitors that aren’t as privileged as me to get a blank website.

I hate supporting old versions of Internet Explorer as much as the next person, but I’ve learned a lot while doing it. The problem I run into now is being able to convince the stakeholders for a project to accept that websites do not need to look (and act!) the same in every browser. I work for a company whose standard browser is IE8. We’re in the process of transitioning over to Chrome, but we’ve been in that process for months and months. Eventually, it’ll happen. But it’s very difficult right now to convince a stakeholder that I’d like to make this site for them, but in IE8 it won’t function the same as it will in Chrome.

Right now we’re working on making a very simple podcast player for people to primarily use on their mobile devices on the go. The premise is very simple: it’s one podcast, and new episodes appear bimonthly. It just started, so right now there are only four episodes. The layout is basic: there’s a audio player, a list of all episodes, and an RSS link that one can use to download and play episodes in a podcast app instead of using the website. Now, immediately I wanted to use native HTML5 audio. That’s great, but of course the company standard doesn’t support HTML5 audio. Now, I could provide a Flash fallback (and that’s currently what we’re doing), but ideally I’d want to not rely on a plugin and instead use progressive enhancement here.

A proposed progressive enhancement approach

Let’s start from the bottom up.

No CSS, No JavaScript, Old Browser

It could happen. I believe in having clean markup and a separation of concerns, so the HTML should be as concise and semantic as possible. There’s the logo and title at the top, in an h1. Then, an audio tag with a fallback message. After that, an ol with the list of podcast episodes, containing the title and a link to download the mp3. At the bottom is a link to subscribe to the RSS. With only HTML, this page still works. Users can’t stream the podcast, but they can still download the episodes and play them on their computer.

<h1>  
  <img src="logo.png" alt="A Descriptive Alt Tag for the Logo" /> 
  The Name of the Podcast Player</h1>
<audio controls>  
  <source src="episode2.mp3" type="audio/mpeg" />
  <source src="episode2.ogg" type="audio/ogg" />
  <p>Sorry, your browser does not support HTML5 audio. Please download the episodes below.</p>
</audio>  
<ol>  
  <li><a href="episode2.mp3">Episode 2</a></li>
  <li><a href="episode1.mp3">Episode 1</a></li>
</ol>  
<a href="thissite.com/rss">Subscribe to the RSS feed</a>  

No JavaScript, Old Browser

Similar to the previous, except this time there’s some styling to the site. With no support for HTML5 audio, the message stays the same. And with no Flash fallback, users still get the option to download whichever episodes they choose.

No JavaScript, Modern Browser

Well, aren’t we lucky. With a modern browser, we can actually listen to the most recent episode since it is conveniently placed in the source element for the audio. This means the user can stream the most recent episode. Now, they won’t be able to choose any other episodes to stream on the page, but they can either choose to download older episodes or open them in a new tab/window in their browser and stream them there.

Modern Browser

This is the best of the best. Now we’ll use JavaScript to replace the existing audio tag and create a custom audio player interface to match the site’s style. Plus, users will now be able to click on any episode in the list to have that start playing in our audio player. We’ll even add specific download buttons for people that just want to download the MP3s to their device instead of streaming on the page.

If Only It Were That Simple

As I mentioned above, this is the ideal situation. It’s very hard to convince stakeholders that you don’t think the site should use Flash and therefore people using the current company-standard browser won’t be able to stream the podcast on the page. After all, they can go to Youtube or Soundcloud and watch videos and listen to podcasts in IE8 no problem.

Perhaps I just haven’t had enough experience arguing for progressive enhancement or this is not worth it. But the alternative is always going “Well this time we’ll just throw in Flash” or “Everyone will have JavaScript that uses this thing, trust me” to the point where we end up getting sites like this:

Angular’s own API doc site without JavaScript enabled
Not so super-powered.