designing responsive interfaces in axure 6.5 & 7
DESCRIPTION
Slides for the Axure London Meetup on March 19th, 2014. http://www.meetup.com/Axure-London-Meetup/events/166709342/ These presentation is inspired on the following designers blog post: http://www.theinteractive.it/2013/02/how-to-create-a-responsive-prototype-in-axure-tutorial/ http://www.axureworld.org/library/making-axure-responsive-demos-less-confusing.htmlTRANSCRIPT
![Page 1: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/1.jpg)
Designing Responsive Prototypes
Axure 6.5 & Axure 7
#AxureLondon
![Page 2: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/2.jpg)
Very Special Thanks!
@Axurerp @Ostmodern
#AxureLondon
![Page 3: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/3.jpg)
Introduction
@MetroWiseUX
#AxureLondon
![Page 4: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/4.jpg)
Just so you know…
“We basically made AxShare free about a month or two ago, with 1000 projects at 100MB each”
#AxureLondon
![Page 5: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/5.jpg)
Responsive Design in Axure 6.5
![Page 6: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/6.jpg)
Responsive Design in Axure 6.5 Why bother with Axure 6.5?
Prototyping is all about “make believe” Lessons to be learned
How to create a responsive prototype in Axure [Tutorial] by Fabio Sirna http://www.theinteractive.it/2013/02/how-to-create
-a-responsive-prototype-in-axure-tutorial/
#AxureLondon
![Page 7: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/7.jpg)
Responsive Design in Axure 6.5 Introducing…
The SentinelA intermittent dynamic panel which is used to intercept the screen size, detecting the presence or absence of another dynamic panel below its bottom side.
#AxureLondon
![Page 8: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/8.jpg)
How does the sentinel works?
The inspector
Create the dynamic panel for the sentinel, called Inspector.
Make it intermittent (infinite loop).
To make the sentinel intermittent we need to activate it on the event OnPageLoad
#AxureLondon
![Page 9: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/9.jpg)
How does the sentinel works?
Pin to browser
The next step is to place the panel in a fixed position depending on the viewport size of the browser using the Pin to browser function.
#AxureLondon
![Page 10: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/10.jpg)
How does the sentinel works?
Dynamic Panels
#AxureLondon
![Page 11: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/11.jpg)
How does the sentinel works?
The sentinel in action
When the Inspector hides it triggers the OnHide event.
OnHide add logic to figure out if the Inspector is over any of the dynamic panels.
Good idea… but… what about performance? Does it really matter?
#AxureLondon
![Page 12: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/12.jpg)
Have you played the sentinel game?
#AxureLondon
![Page 13: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/13.jpg)
See the sentinel in action
#AxureLondon
![Page 14: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/14.jpg)
“Show and Tell”
By Clive Hughes
![Page 15: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/15.jpg)
Welcome to Axure 7!
![Page 16: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/16.jpg)
Quick Comparison
Axure 6.5 Axure 7
#AxureLondon
![Page 17: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/17.jpg)
Quick Comparison
Axure 6.5 Axure 7
#AxureLondon
![Page 18: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/18.jpg)
Quick Comparison
Axure 6.5 Axure 7
#AxureLondon
![Page 19: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/19.jpg)
![Page 20: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/20.jpg)
Quick Comparison
Axure 6.5 Axure 7
N/A
#AxureLondon
![Page 21: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/21.jpg)
![Page 22: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/22.jpg)
Responsive Image Try it yourself…
http://bit.ly/LAM_RI
#AxureLondon
![Page 23: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/23.jpg)
Adaptive Views
A quick overview
![Page 24: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/24.jpg)
Adaptive Views Adaptive Views define the
breakpoints where you want your pages to switch to a different layout or style.
Presets: Choose a screen width based on a predefined size.Name: A label for your adaptive view.Width: The pixel width of a browser window.Height: The screen height of a browser window.Parent: The view which widget and formatting properties will inherit from.
#AxureLondon
![Page 25: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/25.jpg)
Adaptive Views- Inheritance Each adaptive view must
be a child of another view. Some properties inherit
from its parent views, while other properties do not.
The location, size, style, and interaction styles of a widget can vary across adaptive views.
Properties like text, interactions, disabled by default are the same for all widgets across all views.
#AxureLondon
![Page 26: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/26.jpg)
Let’s see it in action
Simple Responsive Website
#AxureLondon
![Page 27: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/27.jpg)
![Page 28: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/28.jpg)
![Page 29: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/29.jpg)
![Page 30: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/30.jpg)
![Page 31: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/31.jpg)
![Page 32: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/32.jpg)
Accounting for all screen sizes
>1020 >768>960 480 or less
#AxureLondon
![Page 33: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/33.jpg)
Advance tutorial
Making Axure Responsive Demos Less Confusing http://
www.axureworld.org/library/making-axure-responsive-demos-less-confusing.html
#AxureLondon
![Page 34: Designing Responsive Interfaces in Axure 6.5 & 7](https://reader035.vdocuments.us/reader035/viewer/2022081414/54c726ce4a7959cf018b466b/html5/thumbnails/34.jpg)
Thanks! @MetroWiseUX
Please rate this event
Suggestions for next meeting?
Share your Axure fun with all of us!
Feedback is always welcome
#AxureLondon