Responsive and adaptive web design has really caught on in the web design and development community, and there are so many of tools available on the web to help you test your site at multiple screen sizes. Recently, I’ve been looking for tools which can help me to design for different screens more effectively. Since I don’t have time to test on a million devices, here i come acroess some of the best native app, a bookmarklet, and a website for testing your responsive webdesign on the web.
Aptus
[button color=”blue” size=”medium” link=”http://itunes.apple.com/us/app/aptus/id510487565″ target=”blank” ]Aptus – Source[/button]
Responsive.js
[button color=”blue” size=”medium” link=”http://responsive.is/pixel2pixeldesign.com” target=”blank” ]Responsive.js – Source[/button]
Opera Mobile Emulator
[button color=”blue” size=”medium” link=”http://www.opera.com/developer/tools/mobile/” target=”blank” ]Opera Mobile Emulator – Source[/button]
Responsive Design Bookmarklet
[button color=”blue” size=”medium” link=”http://responsive.victorcoulon.fr/” target=”blank” ]esponsive Design Bookmarklet – Source[/button]
The Responsinator
[button color=”blue” size=”medium” link=”http://www.responsinator.com/” target=”blank” ]The Responsinator – Source[/button]
ResponsivePX
[button color=”blue” size=”medium” link=”http://responsivepx.com/” target=”blank” ]ResponsivePX – Source[/button]
Responsive
[button color=”blue” size=”medium” link=”http://mattkersley.com/responsive/” target=”blank” ]Responsive – Source[/button]
Screenfly
[button color=”blue” size=”medium” link=”http://quirktools.com/screenfly/” target=”blank” ]Screenfly – Source[/button]
Protofluid
[button color=”blue” size=”medium” link=”http://protofluid.com/” target=”blank” ]Protofluid – Source[/button]
RWD Demonstration
[button color=”blue” size=”medium” link=”http://jamus.co.uk/demos/rwd-demonstrations/” target=”blank” ]RWD Demonstration – Source[/button]
Resize My Browser
[button color=”blue” size=”medium” link=”http://resizemybrowser.com/” target=”blank” ]Resize My Browser – Source[/button]
Adobe Edge Inspect
[button color=”blue” size=”medium” link=”http://html.adobe.com/edge/inspect/” target=”blank” ]Adobe Edge Inspect – Source[/button]
Resizer
[button color=”blue” size=”medium” link=”http://codebomber.com/jquery/resizer/” target=”blank” ]Resizer – Source[/button]
Bricss
[button color=”blue” size=”medium” link=”http://bricss.net/” target=”blank” ]Bricss – Source[/button]
Screenqueri.es
[button color=”blue” size=”medium” link=”http://screenqueri.es/” target=”blank” ]Screenqueri.es – Source[/button]
Conclusion
These are vital tools for testing responsive and adaptive designs on a computer, but it’s always good to test on real devices.
If you know any online tools similer to this than plaese share it in the comment section. We try to include that tool in our next post.
[box type=”note” align=”aligncenter” ]We would love to hear your opinion, so please comment below. And don’t forget to subscribe to the RSS-feed and follow Pixel2Pixel Design on Twitter + Facebook (100% Spam Free!).[/box]
This is indeed one of the good articles I’ve come across for Responsive Design.
You can also try the developer tools for Firefox which provides testing for responsive sites.
Cheers Buddy.
Thank you rohan for your valuable comment
beutifull…
I have a very simple question! How would you exactly define a responsive site?
What I mean is does it adjust the styling and text according to device’s resolution? Or do you decide the styling for each different resolution before hand?
I am actually confused with this! Because some websites do not render properly on my phone, while they render properly on these tools. I am using Android’s Chrome browser on Motorola Razr!
Basically Responsive Design is all about CSS Media Query. Were you have to write different CSS for Different sceensize resolution you can take the example of our website CSS for inspiration.
Regarding your question both the things are same yes it should adjust the styling and text according to device’s resolution with CSS media query you can decide the styling of your website for each screen size.
I hope this will solve your confusion.
My question would be which would you suggest? I ask this question because nowadays there are Android phones from multiple manufacturers coming up with variety of screen sizes and resolution.
Akshat i prefer to use media query but you can build complete Liquid base website which fits to every resolution. But according to me you should use CSS media query and target the different browser sizes as per your wish.