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.html
6. 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
7. Responsive Design in Axure 6.5
Introducing…
The Sentinel
A 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
8. 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
9. 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
10. How does the sentinel works?
Dynamic Panels
#AxureLondon
11. 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
24. 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
25. 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
26. Let’s see it in action
Simple Responsive Website
#AxureLondon
33. Advance tutorial
Making Axure Responsive Demos Less Confusing
http://www.axureworld.org/library/making-axure-
responsive-demos-less-confusing.html
#AxureLondon
34. Thanks!
@MetroWiseUX
Please rate this event
Suggestions for next
meeting?
Share your Axure fun with
all of us!
Feedback is always
welcome
#AxureLondon