I recently wrote about an easy way to set up a grid in Illustrator. While that way is great for setting horizontal rhythm, I follow a different method for creating my baseline grid. This couldn’t be simpler thanks to the Transform Effect.
It’s not that important to teach older versions of IE how to handle media queries. The point is to make layouts work on small screens. I don’t know of any cell phones running IE6. As an alternative to using polyfills, I tend handle legacy IE with conditional comments. The only trade off for this is, IE < 9 users can’t change the layout by fiddling with the window size. I can live with that.
Here are the steps I take to efficiently sketch out grids in Illustrator. The best part is: step 6 can be revisited at any time and modified, should you change your mind or want to experiment further. This kind of flexibility is quickly winning me over to Illustrator for wireframing.
The Illustrator pixel is a majestic beast quite hard to pin down. The very nature of vectors makes the idea of a 300px by 300px document kind of silly. All you really know is it’s a square. You can take the same document you create in Illustrator and export it as big or as little as you like and it will look perfect (Some exceptions apply. See offer details. Your experience in scaling vectors may vary). A thing that frustrates many Illustrator newbies is that Illustrator displays documents as though they are 72dpi when viewing them on the screen.
I make a lot of websites with Drupal. Since I do this a lot, I’ve been spending time working on a way to speed up and/or automate the process as much as possible. This distraction project had the fortunate byproduct of the following list.