Results 1 to 14 of 14
  1. #1
    The affiliate formerly known as ojmoo
    Join Date
    January 18th, 2005
    Posts
    1,466
    Google and adaptive design
    As you know (or should know) google decided it was its job to 'fix the internet' So they decided to let you know through their webmaster site if your can be viewed nicely on mobile. They also decided that to be viewed nicely on mobile means viewed nicely on a screen 320 wide.

    My site is complex and so the only way to make my site viewable on a screen that small is to know that size of the screen and leave out certain non key elements so it fits right. The problem with this is I have to know the size of the screen to make the changes.

    OK, I found a way using the session_start(); function. Now my site is pretty on very small devices and on regular sized devices. Now the rub to use this, my site needs a small extra time before rendering to get this information, maybe 6 or 7 tenths of a second. NO a big deal, but google wants my server response time in under 2. So now I'm getting bad on my desk time measurements.

    Are they trying to drive me mad?

    I might be able to use css to make my site look find on screens 640 and larger, but 320 not possible without removing elements instead of just moving them. What are your thoughts on the matter?
    Expert who says Moo

    a.k.a. OJMOO

    Cow Dance


  2. Thanks From:

  3. #2
    ...and a Pirate's heart. Convergence's Avatar
    Join Date
    June 24th, 2005
    Posts
    6,918
    Quote Originally Posted by oranges View Post
    What are your thoughts on the matter?
    The Google thinks some of our navigation text is too small on some mobile devices and/or too close together.

    However, on real mobile devices used by real people the site looks and functions just fine -= we do well with mobile traffic/conversions as well.

    That being said, it will be soon where the Google will only send mobile traffic to a site that meets It's requirements. So, perhaps this year we will create a 'mobile' only site and give visitors the option, not the Google...
    Salty kisses, Sandy toes, and a Pirate's heart...

  4. #3
    The affiliate formerly known as ojmoo
    Join Date
    January 18th, 2005
    Posts
    1,466
    I am not worried about the text too small or too close since you can have that and still have a score over 85 which is the 'green point' They are more worried about what is off screen. But this timing thing for desktops is for them a major consideration. The big problem is that they think it had to fit on a 320 px screen. That might be true 5 years ago, but now the screens have at least twice or three times the pixels than that. It's just nuts. As I said the problem is that there is no way to get the size of a persons screen quickly since its a user side application not a server side and thus it takes several tenths of a second. Which doesn't seem to be a long time, but Google doesn't like that

    The problem with that is that if you do that, you will have duplicate content
    Expert who says Moo

    a.k.a. OJMOO

    Cow Dance


  5. #4
    ABW Ambassador isellstuff's Avatar
    Join Date
    November 9th, 2005
    Location
    Virginia
    Posts
    1,659
    Think I mentioned this before, but I'm using this regular expression to recognize mobile browsers (phones, not tablets).

    Detect Mobile Browsers - Open source mobile phone detection

    So it seems fairly accurate to me, I used chrome's user agent emulation to test and it seem to work for every test case I found. I too leave out screen elements for mobile browsers.

    I've currently got a 80/100 mobile user experience score in Google's webmaster tools. It wants me to fix my tap targets and inline my javascript and css. I'm not really inclined to do any of this work.
    Merchants, any data you provide to Google Shopping should also be in your affiliate network datafeed. More data means more sales!

  6. #5
    ...and a Pirate's heart. Convergence's Avatar
    Join Date
    June 24th, 2005
    Posts
    6,918
    Quote Originally Posted by oranges View Post
    The problem with that is that if you do that, you will have duplicate content
    No such thing as duplicate content on your own site - per the Google...
    Salty kisses, Sandy toes, and a Pirate's heart...

  7. #6
    ...and a Pirate's heart. Convergence's Avatar
    Join Date
    June 24th, 2005
    Posts
    6,918
    Quote Originally Posted by isellstuff View Post
    I've currently got a 80/100 mobile user experience score in Google's webmaster tools.
    Where, pray-tell, is this score located in WMT?
    Salty kisses, Sandy toes, and a Pirate's heart...

  8. Thanks From:

  9. #7
    ABW Ambassador isellstuff's Avatar
    Join Date
    November 9th, 2005
    Location
    Virginia
    Posts
    1,659
    Quote Originally Posted by Convergence View Post
    Where, pray-tell, is this score located in WMT?
    Other Resources -> PageSpeed Insights


    They have a section for mobile/desktop user experience in addition to speed.
    Merchants, any data you provide to Google Shopping should also be in your affiliate network datafeed. More data means more sales!

  10. Thanks From:

  11. #8
    The affiliate formerly known as ojmoo
    Join Date
    January 18th, 2005
    Posts
    1,466
    isellstuff: interesting. Thinking about it, I should do it in a two step process. First see if the user is on a mobile device then if they are run the function that determines the size of the screen. Because if they are on a later edition iphone for example which has a screen size of 1000+, I don't want to change anything. I think this will work.

    Do you check the screen size too or just if it's a mobile phone?

    For everyone, here is the code in php (it also uses javascript) to determine the screen size of your user. I didn't write this code and I forgot which site I got it from. But it works.

    session_start();
    if(isset($_SESSION['screen_width']) AND isset($_SESSION['screen_height'])) { }
    elseif (isset($_REQUEST['width']) AND isset($_REQUEST['height']))
    {
    $_SESSION['screen_width'] = $_REQUEST['width'];
    $_SESSION['screen_height'] = $_REQUEST['height'];
    header('Location: ' . $_SERVER['PHP_SELF']);
    }
    else
    { echo '<script type="text/javascript">window.location = "' . $_SERVER['PHP_SELF'] . '?width="+screen.width+"&height="+screen.height;</script>'; }
    $screenwidth = $_SESSION['screen_width']; // variable containing screen width
    $screenheight = $_SESSION['screen_height']; // variable containing screen height
    Last edited by Phil Kaufman aka AffiliateHound; January 22nd, 2015 at 08:58 PM.
    Expert who says Moo

    a.k.a. OJMOO

    Cow Dance


  12. #9
    The affiliate formerly known as ojmoo
    Join Date
    January 18th, 2005
    Posts
    1,466
    I checked it out using both techniques work. Here is the complete code as best I can figure it out. I'm not going to document what it does exactly but you should be able to figure it out.

    // find mobile phones
    $useragent=$_SERVER['HTTP_USER_AGENT'];
    if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
    {
    session_start();
    if(isset($_SESSION['screen_width']) AND isset($_SESSION['screen_height'])) { }
    elseif (isset($_REQUEST['width']) AND isset($_REQUEST['height']))
    {
    $_SESSION['screen_width'] = $_REQUEST['width'];
    $_SESSION['screen_height'] = $_REQUEST['height'];
    header('Location: ' . $_SERVER['PHP_SELF']);
    }
    else
    {
    $arg2 = $_SERVER['QUERY_STRING'];
    echo '<script type="text/javascript">window.location = "' . $_SERVER['PHP_SELF'] . '?width="+screen.width+"&height="+screen.height+$arg2;</script>';
    }
    $screenwidth = $_SESSION['screen_width'];
    }
    else { $screenwidth = 1000; } // if its not a smart phone give an arbitrary screen width
    // Note: this is the width of the screen not the width of the window
    Last edited by Phil Kaufman aka AffiliateHound; January 22nd, 2015 at 08:58 PM.
    Expert who says Moo

    a.k.a. OJMOO

    Cow Dance


  13. #10
    Full Member
    Join Date
    January 18th, 2005
    Location
    K&Y
    Posts
    448
    My religious belief is the responsiveness must be added by HTML+CSS only. There are ways to move/hide/zoom pretty much everything. Doing it on the server side is a bit amazonish and seems like more work when something needs to be changed.

    About the loading time etc, Google suggests some ways to improve it, like moving loadables to the end of html and using some provided JavaScript to load external files (css, fonts). I've tried it all and didn't see any difference in rankings, although in the WMTools Google seemed happy, but I don't really care about that part anymore, I might revisit the ideas later.

  14. #11
    The affiliate formerly known as ojmoo
    Join Date
    January 18th, 2005
    Posts
    1,466
    My code is somewhat in error. Someone please remove that post...and this one too :-)
    Expert who says Moo

    a.k.a. OJMOO

    Cow Dance


  15. #12
    ABW Ambassador isellstuff's Avatar
    Join Date
    November 9th, 2005
    Location
    Virginia
    Posts
    1,659
    So I don't look at the screen size, just mobile browsers. My mobile website resizes to 100% of the available screen. On desktop, I've got a fixed size. On mobile the layout is dynamic.

    Adaptive web layouts is the "in thing" now a days. CNN rolled out a new adaptive website at the beginning of the year. Its been a disaster for them with their mobile website being practically unusable due to too many external calls, javascript, image heavy design, etc.

    Personally, I think a streamlined mobile UI makes a lot of sense and given how bad mobile conversion rates are, I like the idea of allocating fewer server resources to people on mobile. So for instance my mobile website search is reduced and consumes much less CPU than searches that originate on the desktop.
    Merchants, any data you provide to Google Shopping should also be in your affiliate network datafeed. More data means more sales!

  16. #13
    The affiliate formerly known as ojmoo
    Join Date
    January 18th, 2005
    Posts
    1,466
    My above code was wrong. Here is the corrected code that takes into effect the original query string.
    [query]
    $useragent=$_SERVER['HTTP_USER_AGENT'];
    if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
    {
    session_start();
    if(isset($_SESSION['screen_width']) AND isset($_SESSION['screen_height'])) { }
    elseif (isset($_REQUEST['width']) AND isset($_REQUEST['height']))
    {
    $_SESSION['screen_width'] = $_REQUEST['width'];
    $_SESSION['screen_height'] = $_REQUEST['height'];
    foreach($_GET as $key => $value) {
    $_SESSION[$key] = $_GET[$key];
    }
    header('Location: ' . $_SERVER['PHP_SELF']);
    }
    else
    {
    $arg2 = $_SERVER['QUERY_STRING'];
    echo '<script type="text/javascript">window.location = "' . $_SERVER['PHP_SELF'] . '?' . $arg2 . '&width="+screen.width+"&height="+screen.height</script>';
    }
    $screenwidth = $_SESSION['screen_width'];
    $screenheight = $_SESSION['screen_height'];
    foreach($_SESSION as $key => $value) {
    if (!stristr("screen_width,screen_height",$key)) {
    $_GET[$key] = $_SESSION[$key];
    }
    }
    }
    else { $screenwidth = 1000; } // arbitrary screen length for desktops and tablets
    [/query]
    Last edited by Phil Kaufman aka AffiliateHound; January 22nd, 2015 at 08:59 PM.
    Expert who says Moo

    a.k.a. OJMOO

    Cow Dance


  17. Thanks From:

  18. #14
    ABW Ambassador JoyUnltd's Avatar
    Join Date
    January 19th, 2005
    Location
    Emerald City
    Posts
    2,019
    Quote Originally Posted by login View Post
    About the loading time etc, Google suggests some ways to improve it, like moving loadables to the end of html and using some provided JavaScript to load external files (css, fonts). I've tried it all and didn't see any difference in rankings, although in the WMTools Google seemed happy, but I don't really care about that part anymore, I might revisit the ideas later.
    Install Varnish. You'll need root access.
    Renée
    Pay no attention to that woman behind the curtain. -Wizardress of Oz

  19. Newsletter Signup

+ Reply to Thread

Similar Threads

  1. Replies: 0
    Last Post: July 30th, 2014, 12:24 PM
  2. Responsive, Adaptive: What's the difference?
    By Rhia7 in forum Newbie Affiliate FAQs & Helpful Articles
    Replies: 0
    Last Post: February 24th, 2014, 10:45 AM
  3. what will happen to my google rank if ill re-design my website??
    By shamrock in forum Search Engine Optimization
    Replies: 3
    Last Post: December 15th, 2001, 10:04 PM

Posting Permissions

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