SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    438
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    How responsive websites load images/RWD questions

    Hi,

    I'm looking as media queries and responsive websites and have three questions:

    1. If you have largebgimage.jpg as a background image and smallbgimage.jpg as a background image set in your CSS, will it load both images regardless? Or will it depend on the width of the browser at load time? From what I can see the main con of RWD is that, for mobiles, it is heavy on bandwidth.
    2. Is there a guide anywhere that shows support for media queries on different browsers/devices?
    3. What's the difference in media queries between max0width and max-device-width?

    Thanks.

  2. #2
    SitePoint Mentor NightStalker-DNS's Avatar
    Join Date
    Jul 2004
    Location
    Cape Town, South Africa
    Posts
    2,880
    Mentioned
    48 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I have been out of this for a while now, but I will answer your questions the best I can.

    1. With media queries, it will load only the images and elements as needed based on screen size. So it will save on bandwidth.
    2. http://caniuse.com/css-mediaqueries
    3. Should basically just be support. I would go with max-device-width

    Good luck

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,045
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    With regard to point three I just wanted to elaborate a little on what NightStalker said:

    As you probably know, width is the width of the browser viewport, whereas device-width is the width of the device's screen.
    However, please also bear in mind that width is measured in CSS pixels, whereas device-width is measured in device pixels. The latter value (device-width) does not change on a device and thus cannot be used to switch style sheets or CSS directives as the screen is rotated or resized.

    If you're interested, you can try this out:
    This example is for an iPhone3 (or any other device with a 320px device width), but you can tailor it to suit.

    Here, the colour of the heading will change as you rotate the device from landscape to portrait:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
        <title>Responsive demo width</title>
        <style>
          @media screen and (max-width : 320px) {
            h1 {color: blue};
          }
          
          @media screen and (min-width : 321px) {
            h1 {color: red};
          }
        </style>
      </head>
      
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>

    In this example, it doesn't matter how you hold your phone, the device width is constant (320px) and the second rule will never be applied:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
        <title>Responsive demo device-width</title>
        <style>
          @media screen and (max-device-width : 320px) {
            h1 {color: blue};
          }
          
          @media screen and (min-device-width : 321px) {
            h1 {color: red};
          }
        </style>
      </head>
      
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>
    In short:
    You are going to be a lot more flexible using min-width and max-width, as it will adapt to screen size on the fly.
    You might consider using device-width if you are just trying to target small devices with a separate stylesheet.

    There's a really good video by PPK (and also an article) which goes into more detail.[/QUOTE]

  4. #4
    SitePoint Zealot Spartinman's Avatar
    Join Date
    Nov 2009
    Location
    Florida USA
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just something to note, i have run into some bad responsive web designes, some i worked with wordpress templates, and they were not all that friendly with some mobile devices and the formatting they scale down to. Just something to ponder over when choosing a responsive design to be a strong contender for mobile traffic.

  5. #5
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    438
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the responsive posts (pun intended!). Very useful.

    Regarding point 1, I have heard it said that RWD is less bandwidth-efficent than a mobile site. Is this because developers tend to use high-res images and set the width to a %? So on smaller devices they aren't viewing an optimised image. If so, is there any way to serve images dynamically, based on size? What I like about mobile sites is it's easy to control exactly what is being sent.

    So, just to reiterate, if you do a media query that contains a background-image, it will find the rule that applies and only load that image. Correct?

    Thanks again.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,045
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by DrQuincy View Post
    So, just to reiterate, if you do a media query that contains a background-image, it will find the rule that applies and only load that image. Correct?
    Although that is essentially how I understand it should work, it is unfortunately a tad more complicated and varies from browser to browser.
    Perhaps this article might help: http://timkadlec.com/2012/04/media-q...ading-results/
    In particular, look at test four which describes what you are asking here.

  7. #7
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    438
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Great link, thanks!


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
  •