Table of Contents for

The Modern Web

The Web as we’ve known it until recently has primarily targeted the larger screens and more powerful processors of desktop or laptop computers (shorthand: desktops), where the operator is usually seated and using a fast Ethernet or Wi-Fi broadband connection. This mode is still the default for people at work in offices, so many business-to-business (B2B) sites are built to suit this configuration.

But desktop computer use is on the wane as many people nowadays, especially home users, tend toward mobile or tablet devices (which I’ll come to shortly). In the last quarter of 2012, global PC shipments were down almost 5 percent from the previous year. That said, research shows that people still tend to use desktops when performing tasks that involve significant amounts of text, multitasking across different tabs of a browser, or using programs that require close control of the content, such as image editing. Desktops are also used when security is a major concern, such as for Internet banking.

But even within this venerable and mostly stable group variation abounds. The 1024×768 screen resolution is slowly dying away but still prominent, while newer versions of Apple’s MacBook Pro sport a resolution of 2880×1800. Sites optimized for the former will look quite small and be somewhat lost on the latter.

The desktop browser world includes five major players: Chrome, Safari, and Opera, which share the WebKit engine (Opera had its own engine, Presto, which is now being phased out); Firefox; and Internet Explorer (version 9 can be considered semimodern and 10 fully modern). Thankfully they all tend to implement features in a standard way, and they all have a frequent or semifrequent update cycle (or are moving toward it), so users tend to get new features fairly quickly. Of course, a sizable percentage of users are still running older, less capable browsers, so you should always build with that in mind. (Much of the innovation in web standards comes to desktop browsers first because they’re the ones that developers tend to use on a daily basis. Therefore much of this book is written with desktop browsers in mind, although what you’ll learn can be applied anywhere.)

When I say mobile, I generally mean phones. The range is wide: from older, cheaper hardware running rudimentary web browsers to mid-range feature phones with browsers optimized for speed over power to high-powered expensive smartphones with browsers on par with those on your main computer, as well as a series of apps that often use an embedded browser to view content.

In many countries, a majority of Internet users are on a mobile device; in India, for example, some 55 percent of web visits are made on mobile devices, and in Egypt nearly 70 percent of people rely on phones as their sole access to the Web. Worldwide estimates are that the number of mobile web users will exceed that of desktop computer users sometime between 2014 and 2015.

Across the developing world, the dominant mobile device is the feature phone, which has functions beyond basic phoning and texting but often lacks full web access. The rise of low-cost and secondhand smartphone sales, however, is already changing that market drastically. Within the next few years, we can expect to see smartphones dominate the mobile landscape. In 2011, smartphone sales were estimated to account for 27 percent of the global market; at the end of 2012, estimates were that 1 billion smartphones were in use, with that number predicted to double by 2015.

The sheer variety of mobiles and mobile browsers in the global market means that I’m selective about the coverage in this book, so for future-proofing I target phones with fully capable web browsers, that is, features on par with their desktop equivalents.

The WebKit engine dominates the smartphone browser market because it’s used on iPhone, Android, Blackberry, and more, powering many different browsers. Each OS uses a slightly different version of WebKit, but general interoperability is good.

Windows Phone OS from version 7.5 and up uses a mostly desktop-equivalent Internet Explorer as its browser; older models have IE9, and more recent models, IE10. Firefox is also available as an option for Android, and Firefox OS, a full operating system based around the browser, is set to launch in 2013. That launch may well impact the market in the long term.

Opera has a significant share in the global mobile browser market thanks to Opera Mini, a proxy browser that compresses requested pages and returns the data as a kind of image with very limited interactivity. Opera Mini is lightweight and fast, which makes it popular in countries with limited Internet connectivity, but its lack of full interactivity means I won’t give it much attention. As I write this, Opera has announced that it’ll be releasing new mobile browsers based on WebKit, although no details are available.

Today’s smartphones, although getting more powerful all the time, tend to have less available memory and storage, and lower potential connection speeds, than desktop or laptop computers. On the surface, this would seem to make them the poor cousin of web-enabled devices, but as Jonathan Stark says in “The 10 Principles of Mobile Interface Design”:

Obviously the advantage of mobile is just that: its mobility—the ability to find things around you, get directions, and look up information fast when out of the house or office. But increasingly, mobile devices are being used at home while watching TV or on the morning commute or when bored standing in line. Mobile is really less about being on the move and more about always being available.

The mobile space is changing faster than any sector of the market, as many users change devices on 12- to 18-month update cycles and hundreds (if not thousands) of new models are introduced every year.

Tablet computers have been around for years, but it wasn’t until Apple came along with the iPad in 2010 that they became more of a leisure item than a desktop accessory. Many other devices have followed the iPad, with Android-based tablets doing especially well in the mid-sized 7” range and Microsoft pushing forward with the heavily tablet-focused Windows 8. From a market that was negligible at best in 2009, estimates are some 390 million tablets will be in use worldwide by 2015. That’s an incredible figure, and the growth is exponential.

Their larger size and reliance on Wi-Fi (in many cases) makes tablets portable rather than truly mobile; they exist in a space more akin to a laptop than a mobile device. Most people use them at home, and although they are carried around, they’re usually taken out and used only when the user is stationary, rather than walking down the street. That said, it’s not uncommon to see them used as somewhat awkward and ungainly cameras in public places!

Like smartphones, tablets are tactile, relying on touch input in most cases (although some also accept stylus input). Research shows they tend to be used for entertainment and browsing when time is less of an issue. The core browsers on tablets are essentially the same as those on mobile devices.

The TV is still the most-used screen in the home, though mostly for passive viewing rather than interactivity. That’s changing as the new breed of web (or smart) TVs and media boxes begin to get a foot in the door. Although global figures are hard to come by, predictions are that there will be 100 million web-enabled TVs in Europe and North America by 2016.

Although many web TVs use applications rather than websites, they’re often built using web technologies and sometimes contain an embedded browser view. After all, if you’re making a Twitter app, you want your users to be able to open links.

The biggest drawback with web TV is that navigating with a TV remote is a horrible experience, made worse by some of the multibutton monstrosities that have been built to provide the level of interactivity required for Internet use—notably, a keyboard. Some manufacturers are making gesture- and voice-controlled TVs or remote controls that incorporate a trackpad, but the best solution seems to be to pair a mobile or tablet with the TV and use that as an interactive control.

Another obstacle to web browsing on the TV is that the television is inherently a communal device, viewed by many people at the same time—an experience that is fundamentally opposite to the personal Internet experience. Would you like to have your Facebook account broadcast on a big screen for everyone to see? Probably not.

The emerging common behavior is for web TVs to be used for video and interactive services, with a real-time social aspect happening concurrently on the user’s mobile or tablet. Recent research shows that 77 percent of people use another screen while watching (if that’s the right word) TV, and of that figure, only 5 percent or so are performing an activity that’s relevant or complementary to what’s on screen.

These four broad categories—desktop/laptop, mobile, tablet, and TV—cover the majority of the web-enabled device market, but they’re by no means exclusive. Many other devices have web browsers, even if they aren’t always used with great frequency.

Each of the current generation of home games consoles has a browser: The PlayStation 3 uses the WebKit-based NetFront, Microsoft’s Xbox 360 has Internet Explorer 9, and Nintendo’s Wii U has a custom build of WebKit. Likewise, portable games consoles have browsers: The PlayStation Vita uses NetFront, as do newer versions of the Nintendo 3DS (older versions use Opera). Bear in mind that each uses a slightly different control system. (For more on the topic, see Anna Debenham’s amazing work in the field as listed in Appendix A.)

And let’s not forget ebook readers, such as Amazon’s Kindle, the Kobo, Barnes & Noble’s Nook, and a series from Sony. (When I use the term ebook readers, I’m referring specifically to “e-ink” readers, as each company also has a full-color screen version that is more like a tablet.) The ebook browsers tend to be WebKit based, and their challenges come from low-powered processors, little memory, and very slow refresh rates. They wouldn’t be the first-choice browser of many, but as ebooks become more interactive, they may become more popular.

The iPhone 4 has a screen size of 3.5” diagonally, and the iPhone 5, 4”. Samsung’s Galaxy S III has a diagonal length of 4.8”; LG’s Optimus Vu, 5”; and Samsung’s Galaxy Note II, 5.5”. Google’s Nexus 7 is 7” diagonally, and Amazon’s Kindle Fire HD comes in 7” and 8.9” formats. The iPad mini is 7.9” diagonally and the iPad, 9.7”.

In other words, the great variety of screen sizes makes the distinction between mobile and tablet quite hard to pin down. The only criteria I can think of to separate them are based on whether they have native telecom ability, can fit comfortably in a pocket, and can be used comfortably with one or two hands.

In fact, computing is experiencing a general convergence. Microsoft’s Surface is a tablet with an optional keyboard in the cover. When keyboard and tablet are attached, the Surface looks and behaves like a laptop. The Ubuntu Phone runs Android, except that when you dock it to a screen, it runs a full version of the Linux desktop. The PadFone by Asus is a phone that turns into a tablet when docked with a larger touchscreen. Your TV becomes a media center when you plug Apple TV or Roku into it.

This change is set to outdate all of our existing terminology. In the foreseeable future, the word tablet will be as meaningful as the floppy disk icon currently used to mean save in many software applications. One day, everything will be screens.