Responsive Wireframing

 

 

Responsive web design is the practice of building a website that works on every device and every screen size, no matter how large or small, or if it is a desktop or mobile site. It is focused around providing an intuitive and enjoybale experience for everyone. Desktop computer and mobile phone users alike all benefit from responsive websites. Almost the whole web is responsive. The HotGloo website has gone responsive and responsive wireframing is finally available with HotGloo. But wait a second I hear you saying “I know what responsive design is, but responsive wireframing?”

 

What is responsive wireframing?

 

Like his big brother responsive web design, responsive wireframing is an approach aimed at planning an optimal user experience — easy reading and easy navigating with a minimum of resizing and scrolling — across a wide range of devices from desktop computer monitors all the way to mobile phone screens.

 

Wireframe before design. Responsive wireframe
before responsive design.

 

How to set up responsive wireframing ?

 

Choose your breakpoints
With HotGloo responsive wireframing is becoming really easy. Just enter Responsive in the editor and add your preferred device screens from the selection.

There are various screen views available:

  • a Mobile screen with a width of 320 pixels
  • a Tablet screen measuring 600 pixels
  • an iPad screen with 768 pixels
  • a Standard screen that holds 960 pixels

If that’s not enough you can also define your own custom screen width.

 

–  Choose your default view
Choose your default screen view and all its content will be distributed to the just added views.

Let’s say you have an existing wireframe in place and want to add a mobile and tablet view. Just select default and you’ll basically find a whole copy of the project in the added views.

 

Wireframe responsively
The added Breakpoints – screen views – will appear in the drop down list at lower toolbar. Select a certain screen view and adapt the layout accordingly.

Whether you start with mobile first or downsize your way from web to mobile is totally up to you. Just consider where the breakpoints differ one from the other. We’ve also edited a short video that will guide you through the basics of responsive wireframing with HotGloo: Watch the video on our Wireframe & Prototyping tutorial channel.

Enjoy responsive wireframing with HotGloo and as always make sure to let us know how it goes.

 

Some useful links to deep dive into the responsive design topic:
– Responsive Navigation Patterns
– Future Friendly
– Multi-Device Layout Patterns

 


 

Author: Wolf Becvar. Find me on Twitter as @wdbecvar and