> With Android/2.2.2 [low-end touch screen] there is a horizontal yellow 
> loading bar above the address bar-- it begins at the left rail and moves to 
> the right rail. Opera Mobile and OperaMini on Android both have a circular 
> whirling gizzmo loading button [same on a low-end SanyoMirro]. 

But it's iOS Safari that some people were talking that loads all images, not 
Andriod, not Opera Mini.

So if I have 

main style sheet

body {background : url(bg-img.png)  }

then this

@media screen and (max-width:768px){ body { background:gray 
url(bg-bodytop-768.jpg) no-repeat left center} } 

 iOS Safari does load two images this is how I always understood it, but if I 
target images in the media queries than no extra bg image will be loaded and 
this is what I learned later from Ethan Marcotte's book, but I have never seen 
an article that tells how you can test what elements get loaded in the mobile 
Safari (I don't think it's accurate seeing it from a simulator or Desktop 
version of Safari). In his book, he didn't give a clear demostration either but 

"First, we’re setting a background image on the .blog ele- ment. (Specifically, 
the two-toned blog-bg.png graphic we used in Chapter 2 to create the illusion 
of two columns.) Then for smaller displays, those narrower than 768px wide, 
we’re instead placing a simple tiled GIF on the blog element, since we’ve 
linearized the display of those narrower pages.
The problem with this approach is that some small screen browsers, most notably 
Mobile Safari on the iPhone and the iPad, will actually download both graphics, 
even if only one is ultimately applied to the page. While smaller screens don’t 
always equate to lower bandwidth, we’re currently punishing users on smaller 
screens with the download of a much heavier image than they’ll ever see.
Thankfully, these aren’t problems with responsive design in and of itself—we 
just need to rethink the way we’ve imple- mented it."

"In fact, I took this approach on my personal portfolio site 
(http://ethanmarcotte.com). By default, the content is arranged in a very 
linear manner, one friendly to mobile devices and narrow browser windows (Fig 
5.12). But as the viewport wid- ens, the grid becomes more complex and more 
asymmetrical (Fig 5.13). And at the highest end of the spectrum, the “full” 
design finally reveals itself: the layout becomes even more complex, and some 
heavier assets, like that big abstract back- ground image, are introduced (Fig 

And this is all I learned that images that are placed in media queries won't 
get loaded twice, or all.

Using Safari's Web Inspector I see 4 bg images were loaded in my previouis 


List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org

Reply via email to