Will Fade-in work with mobile phones?!

[geoffcox]

1) Script Title: Ultimate Fade-in Slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:

I am trying to find out how to configure Fade-in so that the slide show area gets less as the window size gets less.

I guess this is important for people viewing websites using a mobile phone?!

Can I do this with v2.4?

Cheers

Geoff

[jscheuer1]

Most hand held devices, more particularly their browsers, either take care of that for you or have a button, screen gesture, whatever that the user can do to make something like that, anything really, a convenient size.

What you can do to assist in that is to lay out your page as simply as possible, and to make sure it validates to the DOCTYPE you are using, which should be one that invokes standards compliance in the browser:

http://www.javascriptkit.com/howto/doctype.shtml

[geoffcox]

John,

I used a Blackberry yesterday to look at some of my sites and the full pages showed up, no need for any horizontal scrolling, but the text was then too small to read so the phone's magnifyer tool had to be used.

The person who owned the phone told me that if he has an alternative to such a site, one which has been written with a mobile phone in mind, then he goes to that one.

This makes me think I need 2 versions of my websites - one for desktops and one for smaller screen devices. The Fade-in images would then have to be smaller I guess ...

Do you agree with this approach?

Cheers

Geoff

[jscheuer1]

I'd try using the media attribute for style and/or stylesheet link tags. The media attribute for hand held devices is:

handheld

Example:

<link rel="stylesheet" href="main.css" media="screen" type="text/css">
<link rel="stylesheet" href="mobile.css" media="handheld" type="text/css">

In the mobile.css you can include everything from the main.css (@import) and then modify key styles for use on a smaller screen. See also:

http://www.w3.org/TR/CSS2/media.html#media-types

[geoffcox]

OK - thanks John.

Cheers

Geoff

[jscheuer1]

There is another method that I hesitate to mention because it's at least potentially fraught with cross device/browser issues, and is a bit complicated.

That would be to somehow establish a font-size for the page, perhaps using the method I just mentioned, that would be device dependent, or simply relying upon the user to choose an appropriate font size - in other words, don't specify any. Then set all of your dimensions in em units. To arrive at the em units divide the effective (best to use % here when setting it) pixel font-size by 16 and divide the desired or actual pixel dimension in a 'normal' layout by that result. That will give you the em dimension, and this will vary as to the number of pixels it represents depending upon the user's font-size for the page. But the beauty of it is, if you work it out correctly, the user changing font size or using some preferred default to make the text the right size, will then resize containers and images automatically. Now if in your layout and styles the font-size gets redefined for any container, then em units within it must be recalculated on the basis of the above formula. In such a scheme, if you do specify font-size at all, best to use only % units. It's OK to use a pixel unit for the entire page though, but % is to be preferred even for that, if it's workable for the rest of the scheme.

But this all assumes that as the screen real estate becomes smaller (usually due to lower resolution, but could be actual screen size), the desired font size becomes smaller as well. This would trigger overall smaller dimensions for layout and images. Things should just work out. But a page that ignores all of these things and makes no attempt at proportional sizing should be, as I first said, very easy to adapt by the end user, even if their default view isn't ideal, but often times it will be ideal due to default zoom levels.