Basic Principles Of Responsive Design and Layout

In this tutorial, you will learn about the fundamentals of creating a responsive website design.  

Fluid Grids and Layouts

To create a fluid grid we will need to use relative units rather than absolutes.  This means you will be working with percentages, em, and rems, rather than pixels for all layout related lengths.

In modern fluid grid design, there are three main techniques of creating a fluid grid:

  • Float Layouts:  Boxes placed side-by-side using floats.  Float-based grids like Twitters Bootstraps Grid where the defacto way of using grids for a long while.  Over the past few projects, I've worked on, the teams have started to adopt one of the more modern approaches.
  • Flexbox: Boxes are placed in a one-dimensional row.  The difference in a flex-box grid is that the container can alter the child elements width/height to best fill the available space. When the viewport size is changed, a flex container will expand or shrink the child items to prevent overflow.
  • CSS Grid: CSS grids provide a full 2D grid.

Flexible and Responsive Image

Images will not scale automatically when the viewport changes.  When you create a responsive design you will need to ensure that images adapt nicely.  One method of making an image flexible is to specify the dimension in percentages.

As image usually take up the most amount of page weight so you will want to consider image optimization based on viewport size.

Media Queries

Media queries allow the styles to be changed based on breakpoints.  Each breakpoint you define in your CSS will usually be related to a device.  A basic common breakpoint guide is mobile is anything less than 640px, a tablet is between 641px to 1007px and a desktop would be anything over 1008px 

In a mobile-first approach, you might write a call to action component that displays full-width on mobile, e.g. width: 100%.  You could then write a media query to change the width of the div to 50% if the viewport ever exceeds 641px.

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top