Learning Responsive Web Design

Book description

Deliver an optimal user experience to all devices—including tablets, smartphones, feature phones, laptops, and large screens—by learning the basics of responsive web design. In this hands-on guide, UX designer Clarissa Peterson explains how responsive web design works, and takes you through a responsive workflow from project kickoff to site launch.

Ideal for anyone involved in the process of creating websites—not just developers—this book teaches you fundamental strategies and techniques for using HTML and CSS to design websites that not only adapt to any screen size, but also use progressive enhancement to provide a better user experience based on device capabilities such as touchscreens and retina displays.

  • Start with content strategy before creating a visual design
  • Learn why your default design should be for the narrowest screens
  • Explore the HTML elements and CSS properties essential for responsive web design
  • Use media queries to display different CSS styles based on a device’s viewport width
  • Handle elements such as images, typography, and navigation
  • Use performance optimization techniques to make your site lighter and faster

Publisher resources

View/Submit Errata

Table of contents

  1. Preface
    1. How This Book Is Organized
    2. Who Should Read This Book
    3. How to Contact Us
    4. Acknowledgments
  2. I. Foundations of Responsive Design
    1. 1. What Is Responsive Design?
      1. Just the Basics
      2. A Short History
        1. Fixed-Width Design
        2. Mobile Web Browsing
        3. Mobile Websites
        4. More Devices
        5. Media Queries
        6. Flexibility
        7. Responsive Web Design
      3. Why Responsive Design
        1. Getting the Right Design on Every Device
        2. Less Work
        3. Optimized for Search
      4. Summary
    2. 2. Responsive Content
      1. Content Strategy
        1. Mobile Content Strategy?
      2. Managing Content
        1. Use Only What You Need
        2. How to Pare Down
        3. Content Audit/Inventory
      3. Developing Content
        1. How Users Read
          1. Scanning
          2. Inverted pyramid
          3. Headings
          4. Short and sweet
        2. Plain Language
      4. Content Parity
      5. Content Governance
        1. Creating Timeless Content
      6. Adaptive Content
      7. Summary
  3. II. Creating Responsive Websites
    1. 3. HTML for Responsive Sites
      1. Working with HTML
        1. Versions of HTML
        2. Web Standards
        3. Using HTML5
      2. Basic Page Structure
        1. Document Type Declaration (DOCTYPE)
        2. Document Structure
        3. The Page Title
        4. Charset
      3. Viewport
        1. Width
        2. Initial-Scale
        3. User-Scalable
        4. Maximum-Scale
      4. Structural Elements
        1. Screen Readers
        2. <header>
        3. <nav>
        4. <footer>
        5. <article>
        6. <aside>
        7. IE Support
      5. Creating a Page
        1. Structural Elements
        2. Adding Content
        3. Unstyled Page
      6. Clean and Semantic HTML
        1. Separating Content and Presentation
        2. Comments
      7. Summary
    2. 4. CSS for Responsive Sites
      1. How CSS Works
      2. Versions of CSS
        1. Browser Prefixes
      3. Where CSS Goes
        1. Embedded Styles
        2. Stylesheets
        3. Inline Styles
      4. The Cascade
        1. How It Works
        2. Important
        3. Inline Styles
        4. IDs
        5. Classes, Attributes, and Pseudo-classes
        6. Elements and Pseudo-elements
        7. Inherited Rules
        8. Default Values
        9. What If Anything Conflicts?
      5. Using the Cascade
        1. Default Values and Reset
          1. Reset
        2. Inherited Rules
        3. Elements
        4. Everything Else
        5. Keeping It Simple
      6. Comments
      7. Organizing Your Stylesheet
      8. The Box Model
        1. Measurements
        2. Ems
        3. Height and Width
        4. Margins and Padding
        5. Borders
        6. Box-Sizing
      9. display
      10. Positioning
        1. Static
        2. Relative
        3. Absolute
        4. Fixed
        5. Measurements for Positioned Elements
      11. float and clear
      12. Basic Styles
      13. Summary
    3. 5. Media Queries
      1. What’s a Media Query?
      2. Media Query Structure
      3. Using Media Queries in Stylesheet Links
      4. Other Ways to Use Media Queries
      5. What We Can Query
        1. Viewport Width and Height
        2. Screen Width and Height
        3. Orientation
        4. Aspect Ratio
        5. Resolution
        6. Other Media Features
      6. Browser Support
        1. Conditional Comments for Internet Explorer
        2. Testing Media Query Answers
      7. Breakpoints
      8. Design Ranges
      9. Designing Responsively
        1. Progressive Enhancement
        2. Designing with Grids
        3. Using columns
        4. Design for Small Screens First
      10. Using Media Queries
      11. Two-Column Layout
        1. Using Floats
        2. Using a Grid
        3. Adding a Media Query
      12. Setting a Maximum Width
      13. How to Choose Breakpoints
      14. Summary
    4. 6. Images
      1. Ways to Display Images
        1. CSS Alternatives
        2. Content Images
        3. Background Images
        4. Image Sprites
        5. Icon Fonts
      2. Alt Text
        1. Writing Good Alt Text
      3. Image File Formats
        1. JPEG
        2. GIF
        3. PNG
        4. SVG
      4. Optimizing Images
        1. Pixels and Resolution
        2. High-Density Screens
        3. Compressing Images
        4. Actual Dimensions
      5. Content Images
        1. The <img> element
        2. Adding an Image
        3. Flexible Image Dimensions
        4. Media Queries
        5. Maximum Width
        6. Telling Stories with Photos
      6. Background Images
        1. Adding Background Images
        2. Alignment
      7. Responsive Images
        1. Proposed Client-Side Solutions
          1. srcset
          2. <picture>
        2. Other Solutions
          1. Picturefill
          2. Adaptive Images
          3. HiSRC
          4. Third-party services
        3. Breakpoints
      8. Summary
  4. III. Working Responsively
    1. 7. Responsive Workflow
      1. Strategy and Planning
        1. User Research
        2. Content
          1. Information architecture
          2. Content outline
      2. Content Before Layout
        1. Components
        2. Designing in Text
        3. Linear Design
        4. Content Hierarchy
      3. Thinking About Layout
        1. Sketching
        2. Start Small
        3. Mobile First
      4. Prototypes
        1. Wireframes Versus Prototypes
        2. Wireframes
        3. Responsive Prototypes
        4. What’s In a Prototype?
        5. Start With the Basics
        6. How Many Page Layouts to Create
        7. Frameworks
        8. Prototyping Tools
      5. Visual Design
        1. Style Tiles
        2. Testing and Adjusting
        3. Style Guide
      6. Responsive Design Tools
        1. Adobe Photoshop
        2. Adobe InDesign
        3. Adobe Edge Reflow
        4. adobe Dreamweaver
        5. The Browser
      7. Selling Responsive Design
        1. Why Bother with Responsive Design?
        2. Educating Your Clients
        3. Emphasizing Responsive
        4. Responsive Design Is Not Always the Best Option
        5. Cost
      8. Working with Clients
        1. Deliverables
        2. Presentation
      9. Summary
    2. 8. Mobile and Beyond
      1. User Experience
        1. Users Come First
        2. The Myth of the Mobile User
        3. Designing for Context
        4. Mobile-Only Users
        5. Multi-Device Usage
      2. Device-Agnostic Design
      3. Focusing on Mobile First
      4. Do What You Can
      5. Types of Devices
        1. Mobile Phones
        2. Tablets
        3. Other Devices
        4. Desktop and Laptop Computers
      6. Touch
        1. Capacitive Touch
        2. Multi-Touch
        3. Gestures
        4. JavaScript Events
          1. Hover
          2. Touch delay
        5. Touch Target Size
          1. Increasing touch target size
        6. Navigation Location
      7. Screen Size
        1. Rotate
      8. Accessibility (Universal Design)
        1. Visual
          1. Screen readers
          2. Text size
          3. Color contrast
          4. Color blindness
        2. Audio
        3. Input Methods
          1. Keyboard only
          2. Speech recognition software
        4. Cognitive Disabilities
      9. Deciding Which Devices to Support
      10. Why Use Real Devices for Testing
        1. Device Labs
        2. Buying Devices
      11. Testing
        1. Validators
        2. Browser Resizing
          1. Browser tools
        3. Browsers and Operating Systems
        4. Emulators and Simulators
        5. Assistive Technology
      12. Summary
  5. IV. Designing Responsive Websites
    1. 9. Typography
      1. Start with HTML
      2. Typefaces
        1. Choose Your Typeface First
      3. Using Fonts
        1. Well-Designed Fonts
        2. Self-Hosted Fonts
        3. Font Services
        4. Linking to Font Files
        5. Creating the Font Stack
      4. Sizing Text
        1. Forget About Pixels
        2. Screen Distance
        3. Absolute Versus Relative
        4. Setting a Default Font Size
        5. Why 100%?
        6. Units of Measurement
          1. Ems
          2. Nested ems
          3. Rems
          4. Using fallback values
          5. Using browser defaults
          6. Deciding between ems and rems
        7. Relationship Between Sizes
        8. Line Height
      5. Line Length
        1. Testing Line Length
        2. Adjusting Margins and Font Size
        3. Hyphenation
        4. Overflow Wrap
      6. Whitespace
      7. Margins and Padding
      8. Changing Typeface for Screen Size
      9. Summary
    2. 10. Navigation and Header Layout
      1. Responsive Navigation
        1. Start Small
        2. Styling Your List
        3. Horizontal Navigation
      2. Branding
      3. Navigation Links
        1. Make It Flexible
        2. What Do Users Want to Do?
        3. Goal-Based Navigation
        4. Keep It Consistent
        5. Keep It Simple
      4. Navigation Patterns
        1. Top Navigation
        2. Footer Navigation
        3. Toggle Push Navigation
        4. Toggle Overlay Navigation
        5. Priority Navigation
        6. Select Menu Navigation
        7. Flyout Navigation
        8. Bottom Navigation
        9. Skip the Subnavigation
        10. Abandoned Navigation
        11. Sticky Menus for Wider Screens
      5. Header
        1. Minimalist Header
        2. Complicated Header
        3. Navigation Icon
        4. Other Icons
      6. Summary
    3. 11. Performance
      1. Why Performance Matters
      2. Performance as Design
        1. Connections
        2. Balance
        3. The Bloated Web
      3. How Web Pages Are Loaded and Rendered
        1. Latency
        2. DNS Request
        3. Redirections
        4. HTTP Request
        5. Sending the HTML File
        6. Decompression
        7. DOM
        8. Rendering the <head>
          1. External resources
          2. Parallel loading
          3. Single-threaded execution
        9. Rendering the <body>
          1. Loading HTML images
          2. Loading background images
          3. More JavaScript
        10. onload Events
      4. Measuring Performance
      5. Cleaning Up Your Code
        1. Use Straightforward Code
        2. Minification
      6. Minimizing HTTP Requests
        1. Concatenation
        2. Third-Party Code
        3. Image sprites
      7. Server Stuff
        1. Avoid Redirects
        2. File Compression
        3. Browser Caching
      8. JavaScript
        1. What JavaScript Does
        2. How JavaScript Works
        3. Blocking Javascript
          1. Load above-the-fold code first
          2. Inline scripts
          3. Delay loading
          4. Defer execution
          5. Asynchronous loading
          6. Loading only necessary code on each page
          7. Using HTML/CSS instead of JavaScript
        4. JavaScript Libraries
      9. CSS
        1. CSS Frameworks
      10. Hosting
        1. Content Delivery Networks (CDN)
        2. Content Management System
      11. Conditionally Loading Content
      12. Reflows and Repaints
      13. RESS
        1. Example of RESS
      14. Summary
  6. Index
  7. About the Author
  8. Copyright

Product information

  • Title: Learning Responsive Web Design
  • Author(s): Clarissa Peterson
  • Release date: June 2014
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449362942