Notebook

My Responsive Design Process (So Far)

In response to this recent Twitter conversation… here’s a quick overview of the design process I’ve been using for a responsive design project I’ve been working on.

I quickly settled on using InDesign for the following reasons…

Multiple Pages
No explanation needed. Having more than one page is a good thing. I’m looking at you Photoshop.

Multiple page spreads with variable page sizes
This is a killer feature for responsive stuff in CS5+. It allows to you create side by side pages, each with a unique width and document grid. In CS6, there will be something similar which they’re calling “Alternate Layout“

“Photoshop Includes”
Using InDesign doesn’t mean that I need to stop using Photoshop completely. Right now I have separate Photoshop documents for the site’s header and footer, which allows me to make quick updates in a global header.psd file, and have the changes update across every InDesign page. InDesign also has the ability to selectively hide or show layers in an imported psd, which is helpful for showing drop down menus, hover states, etc.

Character & Paragraph Styles
These come pretty close to mimicking CSS styles, and allow me to quickly make global changes to my type styles.

Tables
I hate making tables in Photoshop. And yes… I know hate is a strong word. Making tables in InDesign however is a pretty simple process. But just like the original coders out there quickly learned, tables aren’t just useful for tabular data. I’m using them in a bunch of areas in my design where I need the content to easily expand or contract when I change it’s width.

Anchored Objects
This is a feature that allows you to paste a graphic or a text frame inline with your flow of text. This is great for keeping any little icons or article images flowing correctly even when adjusting page widths.

Upcoming InDesign Features

There’s a few new features that are coming out in CS6 that should make designing responsive sites a little more bearable.

Liquid Layout
Adobe describes this as: “Liquid page rules to automatically adapt content when you create an alternate layout with a different size or orientation in InDesign.” Sounds good to me. Can’t wait to see how if holds up with more complex pages.

Linked Content
The InDesign feature page describes this as “Link content within or across InDesign documents so that changes (including interactivity) made to the parent text or object are applied to all linked children objects.” I envision this functioning similar to a text-based php include. Make a text change in one of your layouts, and have it update across the rest of them.

“Love to have” Features

Snap to Pixel Grid
Right now I’ve set my document grid to 1px increments which helps, but it would be great to have an option to force everything to align to the grid.

Symbol Library
InDesign has a “library” feature where you can store and reuse commonly used design snippets, but it doesn’t have the ability to update those snippets globally. You can however, embed InDesign documents inside of InDesign documents… which gets you most of the way there.

Custom Page Titles or Page Folders
Managing a ton of pages can be tough, and only having the page numbers to go by doesn’t make it any easier.

Putting it all together.

One thing that I hate more than creating tables in Photoshop is writing. So instead of describing how I set my files up, and how all these things work together, I figured it would be easier to just create an InDesign document that uses Bootstrap’s grid dimensions, and let you download it for yourself.

Download InDesign 5.5 File
Download InDesign IDML File

I’ll do my best to update this post as I refine my procedure. No promises.

15 Comments