Responsive Layout Frameworks for XPages Application UI

Responsive Layout Frameworks for
XPages Application UI
Chris Toohey
December 12, 2012

Chris Toohey | www.dominoGuru.com

What we’ll cover…

• What is a Responsive Layout?
• Industry-standard Responsive Layout Frameworks.
• Tips for Getting Started!
• Pros and Cons of Responsive Layouts
– Responsive Layout vs. Progressive Enhancement


What is a Responsive Layout?

• Refers to “Responsive web design”, or RWD.
• Single design that “responds” to available screen size
and/or client type.
– Standard Web Browsers
– Mobile Device Browsers
– Tablet Browsers
– “Other” Browsers


What is a Responsive Layout?

• “Fluid Grid System” [Often 12 “Grid” Layout]


Industry-standard Responsive Layout Frameworks.


Tips for Getting Started!

• Resource Placement
• Code Libraries (Client Side JavaScript)
• Image Resources
• Stylesheet Resources

– Pay attention to the directory structure of resources!
• Use “alias” for pseudo-directory positioning.



• Add bootstrap.css & bootstrap-responsive.css
to XPage Resources
– Gives you selectable styleClasses!
• “Grid” means spanN
– Use “spans” & “offsets”
for positioning elements.



• Create a simple “layout.xsp” Custom Control
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core">

<xp:this.resources>
<xp:script src="http://code.jquery.com/jquery-latest.js" clientSide="true" />
<xp:script src="/bootstrap.js" clientSide="true" />
<xp:styleSheet href="/bootstrap.min.css" />
<xp:styleSheet href="/bootstrap-responsive.min.css" />
<xp:metaData name="viewport" content="width=device-width, initial-scale=1.0" />
</xp:this.resources>

<xp:div styleClass="container-fluid">
<xp:div styleClass="row-fluid">
<xp:callback facetName="header" />
</xp:div>
<xp:div styleClass="span2">
<xp:callback facetName="navigation" />
</xp:div>
<xp:callback facetName="content" />
</xp:div>
</xp:div>
</xp:div>

</xp:view> Standard Browser Layout


• Create a simple “layout.xsp” Custom Control
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core">

<xp:this.resources>
<xp:script src="http://code.jquery.com/jquery-latest.js" clientSide="true" />
<xp:script src="/bootstrap.js" clientSide="true" />
<xp:styleSheet href="/bootstrap.min.css" />
<xp:styleSheet href="/bootstrap-responsive.min.css" />
<xp:metaData name="viewport" content="width=device-width, initial-scale=1.0" />
</xp:this.resources>

<xp:div styleClass="container-fluid">
<xp:callback facetName="header" />
</xp:div>
<xp:callback facetName="navigation" />
</xp:div>
<xp:callback facetName="content" />
</xp:div>
</xp:div>
</xp:div>

</xp:view> Mobile Browser Layout

Pros and Cons of Responsive Layouts

• “Let them eat cake!”
– Most RWD frameworks deliver all markup, and let
the client render the UI.
• Mobile Access can
mean less bandwidth
• [Potentially] slower
• Less control over UI/UX!



• What is Progressive Enhancement?
Combination of Graceful Degredation and
leveraging client type specific functionlity.



• Ask yourself two important questions:
– Who will use my application?
– How will they use my application?
• Content Delivery vs. Interactive Applications
– Most RWD success stories are from publications…



Be Warned!
If we used the standard RWD
“refactor” tactics, you‘d be asking
for the 2nd Personal Email Address
11 lines before the New Contact’s
Phone Number…


Takeaways…
• Twitter Bootstrap
– http://twitter.github.com/bootstrap/
• Combine RWD with Progressive Enhancement
– Better User Experiences with XPages applications
– Leveraging the features of while accounting for
potential limitations of the user client / device.


Responsive Layout Frameworks for XPages Application UI

More Related Content

Responsive Layout Frameworks for XPages Application UI