Responsive Web Design – 7 Helpful Tips

Responsive Web Design (RWD) is the most common, industry-standard term for designing websites so they work well on mobile devices (cell phones) and desktop computers and anything in between. The website will scale to the size of the browser window on which the site is being viewed. Utilizing CSS3 media queries (@media) is the most common method of making a site responsive (scalable).

Here are some general principles and technical considerations you should make when creating a site with or converted a site to responsive design:

  1. Flexibility
    A common design concept is called “mobile first” meaning you should design your site first for mobile devices then alter the design for desktop browser sizes. The assumption with mobile first being that due to the increasing number of people who will be viewing the site on a phone and possibly only on a phone, it’s best to take that into account first. In principle this makes sense, however, a better practice is to design with fluidity or flexibility in mind regardless of whether you’re designing mobile first or desktop first. You should always plan for how it will look on various screen sizes and include this planning in your wireframes/mockups.
  2. Break-points
    The common three size ranges (or break-points) used in RWD CSS media queries are:

    • Mobile size range:
      @media (max-width: 480px) { …CSS goes here… }
    • Tablet size range:
      @media (min-width: 481px) and (max-width: 1199px) { …CSS goes here… }
    • Desktop size range:
      @media (min-width: 1200px) { …CSS goes here… }
    • Regardless of the standard break-points, you should always put in break-points to suit your content. If your content is flexible throughout, you may not need any. If your content looks awkward when the screen is around 700px, then an additional break-point may need to be added there. Set your break-points and style to what works for your content, not necessarily what might be the most common size ranges.
  3. Container Max-Width should Equal Desktop Break-point Media Query
    The container max-width on your site should be equal to the desktop size range (break-point) min-width value in that media query. In other words, if your container has a maximum width of 960px, then the break-point is @media (min-width: 960px). When the container has a maximum width in pixels, it makes no sense to make the desktop break-point smaller or larger than it. If it’s smaller than the container, then the container won’t fit and your site will have a horizontal scrollbar. If it’s larger than the container, then the container will have already locked out at the smaller size. It could be relevant if there was some other change — like font-size — occurring in a larger media query range, however, since most media queries adjust structural elements, then a desktop media query with a min-width larger than the container’s max-width is not likely to make a difference.
  4. Include Meta Viewport
    To ensure your site works and scales properly on iDevices (Apple iPads and iPhones), don’t forget to include this meta tag in the HTML head tag area on all your responsive web pages (note that you can customize the values here if necessary):
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=yes”> 
  5. Remove Width and Height Attributes for Img Tags
    For all img tags in the HTML, remove the width and height attributes in the HTML. Those attributes override the CSS and your images can’t be made to scale if those attributes are in there and set to pixel sizes.
  6. Set Max-Width for Images in the CSS
    In the CSS, create a tag selector to set the images to a max-width of 100%, otherwise they may scale to larger sizes than they were optimized for and pixelate. The selector would go in your general selector area and look like this:
    img { max-width: 100% }
  7. Media Queries from Smallest to Largest Ranges
    While this is not a requirement, it’s more common (though not necessarily industry-standard) to put your media queries in order in your CSS from smallest range (mobile break-point) first followed by the increasing size ranges, ending with the largest (usually the desktop break-point). There are Javascript programs written to target CSS media queries, and Javascript programmers indicate that smallest range first is preferable. Since the ranges don’t often overlap, it doesn’t matter what order they are in for the purposes of the browser, then it’s best to follow this common concept. Also, it’s important to always put your media query CSS below your general CSS (which should be below your reset CSS), because the media queries can often override the general style. This is a requirement. Bear in mind, that if the ranges do overlap (nothing beats the confusion of doing this!) then order may matter.

Leave a Reply

Your email address will not be published. Required fields are marked *