Let us first understand what is Responsive Web Design
Nowadays, the use of same website design for all devices like iPhone, Nokia mobile, iPad, Windows laptop, Macbook, iMac, etc. is a standard practice. But, keeping in mind that design should be compatible with every device.
A website page consists of content like Text, Images, Videos, Buttons, etc. In responsive web design, content is like water. Website content changes itself as per the size of the device person is using (mobile, tablet, laptop, PC, etc.)
Responsive web design is an approach to web design that aims to make web pages render well on various devices or screen sizes from minimum to maximum display size. The website automatically scales its content and elements to match the screen size it is viewed.
We should also know why responsive design is important
Nowadays, most of our audience uses the internet on mobile devices. Responsive design makes the website mobile-friendly and improves how it looks on all screen sizes. It can also help in improving website rankings on search engines. It enhances the browsing experience along with being cost-effective.
Anatomy and Breakpoints for Responsive Layout Grid
Before start designing, let us understand some important anatomy and breakpoints for a Grid.
- A responsive layout grid consists of three elements:
Columns are vertical blocks used to arrange the content in a website. Column widths can be defined as a fixed value or percentage (%). Generally, 4, 8, and 12 columns are used for mobile, tablet & web, respectively.
Gutters are the gaps between the columns. Gutter widths are fixed values at each breakpoint range.
Margins are the space between content and the left and right edges of the screen.
2. Breakpoints for responsive design
Breakpoints are customizable widths to help responsive layout behave across devices. Although there can be more than three breakpoints, I will use the following three.
360–767: Mobile devices
768–1179: Tablet devices
1280+ : Laptop, Desktop
Note: Different design system like bootstrap, material design, etc., suggests different breakpoints range. I have taken the above breakpoints based on common use cases.
OK! Enough theory. Now, Let's do some action
The tool I have used is FIGMA which is, off-course, most loved ❤️ by the designers.
Create three frames in FIGMA with following the width.
- Mobile : 360 px
- Tablet : 768 px
- Web : 1280 px
Apply following grids
Mobile: Columns-4, Type- stretch, Margin- 24 px, Gutter- 24px
Tablet: Columns-8, Type- stretch, Margin- 48 px, Gutter- 24px
Web: Columns-12, Type- stretch, Margin- 120 px, Gutter- 24px
Note: I have taken standard values for columns, gutter & margin. One can use different values based on the requirement.
Design the website for web, tablet, and mobile. Here, I have designed a website header only for explaining.
I have used two essential features of FIGMA to create a responsive layout. One should have good knowledge & practice of both features.
- Constraint, https://www.youtube.com/watch?v=LHY9cm_2zwU
- Auto Layout, https://www.youtube.com/watch?v=TyaGpGDFczw
3.1- Design for the web.
Add heading. Align the text box to the ends of columns and give left and right constraints to width.
By doing this, the text box will behave responsively upon changing the screen width.
3.2- Add subtext and button below the heading and apply Auto Layout to all three elements. Also, give Fill Container constraint under Resizing to text boxes after using auto layout. Now entire block will behave responsively.
As I said above, I hope you are doing this after practicing auto-layout and constraint features.
3.3 Add image and apply Center constraint to it. Great! The entire website header section is now responsive.
3.4 Similarly, design the tablet layout using proper constraint and auto layout.
3.5 Design the mobile layout using proper constraint and auto layout.
Note : Keep image width as fixed; otherwise, image width will get scaled and look distorted.
Download the Breakpoints plugin from FIGMA. Breakpoints is a Figma plugin to preview responsive layout inside a Figma frame.
Use breakpoints plugin to create a responsive layout
5.1- Open the plugin and create a new adaptive layout.
5.2- Add breakpoints we have defined. 360, 768, 1280
5.3- Select designed frame in the respective breakpoint.
Bingo! 😎. Responsive layout is ready
You can also create the prototype and share it with clients, developers, and your boss 😁.
Responsive web design holds your audience and responds to the user’s behavior and environment based on screen size, platform and orientation. As mentioned above, through Figma you to provide responsive layout in no time. If you find this useful, please share your thoughts.
We, here at Fibonalabs love to experiment with new design tools and trends to build appealing, responsive and functional digital products. You can also read about Human Centered Design framework for gamification in UX.
Catch us candid on LinkedIn for more interesting updates.