I built my first responsive website nearly two years ago, and Responsive Web Design has matured immensely in that time. Every week there is a new tool, framework or design pattern pushing the field forward. In light of the daunting amount of information on the topic I put together my personal RWD toolkit. I’ll be updating this list over time to give a good place to start when creating a responsive website.
Apps for Designers
Liveview broadcasts a region of your Mac screen to an iOS device so you can view your design changes on a mobile screen in realtime. Great for fine tuning spacing, contrast and font sizes on a real device.
Invision turns flat comps into clickable prototypes. Drop images into the web app, draw hotspots and share clickable prototypes with clients. Mobile designs will automatically resize to your device and users can leave comments on your design.
The ultimate responsive design tool doesn’t exist. In the future there may be a tool that allows you to design with a gui, is hooked into a fluid grid and outputs a package of html & css with optimized images. Until this day arrives, Adobe Illustrator is my tool of choice.
- Symbols – reuse elements throughout a design and edit elements in one location. Symbols also make collecting assets for sprite creation easy.
- Artboards – create multiple canvas sizes side-by-side and to view different screen sizes in a single document.
- Text & paragraph styles – a shared feature with Photoshop, but styles in Illustrator can be exported to css using the HTML5 pack from Adobe.
- Vector based – you can easily create assets that can be made into SVG graphics or webfonts for crisp icons retina devices.
- Output to PSD – if needed, deliver to developers using a file format they are familiar with (and often request). As long as you break apart your symbols before exporting, you should be able to migrate all of your layers to Photoshop with ease.
IcoMoon is an online app for creating custom fonts. You can select from an existing library of icons, or upload SVG images to create a custom webfont. Scale assets to any size without pixelation or worrying about backwards compatibility for SVG.
Broadcast your iPhone or iPad screen to any Mac or PC. Great for screen recording or presenting an app to large groups from your device.
Scroll Capture takes full page screenshots from webpages on an iPhone or iPad.
Apps for Developers
Adobe Edge Inspect
Adobe Edge Inspect lets you sync Chrome on your desktop with webkit browsers on multiple devices. View a page in Chrome and it will refresh connected devices to show the same page. The system works for iOS & Android, and also lets you use the Chrome web inspector to inspect code on the device.
While Codekit isn’t specifically for Responsive Design, I use it for all of my RWD projects. Sass and Compass are built in, with js & css compressors, automatic browser refreshing and image optimization. Code faster and output smaller files for mobile. If used in conjunction with Edge Inspect, you can make changes to Sass code and have multiple devices refresh to show changes instantly.
iOS Simulator / Safari
If you don’t have an iOS device to test on, you can download XCode and use the iOS Simulator to run your web app and Safari to debug your code.
Sauce is a Mac App Store app for testing websites in multiple browsers and emulators, including mobile devices. There is a monthly subscription like most VM services, but it’s quick, reliable and easy to use.
FitText is a plugin that scales headlines to fill the full width any element. Make your headlines fit in any open space.
Enhance.js quickly loads JS/CSS files based on need. Only load files if a class is present, or an element loads, and minimize what code is downloaded on different devices.
PictureFill is a polyfill allowing you to use the new responsive Picture element today. Serve up different image sizes for different resolutions based on a future friendly standard.
Last updated 1/13/2013
Posted on: 01/13/2013