Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

How to Test Responsive Web Design?

J

josephkhan

macrumors newbie
Original poster
Jan 16, 2015
1
0
Hi There!

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

Thanks in Advance
 
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.
 
Last edited:
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.
 
josephkhan said:
Can anyone provide me the best responsive Web Design Testing Tool.
Click to expand...

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.
 
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.
 
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.
 
giupviec365 said:
You can test responsive website here:
Code: 
http://mobiletest.me/
It's very visual for my site.
Click to expand...
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.
 
There are lots of tools for checking Website Responsiveness.
But I would prefer google testing to others. I really like to use it.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back