Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: How to comply with Google's demand to Fix mobile usability issues?

  1. #1
    Join Date
    Sep 2007
    Location
    Maui
    Posts
    611
    Thanks
    272
    Thanked 13 Times in 13 Posts

    Default How to comply with Google's demand to Fix mobile usability issues?

    Over the past few days I have been flooded with emails from Google Webmaster Tools advising me to "Fix mobile usability issues found on..." virtually all my websites. I understand that Google will start penalizing sites in search results that are not mobile friendly. I have read all of Google's suggestions and I would like to comply but, to be honest, I cannot figure out how to go about it. On all of my sites I use css to define a set width for the site. Is the best solution to change all my width specs to percentages? And font sizes to percentages? I use a lot of images. How can I possibly define images dimensions as percentages? I use the Swiss Army Slideshow a lot, and the Anylink Menu script. How can they be made mobile-friendly? Are there responsive versions of these scripts? Or should I switch to different scripts?

    Is it better to have 2 versions of websites, one for desktop and one for mobile? If so, do you code that in the <head> section so it is auto-detected, or do you place links in the html? My sites are all database driven and for the most part the image dimensions are stored in a database table. I really have no clue how to even begin to convert my sites to responsive designs. I also do not have a smart phone so cannot even try things out. Any help would be greatly appreciated.

    Mahalo, aa

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,527
    Thanks
    33
    Thanked 177 Times in 171 Posts
    Blog Entries
    42

  3. The Following User Says Thank You to molendijk For This Useful Post:

    kuau (03-21-2015)

  4. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,527
    Thanks
    33
    Thanked 177 Times in 171 Posts
    Blog Entries
    42

    Default

    Putting this:
    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    in the head of my pages forced Google to analyze them as mobile friendly.
    You can test your pages here.

  5. #4
    Join Date
    Jan 2009
    Location
    NH
    Posts
    455
    Thanks
    71
    Thanked 11 Times in 11 Posts

    Default

    OMG I've been getting a ton of those emails too and I did have in <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,527
    Thanks
    33
    Thanked 177 Times in 171 Posts
    Blog Entries
    42

    Default

    Here's my understanding of 'responsive' and 'mobile-friendly'. Correct me if I'm wrong.
    'Responsive' and 'mobile-friendly' are not identical things.
    A site is mobile-friendly if all its content is readable on any device. So a menu or an image that exceeds the width or height of the screen does not make the site mobile-unfriendly if wiping allows the visitor to see all of the menu or the image. In such a case, the site may be unresponsive without being mobile-unfriendly.
    A site is unresponsive if it does not adapt to the size of the screen (of the device). A horizontal menu whose length (from left to right) does not adapt to the horizontal size of the screen makes the site unresponsive. But who cares as long as it is mobile-friendly? Google will not penalize you for unresponsiveness, but it will do so for mobile-unfriendlyness.

  7. The Following User Says Thank You to molendijk For This Useful Post:

    kuau (03-21-2015)

  8. #6
    Join Date
    Sep 2007
    Location
    Maui
    Posts
    611
    Thanks
    272
    Thanked 13 Times in 13 Posts

    Default

    Interesting. I did think they were synonymous, but you're probably right.

  9. #7
    Join Date
    Sep 2007
    Location
    Maui
    Posts
    611
    Thanks
    272
    Thanked 13 Times in 13 Posts

    Default

    I added that line to the head of my pages and it made it worse, showing only a phone sized section of my home page. What I would really like to do is learn how to adapt the css and slideshows so that they are in fact mobile-friendly. Does anyone know how to do that?

  10. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,527
    Thanks
    33
    Thanked 177 Times in 171 Posts
    Blog Entries
    42

    Default

    This suggests that your pages don't validate. Have you tried the WC3 Markup Validation Service for your pages?

  11. #9
    Join Date
    Sep 2007
    Location
    Maui
    Posts
    611
    Thanks
    272
    Thanked 13 Times in 13 Posts

    Default

    Thanks. I checked it and it validated with only one warning, which I have no idea what it means...

    Using experimental feature: HTML5 Conformance Checker.

    The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. If you find any issues with this feature, please report them. Thank you.

  12. #10
    Join Date
    Aug 2004
    Posts
    10,040
    Thanks
    3
    Thanked 989 Times in 975 Posts
    Blog Entries
    15

    Default

    This is a rather expansive topic, but in general when Google complains of your site not being mobile friendly, it's referring mainly to the layout of your page and font size, and not the scripts on your page. Adding a viewport tag is just the very first step in optimizing your site to be mobile friendly (and Google compliant):

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    If that's all you did with no other changes to your page's CSS to optimize the viewing experience for smaller screen devices, then you're actually doing more harm than good, making the page even more cumbersome to view with the additional scrolling and panning to get to the desired part of the page.

    The next step is to examine the layout of your page, and start using CSS media queries to selectively hide non essential portions of your page as the screen size gets smaller, such as the left side bar, banner or header images that exceed the width of the target viewing device etc. The goal is to end up with just your primary content that can be viewed comfortably by the mobile user without the need to scroll horizontally or squint to read it. For example, in your CSS file, you might add the following CSS to enlarge the default font size of the page and hide the left side bar of your page once the width of the browser falls below 740px:

    Code:
    @media (max-width: 740px){ /* responsive layout break point */
    
    	body{
    		font-size: 1.1em;
    		line-height: 1.5em;
    	}
    	
    	#leftcolumn{
    		display: none;
    	}
    
    }
    Test out your page against various different browser dimensions to see how the page reacts based on CSS media queries you've added to your page to simulate how it will look on mobile devices, and if the viewing experience is optimal.

    Using CSS media queries alone should help you pass mustard with Google, but to make your site truly responsive, you may need to modify the markup of your page as well to use a responsive layout such as those offered in our CSS layouts section. Or you can take things a step further and use a responsive CSS framework such as Bootstrap.
    DD Admin

  13. The Following 3 Users Say Thank You to ddadmin For This Useful Post:

    kuau (03-20-2015),mlegg (03-20-2015),molendijk (03-20-2015)

Similar Threads

  1. html5 mobile page sliding issues
    By mutago in forum HTML
    Replies: 0
    Last Post: 11-13-2014, 07:40 PM
  2. Replies: 2
    Last Post: 08-25-2014, 01:14 PM
  3. Replies: 0
    Last Post: 09-23-2011, 11:12 AM
  4. google issues?
    By traq in forum Computer hardware and software
    Replies: 16
    Last Post: 09-29-2010, 11:07 PM
  5. Expando Usability
    By zzAd66 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-06-2009, 03:42 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •