Responsive web design has changed everything. With its arrival, web designers had to change their workflow in order to suit the demands of the new Web.

A lot of people voiced their concerns and frustrations on how Photoshop’s fixed-pixel approach is not suitable for designing the fluid layout required for a responsive design, but no useful alternatives have been offered.

The web design community was in desperate need for a bespoke software application that’s built from the ground up with responsive web design in mind. Products like Adobe Reflow are a good head start, as it shows that Adobe is at least working on a solution – although it still has a long way to go before it truly becomes a useful addition to a web designer’s workflow.

With designers stuck in between an obsolete software and the promise of what’s to come in the future, they are forced to create alternative workflows to accommodate the shortcomings of the current design software by introducing other tools and techniques that’ll help bridge the gap between fixed panel and fluid responsiveness.

In this article, we will show you how most web designers successfully managed to adapt their workflow to suit the new landscape. It is by no means a list of how responsive web design projects should be approached, but they’re already proven and tested, so why not give it a try?

Use What You Already Know and Have

At some point, we found ourselves stuck between the Photoshop/Fireworks/Illustrator divide as each have battled for supremacy and have witnessed some people struggle in a crossfire of pixels. Web designers tend to have their favorite and would rather die a slow, painful death than admit that another software that’s much better than the one they have and has features that they might actually need. You should design in any software that allows you to work at your best and explore your ideas quickly, be it Powerpoint, Paint or PhotoShop.

It’s almost irrelevant which one you should choose as it should just be a starting point for quickly experimenting with various layouts. Adobe Fireworks is a good alternative as it ticks the right boxes that you want in a software. Try not to get too engrossed into details at this point. Instead, try to just make some preliminary decisions on design and structure, much like some posh wireframes.

Create Typography Styles in the Browser

Haven’t you noticed yet? Whenever you use Photoshop (or something similar) to design typography styles, typography looks significantly different in the browser than it looks in the usual Adobe packages. This could mean more work for you customizing the design once it’s built!

Save yourself the headache and use better, more efficient apps like TypeCast.com to experiment and create your font style with. Once you’re happy with the typography’s layout and style, you can export your entire workspace as a transparent PNG to place within your design mockups.

You no longer need to have any of your chosen fonts installed onto your system as it will just be an image. However, you won’t be able to edit it without going back into Typecast.

Play the Percentages

Responsive web design is all about fluid containers that grow and shrink to fill the browser’s available area, so designing in percentages instead of pixels will ensure that your layout flows in proportion to the browser and requires less breakpoints than the equivalent pixel-based layout.

Have InDesign open in the background so you can quickly and easily find out the percentage size of a pixel-based element. InDesign is great at handling this type of calculation. The results are still given to you in pixels so you can then go back into the software that you’re designing in and create that container in pixels, knowing that it will be relative to the percentage of the workspace that you’ve defined.

 

Create a Grid

By now, you have your design at 1000px wide (or whichever width you choose at the start) completed with the widths of the containers that hold various content translated into percentages. You can now start creating a bespoke grid that mimics the container widths that you use within your design.

You can use applications like Gridset to build a bespoke a grid, although some people prefer to use InDesign as they can group elements and resize them in proportion to each other.

Break It Down

Once you’ve created a grid, paste it into a 1600px wide (or the maximum width that you want your site to be) document. Resize your grid wider and narrower by increments of 100px, all the way down to 300px wide. At each increment, make sure to check the width of every content container and make sure it’s still large enough to accommodate its content. If you get to a certain width that makes a container too small, simply edit the grid to fit its intended content.

The important thing is that if you make a container wider, you need to make another container narrower by the same amount to maintain the 100% entire width. This is perhaps the best way to define breakpoints as you only add another breakpoint when the content breaks and not the width of a new device.

The entire procedure can be time-consuming as you’ll end up with 14 previews of your grid as it grows from 300px to 1600px wide, but it’s the best approach to checking how your design will look like in various screen resolutions before it’s in development. You can also use tools like Adobe Reflow which will allow you to add content to containers, then drag your workspace and see the elements scale. You can also determine the breakpoints by resizing your workspace until the content breaks and simply adding a media query.

Deliverables

If you follow this process, you should now have a set of layouts that match your breakpoints, a document that shows how your grid is made up of percentages of the browser width and how it collapses for small screen sizes, as well as all of your typography styles already created and tested in the browser. This is a critical point for developers to then start building their designs accurately, without having to deal with content breaking at certain widths later on.

The whole process may seem long and strenuous but without a specific tools built entirely for responsive web design, it’s the best way to easily test your responsive layout using non-responsive software. This is by no means the one and only way to tackle a responsive web design project, and it’s the best solution you have.