Okay, this has been bothering me for a very long time. Everytime I see the M&T Bank logo, all I see is a Totoro. Is it just me??
UPDATED 4/27! No need for manual refresh!
So responsive design has obviously been the hot thing for the past few months. There's no denying it. We are living in a world that's a nightmare for designers. Users are loading and experiencing websites on different devices with different screen resolutions. UXers like myself are getting tongue tied explaining in words and static wireframes what "Responsive" design or "Adaptive Layout" design is to the non-technical or design savvy world. And although experience designers now have a slew of tools in their arsenal (axure, omnigraffle, balsamiq, mockingbird, etc) for outlining and prototyping interactions, there still isn't a program that offers users the ability to produce wireframes that react to screen/browser conditions. As a result, as an avid Axure user myself, I went down the rabbit hole of finding a solution, albeit, still a workaround. With the advent of Axure 6.5 beta available, and its new feature - pinning! - I was able to successfully reproduce the effect of responsive design. Follow the steps below to create wires that effectively loads a different wire based on the size of a user's browser.
Click here for a live demo.
Due to the lack of a listener function, I was still unable to get the wires to change synchronously (ie. if a user manually changes the browser size).
If ya just wanna see the actual Axure project I created instead, by all means click here to download it and skip the mumbo jumbo below =)
1) Create buttons/boxes that stretch to different widths depending on the desired layout size and name them "hotspot-[size]" (ie. laptop = 1024px, mobile = 470px, desktop = 1280px). Do not overlap them. For example, if i just wanted two layout styles (mobile and desktop) the mobile box's x/y coordinates were 0/0 and width 470px, but desktop box would be positioned at 470/0 with width 810px (1280-470). The height can be any (I used 20px).
2) Create a dynamic panel, "layout", that would contain your designs for the different adaptations of your wireframe layouts. Add and create these adaptations in different panel states and name them accordingly (ie. mobile, tablet, desktop, etc.)
3) Create a dynamic panel and name it "changer". Right click this panel, select edit and choose "Pin to Browser" and select Pin to Top and Right. This panel can be small. I did 10x20px. UPDATE: Also right click on widget and select hidden by default. For the panel interactions enter the conditions and actions below:
Lastly, under Page Interactions, add cases for each "adaptation" and add conditions for each. The conditions should be set so that IF the "changer" panel's widget area is "over" one of the "hotspot" areas, set "layout" to that respective adaptation "state". Below is a snapshot of the script I used.
5) Lastly, under Page Interactions, add an action to show the "changer" widget.
6) When you generate the prototype, the dynamic panel with the different adaptation states or "layout" should respond and change based on how big your browser width is. You can also drag the bottom right corner of your browser to change the width and it should change based on screen size or where the "changer" is overlapping the hotspots.
As an extra feature, I also created a button that reloads the wires when clicked.
Well, that's it for today. Hope you enjoyed this and I am sure Axure and other wireframe programs will include responsive design tools in their future iterations. For now, I am happy with this solution and I hope you are as well. Happy wireframing!