How to Test Responsive Web Design?

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

  1. josephkhan macrumors newbie

    Joined:
    Jan 16, 2015
    #1
    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

    Flood123

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

    OR

    Google Chrome Dev Tools. It is built into the browser. It is free and great.
    https://developer.chrome.com/devtools/docs/device-mode

    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

    Joined:
    Nov 21, 2012
    #3
    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 6502a

    Joined:
    Aug 31, 2003
    Location:
    Silicon Valley
    #4
    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

    filmbufs

    Joined:
    Sep 8, 2012
    Location:
    Oklahoma
    #5
    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 6502a

    Joined:
    Jun 22, 2014
    Location:
    UK
    #6
    resize me

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

    cudest

    Joined:
    Apr 22, 2015
    Location:
    canada
    #8
    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 easily.so learn bootstrap coding its simple to learn.
     
  8. giupviec365 macrumors newbie

    Joined:
    Apr 23, 2015
    Location:
    Vietnam
    #10
    You can test responsive website here:
    Code:
    http://mobiletest.me/
    It's very visual for my site.
     
  9. 960design macrumors 68000

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #11
    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