Google telling user when site is mobile friendly

[seoskunk]

Responsive design just became a necessity. Google will be telling users when a site is mobile friendly. Ultimately this is bound to affect CTR rates and your overall score with Google.

[googlewebmastercentral.blogspot.co.uk...]

[sandboxsam]

I found that imbedding a YouTube Video produces a mobility error:

"The following tap targets are close to other nearby tap targets and may need additional spacing around them.
The tap target <a href="http://get.ado…m/flashplayer/">Get the latest Flash Player</a> and 1 others are close to other tap targets."

The code cited is not on the webpage, only:
<iframe width="560" height="315" src="//www.youtube.com/embed/**********" frameborder="0"></iframe>

How do you imbed a YouTube Video to avoid this error?

[traffik daddy]

Wasn't they doing this like 4-5 weeks ago (possibly longer) or was I imagining it? I kept seeing a little green phone next to the listings in my browser on my Samsung Galaxy. I moved to Samsung Galaxy from Sony Ericsson around that time and thought it was normal. Either way, I agree, it is a step forward.

[samwest]

sbs - if using WordPress, there is a responsive plugin for Youtube Videos.

[petehall]

Wasn't they doing this like 4-5 weeks ago (possibly longer) or was I imagining it? I kept seeing a little green phone next to the listings in my browser on my Samsung Galaxy.

Correct! I think I preferred the icon to the text...

[netmeg]

sbs - if using WordPress, there is a responsive plugin for Youtube Videos.

Yep; I use one and it passes the test. Pretty sure there are a bunch of them now.

Text summary tools don't (at least the ones I've used) actually paraphrase the text. Rather, they select a few sentences from the body that can be put together and form a reasonable summary.

OT: reminds me of a pager I once commissioned for a UNIX conferencing system - it took the first ten rows and the last ten rows of a post and tossed out everything in the middle. I named it after one of our more long winded participants. He was not amused.

[snippet]

Speaking of mobile friendly - when is this site (webmasterworld) going to join the mobile revolution and become responsive?

I can't stand coming here from my phone... too hard to read zooming in and changing my orientation just to get the text large enough to barely read... so alas I don't come here from mobile very often... which is where I spend the majority of my time online (mobile).

[EditorialGuy]

I think I preferred the icon to the text...

I do, too, but the text does a better job of communicating. Icons are easy to overlook if you aren't looking for them.

[lucy24]

Wasn't they doing this like 4-5 weeks ago

That agrees with the dates given in wmt for "first discovery" on non-mobile-friendly pages.

I found that imbedding a YouTube Video produces a mobility error

... and that's why this forum needs a "rotflmao" smiley ;)

[J_RaD]

HMMMMMMMMMMMMMMMMM let me put my goog thinking cap on for a bit.

search results, mobile friendly YAY, bump.

*process* we sure are owning mobile hmmmmm

soon people searching goog on desktops will get a penalty and worse results because they aren't using an android device ahhahahaaha.... funny because im sure its scribbled on a wall somewhere.

goog isn't healthy for the internet as a whole, its time to step up and just be honest.

[seoskunk]

Hi since your sharing wordpress tips thought I'd share this tip for magento users, you can install a new responsive theme and keep the existing site the same. Use the exception rule (designed for mobile) and assign it a user agent "testsite" Then use firefox to fake your user agent to "testsite" and hey presto you can work on your responsive design without affecting or disrupting your existing site...... and when its done just make the full theme change in design.

[slipkid]

One challenge (for informational sites with heavy text content) is paragraph length. A paragraph that looks fine on a desktop, laptop, or tablet may be hard to read on a typical mobile phone, and a paragraph that looks fine on a mobile phone may look like a verse from the King James Bible on a larger device.

What is responsive design? If on a cell phone a heavy text site renders like a verse from the Bible in portrait mode but looks "awesome" in landscape mode, does the site incorporate responsive design?

[EditorialGuy]

What is responsive design? If on a cell phone a heavy text site renders like a verse from the Bible in portrait mode but looks "awesome" in landscape mode, does the site incorporate responsive design?

Good question. Google seems to be assuming that mobile users mostly view Web sites in portrait mode. Is that true? Beats me, although it's probably becoming more true as phone screens grow in size and resolution.

[lucy24]

I've never seen a phone screenshot/emulator that didn't use portrait mode. Don't know if they make assumptions about tablets one way or the other; it may be a non-issue since there it's pixel size rather than pixel count that changes.

In real life, how often would you turn your phone to landscape mode? Maybe if you're looking at a map or pdf, where horizontal space really makes a difference. Otherwise you'd only do it if the site wasn't responsive enough.

[RedBar]

In real life, how often would you turn your phone to landscape mode?

Personally, a heck of a lot, maybe 50% of the time, and I know I'm not the only one since many sites do not render well at all in portrait mode but are semi-passable in landscape.

[EditorialGuy]

I have nothing against responsive layouts per se, but I wonder how users of today's newer and larger phones feel about being served single-column, stripped-down mobile pages by default. Even on something like the Nexus 5 (which isn't especially big), a standard two-column blog format looks pretty good in portrait mode.

Also, a viewport of 320 pixels may be the lowest common denominator for today's smartphone users, but a year or two from now, the mobile landscape (no pun intended) could look quite a bit different. It wasn't that long ago that a "mobile site" meant tiny, ugly pages for pre-smartphone miniscreens, and these days even Apple is edging into the phablet market. This suggests to me that "mobile first" design means chasing a moving target.

[lucy24]

If all your rules are determined by screen width in pixels (@media envelopes), then you're pretty well set for eternity. Just make sure you've got your "viewport" meta. There doesn't seem to be any way to set this property for the entire site, darn it. (Assuming static html so you can't just add it once and for all to whatever code builds your pages.)

many sites do not render well at all in portrait mode but are semi-passable in landscape

That makes it sound as if you would prefer to stay in portrait mode, but are forced to rotate because the site isn't satisfactory otherwise.

---

I just spent some time going over the two directories containing g###'s favorite two pages on my site. You can do a whole lot by simply changing "width" to "max-width". The difference is only noticeable on the narrowest viewports. I also added a universal

img {max-width: 100%; height: auto;}

where "height: auto" means keep it proportional. If this is inside an @media rule, it overrides the width and height declarations given for individual images.

[EditorialGuy]

Lucy24: That's a very helpful hint. Thanks!

[RedBar]

That makes it sound as if you would prefer to stay in portrait mode, but are forced to rotate because the site isn't satisfactory otherwise.

Definitely, holding a candy bar mobile in portait mode is much easier and more comfortable for me. I haven't tried handling the new Blackberry Passport but at 50% wider than my Lumia 925 I expect it's not going to be as easy to hold.

[JesterMagic]

To be honest for the most part I am not a huge fan of responsive themes. I tend to browse sites with a lot of content and I much rather flip my phone sideways and view the full website that way (and zoom if needed) rather than have a theme hide and move everything all around and I can't find anything.

Then again I much rather use a tablet or laptop to browse the web. Phones that I can fit in my pocket have screen sizes to small except for basic sites and the phones with larger screens that are better for browsing the web are just to big to carry around.

I realize I am in the minority here though and am in the midst of converting my sites to responsive themes.

[seoskunk]

Its funny how internet has changed mobile phones, It used to be predicted that your mobile phone would get so small it could be embedded into your thumb. Now there massive screens. Be soon the size of Dom Jolly's phone

[youtube.com...]

[EditorialGuy]

Speaking of portrait vs. landscape, when I'm walking around cities, I see more tourists holding their tablets in landscape mode than in portrait mode (maybe it's because they prefer taking landscape-mode photos, or maybe they just think of a tablet as being more like a TV or computer than a phone.)

[lucy24]

for the most part I am not a huge fan of responsive themes. I tend to browse sites with a lot of content and I much rather flip my phone sideways and view the full website that way (and zoom if needed) rather than have a theme hide and move everything all around and I can't find anything.

I don't see how you get from point A to point B. If the site looks different when viewed in landscape mode, then it is responsive. CSS by itself can't consider the user-agent; it only looks at viewport width. (Theoretically also viewport height, but I'm pretty sure I have literally never in my life seen an @media rule using max-height.)

If the CSS for a narrow viewport makes it hard for the user to find things, that's a shortcoming in the site design. It's not an inherent property of responsiveness.

[slipkid]

In real life, how often would you turn your phone to landscape mode? Maybe if you're looking at a map or pdf, where horizontal space really makes a difference. Otherwise you'd only do it if the site wasn't responsive enough.

The word "responsive" is not in the lexicon of a mobile internet user. The only time they may note a difference in web page rendering is if they rotate their phone from portrait to landscape mode.

As for the use of landscape mode, my user experience is generally enhanced by using landscape mode instead of more scrolling in portrait, or having to use a link to see info not displayed in portrait.

[LostOne]

Interesting discussion about mode. I find a smart phone harder to handle in landscape view; it's just not comfortable..

I'm kinda old. Maybe that has something to do with it?

[lucy24]

The word "responsive" is not in the lexicon of a mobile internet user.

It doesn't need to be. The user only needs to know "It looks nice this way but looks like ### the other way."

[ChanandlerBong]

this is huge for us. We put our main site to responsive about 6 months back, everything is hugely up since then, traffic, adsense revenue. All the big hitters in our niche are non-responsive with a massive backlog of work to do now.

Responsive should be done is a way that is "set and forget". Average screen sizes can halve or double and we won't have to lift a finger.

[Leosghost]

For me the "cut-off point" for responsive is at 480x800 in landscape..smaller than that it is not possible to have functional shopping carts with options for sizes and for colours and for quantities ( that is three "drop downs" just there ) plus buttons for "continue shopping" and "checkout"..not to mention product image and description etc..It is possible to fit the carts into 480x800 at portrait..But it gets real cramped..

Especially when most words in French are longer than their equivalents in English.."rouge" vs "red" for example..and "taille" vs "size"..

But as almost all people use tablets in landscape mode for shopping, they appear to do the same with phones..

Phones at 320 etc are too small to even begin to offer a functional multi choice cart..plus..if they have only a 320 screen they ( IMO ) are not likely to be buying luxury items as 480x800 phones cost way less than €100.oo now..

[MikeNoLastName]

Just another instance of G enslaving the masses of Mom and Pop websites to "comply or die" and the bigger sites to hire more html programmers ('it's a conspiracy I tells ya', lol). Mobile is just a passing fad and I know many folks already getting sick of their puny mobile devices and switching back to tablets. I know _I_ can't read one of them things without a magnifying glass (over 50 here.) Maybe G needs to consider the target audience of a site before deciding whether it passes the mobile-need test.

Our site's page formats originated when the standard screen size was 640x480 and then later 800x600 or whatever, and we just stuck with it, yet now G complains our links are too close together (because we tried to improve the user experience and keep them all on one page) or our font size is too small (size=2)... They are never happy.

[edited by: MikeNoLastName at 12:57 pm (utc) on Nov 25, 2014]

[engine]

There's certainly a borderline of screen size, and many individuals have different tolerances.

After a point there's a need to create an app for mobile.

[RedBar]

Mobile is just a passing fad and I know many folks already getting sick of their puny mobile devices and switching back to tablets.

On what are you basing your statistics? in 2013 over 1 billion smartphones were shipped and there's no reason to believe that 2014 will not be the same with an estimated 420 million in China alone.

Shipment predictions for 2017 are estimated to be 1.685 billion units.

There's nothing wrong with tablets, I still use them but my granddaughter does more with free games from Google Play.

It does not cost a fortune even for mom and pops to convert to responsive html5 IF one is prepared to go out and investigate the options, or are we referring to multi million Dollar mom and pop stores who always claim they can't afford anything?

And lastly, I can read my screen fine with no glasses, in fact I test all my sites on a number of devices and they all read fine, and I'm nearer 63 than I really want to be:-)