How To make Atahualpa pass Google's 'Mobile-Friendly Test'
To get your Atahualpa site pass the Google 'Mobile-Friendly Test' do the following. This will make your site mobile friendly. If you don't pass the test after doing this - disable ALL your plugins and test again to see if a plugin is causing the issue.
1) go to ATO->Style & configure LAYOUT->Layout WIDTH and type (FLUID or FIXED) and set it to a percentage (as opposed to a 'fixed' width) then set the 'Layout MIN width' option to 320 (iPhone 4 size) or remove it altogether. 2) add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Header HTML Code:
<meta name=viewport content="width=device-width, initial-scale=1"> HTML Code:
onresize="OnResizeDocument()" HTML Code:
<script> HTML Code:
@media only screen and (max-width: 767px) { Thanks to Flynn, sawyerjw, yukoner, kayphoonstar and extremecarver for their contributions. 3/28/18 NOTE: It seems that Andriod devices have an issue when using this code and trying to enter data using the virtual keyboard. The virtual keyboard will pop-up and then vanish. This can be corrected by replacing the 'HTML Inserts: Body Bottom' from above with HTML Code:
<script> |
Is this better than using a plugin like WPTouch?
|
If it works for you there is one less plugin you need to deal with....
|
Hello
I like the facility to make the site mobile friendly but there is a lot of code work for non coders. Any plans to include this in a future update as an option to select. Tom Farrell |
Quote:
|
You forgot IMHO:
ADD this to the body tag ("HTML Inserts: Body Tag"): Code:
body onresize="OnResizeDocument()" (then use a plugin like Responsive Menu which already works well with the above code and will be shown automatically as the sidebar is detached - but that is of course no use as long as the normal menu is still showing.). |
Quote:
and actualy you don't need the word 'body' as for the menus, not everyone will want to do that and see the other thread to follow up on it. |
Oh - and just another optional one:
If you set image sizes - they will stick out of your viewport - very bad. Instead of going through all your posts/pages fixing this - just add the following to your CSS inserts: Code:
img { |
I'm using Page Builder by SiteOrigin and Responsive Menu, and found that I only needed that first line of code in the ATO->Add HTML/CSS Inserts->HTML Inserts: Header
<meta name=viewport content="width=device-width, initial-scale=1"> However, Responsive Menu is still recommending that I use: <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' /> Any thoughts on whether one is preferable over the other in Atahualpa? |
user-scalable=no
--- I would not use it. I hate it when I cannot zoom out on a page because the content is due to some circumstance actually bigger than the viewport - and you are forced to pan around. maximum-scale=1 - is more or less stating the same in your above example - you disallow the user to zoom in. I consider this bad form too. Setting maximum-scale when user-scalable=no is actually doubling your statement. I don't know why this is proposed - maybe some browsers only respect the one or the other? So do it like indicated if you want to forbid zooming in/out. Don't do it if you want to allow the user to zoom in! See also: http://stackoverflow.com/questions/2...e-attribute-in |
Thanks for the insight.
My first guess was that zooming causes problems with Responsive Menu, but I just tried it with good results. As I zoom in, the various widgets stack up in a single column just as they do when I resize the browser. At least if I get a mystery condition at some point I'll have a place to start looking. |
Thank you, JD for this code which works beautifully! I am currently working on a client's site, http://hope2heal.net, and have passed Google's mobile-friendly test. However, I have not been able to find code to make the header size responsive to the mobile device size. Is there a way to have the header image resize or do I have to make smaller versions of the image and somehow code them in the HTML/CSS inserts area to apply for all device sizes? Thanks a million!
|
Try this
1) add the following to ATO->Add HTML/CSS Inserts->HTML Inserts: Header HTML Code:
<meta name=viewport content="width=device-width, initial-scale=1"> 2) at ATO->Style & edit HEADER AREA->Configure Header Area - remove teh %image and replace it with HTML Code:
<img class="img-responsive" src="http://yourdomain.com/...path-to-the-image.../header-new.jpg" width="753" height="369" /> %pages |
You are the wizard! Thank you very much for sharing your genius with us - its perfect and no centering required!!!
|
Moderater note: see PATCH 3723-03: lack of a space in the <body..> when using 'HTML Inserts: Body Tag'
Note: You need to put a single space before `onresize="OnResizeDocument()"`, as it seems it just gets appended directly onto the existing body string without a space, leading to incorrect HTML in the body tag. In my case I ended up with it being directly appended to the closing " in the body class statements. |
@cefiar - good find, and I'll bet it happens in IE. Safari, FireFox and Chrome seem to be able to handle the missing space fine.
|
No idea how it affects IE. I just picked it up when I was looking at the source, as the source viewer I use highlighted it as an anomaly and brought it to my attention.
Many thanks for the above BTW. In my case, the .hentry img section caused problems with the default gallery I use. I removed the section: Code:
.hentry img { Code:
@media only screen and (max-width: 767px) Code:
.attachment-thumbnail { width: 90px; height: 90px; } Code:
.logo { width: 100px; height: auto; } Code:
.blogtitle { line-height: 1; margin: 0.5em 0 0; } |
Well - I was really annoyed by all the Size Tap Targets problems in Google Pagespeed Mobile test - so I optimized many more things. I now score 100/100 Usability if it's not about links in main body text being too close to each other (that one is tough to solve without rewriting/reformatting your website - so think about it - but I guess for most of us except on frontpage or other very important pages - just let it be).
So some more tips - CSS inserts: Code:
@media only screen and (max-width: 800px) { Code:
div#toc_container { line-height: 195%; } General usefull CSS inserts rules: Code:
div.widget ul li { Analyse your page with Firebug and google pagespeed to find out more problematic widgets - e.g. for me s2member login widget: Code:
div#ws-plugin--s2member-pro-login-widget { Code:
.comment-meta a { margin:0px 15px 0px 0px; Then goto ATO Next-Previous Navigation and set: Show Page Numbers (Pagination) for COMMENTS Navigation to NO. Last but not least - Atahualpa footer on posts/pages is not mobile friendly. I solved it by changing Footer Homepage and Footer Multi Post to: %date('F jS, Y')% | %tags-linked('Tags: ', ', ', ' | ')% %comments('Leave a comment', 'One comment', '% comments', 'Comments are closed')% %edit(' | ', 'Edit this post', '')% (note I took out category - you could alternatively try to get in some decent spacing - I did not manage that however). Now you only have to see for additional issues in Pagespeed. E.g. I had one text widget (google feedburner subscribe button - code copied from google) for which I needed to introduce a   line break in order to get it work well. |
Hi Juggeldad,
when I follow your instructions, - the header is responsive on mobile devices in both directions but not broad enough for my website (900px), - the content seems to shrink in relation to the header, so it isn't spread over the whole screen but too narrow, - I can't use rotating header images What am I doing wrong? Is there any way to fix these issues? |
Quote:
Quote:
Quote:
|
The website in question is www.gabrieledziemba.de
The full width header option is switched to NO, The width of the header image was set to 900px, as is the fixed layout width (is that causing the problem?), but I changed it to your 753px, because 900 wasn't responsive in the same way. And since I now put only one url of one header image into the ATO Style & Edit Header Area, there are no rotating images anymore. On mobile phone you see how the content, which adjusted nicely to the screen before I made use of the responsive header code, is way too narrow. Best, Ilke |
ALL plugins are disabled.
|
Actually, when I click on another page, the content is fine and adjusts well, but the header is not responsive.
|
try changing the width="753" height="369" to width="100%" height="100%"
|
Great! That did the trick, it works wonderfully. Only on a tablet held horizontally the header image gets distorted a bit (the height doesn't stay in proportion but increases).
The last question remaining is the rotation of the header images. Any way that is possible, you think? I really appreciate your help, I'll donate right now. |
All times are GMT -6. The time now is 03:31 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.