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

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 :)

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.

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

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.

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 (?).

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 :)

Quote:

---

Originally Posted by kuau

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

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! :)

Was Swiss Amy Slideshow ever made mobile friendly? I love that slideshow (thanks, John!).

By no means. However, there is a very good approximation in the current version of DD's:

http://www.dynamicdrive.com/dynamici...nslideshow.htm

For which I've update my Extra Buttons add on:

http://www.dynamicdrive.com/forums/e...e-in-slideshow

I'm also working (truth be told it's on the back burner for now) on a successor to Swiss Army, but it's currently without a lot of documentation, and is a completely different sort of script. Beta:

http://jscheuer1.com/cssimages/imagesdemo.htm

and:

http://jscheuer1.com/cssimages/imagesdemo2.htm

Might have some bugs, etc. But I was pretty impressed with it last I was messing with it. Main issue for me were the docs. If you like it, and think it works well on mobile (please check), perhaps you can help me refine the documentation. I did start writing them. Not sure if I have any of that (docs) live yet, though the code is pretty well commented.