Responsive Web Design — A quick guide
These days, to have a complete set of end-to-end UX design skills and expertise, you absolutely need to master the following design processes (at a minimum and obviously not limited to):
- Responsive Web Design
- iPhone and iPad Mobile App Design
- Android Phone and Tablet Material Design
- Television, Gaming Console and Large Display Design
- Virtual Reality and Mixed Reality
This article will be focused on #1 — Responsive Web Design. I’ll cover the others in subsequent articles. So let’s get started with some of the basic components. As shown in the illustration below, response web design is an approach to seamlessly adjusting and transforming a website’s content for better presentation based on user’s device and the browser.
To get started with your “responsively responsible” journey, it’s important to understand the following aspects of this approach which begin with Content-First and Mobile-First mindset:
A. Responsive design vs. adaptive design
B. Grid System (Fluid or Fixed)
C. Breakpoints
D. Design Process
A. Responsive Design vs. Adaptive Design
A well designed responsive web layout reacts to the size of the browser at any given point in time and changes the layout as the browser width shifts and changes. On the other hand, adaptive design, changes the layout at specific breakpoints. With adaptive design, you have predefined breakpoints and you are only designing for those dimensions hence it’s easier to manage your development but then you may need to have different codebases to manage.
B. Grid System
I often get asked, what the heck is a grid system within the responsive or modern web site construct and how does it work. Given that a lot of people follow the principle, “if you can’t explain them, confuse them”, we are going to take the exact opposite approach and try to simplify this as much as possible.
Typically, a grid system on a web page supports about 12 columns which can also be combined together to form fewer/wider columns to be like this:
That’s about it but there are some general rules that must be followed:
- Rows must be placed within a fixed-width container or full-width or fluid container.
- Rows are used to create groups of columns (horizontally) and content should only be placed within columns, and only columns may be immediate children of rows.
- Columns are created by specifying the number of 12 available columns you wish to combine.
C. Breakpoints
As we look at the range of devices from small phones to extra large desktop or console screens, how can we identify the different dimensions/screen sizes/ranges for design?
Well, fortunately, grid systems like Bootstrap provide us with some baseline guidance that we can follow. Typically, I design for these following four groups of devices.
D. Design Process
As mentioned in the previous article, a typical design process has the following key steps:
More specifically for responsive web design projects, one of the most important steps is to focus on information architecture and content strategy/priorities for various layouts.
As mentioned before, I typically focus on four layouts — phone, tablets portrait, regular desktops or tablets landscape and large desktops with Mobile-First and Content-First mindset. For each of these layouts, it’s important to understand how content should be presented and what’s most important to the user.
Therefore, it’s critical to create a content inventory and then determine the best way to present some of all of the content based on the device. An example of a content inventory, priority and layout presentation is shown below:
To wrap things up, it is extremely important to plan, plan and plan by keeping two things in mind — Content-First and Mobile-First for a successful responsive design process. Next we will go native by covering the design process and strategy for iOS and Android apps.
