Justinmind

SUPPORT

Learn how to prototype web and mobile apps

Responsive design in your web and app prototypes

In this tutorial, we’ll look at how to prototype responsive apps or webs. To do this, you first need to understand tables (a pre-installed widget that you’ll find in the ‘Special Components’ group), cell layouts and ‘on Window Resize‘ events.

You can download an example here

First step: define the layout using the ‘Table’ widget

In order to create a responsive prototype like the one in the example above, you need to build the basic layout using a table. Using a table widget is essential for responsive because you need to resize the whole layout in every window width/height change. The greatest thing about resizing a table, is that its cells will always keep their original proportions.

Once you have your table with all your cells, you may also want to define a layout for each cell. Defining a layout for a cell will help you guarantee the position of its content element whilst resizing. Always keep in mind that a table cell is like a container. You will find all the layout options in the Properties panel when a cell is selected.

Second step: using the ‘On Window Resize’ event

In order to control when to show the layout for computers and when the one for mobile, we need to create events that detect when the window size has changed (‘onWindowResize’) and perform the corresponding resize to the elements that need it. To do this, select the screen background and go to the events tab. Add an ‘On Window Resize’ + ‘Resize’ event to the elements that need resize.

Once back to the canvas, click on the ‘Add condition’ button and define a condition like this:

condition screenshot

In the example above, the first element to be resized is the main table. We can see an ‘On Window Resize’ + ‘Resize’ applied to the table until it fits the whole window width.

This event will make the whole table and its cells resize when the window gets resized, always matching its width. However, this sole event is not enough. Each cell is resized but the content of each cell still keeps the same size. Therefore, we need to define an ‘onWindowResize’ event for each element inside each cell that says: ‘On Window Resize’ -> ‘Resize’ the element until it fits the whole width of its parent (i.e. the cell). We can do this by defining the element’s height and width as we saw in the tutorial on liquid layouts.

How do the images scale?

Let’s see the width expressions for the large image. It reads: ((windowWidth)-72). The number ’72’ is the margin you want the image to keep from the whole window. Notice that the parent of the Image is a table cell, which has its layout set as ‘horizontal centered’. Hence, ’72’ means that the image will keep a constant margin of ’36’ from the left and ’36’ from the right.

The expression for its height is: ((windowWidth)-72) * 0.62. The first part of the expression is the same used for the width and the last parameter ‘0.62’ it’s a proportional factor. It just means that the image height always has to be 62% of its width. It can be read as: (imageWidth) * (62/100). Just to be clear, if you use a 1 instead of 0.62 you eventually get a square image.

You have completed the tutorial section on Responsive and Adaptive!

Next tutorial> Create responsive web design from scratch

24 Comments

  1. Florent

    December 11, 2014 at 2:32 pm

    Can we resize our prototype without adding a condition ?
    Just resizing it, due to a fail for example .

    • Lidia Rodriguez

      March 3, 2015 at 11:47 am

      Yes, you can use the ‘resize’ event without adding any condition.

  2. reut

    December 21, 2014 at 12:53 pm

    hi,

    I would like to build , but I don’t understand the explanation clear enough… is there any videos that can help me?

    thank you

    • Lidia Rodriguez

      March 4, 2015 at 10:56 am

      Not yet, we’re still working on improving this section.

  3. Sjur

    January 19, 2015 at 6:54 am

    It would be great if break points were implemented like Adobe Reflow does it – http://tv.adobe.com/watch/adobe-edge-reflow/overview-of-reflow/

    • Lidia Rodriguez

      March 4, 2015 at 11:18 am

      Thanks for your suggestion! We’re still working on the responsive design features so any suggestion you make is really helpful.

  4. Nate Girard

    January 21, 2015 at 10:11 pm

    It would be better if next to the width and height inputs for every element you could instead specify a percentage of width or height relative to the parent. This would solve a lot of the problems right away and not necessarily require a table layout to be used. Repositioning would be much trickier though and that might be where the alternate layouts for each screen come into play with the window resize event redirects. The biggest problem there is maintaining state on every corresponding element whenever you switch resolutions. Best solution would be to utilize the layout type to your advantage with dynamic panels so they all adjust their positions appropriately.

    • Lidia Rodriguez

      March 9, 2015 at 10:51 am

      Thanks for your suggestion! We’re still working on the responsive design features so any suggestion is really helpful.

  5. cagan

    February 11, 2015 at 9:52 pm

    Hi, I am designing a new website and I need to wireframe it responsively before I code it with html/css. I downloaded justinmind wireframing tool because it’s free. But I’ve seen that there is no future that have been made for creating responsive wireframes. Your way is drag and drop table and resize it using an event. Is it actual way to create a responsive wireframe? If so, I will start to wireframe my pages responsively using your method. Please help me!

    • Lidia Rodriguez

      February 27, 2015 at 11:44 am

      Yes, this is the current way to implement responsive design.

  6. Maggie

    February 19, 2015 at 7:57 pm

    Is there any planned enhancement for a release this year that would make creating a responsive design easier to implement?

    • Lidia Rodriguez

      February 27, 2015 at 9:40 am

      Our team is working on improving responsive design and it’s a high priority for us. There’s not a specific plan for that but improvements will keep coming with further releases.

      • Maggie

        July 2, 2015 at 4:59 pm

        Has there been any headway in simplifying the approach to making a responsive prototype without all the workarounds? Any forecast on when feature may be available?

        • Lidia Rodriguez

          July 3, 2015 at 7:35 am

          Hi Maggie,
          For the moment there are no updates regarding responsive design but it is a major pending task that will be for sure improved in a near future.

  7. Mitch

    April 19, 2015 at 11:44 pm

    After working in-depth with responsive design in JIM, I have two suggestions:

    1) Allow % widths at the element level (currently a percentage width is not allowed)

    …or the ultimate feature would be to…

    2) Allow for CSS-style notation
    – for each element on the Properties panel right under ID, there could be a “Class” field
    – all fields in a form could have a class such as “formfield”
    – you could then define the following attribute (via simple text) at the screen level:

    .formfield {width:100%}

    What a great feature this would be. Thanks for your consideration and for a great product!

    • Lidia Rodriguez

      July 3, 2015 at 7:37 am

      Thank you for your suggestions!

  8. Nigel

    May 15, 2015 at 9:17 pm

    the prototype link referenced doesn’t appear to be working?
    “A basic example of a responsive web site”
    Is there a trick? All I get is

    AccessDenied
    Access Denied
    DC04037148E2E5B8

    • Lidia Rodriguez

      July 3, 2015 at 7:37 am

      Can you try again and let us know if it works?

  9. prasun

    June 10, 2015 at 12:33 pm

    In new version adding resize feature.means web page automatic resize according to device without adding resize condition.if yes how to use this feature. thanks

    • Lidia Rodriguez

      July 3, 2015 at 7:36 am

      You have to use on window resize events to achieve this behaviour.

  10. Raghuram Ashok

    June 17, 2015 at 6:43 pm

    The link to the example prototype files does not work. Could you please repost the actual link? Thanks!

    • Lidia Rodriguez

      July 3, 2015 at 7:36 am

      It should be working, can you try again?

  11. joe

    August 26, 2015 at 2:59 am

    It would be great if we didn’t have to use tables to manage something responsive, just too many bad connotations, and most people would be content using an adaptive solution, instead of responsive, so I could set, for example, the breakpoint and design for the smallest layout of each breakpoint range.
    For example, design a 320px layout that works to the next breakpoint, at 760, where the layout changes to the next layout size. not truly responsive but useful.
    I like the way Axure manages it for the most part, but would rather use something like LIM as we can share tasks in the team more easily.

    UXPin also manages this well with a “default layout” you can copy to a different layout and treat there. once copied across it breaks relationship with the parent, unlike Axure which keeps them, but for a lightweight tool, it wouldn’t be too much bother. That would work for me…

  12. adam monica

    August 22, 2015 at 4:25 pm

    This is an absolutely essential feature since most responsive designs allow multi-row or single row tile layouts depending on the device. Example: 2 rows x 2 columns of dashboard widgets on ipad, 4 rows x 1 column on iphone.