The Web began as markup only, and then some script and styling. For many developers, especially us veterans, it’s hard to imagine a Web without plug-ins. Since the earliest days, browser plug-ins like Flash and ActiveX have been the main way to create rich online experiences for more sophisticated Web experiences.
How the heck did we get here? And, more importantly, where are we — where should we — be going?
In this six-part series, we’ll take a hands-on look at the evolution of the Web to what many (including me) see as a shift toward plug-in free. I’ll focus on common Web experiences that have already been written with a plug-in and show you how to convert, and enhance them with HTML5.
(To make sure we’re all on the same page: “plug-ins” here refers broadly to browser extensions that run native, i.e. not Web, client code using low-level browser interfaces. For example, here is a basic description of Webkit’s approach; the IE equivalents are ActiveX controls and Browser Helper Objects. Web sites use a wide variety of plug-in; Adobe Flash is one of the most common.)
But before we get to the “how”, let’s talk briefly about the “why.”
What’s Driving the Shift?
In many minds Apple, rightly or wrongly, famously or infamously, got the “no plug-in” ball rolling. The company, citing security and power concerns, never supported plug-ins for iPhones and iPads. Since then, there’s been a public, sometimes personal, sometimes confusing push-pull between the tech giants: Apple, Google, and Microsoft. Much of the m.<domain> web emerged from the lack of plug-in support and the lack of web standards like device size/orientation, network directives, etc. initially, which have now evolved for use across devices and browsers. Support for plug-ins, sometimes enthusiastic, sometimes required by law, sometimes grudging, remains. But the long-term trends favoring the diminishing importance of plug-ins are clear:
Mobility. We’ve all seen the spectacular numbers, so no need to dutifully rehash here. A couple of data point reminders will suffice. Mobile data traffic doubled each year between 2008 and 2011, according to research by Cisco. I picked this study because it looks at mobile traffic rather than the sheer number of mobile devices sold. That’s a better measure, because people often stop using a device after buying a new one, and leave the old one sitting around.
Then, in 2012, tablets really took off. Researcher IDC reported 52.5 million units sold in 4Q 2012. A full 40% were Apple devices running iOS-and no plug-ins. Samsung saw a stunning 263% quarter over quarter growth from the previous year, selling 8 million units of Android and Windows 8 mobile devices. True, those devices can run plug-ins, but not so fast…
Touch. The other big half of the mobile story is, of course, touch. Most plug-ins are not designed for touch. And these days, not touching touch is, well, a bit touched. And because they are separate applications from the browser, plug-ins don’t benefit from a lot of the changes in touch-optimized browsers like Internet Explorer 10 that make Websites work smoothly with touch.
HTML5. Sure, it’s far from fully baked. But standards-based technologies specified by the World Wide Web Consortium (W3C), like those ones comprising HTML5, can increasingly do much of what plug-in can do. (We’ll dig into this). These technologies have strong support across modern Web browsers. That makes it possible for developers to write the same markup and script that works across all modern browsers (in theory at least). No need to write or maintain additional code that has third-party framework and runtime dependencies. Nice.
No wonder, according to Forrester’s Sheldon, that “leading online brands, including Apple (emphasis mine), Best Buy, Four Seasons Hotels, and Rue La La are now removing plug-ins entirely and putting the features of HTML5 to use on their desktop-, mobile-, and tablet- optimized sites.
He concludes: “We are at an inflection point: With consumer adoption of HTML5 capable desktop browsers widespread and Web developer understanding of the technology rapidly maturing, HTML5 is no longer an emerging toolset for mobile and tablet development. Instead, it is fast becoming the de facto standard for Web experience innovation across touch points.”
It’s time to be collectively mindful and move the Web away from plug-ins. Instead of creating yet another Web as was done with mobile, let us build one, and “bring mobile home”.
Plug-ins vs. Plug In-Free
So those are some of the big market drivers. But as long as we’re poking at proprietary plug-ins, let’s very briefly point out their technical shortcomings (Steve Jobs wasn’t all wrong). With varying degrees of arguability, it’s fair to generalize about plugs-ins and their alternatives:
Resource Hogs. Because they’re essentially applications that run alongside the browser, plug-ins consume additional system resources and drain batteries. And browser vendors have a limited ability to control the actual plug-in experience to this regard. Users, typically mobile users, hate that. Plug-in free promises longer battery life.
Security Dangers. Historically, plug-ins have been one of the most common areas of vulnerability on the browser. More recently, browser vendors have been shipping a more sandboxed version of plug-ins to reduce the problem (example: Internet Explorer 10). But if you do include them, be sure to test independently and then on the Webpage it’s embedded in…across each browser.
Finicky Across Browsers and OSes. Plug-ins are based on proprietary technologies. That makes it difficult to predict or control their support across different browsers and operating systems – a real drawback in today’s multi-device world. Many users don’t distinguish between a plug-in and a Web browser. In their minds, it’s all one user experience. So asking them to upgrade their plug-ins introduces unnecessary friction (and sometimes confusion), inhibiting what you really want them to do.
In contrast, HTML5 offers Web developers interoperability across browsers and devices, better forward compatibility, and easier overall site maintenance. Best of all, users get what they want – nothing prevents them from having a great experience on your site. And with the possibility of lowers costs of development, you can definitely see a path to a more open, more accessible Web, that allows you to reuse your code across multiple devices and platforms (example: Window Store apps written in HTML5).
Plug-ins Will Evolve
Indeed, the Web site Theme Squirrel recently highlighted the top 15 HTML5 plug ins of 2013. The list shows a rich variety of standards-based plug-ins advocates say offer superior quality, security, and consistency over proprietary browser plug-ins.
Imagining a Plug-in Free World
Where does that leave us?
Over the past couple of years, I’ve spoken to a lot of plug-in developers who have insisted you cannot do great work without plug-ins. The fact is that today with HTML5, you can successfully do most of the things you previously needed plug-ins for. Case and point, look at these sites:
Is it perfect? No.
Some key HTML5 features are not as good as their plugged-in counterparts (example: HTTP LiveStreaming, DRM). Sure, there’s been a lot of hype around HTML5, and 2022, the expected finish date, is a long way off. And let’s be honest: development tools for HTML5, though evolving, have a ways to go.
Put it all together and it means you can build your Websites and Web apps using the latest HTML5 technology without getting bogged down with plug-ins. And your app will function not only on desktops and notebooks, but mobile devices as well.
Using third-party tools you can package a site into a single app to sell on a store as a mobile app. Your apps will also work very well on the new Windows 8 interface, and you can sell them in the Windows Store. This is all sounding like a good deal, is it not?
My Own Unplugging Story
A few months ago, I upgraded the hard drive on my computer. I took the opportunity to move up to Windows 8 full time. With the help of a program called VirtualBox, I installed the latest version of Ubuntu. I also downloaded the free VMs of Windows for my test matrix. In both OSes, I actively refused to install any browser plug-in. No plug-in, no Silverlight, no Java, none. For PDF files, I switch between browsers, and let IE open them outside the browser. Chrome has a native PDF viewer built in. So no plug-in there, either. Chrome does include its own version of plug-ins, but I disabled that too.
My reasons were twofold. First, I wanted to experience the Web without plug-ins and see just how usable it is. That will give me, a developer, a true feel for life without plug-ins, and whether we are really there yet. And second, as a teacher and writer, it lets me experience shortcomings firsthand so I can contribute any learning that might help the next guy embrace standards and make further advances towards a plug-in-free world.
The result? I’m absolutely fine. All the sites I use have shifted to plug-in-free. Yes, I occasionally run across a site that needs plug-ins. But one of two things happens: Either the plug-in is just some kind of graphic image at the top that I can ignore, or I end up not using the site.
Think about that last point. I don’t use the site. I’m not the only person who has stopped using plug-ins. My prediction is that plug-ins-based sites will see a drop in visitors because so many devices (such as iOS) don’t have plug-ins. And plug-ins on Android devices can be a slow, not great experience. Plus, the sheer number of iOS devices out there should make you think hard about using plug-ins, since doing so instantly excludes a big chunk of the market.
And so I conclude: now is the time to take a serious look at creating plug-in-free sites. Not as a magic, flip the switch moment, but as the quickening of a journey toward a Web with many fewer, and perhaps none, of the plug-in workarounds required today.
Our Approach: Show and Tell Using Real Sites
So, that brings me back to this series. Instead of just telling you things, I will show you how to modernize actual, existing sites that use plug-ins, without using plug-ins. We won’t reverse engineer or duplicate them exactly. Rather, we’ll talk about the general idea of what the plug-ins apps do, then show how you can do something similar with a plug-in-free browser.
Of course, for this approach to work, the browser needs to support HTML5. And which browsers are those? All of the latest major browsers. Today, in 2013, all the latest versions of the major browsers support HTML5, including IE9, IE10, and the browsers on iOS and Android devices.
In the next article, we’ll start walking.
This article is part of the HTML5 tech series from the Internet Explorer team. Try-out the concepts in this article with free virtual machines for Mac, Linux, or Windows @ http://modern.IE
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
Learn PHP in One Day and Learn It Well