iRise Company Confidential © 2013 1

Responsive Design With iRise: Designing Mobile Apps for a Multi-Device World

Eric Romanikid8

iRise Company Confidential © 2013 2

How did we get here?

Source: Mary Meeker / KPCB

iRise Company Confidential © 2013 3

iBlocs that Support Responsive Web Design

• All four work in web browsers, mobile browsers and iRise iOS apps

• Each can be used independently or in combination for a wide variety of responsive behaviors

Break Points Liquid Layout OrientationInsert Widget

iRise Company Confidential © 2013 4

Break Points in Responsive Web Design

Phone Tablet Desktop

0 600 1050 ∞

• Design to ranges of screen sizes instead of specific devices• Break points are the screen widths that define the dividing point 

between each range

iRise Company Confidential © 2013 5

Break Points iBloc

• Triggers actions or links based on screen width on page load and resize

• Define up to 4 devices with custom screen width ranges

• Detects screen width change and fires 4 custom events:o On change to device 1, 2, 3 and 4

• Custom events can be used to:o Redirect to separate versionso Dynamically alter layouts on a single page

iRise Company Confidential © 2013 6

• Custom events can be used to trigger link widgets and navigate to separate pages

• Pages can represent completely different designs and/or responsive design versions for each device

• Use a dedicated “redirection page” to automaticallyredirect on load

• Useful for viewing one simulation on multiple devices

Break Points iBloc – Redirect to Separate Pages

iRise Company Confidential © 2013 7

• Custom events can be used to trigger actions that reposition and resize elements on the page

• Use Edit Properties, Switch Views, and/or Show/Hide Actions to create a different layout using the same elements

• Parallels current best practices in development, representing true responsive design

Break Points iBloc – Change Layout with Actions

iRise Company Confidential © 2013 8

Break Points iBloc – Links vs. Actions

• When to use Actions to change layout:o The bulk of the content for all versions is identical, and mostly resizing 

and repositioning of elements is needed to reformat the pageo The number of actions required to reformat the page is relatively lowo You are comfortable using Actions in iRise

• When to use Links to redirect to separate pageso Much of the content differs between versionso Reformatting the page is complex and would require a large number of 

Actionso You are more comfortable with page widgets than Actions, and would 

prefer to manage separate versions

iRise Company Confidential © 2013 9

Responsive Web Design and ‘Liquid’ Layout• ‘Liquid’ (aka ‘fluid’, ‘flexible’, ‘relative’, ‘elastic’) layout refers to pages where 

content adapts to the size of the window• Becoming increasingly popular on the web to maximize screen real estate, 

especially when viewed in mobile devices• Accomplishes many of the goals of Responsive Web Design

iRise Company Confidential © 2013 10

Liquid Layout iBloc

• Scales and positions elements relative to screen dimensions• Dynamically alters layout on a single page on load and on 

resize• Effects are activated by including keywords in widget Name 

property:o *stretch* (optional: *wrap* and %XX%)o *fix* (optional: @XXX@)o *right*o *bottom*o *center*o *middle*

• Liquid Layout is an Action iBloc, triggered with Page On load event

iRise Company Confidential © 2013 11

Dropping Columns in Responsive Design

• Multi‐column layouts can ‘drop’ columns to fit narrower screen sizes.

>

iRise Company Confidential © 2013 12

Insert Widget iBloc

• Moves any iRise widget into an existing iRise container (Section or Table)

• Facilitates rearranging page layout, e.g., ‘dropping’ columns for narrower screens

• Simplifies otherwise complex page transformations

iRise Company Confidential © 2013 13

Responsive Design and Device Orientation

• Good responsive design targets specific types of devices as well as screen orientation for each device.

>

iRise Company Confidential © 2013 14

Orientation iBloc

• Triggers actions or links based on device orientation (portrait or landscape)

• Simulates orientation change in browser for iPad 2, iPhone 4, and Android Phone page types

• Responds to orientation change in iOS apps• Like Break Points, can be used to:

o Redirect navigation to separate versionso Dynamically change layout on a page

• Detects screen width and fires 2 custom events:o On landscapeo On portrait

iRise Company Confidential © 2013 15

Combining RWD iBloc Effects

• Use Liquid Layout with Break Points or Orientation to:o Simplify page layout reformatting –

• Liquid Layout can take care of scaling and repositioning of elements

• Break Points can switch views and show/hide widgets

o Allow for flexible layouts within specific device versions

• Use Break Points with Orientation to switch between versions for specific devices and support orientation change within each device

iRise Company Confidential © 2013 16

For downloads and more information

• irise.com – iBloc downloads• community.irise.com – Announcements and feedback• id8.com/workshop – id8 iBloc downloads, help & 

resources• Twitter: @id8_prototyping & @iRiseTeam• [email protected] & [email protected]

iRise Company Confidential © 2013 17