Results 1 to 6 of 6

Thread: Will Fade-in work with mobile phones?!

  1. #1
    Join Date
    Jun 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Will Fade-in work with mobile phones?!

    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
    Last edited by jscheuer1; 01-27-2011 at 07:20 AM. Reason: fix broken link

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    handheld

    Example:

    HTML Code:
    <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
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    OK - thanks John.

    Cheers

    Geoff

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 01-28-2011 at 03:48 PM. Reason: add second paragraph
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •