Responsive Design with Axure 7.0’s Adaptive Views

by Svetlin Denkov@svetlindenkov

+

Who am I?

→DePaul CDM IxDA Chicago

?

Prototyping Experience

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

I write, but also…

…present on Axure and other prototyping tools:

Axure Meetup Chicago

Today’s Agenda

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]

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

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

The RWD Context

*RWD = Responsive Web Design

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

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

RWD & Axure

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

Let’s Jump In!

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

Prerequisite:

Laying Content & Mobile Viewports

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)

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

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

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

Real World Example

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

iPhone 5/5c/5S Example (cont)

If content is at retina (640px by 1136px):

If content is at non retina (320px by 568px):

Hammer Time!

(Ahem…Demo Time)

Adaptive Views Limitations

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

Takeaways

TAKEAWAYS

For RWD:

- Have agreement on the breakpoints- Plan ahead before starting to prototype- Prototype only what’s necessary

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

CONCLUSION

Give Axure 7.0 and Adaptive Views a try.

They will be a nice addition to your tool set!

Questions?

(Really, don’t be shy!)

That’s All Folks!

light_forger

@svetlindenkov

Svetlin Denkov

*Icon credit: www.flaticon.com*Image credit: www.axure.com