mobile friendliness?

mthibodeau

When I check my SM site at https://www.google.com/webmasters/tools/mobile-friendly/ it tells me that my site is not mobile-friendly because the content is wider than the screen. I took out the widest part of my site and it still tells me the same thing. It also tells me my site is blocking the bots, and I don't know how.

I have a new site and I use one of the templates supplied ("shadow" maybe?). In the account settings, I do have Google stuff enabled - site-searchable and web-searchable, etc.

Which SM templates ARE mobile-friendly for Google? They're going to start penalizing sites that are not mobile-friendly.

Thanks.

denisegoldberg

I suspect the mobile-friendliness is not specifically the template but what you do with it. For example, a site or pages defined as fixed width likely won't play well on a mobile device.

I just checked my site and blog using the link you supplied (thanks for that!) and both show as mobile-friendly. I use a top logo and menu though, and I thought it would be worth checking a site that uses a side menu. I checked leftquark's site since he uses a side menu. His site - http://www.aaronmphotography.com/ - also shows as mobile friendly.

I have not done any mobile-specific customization. It's possible that leftquark's site has some mobile-specific CSS based on his notes at http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations.

This tool can be used to see what your site looks like on different mobile devices - http://quirktools.com/screenfly/.

It's hard to know what to suggest without looking at your site. If you'd like suggestions please provide a link to your site.

--- Denise

mthibodeau

Thanks. Has SM put out anything (how tos, etc) about making our sites responsive? I don't know a ton of stuff about coding, but this seems like a pretty big deal, so I want to figure it out but I'm feeling a little lost. www.mariawritingwithlight.com

JohnHero

We have heard some reports of users not passing the Google Mobile test and this is something that we are looking into. At this time we do not have any additional info or an ETA on this, but we are aware of the situation.

mthibodeau

Thanks for the update. Since Google has set a deadline of April 21 for sites to be responsive before penalizing them, I look forward to more information from SM soon.

I thought my site was mobile friendly because when I look at it on my phone, it looks different than it does on my computer (the menu bar, for example), but apparently not.
Maria

denisegoldberg

mthibodeau wrote: »

Thanks. Has SM put out anything (how tos, etc) about making our sites responsive? I don't know a ton of stuff about coding, but this seems like a pretty big deal, so I want to figure it out but I'm feeling a little lost. www.mariawritingwithlight.com

I think I've found at least one mobile-type issue on your site, and that is related to the breadcrumbs. On some of your pages (Press, and Prices) the breadcrumb width is causing a horizontal scroll. It turns out that is something that I do have a fix for on my site. Try adding this to the CSS for your theme:

/* correct breadcrumb display on mobile devices */
@media screen and (max-width: 670px) {
/* Wrap long breadcrumb titles */
.sm-breadcrumb {
white-space: normal !important;
}

/* Make the breadcrumb font smaller for mobile devices that don't have long screen widths */
.sm-breadcrumb-item h1 {
font-size: 20px !important;
}
}

You may also want to rethink your logo. On my phone the combination of the 1-line for menu and your site logo takes up half of the vertical space when the phone is held in portrait mode and all of the vertical space when the phone is held in landscape mode. I think showing your photos is more important than showing your logo.

I don't know about the robots.txt warning - I don't remember doing anything on my site that would have to do with robots.txt and I don't see the warning on my site.

You also link to pages that appear to be somewhere other than your smugmug site that are not readable on a phone. I don't know how far that Google tool goes in analyzing your site. I know that I explicitly checked my blog as well as my smug site.

This blog on your site - http://mariawritingwithlight.blogspot.com/ - shows as mobile friendly.

This page on your site - http://vineyardphotographer.com/ - shows as not mobile friendly.

I suspect that fixed width pages (unless they are tiny) are going to show as not mobile friendly.

--- Denise

mthibodeau

Thanks for taking a look!

I took the breadcrumbs out, as I don't really care about them anyway. I'd love to take the logo out (it also had my name before), but it doesn't seem like I can -- there's no trash can icon when I try to customize, so I don't know how to take that away?

I do know my wordpress blog is not mobile friendly and I'm working on that separately, as it has its own confusing issues ("mobile viewport is not set" - dunno what that even means), but that's an interesting idea that Google is looking at the links, too. They only say the content is too wide, though, not anything about links, in that checker function site.

mthibodeau

I clicked through a couple other resources on that page to try to find the problem and it sent me to the PageSpeed Insights, where it told me:
Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 3 blocking script resources and 10 blocking CSS resources. This causes a delay in rendering your page.

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Remove render-blocking JavaScript:

• http://cdn.smugmug.com/…-top-3d72b5bb0c5458a6bc602ef3e2c7473d.js
• http://cdn.smugmug.com/…nfig-aa18b9c1e4f672e67cd424fc32abf1a4.js
• http://cdn.smugmug.com/…gets-7d2ea239f9972d34ddfa6665f0657cbd.js

Optimize CSS Delivery of the following:

• http://fonts.googleapis.com/…xt&family=Roboto%3A100%2C300%2C400%2C500
• http://cdn.smugmug.com/…061-9410c3289c29d9c2f97424f0739e3e62.css
• http://fonts.googleapis.com/…ubset=latin-ext&family=Lato%3A100%7CLato
• http://cdn.smugmug.com/…ore-72222e0b4b82cee0d6a3075e284a0e23.css
• http://cdn.smugmug.com/…dle-6fae0d436a7bda28e55ad99e2f0a10e3.css
• http://cdn.smugmug.com/…dle-c1fa8bf60fe7c1cf7165de5514fce650.css
• http://cdn.smugmug.com/…icknews/quicknews-min-20140219173927.css
• http://cdn.smugmug.com/…9059-27-2-p-1610433-1-1427218414-min.css
• http://fonts.googleapis.com/css?subset=latin-ext&family=Asul%3A400
• http://cdn.smugmug.com/…33096-4-2-p-1610433-1-1394127664-min.css

No idea what any of that means.

It also told me I should resize my "tap targets" and I'm assuming that's talking about my menu bar options, but since I have no way to customize the size of that that I can see, I'm not sure how to address that issue.

Given that I mostly just used the SM template that was provided and didn't really do a lot of customization, I hope there will be help forthcoming from SM on how to make sure that their templates are responsive.

denisegoldberg

mthibodeau wrote: »

I'd love to take the logo out (it also had my name before), but it doesn't seem like I can -- there's no trash can icon when I try to customize, so I don't know how to take that away?

If you remove the logo you are leaving no visible trace of you.

I assume you used a logo content block in your header. Go into customize, select entire site, hover over your logo, click the trash can.

Or you could figure out the CSS to now show that content element on mobile screens.

--- Denise

mthibodeau

Denise, there is no trash can icon when I hover over that content block of the photographer silhouette, only a wrench. I can't figure out what else is making my site too wide for Google, so thought I'd start with the logo (though, since I took out the text, it doesn't seem like it should be too wide with just that 80px picture).

denisegoldberg

mthibodeau wrote: »

Denise, there is no trash can icon when I hover over that content block of the photographer silhouette, only a wrench. I can't figure out what else is making my site too wide for Google, so thought I'd start with the logo (though, since I took out the text, it doesn't seem like it should be too wide with just that 80px picture).

Did you select Entire site?

If you did select Entire site it's possible that you defined it in a different section, but I don't think so.

Once you enter Contents and Design make sure to select Entire site on the right.

But I don't believe it is your logo that is causing the problem. On the pages I mentioned above you need to check the width. I suspect those pages are set to a fixed width.

--- Denise

mthibodeau

You might be right -- I changed all my pages to "stretchy" and now Google says my site is Awesome. Many thanks for that help.

Now I'm still wondering about the other stuff -- the PageSpeed Insights thing, but at least that's one issue solved.

denisegoldberg

JohnHero wrote: »

We have heard some reports of users not passing the Google Mobile test and this is something that we are looking into. At this time we do not have any additional info or an ETA on this, but we are aware of the situation.

John -
I've seen two things on the couple of sites I've looked at so far that are ranked as not mobile friendly.

Site pages / galleries are showing as too wide because the breadcrumb extends beyond the edge of the device. Someone - I think probably leftquark - gave me this CSS to fix the breadcrumb on mobile devices:

/* correct breadcrumb display on mobile devices */
@media screen and (max-width: 670px) {
/* Wrap long breadcrumb titles */
.sm-breadcrumb {
white-space: normal !important;
}

/* Make the breadcrumb font smaller for mobile devices that don't have long screen widths */
.sm-breadcrumb-item h1 {
font-size: 20px !important;
}
}

It would be nice if the breadcrumb CSS wasn't needed, if the presentation was just right for the device. But it's an easy fix.

The other thing I've seen is folks choosing to use fixed width instead of stretchy.

--- Denise

divamum

I can't even check mine apparently - I keep getting an error message when I try to look at mine in the google "tester" - something like "robots.text not allowed". Is that a setting at my end, or smug?

denisegoldberg

divamum wrote: »

I can't even check mine apparently - I keep getting an error message when I try to look at mine in the google "tester" - something like "robots.text not allowed". Is that a setting at my end, or smug?

That seems odd. I believe there is a robots.txt on all of our sites.

What is your URL? When I clicked the links in your signature I only see your blog. And if I click portfolio & galleries in your blog menu I still see your blog, not your smug site.

--- Denise

divamum

denisegoldberg wrote: »

That seems odd. I believe there is a robots.txt on all of our sites.

What is your URL? When I clicked the links in your signature I only see your blog. And if I click portfolio & galleries in your blog menu I still see your blog, not your smug site.

--- Denise

Sorry - I need to update those. I just redirected my custom url to smug recently, so it should be www.divatography.com. If that doesn't come up please let me know... and use the underlying url which is divamum.smugmug.com

denisegoldberg

divamum wrote: »

Sorry - I need to update those. I just redirected my custom url to smug. It should be www.divatography.com. If that doesn't come up please let me know... and use the underlying url which is divamum.smugmug.com

www.divatography.com takes me to your wordpress site.

I get the same error with your smugmug url - but I wonder if it is because your custom domain appears to be pointing to wordpress but I suspect you also have your smug site pointing to it.

--- Denise

divamum

Ok, this is really weird. I've checked it on multiple (uncached) computers, and www.divatography.com takes me to smug, and http://divatography.com takes me to wordpress. Ideas?

divamum

Just tweaked something. Could you try it again? Thanks!

denisegoldberg

divamum wrote: »

Just tweaked something. Could you try it again? Thanks!

Now it takes me to your smug site.

The mobile-friendly test still says

The requested URL is disallowed by robots.txt.

...but you already knew that!

I did a search and found the thread Webmaster tool, index status blocked by robot txt. That thread pointed to discovery settings as the problem. The problem reported there was different, but I think it's still worth checking.

If you go into your smug account settings, Discovery... Search - what are the settings under site visibility?

--- Denise

divamum

Well, well, well. Things I never knew! I have now verified ownership, added SEO tags, set it up for google visibility and... it's mobile friendly. Thank you! And I would have known NONE of these glitches if I hadn't seen the article about mobile friendliness, so I guess it had a silver lining! Thanks so much, Denise.

denisegoldberg

divamum wrote: »

Well, well, well. Things I never knew! I have now verified ownership, added SEO tags, set it up for google visibility and... it's mobile friendly. Thank you! And I would have known NONE of these glitches if I hadn't seen the article about mobile friendliness, so I guess it had a silver lining! Thanks so much, Denise.

I'm glad I could help!

--- Denise

mthibodeau

Ugh. Back to square one. I haven't changed anything on my site since this afternoon, but I am on a different computer and I was working on my blog site (not SM) and I put in my SM site to the checker again and now it's saying the same error about content too wide. What??

mthibodeau

Using a different computer shouldn't matter, I know, but now trying again with my laptop (where my site was granted awesomeness yesterday), and it's back to saying not mobile-friendly because the content is wider than the screen. But I didn't change anything from the changes I made yesterday that made it friendly, so I'm baffled and back to being frustrated and needing help, please!

JohnHero

Denise ,

At this point, there are some content blocks that are causing SmugMug sites to not pass the Mobile Friendly test. We are working on getting these all working, but at this point do not have a n ETA on this. I am not aware of any CSS that could fix the remaining issues, so we may need to wait for the fix on our end.

denisegoldberg wrote: »

John -
I've seen two things on the couple of sites I've looked at so far that are ranked as not mobile friendly.

Site pages / galleries are showing as too wide because the breadcrumb extends beyond the edge of the device. Someone - I think probably leftquark - gave me this CSS to fix the breadcrumb on mobile devices:

/* correct breadcrumb display on mobile devices */
@media screen and (max-width: 670px) {
/* Wrap long breadcrumb titles */
.sm-breadcrumb {
white-space: normal !important;
}

/* Make the breadcrumb font smaller for mobile devices that don't have long screen widths */
.sm-breadcrumb-item h1 {
font-size: 20px !important;
}
}

It would be nice if the breadcrumb CSS wasn't needed, if the presentation was just right for the device. But it's an easy fix.

The other thing I've seen is folks choosing to use fixed width instead of stretchy.

--- Denise

denisegoldberg

JohnHero wrote: »

Denise ,

At this point, there are some content blocks that are causing SmugMug sites to not pass the Mobile Friendly test. We are working on getting these all working, but at this point do not have a n ETA on this. I am not aware of any CSS that could fix the remaining issues, so we may need to wait for the fix on our end.

Thanks, that's good information.

I figured you were aware of the things I mentioned in my previous post but I figured it was worth noting. There are a set of sites that can be fixed - the ones that don't include the problem content blocks that you mentioned.

--- Denise

JohnHero

Denise, You are very welcome Thank you for gathering as much info as you have already and assisting the dgrin users to get what they can working with this. We really appreciate it

mthibodeau

Hi John,
Do you know when you might have an ETA on these fixes? Google has set a deadline of April 21st, and if SM isn't going to have fixes by then, I need to move my site since I can't figure out why my site isn't friendly since it was, then it wasn't.
Thanks.

JohnHero

We are currently aware of the deadline and doing what we can to try and get things all patched up before it. With that said, I still do not have an ETA on when this might get fixed. I wish I had a definite answer for you.

mthibodeau

Thanks, John.

If anyone else has any ideas about why my site isn't working, I'm grateful to receive them. The PageSpeed Insights stuff, etc. I'm stumped and the resources I'm finding on Google are not that helpful -- if I already knew what they were talking about, I wouldn't need to know what they were talking about.

leftquark

We're currently working on a fix to ensure that SmugMug sites will pass the Google Mobile-Friendly Test. When set to Stretchy, your sites should already render on mobile devices but we do want to make sure that this new Mobile-Test does not hurt your SEO rankings. I'll let you know more when I can.

The "Slideshow" content block is one of the major causes of the failures. We have some changes in test that should fix this. I noticed you had the slideshow on your homepage, which may be one of the cultprits.