Responsive Design

7 min readSep 26, 2022

Create designs that are capable of working on multiple devices.

Responsive designs automatically adapt the screen layout to match the capabilities of the screen in use. This allows the design teams to engineer products that can work seamlessly across multiple devices such as desktops, tablets, mobiles, etc.

Responsive design means designing an application that works well on different resolutions like mobile, tablet, and desktop devices. Research data indicates that mobile traffic is increasing significantly and 83% of users are likely to use applications both on mobile and desktop devices. At the same time, users are dissatisfied that these applications are not very engaging and usable when they switch devices.

Hence, it is important to design applications that work for every situation, irrespective of the device used. This can also be applied to native mobile applications which will work for both iPhone and iPad.

Free & Discounted Udemy Courses — Explore Now

Mobile-First Approach

The mobile-first approach means designing for the smallest screen first and working your way up. It’s an ideology that designing the mobile version is the hardest thing as there is limited space. Because of the limited space, only the essential features of the design will be made, thereby solving and designing the major UX. Once the mobile is done, it will be easier to design for the larger screen. This is one of the best strategies for creating a responsive design.

Here are the steps to be followed during the responsive design process:

Step 1: Content Inventory

The first step of responsive design is to create a document with the elements or information groups that should be added to the application. The information is then prioritized based on its importance to ensure that the priority information is captured upfront across all the resolutions.

Step 2: Define Breakpoints

In responsive design, a ‘Breakpoint’ is a ‘point’ at which the design and the content adapt to that particular resolution. Based on the platform (desktop, tablet, mobile) you want to scale your design to, define the breakpoints accordingly. The six (6) most used screen sizes are shown below;

It is also noteworthy that the user may view the application in landscape orientation (on mobile or tablet). Furthermore, the user of the application on a desktop device may not maximize the window. Hence, the design should be optimized to handle the ‘‘in-betweens’’ and not only the common screen sizes.

Step 3: Define Layouts (Fluid Layouts)

A fluid layout is one that changes the layout of the screen as the window size is changed. This is accomplished by defining sections of the screen using percentages instead of fixed pixel widths. Also, plan for column ratio while deciding the layouts. Fluid layouts that can be used in responsive designs include:

a. Mostly Fluid
This is one of the popular fluid layouts used in most responsive applications. Mostly Fluid is a multi-column layout that introduces the larger margins on the big screens. As the screen size decreases, the fluid grid adjusts to show the most important information making the other information stack vertically. An example is presented below.

This pattern is commonly used because the core structure of the screen layout might not change in the tablet. However, in mobile, there might be a significant change in the layout as the screen size is smaller.

b. Column Drop
This is another popular multi-column layout used in responsive design. It starts with multiple columns for a bigger screen and decreases slowly to a single column by dropping each column as the screen becomes narrow (in mobile applications). An example is presented below.

In this pattern, the size of the elements remains almost the same, unlike other fluid patterns where the size of the element is variable.

c. Layout Shifter
This type of layout is very rarely used as the layout changes by more than 60% according to the screen sizes. In this method, the layout will change based on the importance of the sections and show the primary information first. A designer will have more work to do if this kind of layout is used. An example is presented below.

d. Tiny Tweaks
This kind of layout is most appropriate for applications that are simple with less data on the screens. For applications with such simplicity, multi-device adaptation can just be a few tiny tweaks to font sizes and image layout. An example is presented below.

e. Off-Canvas
The final and the most popular fluid layout is Off-Canvas. This layout takes advantage of off-screen space to keep content or hide navigation until the larger screens allow it to be visible or till the user takes an action to view it. This pattern is commonly used in native applications. An example is presented below.

Step 4: Create Design components/Elements

Make sure the elements being created are consistent and compatible with the screen sizes. Create a style guide and define how the text sizes and the component sizes vary across different resolutions. Sometimes, the design elements and functionality have to adapt to different resolutions. The elements should also have enough padding and white spacing to ensure that there is a proper hierarchy and nothing feels crowded or misaligned.

An example of a Responsive Header across different screen resolutions is shown below.

Other design elements that can be responsive in this process are:

Images/video resolutions
The image/video resolutions can be gradually decreased according to the screen sizes.
Text sizes
The text sizes should be changed according to the devices to make the information readable.
Design patterns (and functionality)
a. Taking space into consideration, sometimes the design patterns have to be changed slightly (both in terms of representation and functionality).
b. Few design components might have to compromise on functionality in responsive design.
c. Mobile and tablet devices do not support ‘Hover’ triggers whereas desktop devices do.
Example — A Call to Action button will not have “Hover” interaction in mobile devices.
d. The touch targets will vary when the application switches from the web to mobile. The touch target on the mobiles will be somewhere between 7–10mm as the screen will be small.
Alignments & Spacing
In layouts like Tiny Tweaks and Column Drop, alignments and spacings are adjusted while shifting to other resolutions.

Step 5: Test in a real device

Once the design is done, test the prototype on real devices — computers, iPads & mobile devices to make sure the site works properly without any usability issues.

Tips / Best Practices

Prioritize the content for the application based on your customer needs.
Make text accessible on different platforms. The font shouldn’t be too big or small in any given resolution.
Test out how the design elements look in different resolutions for the same screen and define the standard sizes for each resolution accordingly.
Design the smallest view first (mobile) and you can easily scale for larger views.
Ensure navigation is consistent (labels) and works well on all types of devices.
Choose an appropriate layout based on the content and complexity of the application.
Ensure the proper hierarchy of the elements is well communicated to the users irrespective of the screen resolutions.
Test your designs on real devices and identify any accessibility/usability issues.

Checklist

The layout is flexible in different resolutions.
Design elements (Text, Images, Components) are flexible.
Choose the appropriate layout.
Prioritize the content for different resolutions.
Define appropriate breakpoints.
Test prototype on a real device.

Quick Question

Sequence the steps to be followed while doing the responsive design

Define the breakpoints for the design.
Gather and prioritize the content for different resolutions.
Test in a real device.
Define the type of layout to use.
Create responsive design components

Leave your answer in the comments section below!