The right sidebar is one of the options that I always enable on my sites.
The reason for doing this is basically monetization through Adsense ads.
The right sidebar being a “sticky sidebar” increases the visibility of the ad units on the site.
You can also use sidebars to promote content from your blog or links of interest.
Table of Contents
The Sidebar on Mobile Phones
As you know, the sidebar on mobile phones is located after the content, so the sidebar loses its meaning.
If you have ads in the sidebar, you will notice that the ads have less visibility on mobile devices.
My recommendation is to remove those units from mobile devices so they don’t affect earnings from Adsense ads or any other service you use.
The Sidebar on Tablets
Visitors who use tablets to visit my sites are a minority, so I had never paid attention to the subject.
The tablet viewport starts at approximately 768px wide.
This is also the default value suggested by Ad Inserter
How the content or sticky ads look depends on the space you’ve allocated for the content container and sidebar.
I use GeneratePress on all my sites and the content is placed at 1300px and the sidebar takes 35% of that width.
Reviewing with the help of ViewPort Sizer, I gave myself the task of seeing how my site looks on tablets with ranges between 768px and 980px
The bottom line was simple, sidebars don’t look great on those screen sizes.
This is an example of what this site looks like with extremely thin 160×600 ads and a 728×90 ad
The content can be read but that two ads, plus the ads within the content make the user have a bad experience
That bad experience can lead users to look for the content somewhere else and give up reading your blog.
This is what the site looks like on Tablets with a 779×772 viewport
Since tablet visitors are in the minority and the 160×600 ad is not the best in terms of revenue, I decided to remove the right sidebar for tablets.
How to Remove Sidebars on Tablet?
Removing the sidebar can be done in different ways in different themes.
In my case, a CSS code created by GeneratePress support did the job in a good way
<style>
@media (max-width: 979px) {
.site-content {
flex-direction:column;
}
.container .site-content .content-area,
.is-right-sidebar.sidebar {
width: auto;
order: initial;
}
#main {
margin-left: 0;
margin-right:0
}
}
</style>So this is what users who visit my site from tablets experience
There are always ads but the experience is more balanced.
More about WordPress Optimization
I hope this post has been of great help in improving the appearance of your sites and your efforts to monetize them.
Here are some posts on optimization and monetization of WordPress sites that you may find useful and interesting.
- How to Preload Links in WordPress
- How to Get Rid of the Ads.txt Manager Plugin
- How to Optimize Table of Contents Plus for Speed
- How to Customize the 404 Page with GeneratePress
- How to Optimize GeneratePress for Core Web Vitals [100% Solved]
- Ezoic Leap Review: As Honest as it Gets
- How to Use Flying Scripts to Speed up Your WordPress Site
