Page 2 of 2 FirstFirst 12
Results 11 to 18 of 18

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

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

    Default

    Wow, thanks so much! I knew nothing about css media queries. Thanks for pointing me in the right direction. I still would like to know how best to deal with images. I learned originally that you should specify the width & height to speed up the image display, but I'm wondering if, to be mobile friendly, perhaps you do something like <img src="photo.jpg" style="max-width:100%" > within a <div> that is set to a percentage width. Would that work?

    And for slideshows like Swiss Army, do you specify the div that holds the slideshow with percentage widths as well? All my sites have fixed widths wider than 900. Should I make them narrower, or should I change everything to percentages? Thanks, aa

  2. #12
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,734
    Thanks
    46
    Thanked 216 Times in 209 Posts
    Blog Entries
    53

    Default

    You could do things like the following:
    Code:
    <div style="position: absolute; height: 30%; ">
    <img src="http://www.dynamicdrive.com/forums/image.php?u=22058&dateline=1218538433" alt="" style="height: 100%; min-height: 100px">
    </div>
    
    <div style="position: relative; width: 30%; ">
    <img src="http://www.dynamicdrive.com/forums/image.php?u=22058&dateline=1218538433" alt="" style="width: 100%; min-width: 100px">
    </div>
    To avoid distorsion of the images, it's better to give them either width or height, not both.

  3. #13
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    A really easy way to deal with images in responsive design is to do this;
    Code:
    img { /* basic responsive img */
    	max-width: 100%;
    	height: auto;
    	width: auto\9; /* IE8 */
    }
    this will make all images scale proportionally within their container (they won't break out and skew your layout) and it works back to IE7 as well as modern browsers. Plus, no extra markup required.

    Slideshows (depending how they're constructed) can be a little more difficult to deal - those that use divs with background images don't behave the same way as img tags - but there are workarounds. Method #2 from this blog entry tends to be a good fallback solution and works well with divs and video http://www.dynamicdrive.com/forums/e...ponsive-Design
    Last edited by Beverleyh; 03-20-2015 at 06:35 PM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  4. The Following User Says Thank You to Beverleyh For This Useful Post:

    kuau (03-21-2015)

  5. #14
    Join Date
    Aug 2004
    Posts
    10,138
    Thanks
    3
    Thanked 1,007 Times in 992 Posts
    Blog Entries
    16

    Default

    The most common approach for making images responsive is, as you've mentioned already, to give it a max-width: 100% and height: auto attributes:

    Code:
    <img src="myimage.jpg" style="max-width:100%;height:auto;">
    This in conjunction with placing the image inside a container that's fluid (ie: has a percentage width or the BODY tag itself) or responsive (using CSS media queries) will make the image scale up and down at the same time as its container. So again the devil's in the details of where your images are placed within your layout.

    For JavaScript slideshows, making them mobile friendly is a different process for each specific script, assuming they are not mobile friendly to begin with. In the case of Swiss Army it isn't yet, though other scripts like Ultimate Fade In Slideshow are, so you might want to consider using that one until we get to upgrading the former as well for that purpose.
    DD Admin

  6. The Following User Says Thank You to ddadmin For This Useful Post:

    kuau (03-21-2015)

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

    Default

    Dear B: Thanks so much... great information! I have never ventured into this part of css... been out to lunch I guess LOL. I haven't had time to try anything yet, but I'm just wondering if making a site mobile-friendly will screw up the desktop version (?).

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

    Default

    Thank you! I used to use Ultimate Fade In Slideshow. I'm sure there was a reason why I switched to Swiss Army, but can't recall at the moment. I'll check it out. I really appreciate all the great feedback.. mahalo! aa

  9. #17
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Quote Originally Posted by kuau View Post
    Dear B: Thanks so much... great information! I have never ventured into this part of css... been out to lunch I guess LOL. I haven't had time to try anything yet, but I'm just wondering if making a site mobile-friendly will screw up the desktop version (?).
    Not really - you can retro-fit a desktop layout to make it fit narrower screens.

    You may have heard of the term "mobile first" on your web travels, which (amongst other things pertaining to performance, accessibility and usability that I won't go in to here) means that a site has been developed with a narrow, linear layout in mind first; all default CSS for a site that looks and works nicely in mobile proportions comes at the top of a style sheet, then, media queries are added to target progressively wider screens (whenever your layout needs adjusting);
    Code:
    /* default skinny screen CSS here */
    
    @media ( min-width:35em ) { 
        /* CSS for screens that are wider than 560px */
    }
    
    @media ( min-width:50em ) { 
        /* CSS for screens that are wider than 800px */
    }
    
    @media ( min-width:64em ) { 
        /* CSS for screens that are wider than 1024px */
    }
    You can use px or other units for media queries, although it's preferable to use relative units (ems) due to more predictable browser scaling. Useful info here http://bradfrost.com/blog/post/7-hab...ries/#relative The default font-size for browsers tends to be 16px so you work out your desired em value by dividing the number of target pixels by 16 (1024px / 16px = 64em)

    Anyway, the above media queries are for a mobile first approach. But you can use them in reverse to tackle a desktop layout that progressively downscales to narrower tablet then mobile widths;
    Code:
    /* wide desktop CSS here */
    
    @media ( max-width:60em ) { 
        /* CSS for screens that are narrower than 960px */
    }
    
    @media ( max-width:50em ) { 
        /* CSS for screens that are narrower than 800px */
    }
    
    @media ( max-width:37.5em ) { 
        /* CSS for screens that are narrower than 600px */
    }
    This is one of the ways to work a desktop layout backwards so that it becomes size-appropriate for mobiles.

    Be aware that the retro-fitting/reverse approach usually leads to more CSS overrides and therefore bigger stylesheets, plus a greater use of display:none; to hide content that doesn't "work" on mobile.

    Menus can be challenging too so you might find some useful info here http://bradfrost.com/blog/web/responsive-nav-patterns/

    Hope that helps
    Last edited by Beverleyh; 03-21-2015 at 03:54 PM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  10. The Following User Says Thank You to Beverleyh For This Useful Post:

    kuau (03-21-2015)

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

    Default

    Wow, you are a goldmine of exactly what I need to know. I wish I had asked this question 5 years ago! Thanks so much. I have a lot of homework to do!

Similar Threads

  1. html5 mobile page sliding issues
    By mutago in forum HTML
    Replies: 0
    Last Post: 11-13-2014, 08: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, 04: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
  •