O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Responsive Mobile Design: Designing for Every Device

Responsive Mobile Design: Designing for Every Device

by Phil Dutson
Publisher: Addison-Wesley Professional
Release Date: September 2014
ISBN: 9780133888249
View table of contents
Start reading

Book Description

Create Web Designs That Work Perfectly on Any Device—Simply and Beautifully!

Billions of people access the web via smartphones, tablets, and devices of all types, using every imaginable interface and display. But they all want the same thing: the right information, right now, delivered in the most aesthetically pleasing way possible. Give them what they want with Responsive Mobile Design.

Whether you’re a developer, designer, or manager, Phil Dutson teaches you principles, techniques, and best practices for delivering a successful experience to all users on all devices.

Dutson shows how to design sites that are responsive “from the start,” while keeping development simple and flexible. Next, he delivers complete technical know-how for transforming responsive designs into responsive sites. You’ll find coverage of key issues such as integrating media content, optimizing performance, and serving Retina or high-density displays.

Throughout, he combines detailed and practical explanations with functional, easy-to-reuse code snippets.

Coverage includes
•    Demonstrating why “mobile first” is still a best practice
•    Fusing content, structure, and beauty to deliver experiences users love
•    Using responsive images to improve speed and convey visual messages more effectively
•    Using grid systems without making it feel like your design is “locked in a box”
•    Mastering measurement values such as px, em, rem, and viewport units—and understanding their crucial differences
•    Improving the finer details of your design with web fonts
•    Retrofitting current websites to prepare them for the future
•    Introducing web components into your HTML markup
•    Using built-in browser development tools to streamline debugging and “in-browser” prototyping

Table of Contents

  1. Title Page
  2. Copyright Page
  3. Dedication
  4. Contents at a Glance
  5. Contents
  6. Preface
  7. Acknowledgments
  8. About the Author
  9. Introduction: What Defines Responsive Web Design [This content is currently in development.]
  10. Section 1: Creating a Responsive Layout
    1. Chapter 1. Content Matters
      1. What Makes Up Content
      2. Choosing the Right Content
      3. Discussing Content Sliders
      4. Summary
    2. Chapter 2. Why Mobile First
      1. Viewing the Web
      2. Considerations When Starting Small
      3. Summary
    3. chapter 3. Working with Grids
      1. Choosing a Grid
      2. Using a Responsive Grid
      3. Using an Adaptive Grid
      4. Best of Both Worlds
      5. Summary
    4. Chapter 4. Displaying Tabular Data
      1. Defining Tabular Data
      2. Working with Tabular Data
      3. Summary
    5. Chapter 5. Working with Measurement Values
      1. Using Pixels
      2. Using Percentages
      3. Using Em and Rem Units
      4. Viewport Measurements
      5. Summary
    6. Chapter 6. Using Media Queries
      1. The Viewport Meta Tag
      2. Implementing Breakpoints
      3. Device-Specific Media Queries
      4. Summary
    7. Chapter 7. Typography
      1. Web Fonts
      2. Font Formats
      3. Browser and Device Support
      4. Using Font Services
      5. Icon Fonts
      6. Summary
    8. Chapter 8. Retro-fitting an Existing Site
      1. Choosing a Proper Layout for Mobile
      2. Working with Components
      3. Considerations When Going Mobile
      4. Summary
  11. Section 2: Working with Responsive Media
    1. Chapter 9. Responsive Images
      1. Images Should Be Responsive
      2. Using a JavaScript Solution
      3. Summary
    2. Chapter 10. Responsive Video
      1. Using Video
      2. Delivery Systems
      3. Making Videos Fit Mobile Devices
      4. Summary
    3. Chapter 11. Image Compression
      1. Image Types
      2. Compression Utilities
      3. Compression Results
      4. Summary
  12. Section 3: Enhancing Performance
    1. Chapter 12. Conditional JavaScript
      1. Why Conditional JavaScript
      2. Using Conditional JavaScript
      3. Using JavaScript Plugins
      4. Summary
    2. Chapter 13. Web Components
      1. Working with Web Components
      2. Examples of Web Components
      3. Working with the DOM
      4. Web Component Polyfills
      5. Summary
    3. Chapter 14. Device Detection and Server Requests
      1. Device Detection
      2. HTTP Headers
      3. Using Client Hints
      4. Summary
    4. Chapter 15. Server Optimization
      1. Server Setup
      2. Web Servers
      3. Server Plugins
      4. Summary
    5. Chapter 16. High Performance with Development Tools
      1. Development Tools
      2. Browser Developer Tools
      3. Build Tools
      4. Summary