Lesson 1: Go Mobile-Responsive

Free Course Mobile Ad Optimization
Last updated: September 6, 2019 | by Kean Graham
Go Mobile Responsive Mobile Ads

This post was most recently updated on September 6th, 2019

Going mobile-responsive is almost a regular expectation from websites these days. If your site is not mobile-responsive, you are already certain of losing around 21% or more of regular users. Some users these days no longer use laptops or desktops and turn to smartphones and tablets for their web browsing needs. As such, the importance of going mobile-responsive can never be underscored for monetizing your business more towards higher marketing success.

How to become mobile-responsive

The very first thing you need to do with your existing website is to make a full assessment of how to make it mobile-responsive. The Twitter Bootstrap project, for example, is a quick grid-based CSS system that will allow you to quickly convert most non-mobile-responsive websites into a mobile-responsive and fluid one. However, you can still do it manually through CSS and have the benefit of greater flexibility.

If you are hard coding your site, the first step is to remove all the classes that set a fixed width on the elements of your website. If you are using CMS like Wordpress, Drupal, or Magento, you can take advantage of built-in themes that are already mobile-responsive. Depending on the framework that you are using, you need to edit the templates to suit your needs.

The next step is to test ad placement and a basic responsive layout for functioning after you make the changes. Test it in a variety of devices and have a good feedback system to allow users to tell you if the design is not working well on their end. You need to test at different times of day to make sure that you are able to cover all your bases before finalizing your design.

Related Read: How to make Publishers Ready as Mobile Ad Spending Surpasses Desktop

Tips on designing a responsive site

  • Use Google’s Mobile-Friendly Test Tool to test your pages.
  • Make sure that page load does not suffer in your efforts to go mobile-responsive. You can utilize PageSpeed Insights to check issues you may have on mobile.
  • Participate in Google’s Accelerated Mobile Pages Project to get you started on creating a basic mobile-responsive AMP HTML page.
  • If your site does not have highly customized functions, go for responsive CMS themes from Wordpress, Drupal, Magento, or even Squarespace.

Read: Google AMP Project Launch: What’s in it for Publishers?

Case study: DesignSponge

DesignSponge.com, a premium publisher of ours, redesigned into a mobile-responsive site and made use of mobile and desktop ad integration. As a result of this, they gained a 30%+ increase in their ad revenues.

YOUR ACTION ITEMS

1) Implement recommended fixes from PageSpeed Insights for mobile.

2) Monitor your mobile traffic from Google Analytics.

Go to Audience > Mobile > Overview.

For more lessons on Mobile Ad Optimization,

subscribe to this FREE email course.

Ad Ops Tips & Guides, Industry News, Latest Tech and Success Stories - right in your inbox.

We are committed to protecting you Privacy Data

Here’s the course that 300+ pubs used to scale their ad revenue.

Enroll today

Book Banner

Recommended Reading

best_gaming_ad_networks
Ad Network Reviews, Tips & Guides
September 22, 2022

Best Gaming Ad Networks [2022]

Read More
what-is-average-revenue-per-visitor
Blog
September 20, 2022

Average Revenue Per Visitor: The money making KPI

Read More
video-ad-servers-vs-display-ad-servers
Blog
September 15, 2022

Video Ad Servers vs Display Ad Servers: Use Both or One?

Read More
Close

Enjoying this post? Let's put things to action

Get started