5 Tips to Improve your Website Responsive Design
on 31 July 2022, by Bogdan, in Blog, FREE, Guides
by Bogdan
In this post, we’ll explore 5 tips to improve a website’s responsive design for non-developers.
The proportion of usage of mobile devices in accessing websites is increasing every day. In some countries such as the United States, mobile devices drive more than half of the website visits yearly. Usually, we design websites in the desktop view and sometimes forget about how the website will look if a user accesses it via a phone. This leads to design irregularities such as part of the content being cut out, images or text being too large for the screen, misplaced buttons, and so on when a user visits your website using a phone.
With responsive design, you have an opportunity to ensure that your website’s design has been optimized for desktops, mobile phones, and tablets. This way your site visitors will have nearly the same experience irrespective of the device they use to access your site. In this post, we’ll explore 5 ways you can improve your website’s responsive design.
We’ll cover:
- What is responsive design and why is it important?
- 5 tips to improve your website’s responsive design
- Replace absolute units with relative units
- Space out clickable elements
- Replace the navigation menu with a hamburger menu
- Remove extra questions from forms
- Measure your site’s responsiveness
- Build responsive web pages with Brizy
What is responsive design and why is it important?
Responsive design comprises designing your website to automatically scale its contents depending on the size of the screen on which it is viewed. Responsive design keeps images, texts, and other content on your web pages from being larger than the screen width.
The purpose of responsive design is to eliminate unnecessary scrolling from website users which can be extremely frustrating. This could lead you to lose a large portion of potential clients who attempt to use your website on their mobile devices and end up having an unpleasant experience. Responsive design also eliminates the need to build new web pages designated for tablet and smartphone users. Instead of spending extra time doing all this, you can simply design a single website that adjusts itself depending on the size of the screen.
The responsive design tips available online are mainly developer-focused. If you've done some research on this, you might have come across the following tips:
- Use media queries
- Use CSS transitions
- Using the CSS grid or flexbox, and more.
If you've set up your website code-free, via WordPress for example, this will not make any sense to you. Hence, we've gathered 5 useful tips to improve your website’s responsive design that cuts across developers and non-developers. You can implement these tips to improve your site’s design regardless of how you've set up your website.
5 tips to improve your website’s responsive design
In this section, we’ll cover some useful tips to improve your website’s responsive design for WordPress, but you can apply these tips whether you set up your website using a different content management system or have it coded from scratch. Let’s dive in.
1.Replace absolute units with relative units
When sizing elements on your page, you can choose to use relative or absolute units. Absolute units are fixed units of measurement that are suitable for elements not meant to be resized. This is why absolute units do not favor responsive design across different devices with different screen sizes. Relative units on the other hand are more suitable for mobile-friendly design because they can scale and down according to the size of the screen or the parent element.
- Pixels (px) is one of the most used units for sizing elements, yet it is an absolute element. Let’s have a look at an example. Suppose you use pixels to size a header using 100px, on the desktop mode it looks fine.
But when you switch to the mobile view, the text ‘Listening’ crosses over to a new line because it is unable to automatically resize itself.
To ensure you don’t have to go through the hassle of sizing and resizing in different views, you can simply use a relative value such as:
- Rem
- Em
- Percentage(%)
- Viewport width or height.
The default WordPress install comes with built-in em units which enable the element to resize depending on the parent element. To have access to more sizing options, you will need the help of a page builder tool like Brizy (more on this later!).
What values should you use? This depends on the default size of the elements. For font size, 16px is the default size. This is equivalent to:
- 1 em
- 1 rem
- 100%
Therefore for h1, you should use a 2.0em (32px), 1.5em for h2, and so on. However, if you have a landing page, you could go up to 3em for the headline.
2. Space out clickable elements
When designing your pages, remember that mobile phone users are not using a mouse. The average thumb is much bigger than a mouse cursor. So when you place clickable elements close together, it might not be a problem for those accessing your website via a computer, but it will be for those using a phone.
For instance, if you place 2 buttons or links very close together, the phone users will have trouble clicking on just one of them. This is frustrating and it could lead them to abandon your site.
To ensure you leave sufficient space between your clickable elements, you need to understand the margin property. The margin represents your element’s personal space. That is how much an element is spaced from other elements. Remember to use relative values (em, rem, and %) when defining margins. If you use absolute values you will run into the same problems discussed in the previous section.
It is always a good idea to leave enough space for the other elements to prevent overlapping when you switch screens.
3. Replace the navigation menu with a Hamburger menu
The navigation menu is a horizontal list but on a mobile device, it will be displayed as a vertical list because of the space available. Now if you happen to leave your navigation menu the way it is, suppose it has about 4 to 5 items, everytime a phone user visits your site they will have to go through this list. This makes your site look somewhat unprofessional and some users might not take you seriously.
For instance, if you place 2 buttons or links very close together, the phone users will have trouble clicking on just one of them. This is frustrating and it could lead them to abandon your site.
To ensure you leave sufficient space between your clickable elements, you need to understand the margin property. The margin represents your element’s personal space. That is how much an element is spaced from other elements. Remember to use relative values (em, rem, and %) when defining margins. If you use absolute values you will run into the same problems discussed in the previous section.
You can avoid this issue by introducing a hamburger menu. A hamburger menu is an icon that encloses the navigation menu on a sidebar. When users tap on the button they will be able to access your site’s navigation menu from the sidebar.
This allows them to focus on the content on the main page without the navigation menu distracting them.
4. Remove extra questions from forms
Whether you’re using a mobile device or a computer, it is always a good idea to keep your forms short. For mobile designs, you need to keep your forms exceptionally short by asking fewer questions. This is because typing on a phone is not as pleasant as it is on a computer. The keyboard is small and the letters are too close together. Hence, the less users have to type on a phone, the better.
You should aim to remove extra fields and only stick with the most important fields which you need to work with the customer.
5. Measure your site’s responsiveness
After implementing responsive design strategies, you would want to know if they’ve worked. Fortunately, there are numerous tools online that you can use to gauge the effects of the changes you’ve just made. Here are a few that you can try out.
- Google mobile-friendly test
You can access the mobile-friendly test from the Google Search Console. It is an easy-to-use and straightforward tool that you can use for free. All you have to do is search for the Google mobile-friendly test on your browser. A field will be displayed on your search results where you can enter your site’s URL and click on run test.
If your site is mobile responsive you will receive a green light, if not, this tool will direct you to resources that can help you to improve the responsiveness of your site.
- Screefly
Screenfly is a solution by QuirkTools that shows you how your website will look when displayed on different devices. It goes as far as including specific devices such as iPhone 5 and iPad Mini. Just like the Google mobile-friendly test, all you have to do is provide the URL of your website and then click on ‘GO’.
In case your site doesn't pass the test, it will make suggestions on how you can improve it.
- MobileTest.me
This is by far the best one among these tools, but there’s a catch; it’s not free. You can subscribe for $1 a month. Apart from showing you how your website will look on different devices, mobiletest.me allows you to interact with your website on those devices directly from your computer.
Implementing mobile design using the WordPress customizer alone places a lot of limitations on what you can do. In addition, the customizer experiences issues regularly due to conflicting plugins and frequent errors. To efficiently make your pages mobile-friendly you will need the help of the plugin Brizy.
Build responsive web pages with Brizy Builder for WordPress
Brizy is a powerful website builder for WordPress that enables you to build fully responsive and high-converting pages. It encapsulates all the tools to build mobile-friendly pages in a simplified interface.
You get to add elements on your page using a drag and drop editor and size them using relative units including em, rem, and vw.
It also allows you to switch between desktop, tablet and mobile views seamlessly while building your pages. Suppose you don’t want so start from scratch, you can select from 100+ templates for different niches including business, food and restaurant, education, and so on, that have already been mobile optimized.
With Brizy, you don’t have to worry about the placement of two elements close together, you can use the spacer element to ensure this is not the case. As you make these changes, you will watch them unfold live. Also, you don’t have to worry about accommodating the plugin as it is compatible with WordPress themes and plugins. You can get Brizy for free from the official site: install it and start building fully responsive sites effortlessly.
Apart from the tips mentioned above, we also recommend removing the footer and header for your mobile versions to allow visitors to easily navigate your site.
Improve Your Site’s Responsive Design with these Tips Today
Having a responsive site today is a necessity rather than an option. If your pages are not responsive, you will likely lose a large portion of your potential clients simply because they get frustrated using your site. Having a fullt responsive site makes it easy for anyone to use and it can play a role in making your site reputable. Building responsive pages with the default WordPress customizer can be daunting because it is prone to errors. Fortunately, you can achieve fully responsive and high-converting pages by the help of the Brizy builder.
Start building better websites today!
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
RESOURCES
Choose Roadmap for
You will be redirected to our external roadmap boards on Trello
