When designing websites that look and work great across multiple devices, product teams rarely start without going through a wireframing process first. Wireframes help teams define the structure of future pages and see how content could work with different layouts. A pivotal point in this process is when designers convert static sketches of elements for future design into digital artifacts. In this article, we’ll explore the concept of responsive wireframes, how they lay the foundation for websites that work across multiple devices, and a process you need to follow to create them.
What is a responsive wireframe?
Wireframes for responsive design are different from static design artifacts. Typically, wireframes are static design artifacts created for a specific viewport (desktop, tablet, or mobile). In contrast, responsive wireframes are simple web pages, created with HTML and CSS, that use principles of responsive web design to illustrate the layouts. Responsive wireframes are dynamic, so they require less effort to introduce changes. All you need to do to introduce a change is update the source code of a page and reload it in a browser.
When working on a responsive website, it’s possible to use static design artifacts, but this approach has a few major downsides:
- They require extra effort. Each screen or page must be wireframed multiple times to address each viewport. Thus, if you optimize your design for mobile, tablet, and desktop, you will need to create at least three versions of every single wireframe for all major viewports (one for mobile, one for tablet, and one for desktop). Whenever you need to introduce a change to layout structure, you will need to change all of the wireframes.
- Static wireframes completely ignore additional viewports beyond the major three.
- Static wireframes do not take device resolution into account and are not set to any specific dimensions. In other words, you aren’t designing for a specific mobile or desktop resolution, but rather on general mobile or desktop format.
Tips for creating responsive wireframes
To create HTML-based responsive wireframes efficiently and effectively, use the following procedure:
1: Conduct a content inventory and define your templates
Content analysis should be the first step in the process of creating responsive wireframes. Content plays a key role in the product design process—it’s the reason users visit websites in the first place. It is vital to identify what content your website will provide before starting any work on wireframes and then reflect that content in your website wireframe system.
To begin, identify the content that will be used in your product. Let’s suppose you’re designing an ecommerce website. You probably will have the following types of pages:
- Home page
- Product categories
- Product details page
- Cart page
- Order confirmation page
Each of the pages listed above will have its own content and will require its own layout. So, the next step is to identify mandatory and optional content sections for each type of page. For example, for the home page, you might want to have the following content sections:
- Headers (mandatory)
- Global navigation (mandatory)
- Hero banner (optional)
- Featured products (mandatory)
- Ad (optional)
- Featured product sections (mandatory)
- Footer (mandatory)
Think of your content from the user’s perspective: How will your visitors interact with the content? Ideally, you should define scenarios of interaction and measure the importance of the content in the context of user flows. Map out a target user flow (a series of steps a user takes to achieve a specific goal) and sketch out the core part of it. User flows will help you understand which wireframes you’ll need to create and how they should be connected.
Next, you can start to define the foundation for responsive wireframe templates for each type of page. Templates should designate the areas of content within them. When working on templates, look for reusable elements (components and design patterns). In many cases, it’s possible to define containers that can be reused on many pages. For example, websites often reuse the same headers and footers on different pages.
Example of an ecommerce home page template. Image credit lucidchart.2: Define target screen dimensions for your responsive wireframe templates
After defining templates for your content (step one), you’ll define your screen dimensions. If you design a website, you need to account for at least three types of screens—default (desktop), mobile, and tablet. For years, designers used fixed-width layouts in their wireframe designs, but that doesn’t work for responsive wireframes. Given today’s wide range of screens, it’s crucial to ensure that your design will look and work great on different screen sizes.
These breakpoint widths are suggested by Material Design. Image credit Google.Web frameworks like Bootstrap or Foundation have pre-default responsive grids. For example, Bootstrap’s tablet portrait mode width is 768px while smartphone max width is 480px.
If you work in a design tool, you can customize breakpoints by clicking and setting the dimensions. But as soon as you start translating your design from a graphic design tool to a browser, you can set breakpoints using CSS Media Queries. (Check out these responsive design best practices for more practical recommendations.)
3: Define zones on templates using content containers, or boxes
Your new goal is to create a clear visual hierarchy for every type of page you’ve defined earlier in steps one and two. At this stage, don’t focus on the content itself. Instead, you need to think about how it’s presented. Plan the layout according to how you want your user to process the information and start by drawing boxes on the canvas.
For each type of responsive wireframe template you define, you need to create zone diagrams—diagrams that show zones of content and functional elements on the page. Zones are boxes and labels that indicate the types of content/components that will appear on a page.
Responsive wireframe examples (desktop, tablet, mobile) have zones for content. Image credit linowski.After you are satisfied with your visual hierarchy, start filling zones with content and UI elements. Your goal is to arrange elements in a way that allows fast scanning. Put a strong focus on the order of information you want to present to your users. Note that people scan web pages and phone screens from top to bottom, from left to right (F-shaped pattern works both for desktop and mobile screens). So, you can improve the scanning by rearranging boxes in both size and placement.
More tips to keep in mind:
- As you fill your wireframes with real detail, you may notice the layout you have is not working well. That’s fine. If this happens, it’s important to iterate and find a better way of representing the information.
- Start focusing on one target layout first. Start by following a mobile-first mindset and optimize the design for a mobile viewport. As soon as you create a decent visual hierarchy on one target layout, you can work on another screen dimension.
- Check how your UI looks on different screen sizes (both small and large screens) and adjust it if required. Even if your design looks great on the iPhone X screen, it doesn’t mean that users of tablets will have the same great experience.
5: Share your design with teammates and stakeholders
A responsive wireframe is a digital design artifact, which will benefit product design teams for multiple reasons. Not only does this make it easier to imagine what the final design will look like, but it also makes it easier to test the layout on various screen sizes and resolutions. As wireframes are finished, they can be published online and provided as a link to developers and stakeholders who may access them from any device connected to the network. Regular designer-developer collaboration is essential for your design workflow. It’s vital to share your wireframes with:
- Developers. Wireframes give the developer a clear picture of the elements that they will need to code. The nice thing about responsive wireframes is the fact that developers can reuse the code from your wireframes in a final product.
- Clients. It’s vital to ensure that they understand and agree with the prioritization of content.
It’s also a good idea to give each screen a reference number. These will make your life much easier when discussing the project with other team members or stakeholders.
Conclusion
As responsive web design continues to serve an ever-growing list of devices and resolutions, it’s important to use website wireframe tools that allow us to establish a more efficient build-measure-learn process. Responsive wireframes allow you to develop a communication process that clearly articulates the intent of your design, and they also minimize the effort required to build a real solution.