How to Test Responsive Web Design?

Discussion in 'Web Design and Development' started by josephkhan, Jan 16, 2015.

  1. josephkhan macrumors newbie

    Jan 16, 2015
    Hi There!

    How to Test Responsive Web Design? Can anyone provide me the best responsive Web Design Testing Tool.

    Thanks in Advance
  2. Flood123, Jan 16, 2015
    Last edited: Jan 16, 2015

    Flood123 macrumors 6502a


    Mar 28, 2009
    Living Stateside
    The expensive solution is having the devices you wish to support and test that way.


    Google Chrome Dev Tools. It is built into the browser. It is free and great.

    Adobe edge is another solution. I have not used this.

    There is a iPad and iPhone emulator in x-code as well.
    To get it :
    download Xcode from the app store.
    go it applications. Right click on the Xcode app.choose show package contents. Open the contents folder. Open that applications folder. You should see the iOS sim in there. You can drag that app to your doc to use whenever.
  3. jday7757 macrumors member

    Nov 21, 2012
    Unless I misunderstand your original question, one simple way to test a responsive website it simply use your browser and resize the window to the different sizes and watch to see if the content reformats to the different sizes. This doesn't necessarily allow you to specify the specific size of the windows but will show you menus reformatting, etc.
  4. smirking macrumors 68000


    Aug 31, 2003
    Silicon Valley
    It depends on what you really mean when you say you want to test responsive design. If you just want to test out the CSS media queries and JS actions that readjust the output based on your device constraints, you can just resize the window to see it in action and throw in an iOS and Android emulator for good measure.

    If you're looking for extensive testing to make sure that your project looks good on every device, you're going to need something like BrowserStack or use Adobe Edge as someone else mentioned, but you'll need to supply your own devices with Adobe Edge. If you use a respectable responsive framework such as Zurb Foundation or Twitter Bootstrap, the need to extensively test out every scenario would be greatly diminished except for very high profile projects. I used to use services like BrowserStack during the development cycle constantly, but browser interoperability seems to have stabilized a lot for the kind of things I do so I can get by with just doing some spot checks in the final run with a small collection of devices that I own just for testing.
  5. filmbufs macrumors 6502


    Sep 8, 2012
    Another quick way to spot check your site on various devices is to go to a phone store, preferably one that carries many varieties of phones/tablets. Be up front about what you're doing and chances are good they'll let you explore without hassle. Just don't over-extend your welcome.
  6. cyb3rdud3 macrumors 65816

    Jun 22, 2014
    resize me

    extension in safari that i use to demonstrate responsive designs
  7. cudest macrumors newbie


    Apr 22, 2015
    Testing Responsive Web Design

    There many ready made website using that you can easily test your web design on the spot.type your website url in particular field and check your web design working properly or not.Like 240px,320px,480px,768px and last is 1024px.if design appear properly then good otherwise work on your graphics.
    I suggest you to use bootstrap coding in your website so it integrate to responsive learn bootstrap coding its simple to learn.
  8. giupviec365 macrumors newbie

    Apr 23, 2015
    You can test responsive website here:
    It's very visual for my site.
  9. 960design macrumors 68030

    Apr 17, 2012
    Destin, FL
    You can get the same information using Chrome > View -> Developer > then click the 'toggle device mode' icon ( next to the magnifying glass ) and more. All without having to sign up for yet another beta.

    Although the site you mention is pretty sharp looking.

Share This Page