Current time: 11-01-2014, 05:11 AM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How does WPT respond to responsive layouts?
04-26-2012, 10:59 AM
Post: #1
How does WPT respond to responsive layouts?
In my case responsive means that i have a large and small version of the site to handle various screen sizes, which will either be handled by using media queries and setting unneeded elements to display:none; or using jquery to test for the browser size and having that set to load a separate html. How does webpagetest handle either method (comments on best way to do this are appreciated).
Find all posts by this user
Quote this message in a reply
04-27-2012, 04:17 AM
Post: #2
RE: How does WPT respond to responsive layouts?
WPT runs the tests in a browser with the browser dimensions set to 1024x768 (viewport will be a bit smaller). There is a (not yet documented) script command that you can use for the Chrome and Firefox agents to specify a custom viewport size which is what Guy used in his testing for the bdconf presentation on responsive performance: http://www.slideshare.net/guypod/perform...ile-design

One quick warning from his presentation, display:none still causes the browser to load the resources so even though they aren't being displayed they will get loaded and take a performance hit. Steve Souders mentioned that he didn't think visibility:hidden had the same problem.
Visit this user's website Find all posts by this user
Quote this message in a reply
04-27-2012, 07:21 AM (This post was last modified: 04-27-2012 07:37 AM by grif.)
Post: #3
RE: How does WPT respond to responsive layouts?
Thanks for the link, that was interesting, though it left alot to be explained. One of the links it referenced on responsive images seemed to resort to various tactics for replacing only img elements instead of just checking window size and loading an independent page version for that size, but maybe they are just creating extra work in order to cut corners on complete size dependent rewrites.

As for the media query approach, I read that media queries do in fact prevent downloading on unused resources, but only if you set a min and max (a range essentially) for the specific size your serving. That would make sense as setting only one test would often qualify all elements. I guess i'll find out soon enough.

Edit: I found the page that was mentioning media queries effectiveness. It was actually describing how to make bg images not load:

Quote: Using CSS media query to set display:none on an element containing a background image does not prevent Mobile Safari from downloading it.2
Using CSS media query to override a background image with one created specifically for mobile results in both the desktop and the mobile image getting downloaded.4

Two methods that appear to work are:

Setting the parent of an element with a background image to display:none.3
Using media query min-width declaration to only specify a minimum browser width for the desktop image and a max-width for the mobile image does result in only the mobile image being downloaded in Mobile Safari.5

That last note might work for other elements too. The downside to the js approach of serving different pages:

Quote:If you send a link from the mobile site and someone opens it on their desktop browser, it is still formatted for mobile.

Which is painfully true for text based sites, luckily i dont have to worry about this one. Media queries is the superior method if it can do so without downloading all versions of a page. Im surprised there arent more write-ups about this.
Find all posts by this user
Quote this message in a reply
05-15-2012, 06:26 AM
Post: #4
RE: How does WPT respond to responsive layouts?
Found a series of tests done on this exact topic, looks like theres two approaches but they have to be posed a elements with bg images, not as img elements themselves:

http://timkadlec.com/2012/04/media-query...g-results/
Find all posts by this user
Quote this message in a reply
05-16-2012, 01:02 AM
Post: #5
RE: How does WPT respond to responsive layouts?
You have to be really careful using bg images. In high-contrast modes browsers (at least IE) disabled bg images so they are good for eye candy but don't rely on them.
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)