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

Appreciating the importance of RWD

So - we've explored how RWD works, and some of the key elements that make up this philosophy; question is, why is it so important to consider using it? There are several benefits to incorporating a responsive capability to our sites, which include the following:

  • It is easier for users to interact with your site, if it is designed to work with multiple devices.
  • Creating a single site that caters to multiple devices may in itself require more effort, but the flip side of this is that we're only developing one site, not multiple versions.
  • Constructing a site that works based on how much can be displayed in a specific viewport is a more effective way to render content on screen than relying on browser agent strings, which can be falsified and error prone.
  • RWD is able to cater to future changes. If we plan our site carefully, we can construct media queries that cater for devices already in use and ones yet to be released for sale.

Making our site accessible and intuitive

Accessibility plays a key role in responsive design. Our content should be as intuitive as possible, with every single piece of information easy to access. Responsive design places great emphasis on making our design self-explanatory; there shouldn't be any doubt as to how to access information on the site.

Note

In this context, accessibility refers to making our site available on a wide variety of devices; this should not be confused with the need to cater for individuals with disabilities. Making sites accessible for them is equally important, but is not a primary role in RWD.

Even though our mobile version may not contain the same information (which is perfectly accessible), it nonetheless must be engaging, with appealing colors, legible text (at all sizes), and a design that retains visual harmony and balance with our chosen color scheme.

Organizing our content

The success of our site is determined by a host of factors, of which one of these will be how our content is organized in the layout. The content should be organized in such a way that its layout makes it easy to process, is simple and free of clutter, and that we're making full use of the available viewport space for the device we're targeting.

We must also ensure our content is concise—we should aim to get our point across in as few words as possible so that mobile users are not wasting time with downloading redundant content. Keeping our options simple is essential - if we make it too complicated, with lots of links or categories, then this will increase the time it takes for visitors to make decisions, and ultimately only serve to confuse them!

At this point, it is worth pointing out something - over time, you may come across the phrase adaptive design, when talking about responsive design. There is a subtle but key difference between the two, and either can be used as a principle when constructing our site. Let's take a moment to explore what each means, and the differences that might affect how we go about constructing our sites.