I have a responsive design I am working out that starts around 960 pixels wide and reduces down to 320px using css3 media queries.
I'm currently using a 728px banner above and below my content, but this obviously breaks once you get below 728px.
What I need is the easiest way to display a smaller ad once the browser width goes below 728px. I can't simply load the ad units in divs and hide them using css because this is against adsense TOS.
Any suggestions?
What about doing it with javascript. Your page can load with no ad unit html code at first but it could detect screen size with javascript and then add to the page the appropriate ad units for the initial browser size. Only a desktop type browser can resize the viewport window so maybe just forget about that issue. People resizing the browser viewport probably are playing around or whatever and will still see the first AD impression. Think about it, you open a browser and then you resize the window because of not being able to see properly and even then how many times are you going to be doing it as you navigate a site from page to page, maybe once (the first time). Google doesn't want you mucking up AD impressions so I don't think this violates TOS to load the ads based on window size. Just don't destroy the ads after resize and load others (risky). Mobile devices can't resize viewport (other then rotate) and they will always see the correct AD size.
Ryan Underdown provides a simple solution at http://ryanunderdown.com/ppc/responsive-ads-with-adsense.php
Another SO question: Making Adsense Responsive
Even Google's CSE will not show ads on your site if the initial viewport size is too small for the ads and even after you resize the window larger it won't reload ads in it until browser is refreshed.
Use a responsive AdSense unit.
If this is not what you want, use JavaScript to detect the available width then select the appropriate ad unit, then inject it to your content.
1st - I did AB test of 728 leaderboard vs 336 large rectangle. 336 performed over 75% better, over 300,000 page views.
Point is - don't use 728, and also don't recommend using responsive ad unit at all.
My other test improved earning by over 100% by switching from responsive ad unit to 2 fixed size rectangles (one for mobile, one for desktop/tablet).
You can use something like this to determine user agent:
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
Then based on user agent you can show either "mobile" or "desktop" ad size.
Here is how to use USER_AGENT to select which ad to show: http://www.adsenseninja.com/show-mobile-optimized-adsense-ads-for-smartphone-visitors-automatically-free-mobile-ads-php-script-for-wordpress/
It is possible via hidden div and media libraries but I think It's forbidden by google :(
Related
I am getting into creating mobile device friendly websites and apps.
I am using bootstrap and HTML5 so I am fine with rearranging my layouts.
My question is, is what is the best way to resize images depending on what device the website is being viewed on?
Should I make multiple versions of main images such as the website logo, i.e. a version for Iphone, Ipad and desktop computers? Or have one image where the height and width change?
I currently have a PHP class that detects what browser the user is using by checking the header e.g. the Ipad safari browser has "ipad" in the user-agent header.
I know this isn't 100% reliable and can be spoofed. I'd say 95% of the time it's going to be accurate, because users who are genuinely interested in using your site aren't going to try to break it for lolz.
I would probably just use the width and height approach. Most of my mobile implementations have been very light on graphics, so it hasn't been an issue. You should also look into the viewport meta tag if you haven't done so already.
How to set viewport meta for iPhone that handles rotation properly?
Using Viewport to create a mobile friendly version
If you are asking how to send different sized images to different devices (based on the window width) adaptive images is one good option. It will test the visitors viewpoint then send an appropriately sized image based on break points you specify.
Good luck!
I have an web page that is a widget and has to be embedded on another website (the domain is not the same)
I tried using the iframe approach
This works but the problem is that the height of my page increases according to the height. I cannot use javascript to access the content height because the domain is different and the call is blocked due to cross site scripting.
Is there any easy solution available for this problem.
one option would be to make a little mini API on the widget side.
calculate the height. and let the other webpage get that information via JASONP(which is basically cross site scripting).
heres some info about JASONP
What is JSONP all about?
I'm currently working on a mobile site that has tiles which represent each article. The pages have 15 tiles on them which is clean and works for both orientations on a mobile device. I recently added a featured article which takes up two space tiles worth of page space, so now I have one tile that is widowed on the bottom of the page.
Using some media queries I'm able to show/hide the last two tiles which works great until users click to the next page of tiles. If a user is in portrait orientation then they will miss two article tiles because they were hidden on the last page.
So I want to create some type of AJAX function that allows me to check the orientations and dynamically change the tile count request server side. Is this possible?
Jquery Mobile offers methods to look and know the orientation of the device.
I'm working on a website for a specific client. And he wants to be able to add link to the website, and on mouse hover to have a image of that website appear.
Now, he doesen't want to take an image of the website, he only wants to input the link and have the website do everything else.
So my question is ->
Is there a way (eg. google API) to get a website image only by providing the url via php?
Sort of like in google, when you hover over a lik of a page, a tooltip pops up to the right with an image.
Any help is, as always, appriciated :)
Here is a list of 10 free thumbnail services
http://www.webresourcesdepot.com/10-free-website-thumbnail-generation-services/
You can simply refer to the URLs of these services, e.g.
<img src="http://SnapCasa.com/Get.aspx?code=[code]&size=[size]&url=[url]" />
or make a CURL call from one of your PHP scripts and temporarily store/permanently save the image that was generated.
Have recently developed Thumbnailspro.com. It is currently free to use while in beta testing as we work out the bugs, but so far its getting quite popular, you can request thumbnails directly from your website using the code below :
http://thumbnailspro.com/thumb/http://msn.com&s=150
s=Size, size can be anywhere from 10 to 1000 pixels just add s=300 to display a thumbnail 300 pixels in width. We are trying to add more options as we go for thumbnail requests and at the same time trying to keep it as simple as possible so you don't have to enter something like the code below to get your thumbnails :
http://somethumbnailsite.com/viewurl.php?url=http://msn.com&x=200&y=300&bwidth=1024&bheight=768&rotate=76&what_the_hell%20_is_all_this_crap!
So is much more effecient!
Like the service or have any bugs contact us at admin#thumbnailspro.com!
No. The only way to do this is to request the HTML for the page, render the page and then create a thumbnail from that page render. Google does this because in the process of spidering the web, they already get all that data, and they've got a nice optimized rendering engine (Chrome) that they can put the data through, and then they've got tons of online storage space to store the cached image. There's a lot of work there, though.
i am trying to display a webpage within a webpage as you can see over here
http://www.yoursdproperty.com/index.php?option=com_jumi&fileid=8&Itemid=34
the top and left part is my site, and the stuff that is the main content in the middle is a different site. i may not be doing it correctly since it is not displaying it at size that fits.
the main content page is:
http://www.mlsfinder.com/ca_sandicor/raphaelshapiro/index.cfm
You will struggle to make this work perfectly for the following reasons:
You're trying to fit an 800px wide web page into a 700px wide div.
You cannot access the child frame's DOM to manipulate it because it's on a different domain.
You cannot rely on a consistent height for the child frame. Although it has a fixed width, users with different accessibility settings (such as default font sizes) could cause text to wrap and adjust the height of the document.
Although you can overcompensate for point 3 by increasing the height of the iframe to allow for any extra height, you can't really deal with point 1 without changing the layout (mainly the width) of your site.
If I were you, I would look into other avenues of adding the functionality you're looking for. Maybe by contacting the site owner and seeing if they can accomodate your needs.
You are doing it correctly, the page won't fit as it's a fixed width of 800 pixels, it will not squeeze down to fit in your page. So only option for you is to stretch your content area to 800 pixels.
Remove the width and height properties of the iframe tag. Adjust the width style property in the style property so that it is the correct size for the page. It appears that you need to make the iframe wider.
<iframe src="..." frameborder="0" style="width:800px;height:480px;" />
Another option, of course, would be to remove the 'scrolling="no"' from the iframe tag to allow users to use the scrollbar to see the entire inner page.