On Mon, 2012-02-06 at 18:09 -0600, Donovan Brooke wrote: > Mari Masuda wrote: > [snip] > > For a concrete example of responsive design in action, point your browser to http://www.sasquatchfestival.com/ and then slowly make the window wider/skinnier to see how the design adapts to different viewport sizes. > > > Very nice... makes for an easy display to a wide range of circumstances > I think.. especially image resizing (in the blog example), which looks > pretty smooth. But, in both the examples, it appears it can produce a > "choppy" user experience when resizing the window as well... > > I suppose that resizing could be viewed as one of those 80/20 percent > rule things.. meaning, window resizing is probably not a prevalent > action for a user and it could be argued that one shouldn't code a site > worrying too much about dynamic window resizing... but then there is a > form of resizing, which is turning your iPAD to landscape view, etc.. > > I suppose one could probably still do some UA detection and serve up > content based on the "type" of UA (ie. mobile, IE, game-based) and at > that point, still incorporate responsive web design, but to that > more-limited-category of UA's. > > Donovan > > > > > > -- > D Brooke > There is only one drawback to using CSS media queries to alter the way a page is displayed on different resolutions, and that is that any media (i.e. background images, etc) referenced in a stylesheet is downloaded, regardless of if it is ever used. So if you have two background images for the body, one large for nice wide screens, and a smaller one for smaller screens, they will both be downloaded by the browser. The way around this is to use Javascript to load only the stylesheets required, but then you're relying on Javascript and you don't need media queries. It's a pain finding the right balance. -- Thanks, Ash http://www.ashleysheridan.co.uk
