The Modern Web

Modern Web

Multi-Device Web Development with HTML5, CSS3, and JavaScript
by Peter Gasston
April 2013, 264 pp.
ISBN-13: 
978-1-59327-487-0

Today’s web technologies are evolving at near–light speed, bringing the promise of a seamless Internet ever closer to reality. When users can browse the Web on a three-inch phone screen as easily as on a fifty-inch HDTV, what’s a developer to do?

Peter Gasston’s The Modern Web will guide you through the latest and most important tools of device-agnostic web development, including HTML5, CSS3, and JavaScript. His plain-English explanations and practical examples emphasize the techniques, principles, and practices that you’ll need to easily transcend individual browser quirks and stay relevant as these technologies are updated.

Learn how to:

  • Plan your content so that it displays fluidly across multiple devices
  • Design websites to interact with devices using the most up-to-date APIs, including Geolocation, Orientation, and Web Storage
  • Incorporate cross-platform audio and video without using troublesome plug-ins
  • Make images and graphics scalable on high-resolution devices with SVG
  • Use powerful HTML5 elements to design better forms

Turn outdated websites into flexible, user-friendly ones that take full advantage of the unique capabilities of any device or browser. With the help of The Modern Web, you’ll be ready to navigate the front lines of device-independent development.

Author Bio 

Peter Gasston has been a web developer for more than 12 years in both agency and corporate settings. The author of The Book of CSS3, Gasston has also been published in Smashing Magazine, A List Apart, and .net magazine. He runs the web development blog Broken Links (http://broken-links.com/) and lives in London, England.

Table of contents 

Intro

Chapter 1: The Web Platform
Chapter 2: Structure and Semantics
Chapter 3: Media Queries and Responsive Design
Chapter 4: CSS Layouts
Chapter 5: New JavaScript and Libraries
Chapter 6: Device APIs (PDF)
Chapter 7: SVG / Canvas / WebGL
Chapter 8: HTML5 forms
Chapter 9: Media (Audio/Video)
Chapter 10: Packing it All Up
Chapter 11: The Future

Appendix A: Notes on browser support
Appendix B: Resources

View the Index (PDF)
View the detailed Table of Contents (PDF)

Reviews 

"This is a useful book, and it's an important book. If you follow Peter Gasston's advice, then test your sites across all browsers and on a variety of devices, you’ll impress your bosses and please your users. You'll also be making the Web better and keeping it open."
—Bruce Lawson, author of Introducing HTML5

"Peter Gasston has now done for the modern web platform what he already did for CSS: write a consult-it-first compendium of information for web developers of practically any skill level."
—Stephen Hay, author of Responsive Design Workflow

"Peter Gasston strikes a great balance between producing fantastic real-world code and staying right on top of the latest developments in web technology. He has a considerable gift for explaining difficult technical topics in a lucid and entertaining manner."
—Chris Mills, developer relations manager, Opera Software and author of Practical CSS3

"I learned a lot of new stuff reading this. Top notch, useful stuff that I have already put into play in sites I am working on. Stuff that I hadn't come across, even with all the reading and searching that I do. If you are a builder of modern web sites then I reckon you need this book."
—Jane Morrison, FLOSS UK Secretariat

"The Modern Web should be on every web developer’s bookshelf!"
—Raj Sharma, British Computer Society (Read More)

"The Modern Web is not only a great reference, it's very readable. It's well indexed, the examples are short, sweet, and to the point, and the style is conversational."
—Lynn Greiner, SmartBear (Read More)

"The Modern Web is a pleasant read. Peter writes in plain and simple English, making the reader enjoy the information instead of falling asleep with boring technical stuff. Peter's straight forward way of teaching modern coding methods is nice and engaging."
—Gisele Muller, Abduzeedo (Read More)

"If you're willing to give up your old ways of building web pages and embrace more modern techniques, then this book is a great addition to your library. The additional resources included in every chapter and in the final appendix are invaluable."
—Jennifer Kyrnin, About.com Web Design/HTML (Read More)

"As a front-end developer, it is important to have an understanding of the context we work in, user trends, technological developments, and the tools that are already at our disposal or will be soon. . . . If you only read one book on the latest developments in HTML5, CSS3, and JavaScript this year, this is the one."
—Chris Webb, front-end developer at Funda (Read More)

"This is a well-written book. In a clear and accessible manner, Gasston leads you through several chapters detailing the latest technologies and thinking in modern web design."
—Virginia DeBolt, Web Teacher (Read More)

"The author has a really nice writing style which makes the book an enjoyable read. He covers a ton of topics and covers them deep enough to thoroughly explain how to use them."
—Tad Anderson, SYS-CON MEDIA (Read More)

"If you get excited by clever CSS techniques, semantic markup, and different ways you can use APIs to interact with users, The Modern Web is the book for you."
—David Indish, Red Star Web Development (Read More)

"Essential reading for any web developer."
—Craig Buckler, Optimal Works (Read More)

Featured in HTML 5 Weekly!

Updates 

Pages 22 and 24:
The hgroup element has been removed from the HTML5 specification.

Page 48:
In the code section at the top of the page, the second line should be screen and (-webkit-device-pixel-ratio: 2) {

Page 75:
The first sentence of the last paragraph should say, "Now the ratio has changed to 1:1:3."

Page 84:
The latest version of the Grid Layout module can be found here.

Page 100:
The creator of YepNope has chosen to deprecate this library. For similar functionality, look at Conditionizr.

Page 128:
In the first code example on this page, cy should be set to 75, not 50.

Appendix A
Download an updated version with browser support notes added here.