What can I use to test responsive web design?
June 28, 2013 8:39 AM Subscribe
What tool can I use to test out media queries/responsive web design with my PC? I can see that they're working on actual mobile devices, but the changes aren't showing up in any of the browser-based tools I've tried.
I am very new to web design and have been tasked with making a web site play nice on phones and tables. I've learned about how to use media queries and have implemented them in my CSS (as described on this page).
For now, just to verify that I was doing it correctly, all I've done is made it so that the background of my main div changes to one of four different colors based on whether the display is an iphone in portrait or landscape or an ipad in portrait or landscape. I have the actual devices in front of me and when I load the page I can see that the background color is changing from the default as intended, so the media queries seem to be working.
However, I've tried Chrome's web developer extension "Responsive layouts" feature, as well as several different sites (including screenqueri.es, studiopress.com/responsive, and websitedimensions.com), and they're all showing me the default background color at every size and orientation.
How can I test and debug the responsive designs in my browser? I'm running Windows.
I am very new to web design and have been tasked with making a web site play nice on phones and tables. I've learned about how to use media queries and have implemented them in my CSS (as described on this page).
For now, just to verify that I was doing it correctly, all I've done is made it so that the background of my main div changes to one of four different colors based on whether the display is an iphone in portrait or landscape or an ipad in portrait or landscape. I have the actual devices in front of me and when I load the page I can see that the background color is changing from the default as intended, so the media queries seem to be working.
However, I've tried Chrome's web developer extension "Responsive layouts" feature, as well as several different sites (including screenqueri.es, studiopress.com/responsive, and websitedimensions.com), and they're all showing me the default background color at every size and orientation.
How can I test and debug the responsive designs in my browser? I'm running Windows.
Best answer: In general, I avoid "min-device width" in favor of "min-width" for my media queries. This allows styles to respond to changing viewport (browser window) widths, instead of the physical width of the screen it's being displayed on.
For iPhone testing in particular, if I don't have one handy I use Mobitest. It's a limited solution, as it's iPhone only, but it comes with some useful information like calculated page weight and a waterfall chart of how long everything took to download.
As long as I'm here, I'll take the opportunity to say that, generally, it's best to not target specific devices with your media queries (unless, of course, that's the whole point of your content/app). There are too many devices and too many screen sizes. Better to pick general breakpoints (small/medium/large) that match the points at which your design and layouts change.
To cover just about every phone-sized device, what I usually do is pick a min-width (say, under 800px), and at that point assign widths in CSS via percentages. That way, whether the screen is 480px wide or 768px wide, my layout maintains its integrity by sizing itself to fill the space.
posted by o2b at 9:09 AM on June 28, 2013 [3 favorites]
For iPhone testing in particular, if I don't have one handy I use Mobitest. It's a limited solution, as it's iPhone only, but it comes with some useful information like calculated page weight and a waterfall chart of how long everything took to download.
As long as I'm here, I'll take the opportunity to say that, generally, it's best to not target specific devices with your media queries (unless, of course, that's the whole point of your content/app). There are too many devices and too many screen sizes. Better to pick general breakpoints (small/medium/large) that match the points at which your design and layouts change.
To cover just about every phone-sized device, what I usually do is pick a min-width (say, under 800px), and at that point assign widths in CSS via percentages. That way, whether the screen is 480px wide or 768px wide, my layout maintains its integrity by sizing itself to fill the space.
posted by o2b at 9:09 AM on June 28, 2013 [3 favorites]
Response by poster: Awesome, pipeski -- that looks like it works! Although the default values in Chrome's dropdown menu for the iPhone's dimensions are 640x960, so I have to plug in 320x480 to make my changes show up; I guess that's due to the double pixel density of the retina display? My understanding is that the iPhones still report device-width as 320x480, though.
I'll use that method for now, but if anyone knows of a way that will let me view all the layouts on a single page, the way the tools mentioned in the OP purport to work, I'd also like to hear about those.
In general, I avoid "min-device width" in favor of "min-width" for my media queries. This allows styles to respond to changing viewport (browser window) widths, instead of the physical width of the screen it's being displayed on.
Thanks, I read about the distinction between the two and wasn't certain which one made more sense to use here. The site is for an iPhone/iPad/Android app. I appreciate the advice, and any similar tips or resources would be helpful as well.
posted by ludwig_van at 9:16 AM on June 28, 2013
I'll use that method for now, but if anyone knows of a way that will let me view all the layouts on a single page, the way the tools mentioned in the OP purport to work, I'd also like to hear about those.
In general, I avoid "min-device width" in favor of "min-width" for my media queries. This allows styles to respond to changing viewport (browser window) widths, instead of the physical width of the screen it's being displayed on.
Thanks, I read about the distinction between the two and wasn't certain which one made more sense to use here. The site is for an iPhone/iPad/Android app. I appreciate the advice, and any similar tips or resources would be helpful as well.
posted by ludwig_van at 9:16 AM on June 28, 2013
Best answer: I just want to mention that it's not actually responsive design if you're targeting devices instead of viewport widths. Responsive design is explicitly about designing for screen sizes/resolutions/proportions/etc, rather than designing for specific devices. The only real reason to design for different devices is if you need to serve different features and content to them. So if you want an HTC One user to get different content than an iPhone user.
You may want to look at using a framework that facilitates responsive design (Zurb Foundation and Twitter Bootstrap being the most popular) so that you can take advantage of the media queries that have already been written and proven to work on multiple devices, and just focus on the design itself.
posted by Jairus at 9:22 AM on June 28, 2013 [3 favorites]
You may want to look at using a framework that facilitates responsive design (Zurb Foundation and Twitter Bootstrap being the most popular) so that you can take advantage of the media queries that have already been written and proven to work on multiple devices, and just focus on the design itself.
posted by Jairus at 9:22 AM on June 28, 2013 [3 favorites]
Response by poster: Ok, it sounds like I was barking up the wrong tree with max-device-width; I just changed the media queries to be based on max-width instead and now Chrome's responsive design tool is showing me the changes, as is this nifty tool that somebody recommended on reddit. Thanks for the tips.
posted by ludwig_van at 9:33 AM on June 28, 2013
posted by ludwig_van at 9:33 AM on June 28, 2013
Adobe Edge Inspect is great for doing some firebug like inspection on mobile devices. I've played around with Edge Reflow, and its not useful for much more than proof-of-concept type prototypes.
posted by fontophilic at 9:34 AM on June 28, 2013
posted by fontophilic at 9:34 AM on June 28, 2013
Similar to Mobitest, you can install the Firefox OS Simulator and use it to view a web page in one mobile browser's environment.
posted by 1367 at 9:35 AM on June 28, 2013
posted by 1367 at 9:35 AM on June 28, 2013
The "overrides" panel in the Chrome Web inspector (click the "gears" button in the main web inspector window) lets you force your Chrome to start behaving like a phone by specifying a fixed resolution, orientation, user agent, and CSS media type.
posted by schmod at 10:08 AM on June 28, 2013
posted by schmod at 10:08 AM on June 28, 2013
- Responsive Web Design Bookmarklet
- Brad Frost's ish. Enter an url via the left top button, and choose a viewport size in the top right side. Be sure to try the Disco mode.
posted by clearlydemon at 11:57 AM on June 28, 2013
As an iPad user nothing infuriates me more than being served a crap version of the site just because I am on an iPad. I tolerate sites that give me a link to the full version of the site, but still don't like this practice. Same more or less on the iPhone. I picked these devices because the web generally looks good on them. If you force a design onto me it had best be decent, best have the same content, and best look as good as the regular version. Otherwise I think, "I'll read this when I get on my desktop," but the reality is I never do.
I'm not saying give any kind of preference to iOS devices, but do consider they are a large piece of the mobile internet. It would be best practices to not serve crap content to anyone, but I would also suggest not dumbing things down to the lowest common denominator, since there's a lot a crap devices out there.
You can never make something look great on everything, but you can focus on the top 95% and serve acceptable to the rest.
posted by cjorgensen at 12:28 PM on June 28, 2013
I'm not saying give any kind of preference to iOS devices, but do consider they are a large piece of the mobile internet. It would be best practices to not serve crap content to anyone, but I would also suggest not dumbing things down to the lowest common denominator, since there's a lot a crap devices out there.
You can never make something look great on everything, but you can focus on the top 95% and serve acceptable to the rest.
posted by cjorgensen at 12:28 PM on June 28, 2013
I've been really happy with Browserstack (it's a commercial / subscription product, but you can get 3 months for free). It lets you connect to all kinds of different browsers, including many ios devices running in simulation.
If you are using firefox, there is a mobile mode- ctrl-shift-m on windows, something similar on mac- that lets you check your design at various display widths.
posted by jenkinsEar at 3:04 PM on June 28, 2013
If you are using firefox, there is a mobile mode- ctrl-shift-m on windows, something similar on mac- that lets you check your design at various display widths.
posted by jenkinsEar at 3:04 PM on June 28, 2013
This thread is closed to new comments.
posted by pipeski at 8:49 AM on June 28, 2013