Mobile Responsive Designs with WordPress Theme Builder

on 03 Aug 2023, by Bogdan, in Blog, WordPress, Guides

by Bogdan

Since mobile web usage surpassed desktop usage back in 2016, it hasn’t looked back. This is why mobile responsive design is a crucial component of modern web design. Site visitors need to have a seamless and optimized experience across different devices, and responsive design ensures this.

Implementing a mobile responsive design on your WordPress website can be challenging, but our WordPress theme builder will make it so much easier for you. You’ll be able to realize fully customizable websites that work well on any device with the Brizy WordPress Theme Builder.

In this guide, we’ll walk you through how to make a mobile responsive design with the WordPress Theme Builder – starting with why responsive design is necessary.

Why is responsive design necessary?

Mobile responsive design entails creating flexible designs that automatically adapt to the screen size of the user. This gives users a consistent experience regardless of the device they use. Web design and development take place on desktop devices. However, some design elements such as long animations, large images, and complex navigation and practices work well on desktops but poorly on mobile devices. Leaving these designs on the final version of your website leads mobile users to have a poor browsing experience.

Orbelo reports that in 2023, the average mobile web traffic is at 56.86% so far, and this is expected to rise with time. Given that more than half of the web traffic comes from mobile devices, an unresponsive design can be a major problem for your website.

Source: Orbelo

Fortunately, mobile responsive design helps you create designs that work well on mobile devices and cater to the majority of site visitors. This allows them to have a smooth browsing experience.

Mobile responsive design is important now more than ever because users expect it. If you don’t consider it, site visitors will be happy to leave your website without converting.

The difference between mobile responsiveness and mobile friendliness

If you’ve done web design or development before, you’ve probably heard these terms used interchangeably, yet, they’re quite different. A mobile-friendly design is built to work the same on all devices. However, mobile users will feel like they’re navigating a website that wasn’t designed for them.

This is because it will be built without elements that don’t work well on mobile devices, for instance, complex navigation. Also, they will interact with forms, dropdowns, and other elements just like they would on a desktop computer. Even if the site has been changed to accommodate mobile users, they’ll have a slightly difficult time using it compared to if the site is mobile responsive.

A mobile responsive site, on the other hand, automatically adjusts itself depending on the needs of the device that it is being used on. For instance, displaying a smaller version of the hero image or switching from a 3-column to a 2 or 1-column layout when loaded on a mobile device. Every element of a web page, from font sizes, images, buttons, and so on will adjust to make mobile users feel like a website was created specifically for the device they’re using.

Creating mobile responsive WordPress websites

Mobile responsive websites are currently the standard, in fact, recent statistics show that 90% of all websites are responsive. For this reason, WordPress, as a content management system has made significant strides to ensure that websites built on it are mobile responsive. This includes allowing users to have a mobile and tablet screen view of their sites when using the WordPress theme customizer.

On its own, WordPress has done so much to aid in creating responsive designs, however, it is simply not enough.

Some components of the navigation menu will be eliminated to fit the design on a smaller screen.
It provides no options for hiding elements that don’t work well with a mobile design, for instance, popups, tiny buttons and links, hover-dependent elements, etc.
Also, the theme customizer is not user-friendly, and as a new designer, you’ll probably have a difficult time using it.

As a result, it will be quite difficult for you to realize a mobile responsive design that provides mobile users with a seamless experience when they visit your site.

To solve this you might need to install a bunch of plugins that help in making your site responsive as well as have the necessary image optimization, contact forms, and custom fonts functionality. This can yield the following problems: difficulty in acquiring customer support and maintenance together with compatibility issues.

To avoid these problems, you’ll need a solution that works well with WordPress and complements the default theme customizer where it falls short. Also, it should provide the features that you would otherwise need to install other plugins for. This is where the Brizy WordPress comes in; a website, popups and alerts, and theme builder all wrapped up in one.

Create mobile responsive designs with Brizy WordPress Theme Builder

You can use Brizy’s WordPress Theme Builder to build mobile responsive WordPress websites quickly and with minimum effort. It is a versatile solution that allows you to customize each part of your WordPress site using a visual editor. This includes whole pages like:

The homepage
Blog and post pages
Search page
404 page
Categories

And page sections such as:
Headers and footers
Forms
Specific WooCommerce elements
It has a global blocks feature that enables you to accelerate building your websites. When creating repeatable sections like contact forms, site-wide announcements, and so on, you can create a template once and have it displayed throughout your site using global blocks.

To generate mobile responsive designs, the Theme Builder allows you to create dynamic templates for each of the above pages and page sections. That’s not all, Brizy has set up three different viewports for mobile, tablet, and desktop devices on the WordPress Theme Builder.

Each viewport has a distinct canvas with different options to help you to create unique mobile experiences. In the canvas, you’ll get different elements such as archives, breadcrumbs, sidebar, etc. which will help you to build custom themes. Using these options, you can create exceptional mobile responsive designs that don’t depend on the desktop version.

How to create mobile responsive WordPress sites with the Theme Builder

Using the WordPress theme builder, you can make responsive sites in a few steps.

Step 1: Install Brizy WordPress

The Theme Builder is one of the Pro features of Brizy WordPress, so you’ll have to sign up for the Pro plan to unlock it. But Brizy Pro doesn’t work without Brizy Free, so you’ll have to install the free version first.

To do this, follow these steps:

1. From your WordPress dashboard, go to Plugins > Add New. Search for ‘Brizy’ and click to install once it appears. Activate the plugin once the installation is complete.

2. Find Brizy on the installed plugins page and click on Go Pro. This will take you to the pricing page

3. Select your preferred plan and create your account if you don’t already have one. Next, enter your billing details and then click on Subscribe. Download the plugin after completing the purchase.

4. Go back to your WordPress dashboard and then Plugins > Add New > Upload Plugin. Upload the plugin you downloaded and click Install Now and then Activate Plugin.

5. To activate your purchase, go back to the Brizy dashboard and click on WordPress Licenses. Copy your license key and paste it under Licenses on your WordPress dashboard.

Now that Brizy WordPress is installed, you can use it to make mobile responsive WordPress sites.

Step 2: Create a custom theme

You can create different custom templates and then choose where they will be displayed using the display conditions. Brizy has templates for whole pages and page sections as mentioned before.

To create a custom template:

1. From your WordPress dashboard, go to Brizy > Templates and click on Add New to create a new template.

2. Scroll down to the Display Conditions sections and select the type of template you want to create (Single, Archive, Product, or Product Archive).

3. Use the dropdowns below to create the display conditions. Select the pages, posts, etc. to include or exclude and then click the Add button. A template can have multiple display conditions and you can add more conditions by following the same steps.

When you’re done, click on Edit with Brizy to start editing your template.

Step 3: Edit your WordPress site and make it mobile responsive

Clicking the Edit with Brizy button will take you to the Brizy Builder. Click on Start Building your Page to edit your template. Here you have 3 options:

Create your own - a hands-on approach where you’ll build your pages from scratch by adding and editing elements manually.
Use blocks - build pages one section after another by importing mobile-optimized blocks. Perfect for contact sections, CTAs, Hero, and so on.
Use layouts - for a hands-free page-building experience, you can import full-page templates from the layouts library. Then customize the layout to suit your brand.

For each of these options, you’ll be able to drag elements from the element library and drop them on the page. Brizy Builder’s element library has over 36 elements that you can use to build truly unique solutions. This includes basic elements like buttons, texts, and images, and special elements like Lottie animations, carousel sliders, and social icons.

Apart from adding elements to a page, you can edit each element using the customization options. There are options for specific elements, for instance, typography for text, and general options like height and width. This way you have the power to build what you want and how you want it.

To make your site responsive:

Click on the viewport icon, third from the bottom, and select mobile view. This will give you a preview of what your site will look like on mobile devices. From this, you can resize elements to suit mobile screens better, for instance, by increasing the size of buttons and other clickable elements. To do this, click on an element and then select settings.

You’ll also be able to hide elements that don’t work well on mobile screens like large tables or other fixed-position elements. To do this, click on an element and select the eye icon to hide it. Once you’re done with everything, click on Save and that’s it, you’ll have created a mobile responsive WordPress website.

Considerations when making a mobile responsive design

When creating a mobile responsive design here are three things you should consider.

Readability - Instead of just reducing the size of text ensure that it is readable. The ideal size of text on mobile phones is 16px (1em) – ensure not to go below this so that your text maintains readability.
Button - The primary navigation tool for mobile users is the finger, which is considerably larger than a mouse pointer. Because of this, you should make buttons larger and increase the margins of the buttons that are next to each other.
View orientation - Mobile users tend to shift between portrait and landscape modes when browsing. Create versions for both modes to ensure that the design is consistent when they switch between them.

Site speed is also an important component of a mobile responsive design. To avoid frustrating users, your website needs to load in less than 3 seconds. When it comes to speed, Brizy websites are optimized to load in less than one second. As such, with Brizy, you’ll be set to deliver users the high performance they require.

Conclusion

Making a mobile responsive WordPress website has never been easier. All you need is the Brizy WordPress plugin and you’ll have all you need to achieve this. Using its theme builder, you can customize each part of your WordPress site to make it truly yours. The Theme Builder is also equipped with features that will help you to optimize your designs for mobile devices.

Article by Bogdan

Co-founder & Head of Design, Bogdan has a passion for everything that works great and looks awesome. Guilty for most of the UI and UX around this place, you can say "Hi" to him at bogdan at brizy dot io