Responsive adsense ads are working fine on my responsive website but I would also like to add horizontal "ad links" to the website (to be shown only on desktop due to higher width).
So, what I want to do is place 728x15 ad link unit in the responsive site and make them visible only for large screens (read desktop). However, as per adsense policy, changing ads through media queries is allowed only in responsive ad units (through display: none) but there are no responsive ad for "ad links".
Any ideas how can I implement adsense "ad links" in a responsive website so these link ads are shown only on larger screens (say for min-width:800) without violating adsense policies.
Thanks.
As far I can see display:none method for not showing AdSense ad, does work with (asynchronous) link units and I think it does work for all asynchronous AdSense units. (For every AdSense snippet with adsbygoogle.js in script src.)
But, you are right: AdSense Help Center is not mentioning "asynchronous" and it explicitly says "Hiding ad units at anytime (e.g., display:none), unless you're implementing a responsive ad unit".
My wild guess is that might be because there are already #media queries in original responsive code (code you get from the AdSense dashboard), and the risk of error and the number of modifications are minimal:
removing inline style attribute from ins tag
updating "default" class declaration block in style tag ("first line")
applying display:none on ins tag via custom class (.adlinkunit1 in example below)
So this should work for you ("link ads are shown only on larger screens (say for min-width:800)":
<style type="text/css">
.adlinkunit1 { display:inline-block;width:728px;height:15px }
#media ( max-width: 800px) { .adlinkunit1 { display: none; } }
</style>
<ins class="adsbygoogle adlinkunit1"
data-ad-client="ca-pub-..."
data-ad-slot="..."></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
(Please note max-width is used for display:none.)
Personally I think above example is not a violation of the AdSense policies, but also I'm not sure why Help Center says "responsive" and of course - what will happen if Google would ever decide (for some reason) to remove (undocumented) display:none support from non-responsive asynchronous units.
You could also try a "device detection" solution like WURFL cloud, which at the time of writing this costs $40p.m.
With that solution, you can get things like "IS_DESKTOP" and "IS_MOBILE" and "IS_TABLET".
From there you can really customise your ads to your different devices. For example, on the desktop you can display the 728x15 block, and on mobiles you can display something smaller like 200x90, meaning you're not missing out on possible mobile based revenue.
It also allows you to test different ad blocks on different devices really well... what works best on tablets? Is it 728x15 or 468x15. Or what about normal ad blocks (not ad links) on mobile devices, is it text only, or image, or both? Does an ads perform better in different positions on different devices?
You can get really granular with this approach in an easily maintainable way. If you have a decent amount of traffic to your website you shouldn't have a problem making more than an extra $40p.m in adsense revenue, mitigating the cost of using a service like WURFL cloud (and no, I am in no way affiliated with then, it's just a solution I use, partially based upon my desire to have an easily maintainable way to get really granular with my adsense on different devices).
Good luck.
A solution called WURFL.js allows you to leverage WURFL at no cost (community edition)
http://wurfl.io
The same framework with more WURFL properties and more features is available though the Business Edition of the same tool. To avoid doubt, I am affiliated with ScientiaMobile, the company that offers these tools.
Related
According to my client's research referenced here: https://support.google.com/adsense/answer/1354762?hl=en#n2 you are only allowed one ad for Google on mobile pages.
Also in Google rules is stated that ads may not be obscured, and hence it flows that they cannot be hidden.
The problem that I am currently sitting is that the site is a single site for both desktop and mobile views, and that to the best of my knowledge, I would have to hide content on client-side to ensure that only one ad is shown on the mobile view, as opposed to the three on the desktop view.
How do I achieve 3 ads on a desktop view and only one on the mobile view for a single site, without hiding the extra 2 ads on mobile view? Please advise?
If you are using WordPress then you can use "Google Publisher plugins (https://wordpress.org/plugins/google-publisher/) .
Actually it automatically adjust ads size according to screen whatever use mobile or pc
Based from what I've read, there are 2 common types of Website Design: responsive and separate desktop & mobile sites. Then, there's the hybrid that combines the two.
It's easy to distinguish a responsive website by resizing the browser. A website that uses "separate desktop/mobile approach" can be distinguished easily if the user is redirected to another site, similar to Facebook that redirects the user to "m.facebook.com".
Now what confuses me is identifying a hybrid website. How can one tell that the website is Hybrid?
Interesting question.
I think there is an easy way to find it out.
First compare websites on mobile and on browser, but make browser window same size as phone (around 350px width). If websites look same - most likely it's responsive. If you see some difference - it could be separate or hybrid.
Next find and open css file of the website (or all of them) and see if you could find any #media rules here. If you see some - it means that website do have responsive technique also and you meet the hybrid. If you don't see any sign of #media - you're visiting the separate made website.
Maybe I could answer better with having the link or more details
Is there any specific html tag or meta tag that tells a web page is designed for mobile devices? I have created a mobile sitemap linking the mobile web pages, but I am afraid of search engines don't identify these webpages as mobile versions.
I Recommend using Media Queries in your CSS and focusing on developing your mobile website first if you're going to use this technique.
Basic Example
#media only screen and (min-width: 480px){
//insert styles SPEFIC to resolutions greater than 480px wide
}
Regarding the comment:
//default CSS
.hidden-for-mobile{ display: none;}
//overrides the hidden style, and displays your element in larger resolution browsers.
#media only screen and (min-width: 480px){
display: inline; //or block or whatever you want
}
there may very well be a different or better way to implement this, but the point is...
If you are trying to control the look/feel of your website, do your best to keep it in the stylesheets
pro tip: You will want to use em / % based widths to ensure your site responds to your users browsers properly
Check out a working example with HTML5 Boiler plate here.
And Media query browser support list here
Additionally, if you are concerned about tracking your user base, Google Analytics can do that for you. You can break down your traffic however you'd like.
No, there is not. You can use JavaScript to detect mobile browsers, and direct users to special mobile versions of your webpages, but there is nothing that says for a specific page this is for a mobile browser.
If you are concerned that you will be presenting duplicate content to Google, block the spidering of your mobile site via a robots.txt file, then ensure that mobile users are always redirected to the correct mobile site.
If you're concerned about styles and things then see How to setup HTML for mobile Devices with an header-image, that takes whole width of browser?
Else, if you don't want search engines linking to m.domain.com instead of domain.com (or whatever) then I'd think about doing some PHP header detection to redirect to the main site.
To ensure they're not crawled at all so will never show in search results, add
<meta name="robots" content="noindex" />
Is there a way to use responsive design principles with Google Sites. Has anyone tried that. Could you direct me to a sample site. I looked at this google help topic but then that is supposedly about exclusively mobile sites.
My main focus is a normal website which is optimized for web rather than primarily a mobile site.
Alternatively would Blogger be a better option in this case as that allows to change CSS.
I think your negative impression is right. It doesn't implement the features you'd expect in responsive design.
The key to your question is that Google Sites don't use a viewport declaration (meta viewport in the head element). If you don't have that, then device browsers treat you as a legacy desktop-only website. They assume you'll break completely below ~830px, and set a page min-width accordingly. That doesn't sound much like responsive design to me.
Google Sites don't let you write your own CSS or HTML HEAD, so you can't implement a more responsive design yourself.
To be fair, you can choose to not set a fixed page width. Also navigations buttons will reflow on relatively narrow windows, if you're using the "horizontal navigation" feature. The latter isn't great design but at least it's degrading gracefully.
There is an option "Automatically adjust site to mobile phones" under Manage site -> General. However many people suggest it's better not to use it :). I tried enabling it on an old site, previewing the page, and selecting "preview in mobile". At least on Firefox on my original netbook (800px width), it was not responsive. It didn't expand to use the 800px screen properly.
As an aside, the line-wrapping (or absence of it) is a pre-existing issue with my site. You could blame this on me for not testing it :). However it illustrates a limitation of the WYSIWYG editor in Google Sites. It doesn't show, check for, or filter out the formatting that causes this problem.
Mobile yes, responsive no.
I was messing with Google Sites today and you can make a site mobile friendly (I had to come here to get started!). I just used the "Blank Template" to mess around with.
You do need to activate (like others that have mentioned):
Options (gear icon) > Manage site > (scroll down to Mobile) Check.. Automatically adjust for mobile phones. Yeah, let's bury that option way down at the bottom!
Considering the whole mobile "push" Google implemented in the spring of 2015 this should be ON by default for any newly created Google Site.
Just selecting that option makes an OK (basic) mobile site. Not a responsive site. So on my iPhone it does scale photos correctly to fit the device and switches the main horizontal menu to the "hamburger" icon/menu. But collapsing the desktop browser window does not produce responsive results.
https://sites.google.com/site/rwstws51/
As a test, I uploaded a way too large photo (2.5mb) to see what would happen. Running the site through Google PageSpeed Insights it did not display any "optimize photos" warning, so seems to serves up an optimized photo for phones and desktops.
I guess the basic theme is actually called "Ski." I tried out the "Legal Pad" theme and it was totally borked on mobile. I think due to the header and content area background images.
To me Google Sites is ideal if you are already heavy into Google's other products... drive, docs, Google+, webmastertools, analytics, etc... As it has links to add those types of items when editing. Or need a quick site for collaborating as you can easily set the site access like YouTube,Drive items.
Also, you are very limited as to what html you can added. Trying to add a script tag gets stripped out when attempting to save. So again depending on the use there are definitely other options out there.
The answer applying to old "Classic" google sites is NO.
If you create your own custom HTML forms with apps script, you can add the #media viewports etc to the css for those pages/forms,so that helps...
but the google site frame around overrides custom css attempting
responsive design at the page level.
now a days its possible to make a responsive Google Site. since Google has enhanced this feature "Automatically adjust site to mobile phones" option in the Manage Site option button.
to find the option- go to> Manage Site> General> , in the general settings page's lower portion you can see a radio button named "Automatically adjust site to mobile phones". Just tick the radio button & u have enhanced the feature.
Refer an example site made with responsive Google site www.jyotiprokashmusic.com
I have a fairly large dynamic website, whose user interface is written using XHTML, CSS and jQuery. The site does not display/work well on mobile devices. What is the best option: to develop a fluid site that displays well on both mobile and desktop, or to separately develop a mobile version of the site? Thank you for any suggestion.
Although a parallel site, with a desktop page and a mobile page is easier to build, it is harder to maintain (2 sets of content) and Google will see this as duplicate content - one of the sites won't rank in search engines.
A fluid solution, which displays the content well whatever the screen size (and if you use CSS & JavaScript wisely, it can look great on all sorts of screen sizes), is a much better solution, and you only have one URL for each page for your visitors to book mark.