Matthew Carver - The Responsive Web [2014, ePub, ENG]

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