Table of Contents for
Responsive Web Design with HTML5 and CSS3 Essentials

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Responsive Web Design with HTML5 and CSS3 Essentials by Asoj Talesra Published by Packt Publishing, 2016
  1. Cover
  2. Table of Contents
  3. Responsive Web Design with HTML5 and CSS3 Essentials
  4. Responsive Web Design with HTML5 and CSS3 Essentials
  5. Credits
  6. About the Authors
  7. About the Reviewer
  8. www.PacktPub.com
  9. Preface
  10. What you need for this book
  11. Who this book is for
  12. Conventions
  13. Reader feedback
  14. Customer support
  15. 1. Introducing Responsive Web Design
  16. Exploring how RWD works
  17. Understanding the elements of RWD
  18. Appreciating the importance of RWD
  19. Comparing RWD to adaptive design
  20. Preparing our development environment
  21. Considering a suitable strategy
  22. Exploring best practices
  23. Setting up a development workflow
  24. Exploring mistakes
  25. Summary
  26. 2. Creating Fluid Layouts
  27. Understanding the different layout types
  28. Setting the available viewport for use
  29. Exploring the benefits of flexible grid layouts
  30. Understanding the mechanics of grid layouts
  31. Implementing a prebuilt grid layout
  32. Exploring the use of flexbox
  33. Visiting the future
  34. Taking it further
  35. Summary
  36. 3. Adding Responsive Media
  37. Making video responsive
  38. Making text fit on screen
  39. Summary
  40. 4. Exploring Media Queries
  41. Understanding media queries
  42. Identifying common breakpoints
  43. Putting our theory into practice
  44. Creating some practical examples
  45. Examining some common mistakes
  46. Exploring best practices
  47. Taking things further
  48. Summary
  49. 5. Testing and Optimizing for Performance
  50. Understanding why pages load slowly
  51. Optimizing the performance
  52. Testing the performance of our site
  53. Best practices
  54. Providing support for older browsers
  55. Considering cross-browser compatibility
  56. Testing site compatibility
  57. Following best practices
  58. Summary

Preface

A question—how many devices do you own that can access the Internet?

As a user, I'll bet the answer is likely to be quite a few; this includes smart TVs, cell phones, and the like. As developers, it is up to us to provide a user experience that works on multiple devices. Welcome to the world of responsive design!

Responsive design is not only all about creating a great user experience, but one that works well on multiple different devices, from a simple online ordering process for tickets, right through to an extensive e-commerce system. Many of the tips you see throughout the course of this book don't require extensive changes to your existing development methodology. In many cases, it's enough to make some simple changes to begin building responsive sites.

Creating responsive sites can open up a real world of opportunity for you; over the course of this book, I'll introduce you to the essential elements that you need to be aware of when designing responsively, and provide you with examples and plenty of tips to help get you started with creating responsive designs.

Are you ready to get started? Here's hoping the answer is yes. If so, let's make a start.

What this book covers

Chapter 1, Introducing Responsive Web Design, kicks off our journey into the world of responsive design, with an introduction into the basics of the concept; we explore the importance of RWD in today's environment and examine how it works as a concept.

Chapter 2, Creating Fluid Layouts, takes a look at creating flexible grid layouts as a key element of our design process; we explore the benefits of using them, and take a look at creating some examples using prebuilt styles.

Chapter 3, Adding Responsive Media, walks us through how to make our media responsive. We cover some of the tips and tricks available for use and examine why, in some cases, it is preferable to host content externally (such as videos)—if only to save on bandwidth costs!

Chapter 4, Exploring Media Queries, leads us to explore media queries and how we can use them to control what content is displayed at particular screen width settings. We cover the basics of creating breakpoints and examine why these should be based around where content breaks in our design and not simply for specific devices we want to support.

Chapter 5, Testing and Optimizing for Performance, rounds off our journey through the essentials of responsive web design with a look at how we can test and optimize our code for efficiency. We explore some of the reasons why pages load slowly, how we can measure our performance, and understand why even though the same tricks can be applied to any site. It's even more critical that we incorporate them when designing responsively.