Table of Contents for
The Modern Web

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition The Modern Web by Peter Gasston Published by No Starch Press, 2013
  1. The Modern Web
  2. Cover
  3. The Modern Web
  4. Advance Praise for
  5. Praise for Peter Gasston’s
  6. Dedication
  7. About the Author
  8. About the Technical Reviewer
  9. Acknowledgments
  10. Introduction
  11. The Device Landscape
  12. The Multi-screen World
  13. Context: What We Don’t Know
  14. What You’ll Learn
  15. A. Further Reading
  16. 1. The Web Platform
  17. A Quick Note About Terminology
  18. Who You Are and What You Need to Know
  19. Getting Our Terms Straight
  20. The Real HTML5
  21. CSS3 and Beyond
  22. Browser Support
  23. Test and Test and Test Some More
  24. Summary
  25. B. Further Reading
  26. 2. Structure and Semantics
  27. New Elements in HTML5
  28. WAI-ARIA
  29. The Importance of Semantic Markup
  30. Microformats
  31. RDFa
  32. Microdata
  33. Data Attributes
  34. Web Components: The Future of Markup?
  35. Summary
  36. C. Further Reading
  37. 3. Device-Responsive CSS
  38. Media Queries
  39. Media Queries in JavaScript
  40. Adaptive vs. Responsive Web Design
  41. Viewport-Relative Length Units
  42. Responsive Design and Replaced Objects
  43. Summary
  44. D. Further Reading
  45. 4. New Approaches to CSS Layouts
  46. Multi-columns
  47. Flexbox
  48. Grid Layout
  49. The Further Future
  50. Summary
  51. E. Further Reading
  52. 5. Modern JavaScript
  53. New in JavaScript
  54. JavaScript Libraries
  55. Polyfills and Shims
  56. Testing and Debugging
  57. Summary
  58. F. Further Reading
  59. 6. Device Apis
  60. Geolocation
  61. Orientation
  62. Fullscreen
  63. Vibration
  64. Battery Status
  65. Network Information
  66. Camera and Microphone
  67. Web Storage
  68. Drag and Drop
  69. Interacting with Files
  70. Mozilla’s Firefox OS and WebAPIs
  71. PhoneGap and Native Wrappers
  72. Summary
  73. G. Further Reading
  74. 7. Images and Graphics
  75. Comparing Vectors and Bitmaps
  76. Scalable Vector Graphics
  77. The canvas Element
  78. When to Choose SVG or Canvas
  79. Summary
  80. H. Further Reading
  81. 8. New Forms
  82. New Input Types
  83. New Attributes
  84. Datalists
  85. On-Screen Controls and Widgets
  86. Displaying Information to the User
  87. Client-side Form Validation
  88. The Constraint Validation API
  89. Forms and CSS
  90. Summary
  91. I. Further Reading
  92. 9. Multimedia
  93. The Media Elements
  94. Media Fragments
  95. The Media API
  96. Media Events
  97. Advanced Media Interaction
  98. Summary
  99. J. Further Reading
  100. 10. Web Apps
  101. Web Apps
  102. Hybrid Apps
  103. TV Apps
  104. Webinos
  105. Application Cache
  106. Summary
  107. K. Further Reading
  108. 11. The Future
  109. Web Components
  110. The Future of CSS
  111. Summary
  112. L. Further Reading
  113. M. Browser Support as of March 2013
  114. The Browsers in Question
  115. Enabling Experimental Features
  116. Chapter 1: The Web Platform
  117. Chapter 2: Structure and Semantics
  118. Chapter 3: Device-Responsive CSS
  119. Chapter 4: New Approaches to CSS Layouts
  120. Chapter 5: Modern JavaScript
  121. Chapter 6: Device APIs
  122. Chapter 7: Images and Graphics
  123. Chapter 8: New Forms
  124. Chapter 9: Multimedia
  125. Chapter 10: Web Apps
  126. Chapter 11: The Future
  127. N. Further Reading
  128. Introduction
  129. Chapter 1: The Web Platform
  130. Chapter 2: Structure and Semantics
  131. Chapter 3: Device-Responsive CSS
  132. Chapter 4: New Approaches to CSS Layouts
  133. Chapter 5: Modern JavaScript
  134. Chapter 6: Device APIs
  135. Chapter 7: Images and Graphics
  136. Chapter 8: New Forms
  137. Chapter 9: Multimedia
  138. Chapter 10: Web Apps
  139. Chapter 11: The Future
  140. Index
  141. About the Author
  142. Copyright

Context: What We Don’t Know

The most important thing to bear in mind is how much we don’t know about the people using our sites. We don’t know where they are—I don’t mean geographically, as we can use GPS to locate them. I mean whether they’re at home, at work, on the bus, and so on. In essence, we have no idea of the context in which someone is using our site.

The common presumption is that people using mobile are on the move and in a hurry, often using low-bandwidth 3G connections, but that’s not always the case: Mobile is often used at home with a good fast Wi-Fi connection. But even the connection doesn’t tell the whole story; the signal may be poor or the bandwidth reduced because of congestion in the neighborhood. In fact, the 3G (or 4G in many countries) networks might actually provide a much better connection in many cases.

We also presume that mobiles are less powerful than desktops, but even that may not be true for much longer. Twin- or even quad-core phones with fast processors are making their way to the market, and within a year or two, who knows how much power they’ll have. And tablet/laptop hybrids like many Windows 8 devices are now more capable than laptops just a few years old.

There’s also the issue of size. The presumption is that for a large-screen device like a TV, viewers want a richer graphical environment, but a large screen doesn’t equal a powerful processor or a fast connection. Many web-enabled TVs have processors no more powerful than a smartphone, and the connection speed is open to the same vagaries as any other device. And with size comes the question of portability. The more portable the device, the less certain we can be of the context in which it’s being used.

Really, the cardinal rule is this: We cannot make presumptions. And having said that, I’m going to break my own rule.

Some Context Stereotypes

To avoid repetition in this book, I rely on a few shorthand contexts based on common scenarios. These won’t necessarily be the most common scenarios, but ones that I think are common enough to serve a useful purpose. One example: Mobile users don’t have a super-fast Internet connection. Often mobile users are using their devices from home with a mega-fast fiber-optic connection broadcast over clear Wi-Fi from 2 feet away, but the opposite is often just as true: They’re away from home and relying on a very weak 3G signal (as happens to me too often). Many smartphones are built with scenarios like this in mind; they limit the number of connections that can be made at any time in order to not gobble precious data from the user’s limited tariff.

Likewise, a user with a desktop computer will likely have a direct broadband connection, providing fast data transfer rates. That’s not always true, of course—many people in rural areas have extremely low broadband speeds or still use dial-up—but the first scenario is common enough that I can use it as a shorthand.

I use shorthands like these throughout the book simply to avoid constant clarification and repetition, but I can’t drum home enough the idea that these presumptions can’t, and shouldn’t, be foremost in your mind when building and planning websites or applications.

“Fast” Is the Only Context That Matters

You have a challenge. You don’t know who your users are, where they are, what they are doing, or which device they are doing it with. You can find out some (although not all) of that information, but their full context is completely unknowable and varies for each individual. The only thing you can reasonably know for certain is that either they want access to what you’re offering or they want to find out it’s not what they want. Either way, they want the answer quickly.

Performance is the only criterion that matters. Whether users are on a smartphone during rush hour and looking for information about the next train home or browsing through a shopping site while curled up on the sofa at home, they have a task that they want to complete as soon as possible, and completing this task using the nearest device will make them feel more efficient (this is known as found time).

Your site needs to be fast—and feel fast—regardless of the device it’s being displayed on. And fast means not only technical performance (which is incredibly important) but also the responsiveness of the interface and how easily users can navigate the site and find what they need to complete the task that brought them to you in the first place.