Jump Start Responsive Web Design, 2nd Edition

Jump Start Responsive Web Design, 2nd Edition

by Chris Ward
Released April 2017
Publisher(s): SitePoint
ISBN: 9780994347091

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

It used to be so simple. You made a website or application to work on a 15" monitor and, incompatibilities between browsers aside, you were done. Then along came mobile phones with web browsers and they ruined all our easy lives. Worse than that, people loved browsing the web on them!

Fortunately, by using responsive web design techniques, you can use one set of HTML, CSS and JavaScript, and display appropriate elements in an appropriate way to suit each platform. In Jump Start Responsive Web Design, you'l learn responsive techniques to make your designs look magnificent on any device, future-proof them, and reduce development time and budget. RWD helps you deal with the very real problem of not knowing where and how your application will be used.

Completely overhauled for its second edition, this book covers:

  • What does responsive really mean?
  • Semantic page structure
  • Grid systems
  • Responsive Images and media
  • Media queries
  • Responsive content

Publisher resources

View/Submit Errata

Table of contents

  1. Jump Start Responsive Web Design, 2nd Edition
  2. Notice of Rights
  3. Notice of Liability
  4. Trademark Notice
  5. About Chris Ward
  6. About SitePoint
  7. Preface
    1. Who Should Read This Book
    2. Conventions Used
      1. Code Samples
      2. Tips, Notes, and Warnings
    3. Supplementary Materials
  8. Chapter 1: The Meaning and Purpose of Responsive Web Design
    1. History
    2. Schools of Thought Within Responsive Design
      1. Progressive Enhancement
      2. Graceful Degradation
      3. Mobile First
    3. What Do You Need To Support?
      1. Computers
      2. Mobile Phones
      3. Tablets
      4. Hybrid Devices
      5. Wearables
      6. TV
      7. Cars
      8. Game Consoles
      9. Print
    4. Sample Application
      1. Introducing RWDFlix
      2. Computer Version
      3. Tablet Version
      4. Mobile Version
      5. TV Version
    5. Structuring a Page with HTML5
    6. Ready to Respond?
  9. Chapter 2: The Building Blocks of Responsive Design
    1. Media Types
    2. Creating a Query
      1. Logical Queries with Only and Not
      2. Query Features
    3. Streamlining the Example App
    4. Mobile First
    5. The Viewport Meta Element
    6. Any Queries?
  10. Chapter 3: Better Responsive Structures with Grid Systems
    1. What Is a Grid?
    2. Creating Your Own Grid
    3. Flexbox
    4. CSS Grid Layout
    5. Making Grids Easier with Frameworks
      1. Bootstrap
      2. Foundation
    6. What About the Demo App?
    7. Wrap Up
  11. Chapter 4: Responsive Text
    1. The History of Text
    2. Responsive Typographical Properties in CSS
      1. Fixed Sizing
      2. Relative Sizing
    3. Creating Readable Text
    4. Read On
  12. Chapter 5: Responsive Images and Video
    1. Images
      1. Responsive Dimensions
    2. The Right Image for the Right Device
      1. srcset
      2. The picture Element
    3. Responsive Video
      1. The video Element
    4. Get Visual
  13. Chapter 6: Responding to User Context
    1. An API for Everything
    2. Based on Time
    3. Battery Level
    4. Geolocation
    5. Based on Network
    6. User Preference
    7. Ambient Light
    8. Vibration
    9. Device Orientation
    10. Responding to All

Product information

  • Title: Jump Start Responsive Web Design, 2nd Edition
  • Author(s): Chris Ward
  • Release date: April 2017
  • Publisher(s): SitePoint
  • ISBN: 9780994347091