The Responsive Web
Matthew Carver
  • October 2014
  • ISBN 9781617291241
  • 200 pages
  • printed in black & white

Brilliant and informative.

James Bisiar, Digital Solutions

The Responsive Web is an easy-to-read introduction to responsive web design packed with instantly useful tips and techniques, and dozens of examples that show you exactly how to benefit from this valuable approach. You'll learn innovative ways to use what you already know along with design techniques leveraging new HTML5 and CSS3 features.

Table of Contents show full

preface

acknowledgments

about this book

author online

about the author

Part 1 The responsive way

1. Learning to work responsively

1.1. Meet the responsive web

1.1.1. What is the responsive web?

1.1.2. Key features

1.2. Building your first responsive site

1.2.1. Creating prototypes

1.3. The basic responsive layout

1.3.1. Mobile-first markup

1.3.2. Using percentages in CSS

1.3.3. Adding text and images

1.3.4. The fickle and mighty em

1.3.5. Your first breakpoint

1.4. Summary

1.5. Discussion points

2. Design for mobile first

2.1. Why mobile-first design

2.1.1. Benefits of mobile-first design

2.1.2. The challenges of designing for mobile first

2.2. Designing headers for small screens

2.2.1. Creating the header

2.3. Designing for a touch interface

2.3.1. The simplified small-screen grid

2.4. Designing content for a small screen

2.4.1. Using web fonts in layouts

2.5. Summary

2.6. Discussion points

Part 2 Designing for the responsive web

3. Using style tiles to communicate design

3.1. Visualizing design with style guides

3.1.1. What is a style guide?

3.1.2. Developing a style guide

3.1.3. Style tiles: creating a visual language

3.2. How to create a style tile

3.2.1. Get feedback

3.2.2. Design the style tile

3.2.3. Creating the style tile

3.2.4. Iterative design with a style tile

3.3. The death of the mockup

3.4. Summary

3.5. Discussion points

4. Responsive user experience design patterns

4.1. Single-level navigation

4.1.1. The toggle navigation pattern

4.1.2. The select menu pattern

4.1.3. Toggle navigation versus select menu

4.2. Multilevel toggle navigation

4.3. Responsive user experience design pattern resources

4.4. Summary

4.5. Discussion points

5. Responsive layouts

5.1. Fluid layouts via percentages

5.1.1. How percentages work in CSS

5.1.2. Box sizing

5.1.3. Fluid grid systems

5.2. Building a fluid layout

5.2.1. Interpreting the prototype

5.2.2. Starting coding

5.2.3. Animating the off-canvas elements

5.2.4. Making the element responsive

5.2.5. Expanding into the wider views

5.3. Summary

5.4. Discussion points

6. Adding content modules and typography

6.1. Adding a content module

6.1.1. Creating useful placeholder content

6.2. Typography in responsive design

6.2.1. Embedding typefaces

6.2.2. Setting a typographic base

6.3. Summary

6.4. Discussion points

Part 3 Expanding the design with code

7. Adding graphics in the browser with CSS

7.1. Using CSS to implement design

7.1.1. CSS basics

7.1.2. Maintaining proportions in a fluid structure

7.2. Using icon fonts in your design

7.2.1. User interface sprites

7.2.2. Font-based user-interface graphics

7.3. Using Scalable Vector Graphics

7.3.1. Adding an SVG image to a page

7.3.2. Implementing SVG with CSS

7.3.3. Limitations of the SVG format

7.4. Summary

7.5. Discussion points

8. Progressive enhancement and obsolescence control with Modernizr

8.1. Technical obsolescence

8.1.1. Progressive enhancement

8.1.2. Graceful degradation

8.2. What is Modernizr?

8.2.1. Installing Modernizr

8.2.2. Using Modernizr for cross-browser CSS

8.3. JavaScript feature detection with Modernizr

8.3.1. Detecting touch support

8.3.2. Using Modernizr.load and yepnope

8.3.3. Creating custom Modernizr tests

8.4. Adding Modernizr to our site

8.5. Summary

8.6. Discussion points

9. Testing and optimization for responsive websites

9.1. What is responsive testing?

9.1.1. Simulated testing environments

9.2. Browser tools for testing

9.3. Using web inspectors

9.3.1. Mastering web inspectors

9.4. Tips on reducing request times

9.4.1. Reducing HTTP requests

9.4.2. Reducing image requests with Base64 encoding

9.4.3. Speed optimization check list

9.5. Summary

9.6. Discussion points

Appendix A: Context-aware design

A.1. Context awareness in applications

A.2. Context awareness on the web

A.2.1. Contextual breakpoints

A.2.2. Creating contextual tests

A.2.3. Contextual CSS

A.3. Summary

index

About the Technology

In a world of mobile devices, new browsers, and changing standards, each page of your website can require an unmanageably large number of separate designs. Responsive web design is a set of techniques that allow you to design pages that efficiently adapt to whatever device or platform loads them. For web designers and developers and their customers, responsive design can be a big win.

About the book

The Responsive Web builds on the best practices that have shaken out over a few years of production experience. This concise book skips pure theory and shows you exactly how to make responsive web design work for you in the real world. You'll learn innovative ways to use what you already know along with design techniques leveraging new HTML5 and CSS3 features. Along the way, you'll discover strategies to balance apps and websites, manage browser incompatibilities, and learn when multiple versions are the best option.

What's inside

  • Responsive design concepts
  • CSS preprocessing
  • Rapid prototyping techniques
  • Fluid typography
  • Future-proof designs

About the reader

Written for professional designers and developers building front-end web interfaces.

About the author

Matthew Carver is a front-end developer and web designer with real-world responsive design experience for clients like American Airlines, The Dallas Morning News, and Chobani Yogurt.


combo $39.99 pBook + eBook
eBook $31.99 pdf + ePub + kindle

FREE domestic shipping on three or more pBooks

Recommended! Update your knowledge on current web design practices.

Gregor Zurowski, Sotheby’s

Finally, a complete state-of-the-art resource to make websites shine on any device.

Daniele Midi, whitelemon design studio

Covers the interplay between design and development. Essential!

Roberto Alarcon, InnovoCommerce

How to design for mobile devices—a great introduction.

Benoît Benedetti, University of Nice