Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

How do you make wireframes for responsive or fluid layouts? Typical wireframing techniques are static and aren't well suited to showing how designs scale. What techniques exist to capture the dynamic nature of responsive/fluid design?

Specific points to consider are showing the changes in layout on different types of devices and resolutions, and indicating whether the text, images, and structure are flexible (and within what constraints).

share|improve this question
    
This is a good reference, at the very least: thismanslife.co.uk/projects/lab/responsivewireframes –  tajmo Mar 1 '12 at 22:13
add comment

9 Answers

up vote 7 down vote accepted

You can't really make a wireframe for something like that.

The best way to show a proof of concept of what layout/UI you intend to create would be with a lightweight HTML prototype. That way you can implement some basic responsive features like liquid layout and alternate designs for different screen sizes just by using basic CSS. If you're competent at HTML/CSS it also won't take you any longer than if you made a bunch of different wireframes, and the benefit is that you can demonstrate directly to stakeholders what the effects are of responsive design on different devices (eg. ask them to visit the HTML prototype in their device's browser to see what it looks like).

share|improve this answer
3  
If it's a possibility at all an HTML&CSS mockup is the only way to go. You can take one browser window and shrink it to show them the layout changing as the availible space changes, you'll never get that with a wireframe. –  Ben Brocka Oct 1 '11 at 14:36
    
I think we use goldengridsystem.com to create a responsive layouts –  Ravi Dec 16 '11 at 15:04
1  
While I agree that prototypes are the best route, that wouldn't be practical for someone like me who deals with UX but no UI directly. Just like animators start from storyboards and depict key frames, I think you can show transition similarly without having to do a full-blow prototype. How else is one to communicate what to put into a prototype? –  tajmo Jan 25 '12 at 16:15
    
@tajmo You do a lo-fi sketch on paper and then you move into a HTML prototype immediately after, skipping wireframes. –  Rahul Jan 25 '12 at 16:26
2  
I think it's a nomenclature thing, then. My "wireframes" are usually hand-drawn sketches to begin with. –  tajmo Jan 25 '12 at 18:26
show 1 more comment

I usually do wireframes 1 of 3 ways

You may need to put a little logic in there for different media types.

share|improve this answer
add comment

For my last freelance client, I used the Skeleton Framework and took a look at the viewport media queries. Using those sizes (they're very clearly defined; mobile, mobile-landscape, tablet, widescreen, etc) I created mocks for a few different pages. It wouldn't be cost-effective to wireframe more than a few - you just need to give them an idea of how content is going to react when it collapses.

share|improve this answer
add comment

I can think of two resources that might give you a way forward:

  1. The Wireframe Magazine blog recently ran an article showing a grey box treatment for a responsive layout.

  2. The Media Queries website showcases examples of media query-based layout changes that might give you some inspiration for the problem you're working on.

share|improve this answer
add comment

If you building a responsive site that has a couple of trigger widths (one version of the page at 1028px, one at 700px and one at 320px (with flexible widths between those trigger points of course) I suggest you work with two versions of the wireframes. One which is as detailed as usual and one that only contains the layout blocks. That way you could quickly sketch out major layout changes without using html/css. Like quick this example: enter image description here

share|improve this answer
    
@MikeEng I would LOVE to see these wireframes, but all I'm getting it a Hot Gloo login screen, and when I sign in, I still can't see anything. –  Daniel Newman May 23 '12 at 20:47
    
@DanielNewman Dang, seems they're no longer available, and I can't find them elsewhere with a quick search. I'll delete my earlier comment to avoid further confusion. If you're really interested in tracking them down, maybe you could find out who owns burke.hotgloo.com and reach out - I don't recall the designer's full name. Keep me posted if you find them. –  Mike Eng May 23 '12 at 21:25
    
This is a good answer, but I feel it could do with a bit more meat to it to turn it into a canonical answer. For example, how do you represent fluid vs. fixed content within the same design, or minimum/maximum sizes for content (especially at larger scales)? –  dhmholley May 28 '12 at 9:54
add comment

I attended Alexander's talk. My summary is & opinion: Developing a responsive website that scales depending on screen size, is much more cost-effective than separate websites. It does make sense to also create responsive wireframes.

Ways to create responsive wireframes:

1/ Code it (HTML/CSS): from my experience, can be very time-consuming if you are not a specialist.

2/ Post-it: great for early prototypes, but quiet rough and not flexible in my opinion.

3/ Dreamweaver: Alexander mentioned it allows creating responsive wireframes. I haven't tried it yet.

share|improve this answer
    
I think your answer has good points but I think the posting you were referring to (Alexanders talk?) has been deleted. Maybe you can update your answer? –  greenforest Jun 6 '12 at 18:21
add comment

I think you should try Axure if you havnt already. But for different devices and sizes, you have to design separate layouts. Something along the lines Tony said. But in much more detail as for your scenario you need to explain and demonstrate how font sizes, images and other such elements might change and resize.

share|improve this answer
    
Axure is too costly for me :) –  Jitendra Vyas May 22 '12 at 14:12
    
Axure is overly complex for what it is. I usually argue that to learn Axure takes the same effort as learning some HTML/CSS/jQuery. And with the latter, you CAN do fluid layouts easily and you're a step closer to production code. –  DA01 May 22 '12 at 15:21
add comment

We've recently had great success building an interactive, click-through prototype using the responsive Foundation UI gridwork.

It includes plenty of simple, out of the box styles that help with rapid prototyping. Good luck!

share|improve this answer
add comment

Beside the wireframing step, a good way to show how your design is going to behave is to draw a linear graph with the screen width on the x-axis and your content width on the y-axis. This way you can show what content sizes you'll have for each screen width from mobile to desktop, and even draw an oblique line when you plan your design to be fluid.

This helped me a lot on a responsive site I worked on.

enter image description here

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.