If you dont have programming expertise, read The Basics article first before proceeding.
If you own a blog or website then it is very important to make sure that we maintain better user experience while displaying the ads. Just think about it. How annoying it feels when the reader sees the ads that are out of place (like mobile size ads on desktops, out of size etc.). I don't have to give an example site as there are tons of sites that you may have already encountered that way.
Most of the Ad agencies provide you with a responsive ad unit but they don't always work very well. Or may be you want to maintain consistency and display the ad size as per your liking. In this article I will walk you through with a Google AdSense example on how to better handle the responsive ads to maintain better user experience. You can expand the same concepts for any other ad agency code.
First go to this site: mydevices and understand the screen width values of devices you expect your blog or site is consumed from. Go to the end and click on My Device Values option to get the width and view point for your current device. This is really useful for testing and finalizing your code at later stages.
You would primarily want to target mobile phones and desktops at minimum (then tablets).
New function with adSize as a parameter
As you can see, we have added a parameter adSize for our function 'displayAdSenseHelper' and internally adding logic to display ads appropriately based on adSize value passed. Now we need to have a function to call this newly created function. Update the 'displayAdSenseContent' method we created in previous articles to following. If you directly reading this create the following function.
Updated method for displaying AdSense ads
Now as you can see if the width (this can be found for a device using the website I have given above) is less than 420 I am calling the mobile ads. As most of the traffic is from mobile phone and we would want to have nice ad there. Then next, I am targeting desktops to show the appropriately sized ads. Finally for everything else, I am relying on AdSense responsive ads as that is not a priority in my case. You can definitely add more conditions depending on your needs.
Note: These width values specifically for leader board matches my site and for your site they may vary. Make sure that you test it out appropriately and have appropriate values and ad units.
Finally you need to call this method from your site. You can use the following snippet or use the random method calling as described in this article. I am using the same Github file link we have used in the previous articles for simplicity.
Code to add in the blog or website
That's it. We are done. As always feel free to add any comments/questions or suggestions in the comments section below.