I am working on a responsive site and I want to place in several ad banners from Google. As the layout is flexible and fluid, the banners' width and height should scale down and adapt to the parent elements that are defined relatively.
The problem is that the Google banners are loaded with some deprecated attributes within the img tag such as width and height.
Is there any method to ignore these attributes so that the Google banners get matched to the fluid layout and do not break out?
Thanks in advance.
The reason why Google uses these deprecated attributes is to hinder people to scale down ads that are to be shown in a pre-defined size. I think it even violates the TOS to scale them down, but I'm not sure.
In any case, you would have to load the image code with Ajax first, maipulate the attributes (remove them) and then insert the image. I don't know if this is possible, but I think you should not do it. Maybe switch to textual ads instead?
Related
I'm hoping someone can help direct me with troubleshooting for my portfolio page. I'm currently having issues with a few things and I'm not sure why or how to deal with them. Whenever I try to view them in tablet/mobile views on the deployed link the layout is completely different than when I run a live server with npm start.
The first issue about section in mobile and tablet views displays each paragraph in columns and the black background doesn't cover all of the text or the image.
The second issue is the contact page doesn't display the links on mobile even though the text color is set to black and the contact header doesn't show up on the page.
It was made in React. Below will be the deployed link and link to the github.
https://refactored-potato.netlify.app/
https://github.com/GSometimes/refactored-potato
I would really appreciate any help or guidance on sorting this out.
Thank you.
first piece of advice is that you have used TOO MUCH CSS, please use only what you really need. You don't need every css property to use on every element.
Your text/paragraphs are showing in column as their parent's display style is set first as inline and then flex. Either don't use it or write display: block
Using Orchard 1.8.1 I have written a simple image gallery that displays thumbnails and a lightbox. It is just a template that is driven by an Orchard Projection, using a Shape Layout. Works just fine. However, for phone users there is no point displaying thumbnails and it's better to just display the lightbox (with touch support). So I have also implemented that in a separate template. But how can I get Orchard to switch templates depending on the UserAgent string?
I have tried implementing Theme switching (http://weblogs.asp.net/bleroy/dynamically-switching-the-theme-in-orchard), but it's a really ugly solution when I really want to just replace one view, and still enable implementers to switch themes. This is NOT an issue of styling; it's an issue of changing the content based on the device.
I tried implementing DisplayModeProvider as described here: http://www.campusmvp.net/blog/displaymodes-in-mvc-4. But although the filter was called, it had no effect on view names.
Are Projections problematic here because the shape name is set? Is there a better way to go about this?
Create an alternate when you see a mobile browser, preferably from a shape table provider.
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.
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
Any idea, how can we create already running website to Mobile Website?
Are there, ready made plug-ins / components available ?
I've found some like wapple.net however it is paid one, which is not feasible for client's budget.
I have found, XML creations is pretty easy in CakePHP, though your ideas would be appreciated.
Kindly share more details on the same !
Regards,
i dont think that you'll find a plugin that will transform your website for mobile. because there are too many decisions to make when creating a mobile web, for me it's like creating a completly different website with only the necessary information that your website has..
But maybe there are components that might help you with the small taks (like detecting the user agent and stuff).. here you can read two good articles about creating a mobile website:
http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/
http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/
There's also a few JS frameworks that will help you with the interaction with the user, i've only used Sencha touch..
But my guess is that you'll have to adapt/create "manually" the css, html and js for mobile, and I don't think that there's a magical tool to do that, you'll have to do it yourself (or pay someone to do it =D)
Hope this helps, Good Luck!
You may be interested in my answer over here:
CakePHP v2.2.1 Solution (+ Cookies to persist mobile/desktop/other layout)
In a nutshell:
Lets you setup mobile layouts /Views/Layouts/mobile/default.ctp
Mobile views /Views/Pages/mobile/home.ctp
Sets a template variable $is_mobile
Lets you force a specific layout ?forcedLayout=desktop, and remembers this in a COOKIE
If no layout is forced it uses CakePHP's User-Agent detection to make the decision $this->request->is('mobile')
If no ../mobile/ layout or view file exists then it falls back to the default layout or view.
Typically with cakephp you want to create a separate view layout for mobile viewing. The app controller should change the default view layout to the mobile one when detecting a mobile browser.
Your mobile view layout should be made by you, only you know what data on your site is important and what is not (aka, what should be removed /kept for mobile viewing) Also your mobile layout can use alternate CSS and only load the elements you want.
To learn more about creating views in cakephp see the cookbook: