Designing for responsiveness

Designing for responsive websites can be a bit challenging at first because the process is so different.

As designers, we’ve gotten used to building pixel-perfect mockups as our web blueprints. But responsive design takes a different approach.

A designer’s role is no longer to produce a mockup and then pass it off to the developer because responsive design is not just a two step process, it is a series of revisions. Most of which are made in the browser. It is a collaborative effort between the designer and developer, no longer two separate tasks.

Here are some tips and a general workflow to make the transition from designing static sites to designing responsive ones a little easier.

Knowing your viewports

Before starting any project it is important to determine your viewports. A typical approach would be to build one layout for smartphones, one for tablets and smaller viewports, a larger desktop version, and maybe a second desktop version for even larger/wider screens, say 1200 or 1400 pixels or more.

Planning ahead

Sketching can be your best friend. Take one piece of paper and make 3-4 boxes to represent each viewport. Having all of your viewports on one page helps you to not focus on any one design more than the others. When laying out your design, take the most important content first and add it to each of the viewports, working your way down to the less important stuff as you go.

You will quickly realize that not all of the content may fit in the smaller viewports. Better to find that out now while doing sketches, instead of trying to make changes to a finished design.

Yup, those are my actual scribbles. You might not be able to make out what each element is but those are from an actual project. I did the design and development so I didn’t have to make it clear for anyone else. The point being, nothing is faster than pen and paper for quickly jotting down layout ideas.

Wireframes and mockups

The most important part of wireframing, is having the developer take an active role. He or she should know right away if your idea is going to work or not and can give suggestions on ways to get your vision across without having to reinvent the wheel.

With responsive design you can no longer spend 90% of your design time before the development begins. So mockups need to be quick and rough. Also, be open to changes because chances are your original ideas may not work exactly as planned.

The browser

Because of the large amount of testing involved, responsive design is best done as a process of revisions in the browser. As soon as a basic layout is agreed upon it is best to begin the development right away. Having your layouts viewable from a browser helps prevent a lot of design problems.

Another thing to consider as a designer is what elements of your design can be created with CSS alone. Many devises today are able to display drop-shadows, gradients, borders, rounded corners and other design elements created with CSS. CSS only elements are easier to change, takes less design time to create, and don’t require images or image slices to implement. Of course if you are not developing the site yourself you will need to be able to communicate your layout ideas with the developer.

Taking it into Photoshop

I highly recommend using one .psd for all the layouts. Here is a quick example using 1200 pixels as the largest viewport. So start with a new .psd at 1200 pixels wide by 2000 pixels tall. The other viewports will be 480, 1020, and 768 pixels wide.

To start, unlock your background layer and duplicate it for as many viewports as you need plus one. Fill in the original background layer black and leave the rest white. Put each white background layer in a folder and name it for its viewport (example: “480”).

Next set up each viewport in the .psd. Remember you only need to do this one time and just reuse the template for all of your projects.

First add guides at the edges of each viewport. (View -> New Guide and select “Vertical”). Add guides at 90, 216, 360, 840, and 1110 pixels.

Next create Layer Masks on each folder, which will form the edges of each viewport. Use the Rectangular Marquee Tool to select the area inside the center two guides (480 pixels).

Having Snap checked (View -> Snap) makes this a lot easier. With the selection made and the correct folder selected in the Layers Pallet, click the Add Layer Mask Button to apply it. Do the same step for the other viewports.

Now to see a given viewport simply turn off the other folders. I also included a photo of the Layers Pallet if you wanted to see what that should look like.

Mockups

If you already have a rough site developed, take a screenshot at each viewport and add those into your .psd in the correct folder.

Generally it is easier to start with the smallest viewport and work your way up to the larger ones in Photoshop. So flesh out your 480 pixel design, then duplicate the layers and drop them into the 768 pixel folder.

There is no need to be pixel perfect with any of your layouts. I tend to get one viewport looking correct but for the rest I only change the elements that are truly different in each. Don’t worry about getting the margins around text blocks perfect. Really just ignore text as much as you can because Photoshop cannot render it the way it will appear in the browser, and most of the text design will be done with CSS.

Understand how content changes

When thinking about the design you need to understand how the layout will be altered as it changes from one viewport to another. You also need to consider what happens if a layout is slightly smaller or larger than the viewport you are designing for.

There are a few options for allowing your content to adapt to each layout. Each element can be fixed, hidden, floated (left or right), liquid, or they can scale. Any give responsive design will use a combination of all of these.

Floating elements are most commonly seen in content areas that sit side-by-side in large layouts, but stack on top of each other in smaller viewports. As the viewport begins to get smaller and each element is floated left, the elements on the right side will begin stacking below the elements on the left side.

Liquid content adapts best to changing viewports but can become awkward if used on large viewports. Liquid content is typically used for columns of text that scale as wide as the viewport allows. They work great on smaller viewports but can become too wide on larger ones, so it can be best to switch to fixed for those.

Similar to liquid, scaling elements are given a percentage size and scale as small or wide as the viewport allows. These are different in that it can apply to images and text sizes. These elements are given a percent width and/or height and adjust to the viewport.

Fixed is the most rigid way of laying out content. If you have a piece of content that you don’t want it to scale or change size in any way, it will be fixed. The best thing to do with fixed elements is design them to fit the smallest viewport. It is a lot easier to use a small elements in a large viewport over trying to fit a huge element in a small viewport.

When you want to remove an element or just don’t have room for it you can hide it. Hidden elements will not be seen by the user but will still be downloaded. So if you are using large images but hiding them from mobile users, the page will still take the same amount of time to load whether the images are visible or not.

Remember that you can and should use a combination of all of these on the same element. That means a text box will be fluid in one viewport, fixed and floating left in another, and may be hidden in a third.

Designers are not being forgotten

Because so much of a layout can be created with CSS it may feel like your role as a designer has diminished. Really, your role has just changed. Web design for too long has been about designing the interface while neglecting the content.

The layout is still important but the developer can do much of it. The designer should focus on making sure the goals of the website are met. Spend the most time on strengthening the conversion process, emphasising important content, and making it more palatable and digestible.

To be perfectly honest, I tried looking for some good examples of this in responsive design, but really couldn’t come up with any good examples.

Graphical elements and images

There are some special considerations to make when dealing with images in responsive design. The safest approach is to make images that fit the smallest viewport. This way you keep the file size down and have images that will work in each viewport size.

Large background images can be particularly problematic when scaled down for smart phone use. If you plan on using them make sure to do it in a way that keeps file sizes and load times to a minimum.

Consistency

One of the biggest problems with responsive design is the lack of consistency. Users may have trouble navigating your site on a tablet when they are used to their desktop design.

Make sure to use the same color scheme on every layout and keep at least one consistent element throughout. The logo being the easiest element to transition through all. Always make navigation clearly marked and easily found. If you have to remove elements from smaller viewport designs, have other methods of getting to that content.

Don’t reinvent the wheel

When you are designing a static website you can have a lot of freedom but in responsive design there are more things to account for. Use a method that works and spend your time making that look great. If people can make email templates look awesome you can do the same with a responsive design, it just takes a little creativity.

(courtesy: www.webdesignerdepot.com)