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

1. Designing Responsive Prototypes
Axure 6.5 & Axure 7
#AxureLondon

2. Very Special Thanks!
@Axurerp@Ostmodern
#AxureLondon

3. Introduction
#AxureLondon

4. Just so you know…
“We basically made
AxShare free about
a month or two ago,
with 1000 projects at
100MB each”
#AxureLondon

5. Responsive Design in Axure 6.5

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

12. Have you played the sentinel game?
#AxureLondon

13. See the sentinel in action
#AxureLondon

14. “Show and Tell”
By Clive Hughes

15. Welcome to Axure 7!

16. Quick Comparison
Axure 6.5 Axure 7
#AxureLondon

17. Quick Comparison
Axure 6.5 Axure 7
#AxureLondon

18. Quick Comparison
Axure 6.5 Axure 7
#AxureLondon

20. Quick Comparison
Axure 6.5 Axure 7
 N/A
#AxureLondon

22. Responsive Image
 Try it yourself…
http://bit.ly/LAM_RI
#AxureLondon

23. Adaptive Views
A quick overview

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

32. Accounting for all screen sizes
>1020 >768>960 480 or less
#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