Learning Responsive Web Design · A Beginner’s Guide by Peterson, Clarissa -- Read -- Imperial Library of Trantor

Index

Learning Responsive Web Design: A Beginner’s Guide Preface

How This Book Is Organized Who Should Read This Book How to Contact Us Acknowledgments

I. Foundations of Responsive Design

1. What Is Responsive Design?

Just the Basics A Short History

Fixed-Width Design Mobile Web Browsing Mobile Websites More Devices Media Queries Flexibility Responsive Web Design

Why Responsive Design

Getting the Right Design on Every Device Less Work Optimized for Search

Summary

2. Responsive Content

Content Strategy

Mobile Content Strategy?

Managing Content

Use Only What You Need How to Pare Down Content Audit/Inventory

Developing Content

How Users Read

Scanning Inverted pyramid Headings Short and sweet

Plain Language

Content Parity Content Governance

Creating Timeless Content

Adaptive Content Summary

II. Creating Responsive Websites

3. HTML for Responsive Sites

Working with HTML

Versions of HTML Web Standards Using HTML5

Basic Page Structure

Document Type Declaration (DOCTYPE) Document Structure The Page Title Charset

Viewport

Width Initial-Scale User-Scalable Maximum-Scale

Structural Elements

Screen Readers <header> <nav> <footer> <article> <aside> IE Support

Creating a Page

Structural Elements Adding Content Unstyled Page

Clean and Semantic HTML

Separating Content and Presentation Comments

Summary

4. CSS for Responsive Sites

How CSS Works Versions of CSS

Browser Prefixes

Where CSS Goes

Embedded Styles Stylesheets Inline Styles

The Cascade

How It Works Important Inline Styles IDs Classes, Attributes, and Pseudo-classes Elements and Pseudo-elements Inherited Rules Default Values What If Anything Conflicts?

Using the Cascade

Default Values and Reset

Reset

Inherited Rules Elements Everything Else Keeping It Simple

Comments Organizing Your Stylesheet The Box Model

Measurements Ems Height and Width Margins and Padding Borders Box-Sizing

display Positioning

Static Relative Absolute Fixed Measurements for Positioned Elements

float and clear Basic Styles Summary

5. Media Queries

What’s a Media Query? Media Query Structure Using Media Queries in Stylesheet Links Other Ways to Use Media Queries What We Can Query

Viewport Width and Height Screen Width and Height Orientation Aspect Ratio Resolution Other Media Features

Browser Support

Conditional Comments for Internet Explorer Testing Media Query Answers

Breakpoints Design Ranges Designing Responsively

Progressive Enhancement Designing with Grids Using columns Design for Small Screens First

Using Media Queries Two-Column Layout

Using Floats Using a Grid Adding a Media Query

Setting a Maximum Width How to Choose Breakpoints Summary

6. Images

Ways to Display Images

CSS Alternatives Content Images Background Images Image Sprites Icon Fonts

Alt Text

Writing Good Alt Text

Image File Formats

JPEG GIF PNG SVG

Optimizing Images

Pixels and Resolution High-Density Screens Compressing Images Actual Dimensions

Content Images

The <img> element Adding an Image Flexible Image Dimensions Media Queries Maximum Width Telling Stories with Photos

Background Images

Adding Background Images Alignment

Responsive Images

Proposed Client-Side Solutions

srcset <picture>

Other Solutions

Picturefill Adaptive Images HiSRC Third-party services

Breakpoints

Summary

III. Working Responsively

7. Responsive Workflow

Strategy and Planning

User Research Content

Information architecture Content outline

Content Before Layout

Components Designing in Text Linear Design Content Hierarchy

Thinking About Layout

Sketching Start Small Mobile First

Prototypes

Wireframes Versus Prototypes Wireframes Responsive Prototypes What’s In a Prototype? Start With the Basics How Many Page Layouts to Create Frameworks Prototyping Tools

Visual Design

Style Tiles Testing and Adjusting Style Guide

Responsive Design Tools

Adobe Photoshop Adobe InDesign Adobe Edge Reflow adobe Dreamweaver The Browser

Selling Responsive Design

Why Bother with Responsive Design? Educating Your Clients Emphasizing Responsive Responsive Design Is Not Always the Best Option Cost

Working with Clients

Deliverables Presentation

Summary

8. Mobile and Beyond

User Experience

Users Come First The Myth of the Mobile User Designing for Context Mobile-Only Users Multi-Device Usage

Device-Agnostic Design Focusing on Mobile First Do What You Can Types of Devices

Mobile Phones Tablets Other Devices Desktop and Laptop Computers

Touch

Capacitive Touch Multi-Touch Gestures JavaScript Events

Hover Touch delay

Touch Target Size

Increasing touch target size

Navigation Location

Screen Size

Rotate

Accessibility (Universal Design)

Visual

Screen readers Text size Color contrast Color blindness

Audio Input Methods

Keyboard only Speech recognition software

Cognitive Disabilities

Deciding Which Devices to Support Why Use Real Devices for Testing

Device Labs Buying Devices

Testing

Validators Browser Resizing

Browser tools

Browsers and Operating Systems Emulators and Simulators Assistive Technology

Summary

IV. Designing Responsive Websites

9. Typography

Start with HTML Typefaces

Choose Your Typeface First

Using Fonts

Well-Designed Fonts Self-Hosted Fonts Font Services Linking to Font Files Creating the Font Stack

Sizing Text

Forget About Pixels Screen Distance Absolute Versus Relative Setting a Default Font Size Why 100%? Units of Measurement

Ems Nested ems Rems Using fallback values Using browser defaults Deciding between ems and rems

Relationship Between Sizes Line Height

Line Length

Testing Line Length Adjusting Margins and Font Size Hyphenation Overflow Wrap

Whitespace Margins and Padding Changing Typeface for Screen Size Summary

10. Navigation and Header Layout

Responsive Navigation

Start Small Styling Your List Horizontal Navigation

Branding Navigation Links

Make It Flexible What Do Users Want to Do? Goal-Based Navigation Keep It Consistent Keep It Simple

Navigation Patterns

Top Navigation Footer Navigation Toggle Push Navigation Toggle Overlay Navigation Priority Navigation Select Menu Navigation Flyout Navigation Bottom Navigation Skip the Subnavigation Abandoned Navigation Sticky Menus for Wider Screens

Header

Minimalist Header Complicated Header Navigation Icon Other Icons

Summary

11. Performance

Why Performance Matters Performance as Design

Connections Balance The Bloated Web

How Web Pages Are Loaded and Rendered

Latency DNS Request Redirections HTTP Request Sending the HTML File Decompression DOM Rendering the <head>

External resources Parallel loading Single-threaded execution

Rendering the <body>

Loading HTML images Loading background images More JavaScript

onload Events

Measuring Performance Cleaning Up Your Code

Use Straightforward Code Minification

Minimizing HTTP Requests

Concatenation Third-Party Code Image sprites

Server Stuff

Avoid Redirects File Compression Browser Caching

JavaScript

What JavaScript Does How JavaScript Works Blocking Javascript

Load above-the-fold code first Inline scripts Delay loading Defer execution Asynchronous loading Loading only necessary code on each page Using HTML/CSS instead of JavaScript

JavaScript Libraries

CSS

CSS Frameworks

Hosting

Content Delivery Networks (CDN) Content Management System

Conditionally Loading Content Reflows and Repaints RESS

Example of RESS

Summary

Index About the Author Copyright

← Prev
Back
Next →

← Prev
Back
Next →