responsive design with axure 7.0’s adaptive views
TRANSCRIPT
![Page 1: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/1.jpg)
Responsive Design with Axure 7.0’s Adaptive Views
by Svetlin Denkov@svetlindenkov
+
![Page 2: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/2.jpg)
Who am I?
![Page 3: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/3.jpg)
→DePaul CDM IxDA Chicago
![Page 4: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/4.jpg)
?
![Page 5: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/5.jpg)
Prototyping Experience
![Page 6: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/6.jpg)
I use different tools for different projects. Here are some I apply for mobile and tablet prototyping:
…but I constantly refine my process and toolkit!
BalsamiqBlueprint
![Page 7: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/7.jpg)
I write, but also…
…present on Axure and other prototyping tools:
Axure Meetup Chicago
![Page 8: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/8.jpg)
Today’s Agenda
![Page 9: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/9.jpg)
THE AGENDA
Today we will cover:
- Brief introduction of Adaptive Views [30 min]- Demo of this Axure feature [50 min]- Q&A on Axure and prototyping [10 min]
![Page 10: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/10.jpg)
THE DEMO
There is a lot of ground we can cover, so let’s focus on the basics:
- Setting up and editing Adaptive Views- Inheritance across views- Placing and unplacing of widgets- Adaptive masters and styles
**I promise, all of this will make sense shortly
![Page 11: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/11.jpg)
THE DEMO (cont) Feel free to look at the more advanced topics on your own:
- Adaptive Views and documentation specs- Adaptive repeaters- Creating widget libraries for adaptive designs- OnWindowResize and OnAdaptiveViewChange **If you need help, drop me a line at @svetlindenkov
![Page 12: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/12.jpg)
The RWD Context
*RWD = Responsive Web Design
![Page 13: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/13.jpg)
RESPONSIVE WEB DESIGN (RWD) At the 10k foot view:
- Breakpoints exist for each channel/form factor/resolution- This is based on analytics and/or user research (not only the business goals)- Content and requirements exist for each breakpoint
Mobile Tablet Desktop TV
+
+
Wearables
![Page 14: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/14.jpg)
RESPONSIVE WEB DESIGN (cont.)
Prototyping comes last:
- Figure out the main flows and key screens in the experience
- Brainstorm early concepts. Do it with others if you can: x2 > x1
- Sketch UI details on paper/whiteboard
Research
Sketch
Prototype
![Page 15: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/15.jpg)
RWD & Axure
![Page 16: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/16.jpg)
AXURE ACTION ITEMS
Business considerations:- Set expectations of what Axure can/cannot do for RWD- Get buy-in from stakeholders and internal team
Prototyping considerations:- Deep or wide prototype?- Page or dynamic panel organization?- Level of visual fidelity and documentation
![Page 17: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/17.jpg)
Let’s Jump In!
![Page 18: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/18.jpg)
MINI REAL WORLD PROJECT
We will create a simple 1-screen prototype of a mobile e-commerce experience with the following:
iPhone 5/5S (2 orientations) Simulating
ClickthroughPrototype
![Page 19: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/19.jpg)
Prerequisite:
Laying Content & Mobile Viewports
![Page 20: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/20.jpg)
3-PIECE PUZZLE
1. The content is laid out in Axure to a certain size (based on the expected content size for the current device).
2. The mobile viewport takes this content and resizes it to fit in the physical display.
3. The physical display is constant.
Display
Viewport
Content(in
Axure)
![Page 21: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/21.jpg)
The Content
The content in pixels can be of different resolutions:
- non retina or also known as 100% of the display size- retina or 200% of the display size- > 200% (Android and latest additions to iOS)
*Image credit: www.teehanlax.com
![Page 22: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/22.jpg)
The Viewport
The viewport has two parts to it.
1. Creating the size of the viewport2. Controlling how the content is displayed
Note: The latter allows for zooming in/out of the content (see Maximum Scale and User Scalable).
ViewportSize
Content Scaling
![Page 23: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/23.jpg)
The Display
Each device has several measurements:
- Physical height and width of the shell in inches- The display’s width and height in logical points
Some derived measurements are:
- Aspect ratio = content width / content height- Density = content width / physical width
*Image credit: www.isores.com
![Page 24: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/24.jpg)
Real World Example
![Page 25: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/25.jpg)
iPhone 5/5C/5S
The content of the device:- Can be laid at the expected size, 640px by 1136px (in portrait mode) OR- Can be laid at non-retina size, 320px by 568px
The display size of the device:- Is measured 320pt by 568pt- Each point can then hold 1 or 2 content pixels
Non Retina1pt = 1px
Retina1pt = 2px
![Page 26: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/26.jpg)
iPhone 5/5c/5S Example (cont)
If content is at retina (640px by 1136px):
If content is at non retina (320px by 568px):
![Page 27: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/27.jpg)
Hammer Time!
(Ahem…Demo Time)
![Page 28: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/28.jpg)
Adaptive Views Limitations
![Page 29: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/29.jpg)
ADAPTIVE LIMITATIONS
Novice to intermediate level:
- Base view cannot be reassigned- Views cannot be copied- Must constantly track which view you are working in
Advanced level:
- No fluid design (out-of-the-box)- No production-ready code (true for any Axure project, not just Adaptive ones)- Specs are a work-in-progress
![Page 30: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/30.jpg)
Takeaways
![Page 31: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/31.jpg)
TAKEAWAYS
For RWD:
- Have agreement on the breakpoints- Plan ahead before starting to prototype- Prototype only what’s necessary
![Page 32: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/32.jpg)
TAKEAWAYS (cont)
For Axure and Adaptive Views:
- Axure is a good tool choice for prototyping RWD- Adaptive Views have a learning curve- Adaptive Views increase project complexity- Heavy interactions are possible but difficult to manage across views
![Page 33: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/33.jpg)
CONCLUSION
Give Axure 7.0 and Adaptive Views a try.
They will be a nice addition to your tool set!
![Page 34: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/34.jpg)
Questions?
(Really, don’t be shy!)
![Page 35: Responsive Design with Axure 7.0’s Adaptive Views](https://reader033.vdocuments.us/reader033/viewer/2022052700/55cd45ffbb61eb371c8b46af/html5/thumbnails/35.jpg)
That’s All Folks!
light_forger
@svetlindenkov
Svetlin Denkov
*Icon credit: www.flaticon.com*Image credit: www.axure.com