Here’s a roundup of some cool responsive web design tools that have appeared over the last month.
Responsive web design is a new web design technique where a site’s design adapts it’s width and height according to the current browser size. This is perfect for designing sites to look good on the iPhone, iPad or Android devices. Design one website and it works on most mobile devices!
Here’s a roundup of some cool responsive web design tools that have appeared over the last month.
Responsive web design is a new web design technique where a site’s design adapts it’s width and height according to the current browser size. This is perfect for designing sites to look good on the iPhone, iPad or Android devices. Design a website once and it works on most mobile devices!
1. Adobe Shadow
This is by far the most impressive responsive web design tool to have come out over the past month. Shadow lets you simultaneously view and test your website on multiple devices.
For example, you download the Google Chrome browser plugin, you then download the iPad app and the iPhone app and install them on your devices; then you start browsing in Chrome and all your devices will automatically change as you test your website.
I have seen setups with over six devices connected and automatically updating at the same time, its pretty impressive.
Visit the official Adobe site to learn more about Shadow and to download the software.
Also, check out this introduction video from the Adobe team:
2. Gridpak
Gridpak has become an invaluable tool for me over the past month, similar to other online grid system generators you can choose a number of columns, column padding and gutter width, but then you can add responsive web design break points.
A simple setup would be adding a 960px break point, then a 320px break point for the iPhone; then when you download the Gridpak the CSS would automatically be setup using CSS3 media queries for a website that’s 960px wide and for an iPhone sized screen.
Check out Gridpak for yourself.
3. responsivepx
This tool helps you find that tricky breakpoint in a design, use the scrollbars along the top to adjust the view port width and height, once you have the correct settings you can easily copy-and-paste the URL to be sent as a link. This is great if you need someone else to see your site at an exact size!
4. Responsive.is
This tool is similar to responsivepx although slightly slicker in its presentation, instead of using scrollbars to adjust the view port you can simply click a device icon to see how your site will look.
Check out Responsive.is for yourself.
5. Responsinator
The Responsinator is also similar to responsivepx and Responsive.is, although here you can view all the devices (in their actual size) all on the same page.
Check out the Responsinator for yourself.
Bonus Tool – Gridset
This is another potentially interesting responsive web design tool that I came across. They describe their tool as:
Gridset is a tool for making grids. It lets you create whatever type of grid you want: columnar, asymmetrical, ratio, compound, fixed, fluid, responsive and more. It serves multiple grids to your site based on breakpoints for different devices. Using it is as simple as embedding a link.
Sounds interesting, and they say its due to be released Summer 2012. Visit their site for more info on this one.
Web Design Course
If you’re interested in learning more about responsive web design then you can do so at Web Courses Bangkok, we use all the latest software from Adobe such as Adobe Photoshop, Adobe Dreamweaver and now Adobe Shadow! Use any contact form on our site and we will get back to you.
