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