SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using CSS for mobile platforms

    Hi, I am building a mobile version of a website and hoping to achieve that using CSS3 media queries instead of sniffing browsers and redirecting to a mobile version.

    I am wondering if there is a good way to resize images dynamically (or load a different image) using CSS, to save mobile bandwidth? i.e. if the width of the device browser is 320px, doesn't make sense to load a 500px wide image right?

    Any pointers / resources for this will be much appreciated!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    If the mobile version is at a different domain, then just use a smaller image in the HTML. But it sounds like you are just offering different styles for the same site when it appears on a mobile device. In that case, I think you can only control background images—that is, link to a different (smaller) image as a background image via CSS. Media queries can't affect the actual HTML content. Even if you set one image to display: none and the alternative image to display, I think the browser still downloads the display: none image (but I'm not certain of that, so we'll have to await more knowledgeable replies .)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I would do as Ralph says and use background images so that you can link to a different image for the smaller screen.

    As a general rule images are only downloaded when they are presented on screen (or off screen id negative positioning is used) and not generally loaded width display:none (which is why pre-loading techniques either place the images off screen or make them 1px high).

    You can find a good article here:

    http://www.smashingmagazine.com/2010...-your-website/

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    As a general rule images are only downloaded when they are presented on screen (or off screen id negative positioning is used) and not generally loaded width display:none
    Wow, very interesting. Didn't know that, but did wonder about it. Thanks Paul.

  5. #5
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul and Ralph. Its interesting to know that display:none images are not loaded.

    Looks like there is still some loopholes in getting the sites easily migrate-able to mobile platforms. Can't expect my clients to code CSS background images!


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
  •