23

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

Improve this question
1

9 Answers 9

Reset to default
7

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

Improve this answer
7
  • 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, 2011 at 14:36
  • I think we use goldengridsystem.com to create a responsive layouts
    – Ravi
    Dec 16, 2011 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?
    – Taj Moore
    Jan 25, 2012 at 16:15
  • 1
    @tajmo You do a lo-fi sketch on paper and then you move into a HTML prototype immediately after, skipping wireframes.
    – Rahul
    Jan 25, 2012 at 16:26
  • 2
    I think it's a nomenclature thing, then. My "wireframes" are usually hand-drawn sketches to begin with.
    – Taj Moore
    Jan 25, 2012 at 18:26
31
+100

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

Improve this answer
3
  • @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, 2012 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, 2012 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)?
    – kastark
    May 28, 2012 at 9:54
5

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.

Improve this answer
4

I usually do wireframes 1 of 3 ways

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

Improve this answer
3

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

Improve this answer
2

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.

Improve this answer
2

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.

Improve this answer
1
  • 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, 2012 at 18:21
2

I think you should try Axure if you haven't already. However, for different devices and sizes you need 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.

You could try out JIM (Just in Mind) which will give you an idea of fluid layouts across devices.

Improve this answer
1
  • 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, 2012 at 15:21
0

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!

Improve this answer

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