Grow your CSS skills. Land your dream job.

Testing responsive design?

  • # March 21, 2013 at 5:18 pm

    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.

    # March 21, 2013 at 5:27 pm

    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.

    # March 22, 2013 at 6:13 am

    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.

    # March 22, 2013 at 6:19 am

    Use a iPhone simulator like [this one](http://iphone5simulator.com/ “iPhone 5 Simulator”)

    # March 22, 2013 at 7:29 am

    I use [this.](http://mobiletest.me/ “”).

    # March 22, 2013 at 7:42 am

    Also screenfly: http://quirktools.com/screenfly/

    Usually I just re size my browser window though. Not a totally fair assumption of course, but works for the majority of the testing needed.

    # March 22, 2013 at 7:56 am

    Tend to just use Chrome with this bookmarklet:

    http://lab.maltewassermann.com/viewport-resizer/

    # March 22, 2013 at 11:07 am

    If you’re on OS X you can use the iOS simulator in Xcode, super handy!

    # March 22, 2013 at 3:52 pm

    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).

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".