12.06.20178 min read

7 Tips to Help You Design a Responsive Mobile Website

Mobile traffic makes up 52.99 percent of all global web traffic.

Amazing statistic right? What's even more amazing is that this percentage from the third quarter of 2017 presents a growth since the corresponding quarter of 44.69 percent from the previous year.

Web professionals are already aware of the importance of building a responsive website, but the problem is that it doesn't end when the initial web design of the website is finished.

Why buying a responsive theme is not enough

Most businesses need to keep producing new content to stay ahead of the game. New blog posts, landing pages, or homepage redesigns are a recurring thing in every office, so the most efficient and fastest workflow of mobile responsive web design needs to develop in order to save precious capital and time.

In this post, I will share seven steps you can follow to make sure your website is 100 percent mobile responsive.

This is the same process our own designers have used to create professional templates and landing pages used by hundreds of thousands of people.

1. Fix typography for mobile

fix typography for mobile

We start our process by going over each and every text element on the page. Each headline, text editor, and other text elements get the proper adjustment so it fits the corresponding desktop, tablet, and mobile screen sizes.

Here are best practices regarding mobile typography you should make sure you follow:

  • Always maintain the right headline hierarchy. The transition to mobile often requires the reduction in the size of the headline. When you reduce the size, however, you need to make sure you keep the proper size hierarchy of the headlines. This means H1 headlines are bigger than H2, H2 bigger than H3, and so on. All headlines should be proportional one to the other (All H2 headlines for example) and should be larger than the body text below them.
  • While it is true that you will frequently reduce the size of headlines to get them to look proportional on mobile, you have to remember an important rule of thumb. The human vision has its physical limitation, and so the body text cannot be proportionally reduced below a certain threshold, which is usually 14 pixels. The headlines above the body text should keep both the proportion of the other headlines and the proportion of the text below them, so make sure they are bigger than the body text.

2. Edit padding and margin

Edit padding

After we've finished dealing with the typography, it's time to fix any spacing issue that might arise with the transition to mobile display.

Here's our list of action items:

  • Content-to-screen spacing: Go over the spacing between the content and the edges of the screen, making sure the content is not too condensed together yet is not to spread out either. Our designers usually use a 20 pixel left and right margin so the content is nicely framed in relation to the screen.
  • Element-to-element spacing: Some of the elements will have to be reduced in relation to one another, and the spacing in between them should also be reduced accordingly. If we take a classic two-column side-by-side section, with the image on the left and text on the right, customizing the section to mobile devices is not just a matter of reducing or enhancing one of the elements but doing so in relation to the other element.
  • Column-to-column and section to section spacing: After reducing the elements to the needed sizes, we go over the spacing between columns and sections, which will also get a proportional reduction in relation to the element size reduction.

You should note that in some websites, the page elements are aligned around a certain grid. If you've used margins to move elements along the grid on desktop, the switch to mobile will require some mobile margin adjustments in order to align the elements to the new layout.

3. Change the layout to be responsive

Changing the layout to be responsive

When you make the page design adjustments for mobile you have to alter the layout of the page.

This alteration reduces the size of the elements, but often there is a limit to how much you can reduce. As the page's creator you want all elements to retain their visibility and high quality. Text should be readable and images should be of sufficient size so as not to require manual zoom in.

In Elementor, we've thought of an automatic solution to make the layout mobile-adaptive. We've created an alternative and automatic mobile grid that sets each column with its own row. If, for example, we have a three-column section, on mobile each of the three columns will take up the full width of the screen, and columns will be positioned one on top of the other.

Automatic responsiveness is nice, but I would suggest to always keep the ability to define your own custom widths per column. We've included this flexibility inside our own page builder, allowing you to define any width per column, set separately for desktop, tablet, and mobile.

4. Reverse columns to set the right order

reverse columns to set the right order

Besides margin and padding changes, the switch from desktop column layout to mobile can cause issues with the order of columns.

Let's take a classic two-column section, text on the left and image on the right. When you switch to mobile, each column will get its own row, from left to right. This will result in the text appearing above the image. To circumvent this issue you can switch the "reverse column" option, to get the image above the text.

The same technique can be used to reverse the column order of any number of columns in a section.

We've added a switch to our own page builder that allows you to reverse the mobile column order with one click.

5. Hide sections and/or widgets

The mobile version of a site often requires a more minimalistic design, with some of its elements getting simplified or even removed altogether. Besides an over-abundance of page elements, the content can also get too long on mobile, making the page scroll too long in terms of user experience.

Our team found that the best way to achieve this website simplification for mobile is by hiding specific elements of the page. This is why we've built in an option to show or hide widgets or sections from mobile, desktop, and tablet.

6. Choose from pixels/em/percentage/VH scale

Pixels, em, percentage, and VH scale are all CSS units of length (read more here to brush up on CSS and the different units of length you can use). Using different size scaling can help you make a website layout that has better adjustments to mobile devices.

Using "em" or percentage for sizes of element sizes and spacing means the design will be scalable for your visitors while using pixels allows for an easier setting of absolute sizes.

In Elementor, we've included several size options, so you can determine which unit of length you prefer.

7. Adjust page elements per device

Every web page consists of certain elements: forms, sliders, galleries, and so on. These elements have their own layout, which should also adjust according to different devices.

Here are just a few common adjustments that recur for every responsive web design:

  • Turning a horizontal form to a vertical or two column form by re-aligning all the fields and submit button
  • Change the spread of images in an image carousel to present fewer images per rotation
  • Making buttons full width to make it easier to click on mobile devices

Fast responsive web design equals success for your business

As we have seen, it is certainly possible to design a responsive website from scratch without once touching CSS code. The process I described can shave off hours from your workflow and allows you to deliver a perfect website that looks just right on all devices and screens.

If you want to see how we design a full one-page responsive website from scratch, including making all the mobile steps discussed in this article, check out the 25-minute video tutorial we've created. The last 10 minutes deal specifically with mobile adjustments.

Small Biz Trends Report * Ben Pines is the CMO of Elementor. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time when it was only used to blog.*

Was this post helpful?
Created with Sketch.
Infusionsoft cornerstone spinner
close button
Subscribe to our weekly newsletter!

5 Reasons to Subscribe:

1. Weekly tips to dominate sales and marketing

At our core, we're focused on helping you become a sales and marketing machine. We tap into the genius of the best salesfolks and marketers out there to give you daily tips to grow your leads, make more sales, and keep more customers.

2. Expert small business resources that cost you zero dollars

Want to go deep? We have you covered with free guides, webinars, and tools on a range of topics from marketing automation, CRM, and digital marketing to building sales and marketing strategies from the ground up. All for free. All for you.

3. We're focused 100 percent on small business success

We exist for one reason: helping small businesses succeed. We give you the ideas and insights you need to blow the competition out of the water. We serve business owners who are hungry to put in the hard work to grow their business and own the market.

4. We do the work for you

Running a small business is a 110 percent endeavor. You don't have time to surf Internet for the best small business insights and ideas out there. We'll do that for you with the best original content from our team and from industry experts and small business owners.

5. But wait, there's more!

Small business success means more than just sales and marketing, so we also hit on a range of topics to help your small business thrive, including personal and business growth, customer service, and business management.

6. Righteous GIFs

OK, we said five reasons, but we like to overdeliver...and GIFs. We really like GIFs. You're bound to see some righteous ones.

GIF of Ferris Bueler principal's assistant

P.S. We'll never give out your information. We'll only use it to send you awesome content and resources, if you're cool with that.