loading

My Responsive Web Design Toolkit

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

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.

Check out Liveview

Invision App

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.

Check Out Invision

Adobe Illustrator

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.

  1. Symbols – reuse elements throughout a design and edit elements in one location. Symbols also make collecting assets for sprite creation easy.
  2. Artboards – create multiple canvas sizes side-by-side and to view different screen sizes in a single document.
  3. Text & paragraph styles – a shared feature with Photoshop, but styles in Illustrator can be exported to css using the HTML5 pack from Adobe.
  4. Vector based – you can easily create assets that can be made into SVG graphics or webfonts for crisp icons retina devices.
  5. 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.

Check out Adobe Illustrator

IcoMoon

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.

Check out IcoMoon

Reflection

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.

https://www.reflectorapp.com/

Scroll Capture

Scroll Capture takes full page screenshots from webpages on an iPhone or iPad.

Check Out Scroll Capture

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.

Check out Adobe Edge Inspect

Codekit

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.

Check out Codekit

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.

Learn More about XCode

Sauce

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.

Read more about Sauce

Code Libraries

TouchSwipe

TouchSwipe is a Javascript library that adds touch actions like swipe, pinch and multi-touch to your html apps.

Check out TouchSwipe

iScroll 4

iScroll replaces the default scroll functionality in iOS and Android with an optimized JavaScript solution for smoother, more native feeling scrolling.

Download iScroll

FitText

FitText is a plugin that scales headlines to fill the full width any element. Make your headlines fit in any open space.

Check out FitText.js

Enhance

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.

Download Enhance

PictureFill

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.

Download Picturefill

Harvey

Harvey ties your JavaScript functions to breakpoints. Execute JS code as a user resizes a screen, or to load functions only for a specific screen size.

Download Harvey

Zepto

Zepto is a minimalist JavaScript library with a largely jQuery-compatible API. The syntax matches jQuery without all of bloat for outdated browsers. Great for mobile websites and apps built in Javascript.

Read more about Zepto

Phonegap

Create native mobile apps that are compatible with all major app stores (including Apple, Android & Windows) using HTML, JavaScript and CSS.

Learn more about Phonegap

Last updated 1/13/2013

--

Posted on: 01/13/2013

Comments

up arrow