Adaptive Views and Responsive Web Design

Presenters: Jim Hobart and Saikat Mandal (USA)

Abstract:

Responsive design has become the leading technique for delivering multi-device solutions.

Adaptive views allows you to prototype a solution and adapt the display for different viewports to simulate response designs.

Learn how we have used Adaptive views to build real-world prototypes for our clients. We’ll share what we have learned including pitfalls, complexity,  and managing this new capability for visualizing requirements.

Outline:

  • Why adaptive views?
  • Why Axure vs. prototyping in ‘Code’ - Bootstrap, Foundation frameworks?
  • Real-world example of adaptive view and responsive design for an enterprise application
  • Lessons learned

Building a large-scale cross-screen UI library

Presenter: Lennart Hennigs

Link to Lennart's slides

In this presentation I will share my experiences creating a Axure starter package for in-house use at my company, focusing on the UI library part covering mobile and web. You will learn how to use Widget Styles in Axure to speed up the creation process and to reduce the complexity. I will share my learnings to help you build your own libraries and get your company started with prototyping.

Lennart's Sildes

Making Axure Responsive Demos Less Confusing

Presenter: Svetlin Denkov

Download the RP file | Link to Svet's presentation on AxShare

Presentation Summary

This presentation will explain to intermediate and advanced Axure users techniques for more effectively demoing Responsive Web Designs (RWD) when using the new adaptive views feature. Participants will learn how to structure their responsive prototypes so breakpoint content can be shown in the desktop browser without relying on the window resizing metaphor. The speaker will walk through the design of a responsive prototype, and then he will demo two different approaches: first, switching breakpoints one at a time; second, engaging breakpoints interactively all at once. Additionally, the audience will learn more on how the adaptive view feature works as the building blocks of the approaches are discussed in detail.

Take Aways

1. Overview of adaptive views and setting breakpoints for mobile and tablet devices

2. Explaining alternative RWD presentation methods and showcasing their benefits

3. Learn to use iFrames for simulating different viewports

4. Learn to create a realistic looking rotation widget using device shells

5. Learn to preserve context across breakpoints via variables

Achieving responsive, realistic, data driven design using Repeaters and RWD Views.

Presenter: Joseph Reni

Summary: In this presentation you will learn how to effectively use Repeaters to include accurate and realistic data in Axure prototypes. You will learn how to properly implement repeaters in multiple views as well as the principles and advantages of using expandable, editable data tables. Finally, this presentation will walk you through a tutorial of building an inline commenting feature which can take in comments and display them with avatars in a group of older comments. Participants will also learn how to dynamically filter, sort, and organize the repeater data.

Take Home:

  • Overview of the basic Repeater functionality
  • Understand the value of using realistic data
  • Learn some advanced methods of implementing Repeaters
  • Learn to effectively use Repeaters within RWD views
  • Learn to create a custom expandable commenting widget