SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    424
    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,868
    Mentioned
    38 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
    5,340
    Mentioned
    179 Post(s)
    Tagged
    9 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
    424
    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
    5,340
    Mentioned
    179 Post(s)
    Tagged
    9 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
    424
    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
  •