A paragraph a day 15: Responsive Wireframing

May 15, 2015

Responsive wireframing is the process of creating wireframes for different breakpoints or screen sizes. Because you’re creating multiple wireframes for different screen sizes, wireframing one page will produce 2-3 different wireframes which show different breakpoints. Although it may take more time to complete a wireframe, I feel that responsive wireframing is an important step in the process that can’t be skipped. It can help you simplify the hierarchy of the content and can force you to think about what’s truly important to the user. On desktop, we have more real estate to work with so we tend to fill space with less important content. When you drastically shrink down the screen size, you realize that most of the content is what I like to call “fluff” and some of it has precedence over important information that the user needs to know. This can be solved fairly quickly in the wireframing phase since you’re just moving around boxes. Responsive wireframing also encourages exploration of UI and how it can breakdown or change for different screen sizes. How will the navigation be handled at desktop, medium and narrow screen sizes? What about filter and sort menus? These questions can all be worked out more quickly in the wireframing phase when compared to the design phase.