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

Taking things further

In many instances, we can satisfy our requirements with the use of a text editor and browser; the latter's device mode (or responsive mode) will play a big part in creating perfectly valid queries that will suit many sites.

However, there will be occasions where this won't be enough. We may need to rely on additional help to support media queries for a particular project. One must ask, though, if this is really necessary, and not simply an excuse to be lazy. The media query support in recent browsers is very solid!

This said, if we have to use outside help, then there are plenty of options available online. Let's take a look at a few examples:

  • Plain JavaScript or jQuery: It goes without saying, but most solutions will be based on either of these two technologies; these will, of course, be obvious choices! The point to note, though, is that jQuery was always designed to complement sites, and not play a core part in their design; one might argue that creating media queries is not a good use of jQuery for this reason.
  • .resizr (http://resizr.co/): This website is one of many we can use to get a feel for how well our site might work on a range of mobile devices; it does rely on you having a site that is accessible to the Internet, and there is no substitute for the real thing! It is a good start though, so when you get to test your site on real devices, it should mean that many of the basic issues have been resolved.
  • What's My Device Pixel Ratio?: Hosted at http://devicepixelratio.com/, this tool works out what your screen's device ratio setting is capable of supporting. This is perfect for those instances where we may want to use high-res images. After all, there is no point using them if your chosen device can't display them!
  • Mediaqueri.es: Hosted at http://mediaqueri.es/, this website should be in any developer's armory. It is a display of inspirational sites that use media queries and RWD.
  • Modernizr: Available from http://www.modernizr.com, we can use the library to test for media query support; an alternative is to use the @supports directive. In most cases, it will be older versions of IE that cause issues. If we plan our site with care, we may be able to design out the need for either, by providing a base site that works in IE, and adding extra touches on top for other browsers.
  • Restive.js: From http://restivejs.com/, this jQuery-based plugin is a real Swiss Army knife of functionality, and allows you to add responsive support for different aspects of your sites.
  • Responsive design patterns: The agency Code My Views, based in the USA, created a number of patterns for use in responsive design; this may be worth a look once you are more accustomed to working with media queries. You can see more details at https://codemyviews.com/blog/5-really-useful-responsive-web-design-patterns.

Whichever way you decide to go, there are plenty of options available online, to help with developing your media queries. The key here though is to be sure that if you are adding an additional library, then it is the right thing to do for your site; it will probably center around whether your project must support old browsers such as IE8. This browser has been around since 2009, and should really be put out to pasture—permanently!