Responsive web design

This article explains to you what responsive web design is and how to design perfectly responsive pages using GemPages.

In 2020, website traffic from mobile officially surpassed desktop. Therefore, adapting your site for mobile and other devices is an essential thing to do. This is where responsive web design comes into play.

What is Responsive Web Design?

Simply put, Responsive web design makes your website look good on all devices, regardless of screen size, resolution, and orientation with no further adjustments from the audience’s end.

Built with responsive in mind, GemPages Page Builder lets you easily design a page with four main device types: Desktop, Laptop, Tablet, and Mobile.

Let’s go over the how-to guide in the following sections.

Enable Responsive Web Design

Only changes to the Desktop view will be applied across all four views. Thus, we recommend you start designing with the Desktop view first, then make adjustments to other views as needed.

When you switch to other views, you’ll also see a popup notification reminding you to design using the Desktop view first, and fine-tune the page using other views later.

Step 1: Go to the GemPages Dashboard and enter one of your pages using the “Edit” button.

Step 2: In the Editor, there are two methods to start your responsive design:

Method 1: Select a device to view its interface from the top bar.

Method 2: Click on the element you want to edit and look for the Desktop icon on the top right corner. Hit the icon and select the device you want to switch to.

Make as many adjustments as you see fit. We’ll list some tips for you down below.

Step 3: Hit “Save” and “Publish” once you are finished to update the changes to your front store.

Use the Row element to create sections

As a base element, Row is often used to create sections thanks to its responsive nature. It can automatically adjust itself and the nested elements to different devices.

Follow these steps below to create a section using the Row element.

Step 1: In the GemPages Dashboard, click the “Edit” button on one of your pages and enter the Editor.

Step 2: Search for the Row element, then drag & drop one onto your page.

Step 3: Check the Settings tab displayed in the left sidebar. Select the layout you want for the Row in the Desktop view.

You can manually adjust the layout for all four views by hitting “More settings” and drag the yellow slider for the corresponding view.

Step 4: Drag & drop other elements inside the Row and configure them using the Settings and Design tabs.

Step 5: Hit “Save” and “Publish” once you are finished to bring your changes to the live store.

Adjust the Margin and Padding

Margin is the space between the borders of one element and others.

Padding is the space inside the element.

These two parameters allow you to cleverly position each of your elements in the exact spot. The settings for Margin and Padding can be found in any element’s Design tab, under the Spacing section.

Show or hide elements

The hidden elements will still be loaded in the background, so we advise you not to overuse this. In each element’s Design tab, find your way to the Visibility section. Here you can use the switch to show/hide the element on all four devices types.

And there you have it! Responsive web design is crucial in optimizing your front store’s layout on as many devices as possible, as well as ensuring customers’ experience. The best part is you can get it all done easily with GemPages – with very little to no additional coding required.