Rules of Thumb

Rules of Thumb for Responsive Design

The following is a list of sensible guidelines to following when incorporating responsive design into your projects

  • When determining which breakpoints to use, always start with the recommended breakpoints and then add others on an as needed basis

  • Use EMs (or REMs) to make you text size scalable

  • Use Percentages or EMs/REMs for Horizontal measurements

  • Consider using EMs/REMs to dynamically adjust padding if to optimize readability of your content at different widths

  • Consider using relative measures for left and right margins they change in proportion to the width of the containing element

  • Use pixels (absolute measurement) for height/margins/paddings if you do not want those measurements to change relative to screen size

These rules are not absolute but having a standard approach speeds up development