google adsense mobile view - mobile

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

Related

Rendering mobile simulated view inside image of mobile phone on desktop browser

I am relatively new to SO, and this is my first question so I hope I get the format & question information correct. I am looking for a plugin or tool that can assist me with a specific display issue.
I have a mobile application that is deployed to both Android and iOS devices. I also have a mobile web application that renders very much like the actual mobile application in the mobile device web browser when the user browses certain parts of the server back end cloud service website on their mobile device. So far so good.
However, when the user browses these parts of the cloud service website on a desktop/laptop, they get the web application view - some of it stretched and not ideally optimised as this is really for viewing on mobile devices. The client would like that a user, on desktop/laptop browser can see a mobile 'simulated' view of the web application.
It has to happen when the user navigates to the page, not through installing chrome plugins etc
I see the ideal solution being something like an image of a generic mobile for when browsing on desktop, centred on the desktop screen, inside of which the web app view is rendered. Is there is plugin/tool that someone out there for this, I have done quite a bit of research and can only find information on emulators for testing etc. In a way all I am looking for is an image that dynamically resizes inside of which a view can be rendered, that looks well across many desktop screen sizes/resolutions etc. Rather than go about this myself (it would be a bit of a CSS learning curve for me) it would be great if something like this already existed.
An implementation like the above would free up real estate on the screen for other items like links and form buttons the client wants
Any direction on this would be greatly appreciated.

How can I tell if a website is using a Hybrid Web Design approach?

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 it possible to make Google show the normal page in the search results instead of the mobile page?

We have a separate mobile site and a separate desktop site. There's basically a "mobile" page for each normal page like this:
public_html/home.php
public_html/m/home.php
And the m/home.php is showing up in the search results. Is it possible to make google show the normal home.php instead?
Responsive design is a good solution, but that's not the answer I am looking for at the moment.
And I don't want to 301 redirect m/home.php because people on mobile still need to view it.
Is my only option to redirect the user to home.php from m/home.php when I detect that they are not using a mobile browser?
My advice put noindex meta on your all mobile pages that's help you to prevent mobile pages getting result on Google serp then add mobile detection script on your normal site set and redirct for mobile users.

Facebook and share buttons on a mobile-enabled website that open the mobile app instead of a browser window?

One of the big flaws in Android webphones (and probably other Operating Systems for phones): You are surfing some website, and want to use the site's embedded share button for say Twitter. You want to use the embedded Twitter share because it pre-populates the tweet based on how the site designed it: namely, it has the title of the page and the link and maybe a relevant Twitter hashtag. If you were to use your mobile browser's share feature, you only get the link, and have to attempt to type in the title and guess relevant hashtags--not ideal. The same is the case with other social media shares, like facebook.
So, from the above, you understand why users would prefer to use a given website's own embedded share features, rather than that built into the mobile browser.
However, if a user clicks the site's embedded social media share button, it opens a new browser window for that social media. Ideally, this would not happen, as typical users do not log into these social tools using the mobile browser, and the resulting pop-up share is clunky to use on a small mobile screen. Instead, ideally, you would click on the site's embedded share button and it would attempt to open at least the official twitter (or whatever) app on your phone instead. This is ideal because users tend to use the apps to use their social media, and so would already be logged in. Moreover, such an app is obviously optimized for mobile use, and thus not as clunky.
And yet, this apparently does not exist... am I right?
That is, as a web designer, there is nothing I can do on my embedded Twitter and Facebook share buttons to prompt mobile phone users to use the official app to share (rather than through the mobile browser). Is that right?
Thanks,
Derek
At least on my iPhone the twitter url-scheme does work.
the following opens the twitter app:
twitter://post?message=hello%20world
And facebook is fb://
Haven't tested it on android.
(via: http://wiki.akosma.com/IPhone_URL_Schemes )
What about open a pop up box (not window)- when we click a link to share the URL site/page we are in, without have to go through the mobile browser ?
just a pop up box.
do you think it is possible? or any social media link would automatically opened in a browser?

Using responsive design within Google Sites

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

Resources