Table of Contents for
Mastering Responsive Web Design

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Mastering Responsive Web Design by Ricardo Zea Published by Packt Publishing, 2015
  1. Cover
  2. Table of Contents
  3. Mastering Responsive Web Design
  4. Mastering Responsive Web Design
  5. Credits
  6. About the Author
  7. Acknowledgment
  8. About the Reviewers
  9. www.PacktPub.com
  10. Preface
  11. What you need for this book
  12. Who this book is for
  13. Conventions
  14. Reader feedback
  15. Customer support
  16. 1. Harness the Power of Sass for Responsive Web Design
  17. The basic concepts of Sass for RWD
  18. Summary
  19. 2. Marking Our Content with HTML5
  20. The
  21. The
    element
  22. The
  23. The
    element
  24. The
  25. The
  26. Using WAI-ARIA landmark roles to increase accessibility
  27. A full HTML5 example page with ARIA roles and meta tags
  28. Output screenshots for desktop and mobile
  29. Summary
  30. 3. Mobile-first or Desktop-first?
  31. Sass mixins for the mobile-first and desktop-first media queries
  32. Dealing with legacy browsers
  33. How to deal with high-density screens
  34. Sometimes RWD is not necessarily the right solution
  35. Retrofitting an old website with RWD
  36. Retrofitting with AWD
  37. Retrofitting with RWD
  38. Summary
  39. 4. CSS Grids, CSS Frameworks, UI Kits, and Flexbox for RWD
  40. CSS grids
  41. CSS frameworks
  42. UI kits
  43. The pros and cons of CSS frameworks for RWD
  44. Creating a custom CSS grid
  45. Building a sample page with the custom CSS grid
  46. Stop using CSS grids, use Flexbox!
  47. Summary
  48. 5. Designing Small UIs Driven by Large Finger
  49. The posture patterns and the touch zones
  50. The nav icon – basic guidelines to consider for RWD
  51. The navigation patterns for RWD
  52. Summary
  53. 6. Working with Images and Videos in Responsive Web Design
  54. Third-party image resizing services
  55. The element and the srcset and sizes attributes
  56. Replacing 1x images with 2x images on the fly with Retina.js
  57. Making videos responsive
  58. The Vector Formats
  59. Summary
  60. 7. Meaningful Typography for Responsive Web Design
  61. Calculating relative font sizes
  62. Creating a Modular Scale for a harmonious typography
  63. Using the Modular Scale for typography
  64. Web fonts and how they affect RWD
  65. Sass mixin for implementing web fonts
  66. Using FlowType.js for increased legibility
  67. Summary
  68. 8. Responsive E-mails
  69. Don't overlook your analytics
  70. Recommendations for building better responsive e-mails
  71. Responsive e-mail build
  72. Third-party services
  73. Summary
  74. Index

The pros and cons of CSS frameworks for RWD

With RWD as our main driver for any decisions we make in terms of layout versus screen real estate, let's take a look at what the good and not so good things are about CSS frameworks:

The advantages are as follows:

  • They are very useful to rapidly build responsive prototypes rather than showing static wireframes.
  • Cross-browser issues are already taken care of.
  • They force you, in a good way, to create grid-based layouts.
  • They offer a solid starting point to build on top of.
  • The modularity allows you to handpick the components you want. For example, you can just use the CSS grid module or you can use the forms module.
  • Changing the styling to fit your design(s) is relatively easy.
  • If you aren't too good at CSS, you can still use a CSS framework to implement your own designs.

The disadvantages are as follows:

  • They can bloat your project(s) with CSS that you will never use.
  • They have a large footprint if you decide to use the entire CSS framework.
  • You might need to change your habits and the way you write your HTML and CSS to fit the CSS framework you're using.
  • They can be opinionated, so if you don't like the way things are named you have very little choice for customization.
  • Customizing a CSS framework is doable, but it can be very time consuming and dangerous. Change a name to something else and there's almost no way to know what the impact is going to be on other parts of the framework.
  • If the default styling is not changed to fit your brand/designs, your site or app will not be unique and will look like everyone else's, losing credibility in front of users.
  • If you need to build something simple, using a CSS framework is overkill.
  • Every website/app or project is different, so you may end up spending a lot of time changing and overriding properties for every single project.
  • They try to solve every frontend problem.

Now that we've seen the pros and cons of CSS grids, CSS frameworks and UI kits it's time to make a decision and answer this question: which methodology is best for RWD?

The answer isn't the most encouraging, I admit it, but it's the truth: it depends.

If we're freelancing and doing everything ourselves, or working in a very small group, it may not be necessary to use any frameworks at all. We can custom build something based on the same principles major frameworks have been built on. Obviously, we would want to automate any repetitive processes so we use our time efficiently.

But if we're working in a large team, a melting pot of web professional with in-house and off-shore resources, maybe using a framework can be helpful. This is because everyone will need to adhere to the framework's structures so that all things are consistent.