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 it further

Learning a new technology is like putting on new clothes; at some point, we will outgrow those clothes, or they no longer present the appeal that attracted us to them at the time of purchase.

It's at times like this we need to progress onto something more advanced or with additional functionality, otherwise our development will come to a standstill! Thankfully, there are literally dozens of options available online that we can explore—one might be forgiven for thinking that there are too many and where does one start?

A great starting point is a responsive framework such as Bootstrap or Unsemantic; these have been made to improve the usability and help speed up the process of development. These frameworks were introduced with the aim of providing a grid or foundation for rapid prototyping of the various mobile functionalities, layouts which allow the designers and developers to better make use of their development time.

This is just one part of what is available to help you along, let's briefly cover a few ideas that might serve as somewhere to start:

  • Bootstrap is downloadable from http://getbootstrap.com/, this veteran grid system was first created by Facebook, before becoming a standalone product in its own right.
  • If you want to explore something that is more than just a framework, then Responsive Grid System might be an option; it's available from http://www.responsivegridsystem.com/, with a SASS version available for those who use that CSS preprocessor.
  • Instead of simply downloading a framework, how about generating one online? For this, try Responsify.it (http://responsify.it) and Gridpak.com (http://gridpak.com) as possible contenders.
  • We used a minimal Grid system earlier in the form of Gridfy, there are others available, if this one is not to your liking. As an example, try Gridly, which can be downloaded from http://ionicabizau.github.io/gridly/example/.
  • It's worth noting that not every Grid system is available as a standalone—some form part of a component library. A good example is Formstone; its grid system is available from https://formstone.it/components/grid/. For those of you who use the Less CSS preprocessor, this grid comes with a version that can be used with this tool.
  • Staying with the theme of component libraries, why not have a look at Metro UI? This library, available from http://metroui.org.ua/grid.html, even has backing from Microsoft; it does require jQuery though!
  • Some of you might have heard of the 960.gs grid system, which was available a few years ago - it has been replaced by Unsemantic, which is available from http://unsemantic.com/.
  • We covered the use of flexbox as a technology for creating grid-based layouts; as a start point, why not have a look at the PureCSS library? This is available at http://purecss.io; it's a good example of using flexbox to produce clean layouts without too much fuss.

As developers, this is one area of responsive design where we are spoilt for choice; the great thing about open source software is that if a framework we choose isn't right, then we can always try another! To help us make the decision, there are a few questions we can ask ourselves:

  • Do you need a version that works with a CSS preprocessor? Although preprocessed CSS is a superset of standard CSS, there are grid systems available that are specifically built from a preprocessing technology such as SASS or PostCSS. This is easier than trying to convert finished CSS into something that can be compiled by our processor.
  • How complex is your site? Is it a single page calling card affair, or something substantially more complex? There is clearly no point in burdening a simple site with a complex grid arrangement; equally if we're building a complex site, then our chosen grid system must be up to par.
  • Is browser support an issue? If we can forgo support for some of the older browsers (and particularly below IE8), then choosing a CSS-only option is preferable to one dependent on using jQuery. The same principle applies if we already have to use more than just the occasional external resource. There is no need to add in a plugin if using CSS is sufficient.
  • Does your site need to make use of UI components which need to be styled using a themed library? If so, check the library; it may already have a grid system built in that we can use.

The key here is that we shouldn't simply choose the first available option to us, but carefully consider what is available and pick something that satisfies our requirements where possible. Any styling can of course be overridden—the trick here is to choose the right one, so that overriding is minimal or not required for our site.