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

Exploring best practices

Ugh, using this phrase makes me cringe! All too frequently, too many people come up with what they consider to be best practice when talking about subject X or topic Y.

This said, there are some useful tips we can use when creating media queries; they aren't just about following best practice, but equally making things easier for ourselves, so that we can display the right content on the right device at the right time:

  • Always start small when designing media queries. This will avoid browsers downloading unnecessary elements that are only needed for larger screen sizes. Starting large is possible, but often requires some heavy reduction of content and is not likely to be as easy to manage.
  • When designing queries, don't immediately think you have to include everything from the desktop site on a mobile device. Sometimes it doesn't make sense to do so. More often than not, there simply isn't space or bandwidth to do so! It's important to consider the context of the site you're building for, to ensure you include everything that is suitable or appropriate.
  • Give plenty of thought to how content should be prioritized. For example, on a blog site, we frequently see images against article teasers. These won't transfer well to smaller screens, so consider removing these images and leave details of the article, when it was written, author's photo, and the likes. We can still get our message across, but this time just by making some simple tweaks to our design.
  • Take care when using media queries with images. Page sizes are on the increase, so it is vitally important that we reference the right image in our queries. Equally, if we have effects such as carousels in place, then we should consider replacing it with a static image; this means we can significantly decrease the size of the page, as a large proportion of the images can be be removed.
  • Don't even try to cater for every device available on the market; research in 2015 has shown there to be over 24,000 distinct Android devices, making for a highly fragmented market, which is difficult if not impossible to support in its entirety. Again, server logs will help identify devices being used to access your site. A check through these will identify your top mobile browsers, on which you should focus your efforts.
  • When designing, consider using em (or better, rem) units. Pixel values work well for normal design, but do not operate so well when zooming in, which is frequently done with responsive sites. If we use em (or rem) values, this allows the browsers to automatically adjust the design of our site, based on the zoom level in use.
  • Make your navigation scalable. Clarity and consistency should rule over similarity to the desktop site. Don't be afraid to use something that is entirely different to the desktop site; clarity and ease of navigation should rule over any other factor, such as color.
  • Use icons and fonts where possible, or even SVG images. These scale much better than standard images, particularly if we are using media queries. We can even change the content of the latter using CSS, and still maintain clear images throughout.
  • Pay attention to font sizes. We can absolutely use media queries to display larger or smaller fonts, depending on what screen estate is available to us. The key to note though is that if we use percentage values or em/rem units, then these will scale better, and may even remove the need for media queries to handle fonts.
  • Watch out for users with visual impairments, such as deuteranopia or color blindness. The available screen viewport on a mobile device will already be smaller; your users will definitely not thank you if font sizes don't scale well, or you've chosen colors that clash, such as white text on a red background!

There is a lot we can accomplish by simply using a text editor, browser, and some careful planning. The great thing though is that we can use media queries to help with many of these tips. It's just a matter of planning so that we don't create more queries than are needed!

Let's move on. Throughout this chapter, we've focused on what is possible when simply using a browser and a text editor to create our queries. I strongly believe that too many simply resort to picking the nearest library to help with constructing our queries; time has come to get back to basics!

This said, there may be instances when we need to use jQuery or a specific library to help produce our queries. A classic example is to incorporate support for older browsers, although it has to be said that it is debatable as to whether we should still support old technology. Assuming though that we have a valid need to use a library, let's spend a moment or two to explore some of the options available to help with creating those queries, that can't be satisfied with simple CSS.