I’m finally delving into a more responsive design approach and I’m finding that the hardest part about it is actually testing it. Does anybody have any good recommendations on testing responsive designs on mobile, ipad, tablet etc., when developing locally? Sure, I can resize the browser window but that doesn’t tell me how my webpage is going to load and look in mobile Safari/Chrome or in Android.
You can always check out http://www.browserstack.com/ to test in different browsers, os, versions, etc. Also, if you use Google Chrome, just right click, inspect element, go to the settings in bottom right corner, check overrides, now you can play with different useragents and screen sizes etc.
Depending what you use – If you use Coda 2 you can buy Diet Coda on the iPad and that will refresh as you code on your desktop. I think there a few of these floating around…
Firefox allows you to bring your desktop browser right down further than Safari or Chrome and has a RWD view in developer tools. Sauce labs app has a lot of browser versions and iOS simulation. I use this in addition to an iPhone and Nexus.
I use crossbrowsertesting.com in combo with my own ipad mini and android phone. Nothing beats a real live test on an actual device. For example, I recently tested a site that looked great in screenshots, but functionality-wise, the homepage slider was showing up over top of the dropdown mobile menu. Wouldn’t have known that without using my smartphone (fixed with a simple z-index adjustment).