Navigation

Designing for responsiveness

Mobile, Web Design | Feb 8, 2012

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).

Creating layer masks to simulate the viewports for responsive layout

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.

viewports for responsive design simulated in Photoshop

 

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.

images in responsive design Orestis.nl

Here is an example images that can easily be displayed in multiple viewports from Orestis.nl.

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.


Tyler Herman is a web designer and blogger. You can follow him on Twitter @couchable where he serves up design and web business related news and articles worth taking a look at. Or at his blog Couchable.

What do you think is the most difficult thing to keep in mind when designing a responsive site as opposed to separate mobile and static sites? Let us know in the comments!

Share this post
Comments (no login required)
  • http://www.yellowduckwebdesign.co.uk Web Design Essex

    Very interesting read… For awhile we have been flirting with the concept of making every website we do responsive. Maybe this is the year we stop talking about it and actual do it! 

  • Craig Thigpen

    Great post, however you omitted one of the required guides for the viewport setup. Looks like a vertical guide set at 984 is also needed.

  • linda

    A focal point with the highest level of visual communication.

  • http://niallm1.com/ Niall

    Any particular software you recommend for wireframing?

  • http://twitter.com/Web_Cooperative Web Cooperative

     You’re right that it’s not strictly “responsive” but perhaps more accurately “adaptive”. I’ve always been a fixed kind of guy so these days I’ll tend to design a series of fixed layouts which work fine within their range. So say, a 960px wide design when the screen is 1024 or higher. If you drop below 1024px width it’ll then resize to the 760px wide layout. Go below 800px screen width and it’ll bounce down another notch etc. I’ll resize and rearrange the elements as necessary but I’ve never gone “fully fluid”.

    When my skills improve perhaps…

    Took the liberty of viewing your website and it appears to be a completely fixed design?

    • Anonymous

      I’m in the process of re-designing my own site but it tends to be the cobblers kid, if you will. Get to spend a day on it between projects once every 2 or 3 months :p 

  • http://twitter.com/kyoukhana Kevin

    Mobile screwed everything up.  Designers now have to work twice as hard and get paid the same amout of money of desiging the same site a few times depending on the resoloutions.  Don’t get me wrong mobile is cool but a lot of work for the user expirenece

    • http://www.oldworldcreative.com Evan Skuthorpe

      No they don’t! Charge more, or ignore fluidity. Mobile devices still re-size ‘full size’ websites down so no real loss to the client. If they insist on a fluid site, then insist on charging for it.

      If you’re working in house, tell them the development time is twice as long.

  • http://www.makemoneyinlife.com James W

    so much true, different approach is needed, which makes it all a little bit harder, great post, thanks for sharing.

  • http://ramonlapenta.com Ramon Lapenta

    Agree with most of the article, good ideas to organise responsive design process. One point I have to disagree, or at least point out that for development stage, .psd files (And I really wish they were Firework files instead) have to be separated. Is not easy to handle hundreds of MBs in one file.

  • http://webhosting.gen.nz/ Web Hosting

    interesting read! thanks!

  • http://www.xhtmlpress.com/ Psd to Html

    Well being a new to this concept responsive designing the article is a great source of knowledge for me. I have tried to make my one of website to as according the responsive design but it’s really hard for me and very time consuming but i learn a lot. Thanks for great info. 

  • http://www.oldworldcreative.com Evan Skuthorpe

    I’m currently redesigning my company website as a fluid grid, optimised with media queries for certain devices screen widths.

  • Jon Casey

    Why is 480px the smallest width when that would not accomodate for holding an iPhone vertically which would be 320px wide (640 res for iPhone4)?

  • http://nnpcto.kz/ Sergio

    Without planning there will be no good results.