Top Banner
iRise Company Confidential © 2013 1 Responsive Design With iRise: Designing Mobile Apps for a Multi-Device World Eric Romanik id8

Responsive Design With iRise: Designing Mobile Apps for a · Responsive Web Design and ‘Liquid’ Layout • ‘Liquid’ (aka

Sep 24, 2020



Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
  • 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 widgetso 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

    • – iBloc downloads• – Announcements and feedback• – id8 iBloc downloads, help & 

    resources• Twitter: @id8_prototyping & @iRiseTeam• &

  • iRise Company Confidential © 2013 17