Designing Websites for Big and Small Screens

Chapter 1 Designing Websites for Big and Small Screens In This Chapter ▶ Analyzing the average mobile user ▶ Taking a first look at HTML ▶ Understanding the limitations of HTML ▶ Meeting XHTML and HTML5 alk to nearly anybody who’s been designing web pages for a while. The Tone thing most of them agree on is that creating websites for handheld devices is a giant step backward. Mobile users, on the other hand, consider the ability to get web content delivered to their smartphones, PDAs, and mobile tablets cutting-edge technology. For them, few things (on this planet, anyway), are more advanced than whipping a small gadget out of their pock- ets, pressing a few buttons, and voilá: You have the answers to nearly every question, access to almost any solution, information on just about every product, access to all of mankind’s accumulated knowledge — the part of it parked on the web, anyway — at your fingertips. So which is it? Is the mobile web the bleeding edge of information technology or a trip back in time to the medieval days of the Internet? In the earlyCOPYRIGHTED days of the Internet, all but aMATERIAL select few users “surfed the Net” from very slow computers (by today’s standards) connected to the Internet via agonizingly sluggish and unreliable dial-up modems. Not only did Internet users wait interminably for content to download and appear on-screen, they contended with frequent dropped connections, overloaded Plain Old Telephone System (POTS) networks, busy signals, and a host of other annoying inadequacies. 005_9781118026229-ch01.indd5_9781118026229-ch01.indd 9 88/4/11/4/11 22:30:30 PPMM 10 Part I: In the Beginning, There Were No Mobile Devices . Web design in those days was a balancing act. Designers often had to quell their desire to deliver attractive, rich content with more practical consid- erations, such as file size and download times. Until, that is, the advent of affordable broadband — relatively fast and reliable DSL and cable Internet connections — along with advancements in web browsers and content compression. These advancements set the design spirit free. No longer was it as necessary to compensate for technical limitations. Web content went from moderate pages consisting of small images and text to rich, multimedia-laden extrava- ganzas. Then along came mobile devices, with their small screens, slow processors, and low-bandwidth cellphone networks — bringing web page design back nearly full circle. Once again, web designers find themselves confined to delivering content in small, manageable chunks, compensating for familiar limitations. In this chapter, I introduce you to the average mobile user and show you why designing for him or her is different from designing for the average user who accesses the Internet with a desktop or notebook computer. Then I introduce you to the most basic web-page design tool — HTML — what it is and how it works. A word about HTML: It started out as, and remains, a very basic web-page design language. Without enhancements, such as XHTML and CSS, it really isn’t suitable for mobile web design. This chapter also briefly discusses HTML5, the future of web design, and how the evolution of HTML affects mobile web design. Introducing the Mobile Internet User In some ways, it’s hard to believe that the Internet has been around long enough to discuss it in terms of generations, or in terms of groups of users categorized by when they started using the Internet. Granted, it’s always risky (especially when talking about people) to categorize and generalize, but sometimes it’s necessary. Before I get started, though, I should let you know that I know that the stereotypic distinctions I’m about to make are just that — stereotypes, or generalizations. Generalizations (the ones used here, anyway) demonstrate commonality, but in no way do they actually define members of the category. With that said, let me step way out on a limb here. There are two types of mobile Internet users: 005_9781118026229-ch01.indd5_9781118026229-ch01.indd 1010 88/4/11/4/11 22:30:30 PPMM Chapter 1: Designing Websites for Big and Small Screens 11 ✓ Old schoolers: For the sake of this discussion, old schoolers have been around for a while. They started using the Internet before handheld devices came onto the scene. They’re used to information coming to them in large doses, on big screens with lots of leg room to stretch out and get comfortable. And they like it that way. To them, viewing the Internet on a mobile device seems, well, unnatural. ✓ New schoolers: New schoolers — often the offspring of old schoolers — grew up mobile. For them, accessing the Internet — the web, e-mail, text messaging, the entire shebang — on their mobile devices is part of the natural order of things. They haven’t experienced life without the mobile web and don’t really get that it hasn’t always been this way. Old-schooling it Old schoolers, or pre–mobile Internet users, have several habits and atti- tudes in common. The most important thing to remember about them is that even though they’re appreciative of mobile technology (even somewhat awed by it), it’s not their main way to use the web: Although they’re accessing the web on their handheld devices, they’re really wishing they were sitting in front of their big, comfortable desktop or notebook computers. As convenient as the mobile web is, when you’re used to having volumes of information delivered to your computer screen, getting it spoon-fed to you in little pieces that fit on a three- or four-inch-screen can be annoying. Many pre–mobile web users simply don’t like the short-and-sweet, just-the-facts, piecemeal way that the mobile web disseminates content. Like it or not, there’s really no denying that as humans get older they get set in their ways. The older we are, the less we like change. Most pre–mobile Internet users have been on planet Earth for a little while. Going from a roomy 15- 17-, or even 24-inch (or bigger) monitor — with a nice, comfortable keyboard and oh-so-easy-to-use mouse — to a tiny handheld is jarring; it’s a culture-shock experience. It’s kind of like trading in your SUV for a Smart Car. Many old schoolers use their mobile devices to access the web reluctantly. Although they appreciate quick access to information, no matter where they are, they’d rather not squint at the small screen and fumble with the small buttons, keys, and navigation wheels. It’s a love-hate relationship — convenient and frustrating all at once. 005_9781118026229-ch01.indd5_9781118026229-ch01.indd 1111 88/4/11/4/11 22:30:30 PPMM 12 Part I: In the Beginning, There Were No Mobile Devices . Is mobile web technology truly a time warp? There’s a lot a talk in this chapter (and any other Sheets (CSS) formatting, as well as enhanced book about designing for mobile devices) about Flash and digital video playback — rival- designing for the mobile web being a step back- ing modest desktop and notebook computer ward in time. Granted, right now mobile web performance. technology as a whole is fraught with limita- We’ve also seen significant improvements to tions — small screens, small memory alloca- the Internet delivery networks, such as the tions, small processors, low bandwidth, and expansion of much faster 4G cell networks so on. However, just as information technology and the creation of a lot more Wi-Fi–enabled itself advances, so does mobile technology. hot spots. Accessing the mobile web on mobile For example, recent improvements in hardware, devices might seem like a step backward now, such as some of the new Android phones and but the technology itself is on a fast track to tablets, and the iPhone 4 and iPad, are bring- becoming just as capable as traditional coming larger, higher-resolution screens, much puters. The compensations we’re forced to faster processors, and bigger memory banks make today probably won’t be necessary a year to the mobile market. Some mobile devices can or two from now. now use standard HTML and Cascading Style Growing up mobile Nowadays, most people take for granted the speed at which technology advances. But stop a minute. Think about the diversity of these two groups of users. The current generation, for the most part, has never seen a long- playing vinyl record, or perhaps even a cassette tape. This, the iPod generation, has never heard of a Walkman CD player. They have not experienced life without the mobile web. For them, text messaging is not a novelty or a conve- nience. It’s a part of life as they know it. Getting information and communicating in short, rapid-fire bursts is a major part of their life experience. They think in sound bites. Say hello to the new schooler or post–mobile web Internet user. Say hello to the future. New-school mobile users are young, nimble, and on the move. They can broadcast a text message to 20 acquaintances in the time it takes an old schooler to dial a phone number. The new schooler’s cellphone is not a con- venience; it’s an appendage, an implant; using it is second nature, akin to walking, talking, and eating. They use their handhelds in the same way they approach life: Get it done and move on. If they’re not already, new schoolers will soon be the largest of our two mobile Internet groups. Considering the demographics (young versus mature), the newer group will, without question, be the longest lasting.

Load more