How to Make Any Responsive WordPress Site Mobile First

This time we are going to walk you through how to make any responsive WordPress site mobile first and why you need to do that.

With the massive growth of mobile and other handheld devices, as well as games, apps, social media platforms, etc., responsive web design has become something of a necessity and not of luxury for your site to stand out among others.

Gone are the days when responsive or mobile-friendly design was perceived as a premium quality that is relevant to exclusively well-developed and expensive websites.

Today, the WordPress repository of templates is rich in such themes: both free and premium. All of the templates authored by us at SKT Themes also share those qualities letting any side based on it be displayed accurately across different mobiles and platforms.

So, if the responsive or mobile-friendly design is widely used and seems to work smoothly, what’s the point of trying to make any responsive WordPress site mobile-first and what are the benefits of it?

To get all the things clear for you, let’s discuss certain points one after another so that you can see the differences between those two design approaches.

What is responsive web design?

In a nutshell, responsive web design is a modern technique of creating a website suitable to work equally well on every device and match any screen resolution.

It means that you are not obliged to build a separate mobile version of your site to meet the needs of your mobile users on the go or the move. Your site’s responsive design will automatically adjust and accommodate any mobile or device for the perfect look and feel of your site.

With millions of people across the globe using mobile Internet and spending hours on it, having a responsive and cross-mobile compatible website is a must.

What is mobile first design?

Mobile first is an approach used in modern web design and implies designing for the mobile screens first, and then passing on to the development of other screens, browsers, and resolutions.

For you to understand the difference between responsive and mobile-first design approaches, let us state that responsive design starts with all kinds of complexities required for an impeccable desktop performance and breaks them away later for mobiles and smaller devices.

As for the mobile-first design, it suggests that the responsive design for mobiles and smaller devices should be done first.

Why do you need to make any responsive WordPress site mobile first?

Wondering why you need to start the project with mobile considerations or make any responsive WordPress site mobile first? Let’s take a look at statistics for mobile consumption.

If you haven’t guessed by far, just search the Internet for the exact percentages and reports proving the unbeatable prevalence of mobile Internet users over desktop ones.

Currently, people spend more and more time surfing the Internet for the required information from mobile and device ends. And, naturally, this shift from desktop to mobile usage will continue in the nearest future.

Thus, you don’t want to disappoint the majority of your website guests and make the minority of desktop users feel comfortable on your site, right?

In addition to that, once you adopt the practice of the mobile-first approach, you’ll see that you will get your hands dirty in coding less and will be able to design more accurate and compact web designs that will be easier to expand together.

Ensuring the pixel-perfect match with smaller screens first and then taking care of the desktop ones can be the ultimate way to boost the mobile performance of your site and a better user environment for your mobile-armed customers.

How do I make any responsive WordPress site mobile first?

If your site is already responsive and you want to convert it into mobile-first, there are 2 basic steps to follow. First of all, you need to write and create default styling for small screens.

Then, you need to add in a media query while using min-width and copy the default styling of your responsive template to that.

Based on the layout of your site, the layout styling can be something of this kind:

header,
.main,
footer {
  width: 96%;
  max-width: 1000px;
  margin: 10px auto;
  clear: both;
}
.content {
  width: 60%;
  margin-right: 5%;
  float: left;
}
.sidebar {
  width: 35%;
  float: right;
}

And as your site is responsive, this styling should also include media queries for smaller screens:

@media screen and ( max-width: 500px ) {

  header,
  .main,
  footer,
  .content,
  .sidebar {
    width: 98%;
  }
  
  .content,
  .sidebar {
    float: none;
    margin: 0 auto;
  }

}

As you see, there are two blocks: one for desktop and one for mobile.

To replace it with mobile-first, delete both and start with a defining layout for small screens:

header,
.main,
footer {
  margin: 10px 1%;
}

Now, it’s time to create the media query using min-width.

@media screen and ( min-width: 500px ) {

  header,
  .main,
  footer {
    width: 96%;
    max-width: 1000px;
    margin: 10px auto;
    clear: both;
  }
 
  .content {
    width: 60%;
    margin-right: 5%;
    float: left;
  }
  .sidebar {
    width: 35%;
    float: right;
  } 
}

As you can see, it is the same styling you had in your site’s responsive stylesheet. However, this rewriting and rearrangement in styling have to do with better mobile performance since the smaller devices now will neglect it instead of going through it and then running over it with the elements that have been added to the responsive media query.

Theoretically, we are done with switching to the mobile first design. In specific cases, you might need additional adjustments and configuration to keep things running smoothly.

However, the whole process of making your WordPress site mobile first will not be an impassable road for you, even if you are not a seasoned web designer or developer.