Responsive Mobile Design: Designing for Every Device

Responsive Mobile Design: Designing for Every Device

by Phil Dutson
Released September 2014
Publisher(s): Addison-Wesley Professional
ISBN: 9780133888249

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

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. About This eBook
  2. Title Page
  3. Copyright Page
  4. Praise for Responsive Mobile Design
  5. Dedication Page
  6. Contents-at-a-Glance
  7. Contents
  8. Preface
  9. About the Author
  10. Acknowledgments
  11. Part I: 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. Retrofitting an Existing Site
      1. Choosing a Proper Layout for Mobile
      2. Working with Components
      3. Considerations When Going Mobile
      4. Summary
  12. Part II: 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
  13. Part III: 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
  14. Index

Product information

  • Title: Responsive Mobile Design: Designing for Every Device
  • Author(s): Phil Dutson
  • Release date: September 2014
  • Publisher(s): Addison-Wesley Professional
  • ISBN: 9780133888249