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

Chapter 2. Creating Fluid Layouts

A key part of our journey through the essentials of responsive design is laying out content on the page—in the early days of the Internet, this was a simple process!

With the advent of mobile devices (and those non-PC devices) that can access the Internet, content layout has become ever more critical; for example, how many images do we have, or do we include content X, or show a summary instead? These are just some of the questions we might ask ourselves. It goes to show that it can open a real can of worms!

To simplify the process, we can use grid or fluid-based layouts. Throughout the course of this chapter, we'll take a look at using them in more detail; we'll start with setting the available viewport, and take it right through to future grid-based layouts.

In this chapter, we will cover the following topics:

  • Introducing grid layouts and understanding different types
  • Setting the available viewport for use
  • Exploring the benefits and mechanics of using grid layouts
  • Implementing a prebuilt grid layout
  • Exploring the future of grid-based template layouts

Curious? Let's get started!

Note

Note that the exercises have been designed for the Windows platform, as this is the authors' platform of choice; alter as appropriate if you use a different platform.

Introducing flexible grid layouts

For many years, designers have built layouts of different types; they may be as simple as a calling card site, right through to a theme for a content management system, such as WordPress or Joomla. The meteoric rise of accessing the Internet through different devices means that we can no longer create layouts that are tied to specific devices or sizes—we must be flexible!

To achieve this flexibility requires us to embrace a number of changes in our design process—the first being the type of layout we should create. A key part of this is the use of percentage values to define our layouts; rather than create something from the ground up, we can make use of a predefined grid system that has been tried and tested, as a basis for future designs.

The irony is that there are lots of grid systems vying for our attention, so without further ado, let's make a start by exploring the different types of layouts, and how they compare to responsive designs.