The Case for Designing with Progressive Enhancement
- The ever-widening world of the web
- The landmines of Web 2.0
- Progressive enhancement to the rescue
This chapter is from the book
This chapter is from the book
This chapter is from the book
In many ways, right now is the best possible time to be a web designer.
New sites and applications emerge at an astounding rate and transform the way we work, communicate, and live. We manage our businesses, build our relationships, voice our opinions, educate ourselves about world affairs, and find a whole range of entertainment online. Advances in web standards are making the web easier, faster, and more dynamic and powerful all the time. And “online” has been liberated from the “line” itself—an explosion of web-enabled mobile phones and compact netbooks keeps us -connected virtually everywhere.
But this bounty of Internet riches has a downside: while advanced interactions tend to work beautifully on the newest browsers that support advanced CSS and JavaScript, there’s a whole universe of web-enabled devices—from the newest Kindle or Wii - gaming system to a wide range of older computers and mobile phones—that have limited or no support for these features, and can be left with a broken and -unusable -experience. And even with a modern browser, sites can exclude blind or vision-impaired users if web developers don’t take care to support keyboard interaction and layer in specific accessibility features required by screen-reader software and other assistive devices.
As web designers and developers, we are always balancing three somewhat conflicting objectives. We want to embrace all the exciting new technologies available to deliver compelling, interactive experiences. But at the same time, we’re deeply committed to ensuring that our sites are universally accessible, intuitive, and usable for everyone. And from a development perspective, it’s equally important to write the cleanest and most maintainable code possible. It’s been our quest to find a development approach that will satisfy all three objectives in an elegant way that will work on real-world projects.
Happily, we think we have found a way. Designing with Progressive Enhancement is a practical guide to web design and development that focuses specifically on how to create sites that deliver the highly interactive experiences that JavaScript, advanced CSS, and Ajax afford, and at the same time ensure that the very same codebase will work everywhere. Our approach is built on the basis of a coding methodology called progressive enhancement, which, simply put, recommends that all web content and functionality be based on semantic HTML that’s usable on any web-enabled device, and advanced CSS- or JavaScript-based enhancements be layered unobtrusively on top of it.
Building sites with progressive enhancement doesn’t necessarily take much more effort, but it definitely requires a shift in your development approach and perspective. Some might argue it’s not worth the effort—that current development methods capture enough of the audience to cover “the majority” of users, and that improving support for web standards among web browsers will close the gap.
However, if recent trends in Internet usage and device development are any indicator, the opposite is true: some of the most cutting-edge, web-enabled devices have browsers with poor web standards support, and the number of older computers or mobile phones that are running outdated and less capable browsers is growing rather than shrinking.
Regardless, the bottom line is that people use a wide range of browsers, platforms, and devices in their daily lives, and they expect their favorite websites and applications to work seamlessly across the lot. Building sites that work only in a handful of specific browsers isn’t a realistic approach when facing this increasingly complex universe of devices, especially when progressive enhancement provides a way to build sites that will work anywhere, for everyone.
But we know just saying these things won’t convince the skeptics. So let’s take a look at some of the facts about the global web audience and current technology, and also examine how common coding approaches can misfire—with results from mild inconvenience to full failure of functionality.
The ever-widening world of the web
It’s easy to forget how quickly and dramatically the Internet has grown and changed our lives. Even a decade ago, web access was limited to a fairly narrow demographic of users, all generally using fairly consistent hardware. Today, the web is truly a global phenomenon, and the diversity of its audience is constantly expanding; and users are accessing the web on a vast array of web-enabled devices.
By understanding the trajectory of who is using the web today, how they get online, and where the growth is most likely to happen tomorrow, we can better plan for this new world where the web is everywhere and used by everyone.
Everyone is getting on the web (or will be soon)
At the start of the Internet boom in the mid-1990s, the majority of Internet users lived in wealthier Western countries, were educated (because the web required technical skill), and tended to be professionals or more affluent individuals, as systems ran on prohibitively expensive PCs that required expensive monthly access plans and a strong infrastructure.
Over the past decade, computers have become much easier to use, and the plummeting cost of hardware, software, and online access has made them far more accessible. With that, the mix of people on the web has shifted to a much more global population with a full gamut of ages, education levels, and socioeconomic classes represented, leading to a democratization of the web’s information and tools.
The brisk pace of Internet adoption continues to drive the growing diversity of people online—the global population of Internet users grew more than 450%—from 361 million in December 2000 to more than 1.78 billion (or more than 25% of the world’s population) in September 2009 (http://www.internetworldstats.com/stats.htm, as of June 30, 2009). This growth was dramatic across the global stage: Internet users in Africa surged fourteenfold from 4.5 million to 66.9 million, and in Asia grew 6x from 114 million to 738 million, compared with the 4x increase in Europe from 105 million to 402 million (http://www.internetworldstats.com/stats.htm, as of June 30, 2009).
In the United States, Internet users spread to a broader demographic in the decade, with more than 92% of 18–29-year-olds and nearly half of all seniors online, and a far wider range of education and economic levels. The web is quickly becoming ubiquitous: more than 73% of the U.S. adult population reported using the Internet and email, access in rural areas surpassed 50% (Pew Research Center’s Internet & American Life Project (http://www.pewinternet.org), and fully 93% of all public elementary school classrooms have Internet access (U.S. Department of Education, National Center for Education Statistics. 2006. Internet Access in U.S. Public Schools and Classrooms: 1994-2005. NCES 2007-020).
But it’s perhaps most interesting to consider these facts: at 798 million users, Asia’s Internet penetration is less than 20% of its population, and Africa’s 66.9 million represent less than 7%, while the U.S. and most western European countries are generally in the 70–80% range. As Internet access continues to grow, the largest areas of potential growth are much more likely to happen across the globe, where users have not only different languages and cultures, but also very different equipment, connections, infrastructure, and access expectations than people in the Western world.
Evolving user expectations
Along with huge growth of the global user base and web-enabled devices, there is an equally dramatic change in what the Internet delivers today. A confluence of new web content and interaction innovations has fundamentally changed user expectations about website behaviors and capabilities. Consider, for example, just this short list of changes since 2000:
- Established online-only businesses like Amazon, eBay, and Netflix introduced much more richly-layered content, embedded media, dynamic interactions, and immersive experiences, which set a new bar for user experience.
- The emergence of user-generated content—from blogs to YouTube, Facebook, Digg, Twitter, and beyond—has democratized website content and structure, and raised users’ expectations of being able to create, reference, and creatively repurpose web content to suit their needs.
- The real-time web has caused people to expect up-to-the-second updates of their social network on Facebook, followers on Twitter, and collaborators on Google Docs or Wave, which has prompted a big move away from the static page-by-page underpinnings of the web and towards an Ajax-powered environment that may never require an old-fashioned page refresh.
- The rise of web-based applications that attempt to offer desktop-quality user experiences in web browsers, like rich data visualizations, drag-and-drop gestures, and rich interactivity, support the overall trend of software being offered as a web service instead of installed on a computer.
- As users now access the web through multiple desktop browsers at work and home and on the move with their mobile phones and other devices, they expect their data to be accessible on any device at any time.
These innovations have transformed the Internet into to a powerful global platform that delivers application-like features and functionality in the browser, and puts the power of instant communication in the reach of all users.
Expanding user accessibility needs
With a significantly broader demographic online, including a larger proportion of older users, and the vast array of new interaction models emerging in advanced websites, there is also a new set of considerations that impact how we design websites.
As people age, they typically suffer from decreased or impaired vision, hearing, and motor skills, all of which are critically important for successfully navigating the Internet. Conditions such as cataracts, blindness, hearing impairments, reduced joint mobility, loss of fine motor control, or hand tremors can make using a traditional website difficult at best.
These older users may require larger type and more contrast, especially for extended reading; it’s critical that websites be structured to allow the adjustment of text settings to suit their needs. Many blind users, and those with more extremely impaired vision, leverage assistive technologies such as screen-reader software programs on their desktops to read application content and web pages aloud; properly structured semantic content and full keyboard support to promote navigation without vision or a mouse are essential to successfully using screen readers on the web. And users with compromised mobility frequently feel more control using the keyboard for navigation rather than a mouse.
In 1998, the U.S. Federal Government passed Section 508, an amendment to the Rehabilitation Act that requires federal agencies to make their electronic and information technology accessible to people with disabilities, and established national standards for accessibility of digital media for people with physical and mental disabilities. Although these rules apply only to government agencies and companies that supply goods and services to the federal government, Section 508 presents a clear set of enforceable standards for providing access to all users, and has become a de facto legal standard that many private organizations have also embraced.
The World Wide Web Consortium (W3C) has been very active in creating specifications for accessibility on the web through its Web Accessibility Initiative (WAI) and related projects. The W3C’s Web Content Accessibility Guidelines (WCAG 2.0) provides both high level principles and a checklist of specific guidelines and criteria for ensuring that websites are accessible. The Accessible Rich Internet Applications (WAI-ARIA) specification provides a set of attributes that can be added to markup (like HTML) to describe advanced UI widgets such as sliders and tree controls in a way that is meaningful to screen readers.
Together, these advances provide both a clear mandate and a set of tools that can be used today to provide full access to the web, regardless of users’ physical abilities. Both building accessibility features into sites and testing on screen readers should be priorities to all developers, because lack of accessibility equates to discrimination in the eyes of users, and possibly of the law.
Consider, for example, Target Corporation’s experience: in early 2005, the National Federation for the Blind (NFB) approached Target, alerting them to the fact that a number of features on their website rendered it unusable for many disabled users. The company claimed that their brick-and-mortar stores were adequately accessible for those users. Unsatisfied with Target’s response, in February 2006, NFB brought a lawsuit against Target, citing a violation of the Americans with Disabilities Act of 1990. After several years in the court, the case settled in August 2009, with Target establishing a $6 million settlement fund, paying nearly $3.8 million for NFB’s legal fees, and agreeing to substantially redesign their website to introduce accessibility features, with usability testing by NFB on a scheduled basis.
While such lawsuits are rare, design and development best practice precedent is being set in this and similar cases that promote accessible coding standards. The guidelines and specifications for creating universally accessible sites are advancing. With the democratization of the web, our designs and code need to be developed for universal access—a web that works for everyone, regardless of their language, culture, age, physical abilities, or technology platform.
Rise of the non-desktop web
As the web’s audience, user expectations, and online content norms have evolved, there has been a parallel shift in where and how users connect online—in particular with the emergence of web-enabled mobile phones, video game systems, and dedicated web appliances.
By 2008, of the 1.4 billion Internet users worldwide, fully 75% had accessed the Internet on a mobile device, and 29% of world Internet access was exclusively on a non-desktop browser (Tomi Ahonen, Thought Piece: Mobile Telecoms Industry Size, 2009, http://www.tomiahonen.com). The adoption of the mobile phone has been faster than any other technology in the history of invention, and its impact on how we design for the web is just now being felt.
Back in the earliest days of the mobile web, mobile handsets had tiny screens, slow -processors, and understood only a simplified version of XML called WML (Wireless Markup Language). Few developers, or users, expected websites to work seamlessly on these devices.
A first wave of web-enabled “smartphones” appeared on the scene around 2000–2002— including the Nokia 9210 Communicator, the Palm Treo, and the first RIM Blackberry and Microsoft Windows CE devices—and ushered in a new level of expectation about real-time access to data and functionality. These devices could access standard HTML sites and even had rudimentary support for JavaScript and CSS. In a very short time, -literally hundreds of different models of mobile phones capable of accessing the “real” web emerged and sparked off the mobile web revolution.
By 2009, the number of active mobile phone subscriptions has reached 4.6 billion (“Explaining 4.6 billion mobile phone subscriptions on the planet,” Communities Dominate Brands blog, 11/6/09, http://communities-dominate.blogs.com/brands/2009/11/explaining-46-billion-mobile-phone-subscriptions-on-the-planet.html)—a number that dwarfs the current total population of Internet users. Even though all these mobile devices may not have smartphone-like web browsers, it’s fair to say that mobile is a massive and growing channel that can no longer be ignored when building a website.
Even the definition of “mobile device” is constantly evolving and mutating, to include web-enabled touchscreen tablets, micro-laptops, and other gadgets. Each device has its own unique set of browser capabilities, plugin support, installed fonts, screen dimensions, and interaction norms—from a RIM’s Blackberry thumbwheel and keyboard interaction, to Amazon’s Kindle’s mini-joystick controller, to Apple’s iPhone multi-touch interaction model, and beyond.
A large number of video game systems like the Nintendo Wii, Sony Playstation 3, and Microsoft Xbox all have web browsers available—these systems take liberties with website design to “adapt” it in a way that is usable on a television screen ten feet away with a gaming controller. And other consumer electronics —e-book readers, television sets, home telephones, even clock radios and refrigerators—are gaining web browsers. The diversity of devices on which our designs will appear has exploded.
Expanding “shelf life” of devices and browsers
For each new computer, mobile phone, or gadget purchased, there is a good chance it replaces an older device that is recycled down the tech “food chain.” Millions of mobile phones and computers stay active, either handed down within families, shared with schools and community centers, or donated to all kinds of social programs; many end up in faraway countries via donations to military families or global development NGOs. In the developing world, where materials reuse and recycling is far more common, the vast majority of devices are carefully maintained far beyond their typical “useful” life in the West. With each passing year, an ever-growing number of machines in homes, libraries, schools, and Internet cafes are running “antiquated” versions of browsers that aren’t updated, for various reasons.
Along with this large universe of older devices in current rotation, there is an equivalent group of “fringe” browsers that run on alternative operating systems. Unix-based operating systems are frequently used in low-cost computers like netbook mini-laptops and the One Laptop Per Child (OLPC) project’s XO computer. Technical power users frequently use Unix-based computers that run a wide array of “alternative” browsers like Konqueror, and purely text-based browsers like Lynx, that can render pages very differently than mainstream browsers. Each may have marginal market share individually, but together they constitute millions of web visitors worldwide.
* * *
The massive scale and range of people now on the web, coupled with the shifting expectations of user experience and the explosion of web enabled devices we need to support, translates into an exponentially more complicated design and development challenge than the one designers faced even a few years ago.
The common approach of developing only for a target group of the newest and most popular desktop browsers and ignoring the rest almost surely leaves millions of potential readers, customers, job seekers, dates, or political supporters with a broken, unusable experience. At the same time, we appreciate that it’s daunting for any developer to accept responsibility for testing and debugging sites on even a tiny representative set of the vast array of desktop browsers, mobile phones, gaming systems, and other specialized devices because time and effort are always a constraint in a real-world project.
Still, if you’re not convinced that the standard approach to developing advanced websites is a problem, consider the following real-world cases where current sites fall down.