cancel
Showing results for 
Search instead for 
Did you mean: 

Responsive design and new google search - don't lose out

IanSn
Rising Star
Posts: 565
Thanks: 31
Registered: ‎25-09-2011

Responsive design and new google search - don't lose out

This query came up the other day -
The news link given by @artmo was -
http://hosted.ap.org/dynamic/stories/U/US_TEC_GOOGLE_SEARCH_SHAKE_UP?SITE=AP&SECTION=HOME&TEMPLATE=D...
but on 'Chat' so probably the wrong place for this issue technically speaking. Maybe here is better.
Quote
"The revised formula, scheduled to be released Tuesday, will favor websites that Google defines as "mobile-friendly." Websites that don't fit the description will be demoted in Google's search results on smartphones..."

https://developers.google.com/webmasters/mobile-sites/get-started/?utm_source=wmc-blog&utm_medium=re...
There is a test -
https://www.google.com/webmasters/tools/mobile-friendly/
Some pages on my sites fail.
I spent a lot of time couple of years ago making my sites 'responsive' (via viewport, ratio and percentage scaling to the device receiving it, etc., etc.) but some are not good enough it seems.
Looks like there's some work to do to make sure the mobile devices don't lose out.
Other than that, google bots are now actively looking for 'mobile.html' as well.
If not found...
Check yours!
I wonder if other search engines will follow suit?
14 REPLIES 14
Penny
Superuser
Superuser
Posts: 1,309
Thanks: 809
Fixes: 8
Registered: ‎05-04-2007

Re: Responsive design and new google search - don't lose out

Quote from: IanSn
This query came up the other day -
The news link given by @artmo was -
http://hosted.ap.org/dynamic/stories/U/US_TEC_GOOGLE_SEARCH_SHAKE_UP?SITE=AP&SECTION=HOME&TEMPLATE=DEFAULT

... interesting article, thanks for flagging up : )
Penny Rollo * * * joined Force9 on 17/02/98 * * * with PlusNet from 2000 onwards * * * personal website at pennymidasrollo.plus.com
Project HappyChild website (free educational resources for kids and schools, plus directory of charities helping children) 1998 onwards
Superusers are not PlusNet staff but do have a direct line of communication into the business to raise issues, concerns and feedback from the Community.
MauriceC
Resting Legend
Posts: 4,085
Thanks: 929
Fixes: 17
Registered: ‎10-04-2007

Re: Responsive design and new google search - don't lose out

The article and the motives behind it are sound - but who elected Google to be the arbiter and monitor of good web design?
I'm in the process of upgrading  a few sites but it can take time with many of the older pages, so why the panic?
In practice I normally view *new* pages with different screen sizes and browsers AND using a Google Nexus 7 tablet..  Using Wordpress 4.1 the 'Responsive' results using Firefox tools on a Desktop, a Laptop and the Nexus are at least adequate - but nowhere near the awful picture predicted by the Google tools.
Is this initiative just a smoke screen to help justify the challenges they face from the EU and others over Google's "Seeding" of selected search results?
Maurice

Superusers are not staff, but they do have a direct line of communication into the business in order to raise issues, concerns and feedback from the community.

IanSn
Rising Star
Posts: 565
Thanks: 31
Registered: ‎25-09-2011

Re: Responsive design and new google search - don't lose out

No panic!
Just interesting G have made this move, and people who like to keep up with their SEO might need to take heed.
(Or wonder why traffic to their site via mobile is dropping!)
Many sites are not responsive, nor do they have mobile versions.
Yes, most tablets are fine.
I use various simulators to check for mobile. Screen size / pixel ratio are a nightmare, frankly. Looks like Google are only checking what site looks like on iPhone?
I started checking why some of my pages are failing but, right now, I can't actually be bothered... Later maybe.
Quote
Is this initiative just a smoke screen to help justify the challenges they face from the EU and others over Google's "Seeding" of selected search results

I would not dare say!   Lips_are_sealed
But I doubt it.
decomplexity
Rising Star
Posts: 493
Thanks: 26
Registered: ‎30-07-2007

Re: Responsive design and new google search - don't lose out

Thanks; a most useful and interesting reminder.
I have a number of websites that were built a few years ago with ‘elastic pages’ – the sidebars were all FLOATed (left and right) and the content between the sidebars was ‘sacrificial’ and mainly text: sacrificial in that the text would be realigned to fit the available space and any pics would either be reduced in size or (for ones unsuitable to the squashed) moved down the page to a point where they could be displayed full size. Since the realigning and squashing was all done by the browser (no Javascript needed) it wasn’t much of an overhead.
However, the reason for my doing this was the opposite of Google’s approach: I was trying to cater for (the then) smaller screen resolutions but allowing the page to expand when displayed on the newer larger and higher resolution screens. Google seem to be saying ‘design for mobile screens first’ using the responsive design paraphernalia  (fluid grids, scalable text sizing and so on) and all will be well on physically larger static monitors (but not necessarily higher resolution – the Samsung Galaxy 6’s Quad HD is considerably higher resolution  than my monitors!).
I ran my sites through Google’s checker, and the checker complained mainly about text sizes not scaling to what it believes is optimal viewable sizes. Even though I have also written Android apps to cover the key content of the sites,  I feel a summer project coming on…   
Zen from May 17. PN Business account from 2004 - 2017
chrcoluk
Grafter
Posts: 1,990
Thanks: 5
Registered: ‎11-12-2013

Re: Responsive design and new google search - don't lose out

and I bet there is no mark down for sites that arent desktop friendly.
google responsible for dumbing down websites en masse, so their phones work as well as pc's for browsing.
IanSn
Rising Star
Posts: 565
Thanks: 31
Registered: ‎25-09-2011

Re: Responsive design and new google search - don't lose out

Use em instead of font sizes.
Must say I'm not entirely clear what G are up to here. I thought I was for a bit, but then got confused again.
Lots of bots currently looking for mobile.html and .mobile.
If they don't find them?
I haven't looked into it since the original post.
Suspect they'll change the rules as it goes along anyway if people grumble enough.
So much is changing in web design now, its hard to keep up!
Think that's right about dumbing-down. So many fancy ideas have to be chopped away, unless you're a real smartass.
Penny
Superuser
Superuser
Posts: 1,309
Thanks: 809
Fixes: 8
Registered: ‎05-04-2007

Re: Responsive design and new google search - don't lose out

Quote from: decomplexity
Thanks; a most useful and interesting reminder.

... rather glad you flagged this up again.
Having taken the approach of creating separate webpages for desktop, tablet and mobile ("responsive web design" being well beyond my technical capabilities) I was somewhat dismayed to discover a couple of days back that Google's "test" feature ranked the *desktop* pages - eg here - as "not-mobile-friendly" (even though the page clearly offers a "mobile" option) whilst it ranked the mobile version here as "Awesome! This page is mobile-friendly" (google-test words, not mine).
After seeing your post I went back to the links above - the AP article has disappeared but via the Google developer ones I found
https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/separate-urls - "Separate mobile URLs serve different code to desktop and mobile devices (and perhaps even tablets), and on different URLs".  The page refers to the "alternate" and "canonical" tags which divert Googlebot to the intended version of the page.
Quote
On the desktop page (http://www.example.com/page-1), add:
<link rel="alternate" media="only screen and (max-width: 640px)"
      href="http://m.example.com/page-1" >
and on the mobile page (http://m.example.com/page-1), the required annotation should be:
<link rel="canonical" href="http://www.example.com/page-1" >
This rel=”canonical” tag on the mobile URL pointing to the desktop page is required.

I'd somehow altogether missed that such tags were required : /  so, a possible way forward, though it seems that Google doesn't actually indicate a separate-identifier for tablet pages.  I've only used broad set-ups here ("mobile.php" being approx half the width of "tablet.php" which is half the width of "desktop.php", in the page-layouts) though site visitors seem to be having no difficulty in selecting whichever version suits their device and orientation.
The potential issues of nominating a "canonical" desktop page for any paginated-series mobile page is of course another minefield http://googlewebmastercentral.blogspot.co.uk/2013/04/5-common-mistakes-with-relcanonical.html
Quote
"Mistake 1: rel=canonical to the first page of a paginated series"
Specifying a rel=canonical from page 2 (or any later page) to page 1 is not correct use of rel=canonical, as these are not duplicate pages. Using rel=canonical in this instance would result in the content on pages 2 and beyond not being indexed at all.

... though I think I'd probably settle for only the first page of each set being indexed (and all site pages being accorded the mobile-friendly rating), on balance.
I've now made the alternate/canonical rel tag additions, and all pages have the "viewport" reference - whether all this will be appealing to googlebot/s is anyone's guess (though I input four pages to google-crawl last night and visit levels are higher this morning, so maybe) but I have an altogether-different "summer project" planned so that's about as far as I'm going with all this, for now Smiley

Regards,
Penny.
Penny Rollo * * * joined Force9 on 17/02/98 * * * with PlusNet from 2000 onwards * * * personal website at pennymidasrollo.plus.com
Project HappyChild website (free educational resources for kids and schools, plus directory of charities helping children) 1998 onwards
Superusers are not PlusNet staff but do have a direct line of communication into the business to raise issues, concerns and feedback from the Community.
IanSn
Rising Star
Posts: 565
Thanks: 31
Registered: ‎25-09-2011

Re: Responsive design and new google search - don't lose out

@Penny
I know...
Quite a pain, eh?
Not least because we're not sure if its actually working or not.
It is a bit confusing that Google declares the desktop version to be 'not mobile friendly' where there is actually a mobile version available.
Though its probably not necessary to run your desktop pages thru the test. That page itself would obviously fail as the test doesn't redirect.
You just have to make sure you've done the alternate tags, and all that.
Google are running bots now looking for 'mobile.html' and '.mobile', etc.
One of my sites has only the front landing page needing a mobile version. All other pages are ready for any viewport. And these are lots and lots of articles and posts. Luckily these were quite simple and mostly only need using percentages instead of fixed sizes. But it means both mobile and desktop landing pages link to the same files.
Which, in relation to what you've posted here, turns out to be quite confusing!
So I either have to 'dumb-down' the desktop front page or do a proper responsive job on it - which is quite a lot of work as it was originally heavily 'designed'.
Not looking forward much to sorting out the other sites which need doing again really.
I'm not very happy with the way most mobile sites look generally. Sometimes its just easier to revert to the standard site - which will show on mobile, just very small - and just zoom in.
I wonder what other folks think of 'mobile sites' when they use their phones? Do they prefer a standard site and zoom in, or the 'mobile friendly' sites that have less info, etc?
The days of anyone being able to put a quick website up are gone!
Penny
Superuser
Superuser
Posts: 1,309
Thanks: 809
Fixes: 8
Registered: ‎05-04-2007

Re: Responsive design and new google search - don't lose out

Quote from: IanSn
@Penny
I know...
Quite a pain, eh?
Not least because we're not sure if its actually working or not.

… I think that’s the disconcerting thing, when you can’t be quite sure that whatever is being done is (a) working, (b) viewed as being “correct”.  I have to say I’ve always found Google pretty good in the past, in terms of the way it categorises things, just this is a whole new ballgame (for me, at least).
>> Though its probably not necessary to run your desktop pages thru the test. That page itself would obviously fail as the test doesn't redirect.
>> You just have to make sure you've done the alternate tags, and all that.
… did that (the tags) but the desktop page still didn’t “pass” so now have only requested the search thing on same-device pages (ie mobile/mobile, desktop/desktop).
>> Google are running bots now looking for 'mobile.html' and '.mobile', etc.
… hope that includes mobile.php, then, as I’ve had to move to “dynamic” pages as it was getting complex to work with static pages as the site got bigger.
>> I either have to 'dumb-down' the desktop front page or do a proper responsive job on it - which is quite a lot of work as it was originally heavily 'designed'.
… yeah, don’t envy you *that* - I gave up entirely on the “responsive” side of things, though I daresay it’s do-able for people who have enough patience and expertise.
Just occurred to me to use my phone to do a search for “sunshine city spinach” – random, I know, and perfectly well aware that I’m the only person on the planet likely to use that search term, just wanted to see what it would generate, on a mobile.  “spinach” page was top listing, so *something* is working.  It gave the desktop version but that’s probably because there are quite a lot of superseded pages on the google listings (have re-worked the whole site several times in recent months in some attempt to get things how they should be).
>> Not looking forward much to sorting out the other sites which need doing again really.
… no, nor me.  The HappyChild site is mainly worksheets which are “too wide” (print on A4), so really not “suitable” for mobile, but aware I should probably tackle The Illuminated Bible at some stage.  2016, maybe Smiley
Penny Rollo * * * joined Force9 on 17/02/98 * * * with PlusNet from 2000 onwards * * * personal website at pennymidasrollo.plus.com
Project HappyChild website (free educational resources for kids and schools, plus directory of charities helping children) 1998 onwards
Superusers are not PlusNet staff but do have a direct line of communication into the business to raise issues, concerns and feedback from the Community.
IanSn
Rising Star
Posts: 565
Thanks: 31
Registered: ‎25-09-2011

Re: Responsive design and new google search - don't lose out

Quote
… did that (the tags) but the desktop page still didn’t “pass” so now have only requested the search thing on same-device pages (ie mobile/mobile, desktop/desktop).

I think it will still not pass the desktop version even though you have those tags. Not sure but I think this is the misleading thing with the tester here - its not testing the whole site set-up, just the page its looking at.  You only need to test your actual mobile pages. So long as you have the right meta on the desktop version it should be okay. .... I think!
Yes, does include php.
Pretty much the responsive thing means thinking again from the ground up if you're going to do it properly. I've discovered that trying to 'tweak' what you've already got just takes ages and then doesn't really work! Or is a compromise too far.
Even so, its that time problem again.
Of course, most mobile browsers will accommodate non-responsive sites - you just have to zoom in. (And ppl will be used to that.)
Problem now is G is dropping you off a higher ranking if the page is searched for from a mobile device. And its not clear if that means tablet as well.
Not sure I appreciate their intervention. It does shove you out of the running if you don't have a top-notch development team to hand...
Anyway, good luck!
I've got some pages I'll dig out and post some links if its useful. I'll be referring to them myself when I get round to it.  Smiley
Penny
Superuser
Superuser
Posts: 1,309
Thanks: 809
Fixes: 8
Registered: ‎05-04-2007

Re: Responsive design and new google search - don't lose out

Quote from: IanSn
So long as you have the right meta on the desktop version it should be okay. .... I think!

... the tags seem to have made a real difference - just tried a search for SCOSSE Bazaar on the phone, first result was the co.uk page and Google has added "Mobile-friendly" in front of the description.  Significantly reassured, now - looks like they're happy with "alternative formats" even if the site's not as high-tech as those with "responsive" design.
>> Yes, does include php.
... all well and good, then - that was the major remaining factor I wasn't sure about and didn't have any real way of checking.
>> I've got some pages I'll dig out and post some links if its useful. I'll be referring to them myself when I get round to it.   Smiley
... yes I'd appreciate that, and thanks.  There's no guarantee I'd "understand" any of it, first off, but I might, given time, and it's always helpful to have something to refer back to, that someone else has found to actually *work* Smiley
Penny Rollo * * * joined Force9 on 17/02/98 * * * with PlusNet from 2000 onwards * * * personal website at pennymidasrollo.plus.com
Project HappyChild website (free educational resources for kids and schools, plus directory of charities helping children) 1998 onwards
Superusers are not PlusNet staff but do have a direct line of communication into the business to raise issues, concerns and feedback from the Community.
IanSn
Rising Star
Posts: 565
Thanks: 31
Registered: ‎25-09-2011

Re: Responsive design and new google search - don't lose out

The 'Responsive Design' book from Ethan Marcotte - pretty much where it all began about 5 years ago --
http://abookapart.com/products/responsive-web-design
Follow him on Twitter @beep
These are pointers.
http://www.studiopress.com/design/flexible-grid.htm
http://www.studiopress.com/design/website-respond-mobile-devices.htm
I've got more tutorial type pages, bet I've backed them up somewhere...
Penny
Superuser
Superuser
Posts: 1,309
Thanks: 809
Fixes: 8
Registered: ‎05-04-2007

Re: Responsive design and new google search - don't lose out

Quote from: IanSn
The 'Responsive Design' book from Ethan Marcotte - pretty much where it all began about 5 years ago --

... thanks for the links Smiley  a lot of it is "over my head" though I understand the absolute basics.  I think I'm probably going to stick with the three-separate-sets (mobile/tablet/desktop), for now, though I'll have a more in-depth look through the resources you've linked to, whenever I get time somewhere.
Penny Rollo * * * joined Force9 on 17/02/98 * * * with PlusNet from 2000 onwards * * * personal website at pennymidasrollo.plus.com
Project HappyChild website (free educational resources for kids and schools, plus directory of charities helping children) 1998 onwards
Superusers are not PlusNet staff but do have a direct line of communication into the business to raise issues, concerns and feedback from the Community.
IanSn
Rising Star
Posts: 565
Thanks: 31
Registered: ‎25-09-2011

Re: Responsive design and new google search - don't lose out

Yes, I think some of these solutions are very technically heavy. Ok for those in pro IT departments making large corporate sites (and getting paid substantially for it).
Its worth casually searching for responsive stuff over time, there are a few sites out there which give easier overviews, and gradually it sinks in.
A problem is that its a bit of a moving target - changing all the time.
Mostly worth thinking about moving to percentages instead of fixed width and, if you can get your head around it, different stylesheets for different screens using tags similar to what you've already done, using 'media queries' and 'viewport' (google these) with CSS3. Its not that difficult actually, just tedious getting started. Once you've done it once you can sort of tweak 'em and use the 'template' again!
There are some free templates here -
http://designscrazed.org/free-responsive-html5-css3-templates/
Other sites -
http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
https://msdn.microsoft.com/en-us/magazine/hh653584.aspx
But having separate sites is still an option! I've got a bit of a mixture.