Responsive Layout Frameworks for      XPages Application UI                        Chris Toohey                     Decemb...
What we’ll cover…•    What is a Responsive Layout?•    Industry-standard Responsive Layout Frameworks.•    Tips for Gettin...
What is a Responsive Layout?• Refers to “Responsive web design”, or RWD.• Single design that “responds” to available scree...
What is a Responsive Layout?• “Fluid Grid System” [Often 12 “Grid” Layout] Chris Toohey | www.dominoGuru.com
Industry-standard Responsive Layout Frameworks.Chris Toohey | www.dominoGuru.com
Industry-standard Responsive Layout Frameworks.Chris Toohey | www.dominoGuru.com
Tips for Getting Started!• Resource Placement       • Code Libraries (Client Side JavaScript)       • Image Resources     ...
Tips for Getting Started!• Add bootstrap.css & bootstrap-responsive.css  to XPage Resources   – Gives you selectable style...
Tips for Getting Started!• Create a simple “layout.xsp” Custom Control  <?xml version="1.0" encoding="UTF-8"?>  <xp:view  ...
Tips for Getting Started!• Create a simple “layout.xsp” Custom Control  <?xml version="1.0" encoding="UTF-8"?>  <xp:view  ...
Pros and Cons of Responsive Layouts• “Let them eat cake!”   – Most RWD frameworks deliver all markup, and let     the clie...
Pros and Cons of Responsive Layouts• What is Progressive Enhancement?   Combination of Graceful Degredation and     levera...
Pros and Cons of Responsive Layouts• What is Progressive Enhancement?   Combination of Graceful Degredation and     levera...
Pros and Cons of Responsive Layouts• What is Progressive Enhancement?   Combination of Graceful Degredation and     levera...
Pros and Cons of Responsive Layouts• Ask yourself two important questions:   – Who will use my application?   – How will t...
Pros and Cons of Responsive LayoutsChris Toohey | www.dominoGuru.com
Pros and Cons of Responsive LayoutsChris Toohey | www.dominoGuru.com
Pros and Cons of Responsive Layouts Be Warned! If we used the standard RWD “refactor” tactics, you‘d be asking for the 2nd...
Pros and Cons of Responsive Layouts Be Warned! If we used the standard RWD “refactor” tactics, you‘d be asking for the 2nd...
Takeaways…• Twitter Bootstrap   – http://twitter.github.com/bootstrap/• Combine RWD with Progressive Enhancement   – Bette...
Upcoming SlideShare
Loading in …5
×

Responsive Layout Frameworks for XPages Application UI

5,796 views

Published on

2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
5,796
On SlideShare
0
From Embeds
0
Number of Embeds
2,215
Actions
Shares
0
Downloads
62
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Responsive Layout Frameworks for XPages Application UI

  1. 1. Responsive Layout Frameworks for XPages Application UI Chris Toohey December 12, 2012Chris Toohey | www.dominoGuru.com
  2. 2. 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 Chris Toohey | www.dominoGuru.com
  3. 3. 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 Chris Toohey | www.dominoGuru.com
  4. 4. What is a Responsive Layout?• “Fluid Grid System” [Often 12 “Grid” Layout] Chris Toohey | www.dominoGuru.com
  5. 5. Industry-standard Responsive Layout Frameworks.Chris Toohey | www.dominoGuru.com
  6. 6. Industry-standard Responsive Layout Frameworks.Chris Toohey | www.dominoGuru.com
  7. 7. 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. Chris Toohey | www.dominoGuru.com
  8. 8. Tips for Getting Started!• Add bootstrap.css & bootstrap-responsive.css to XPage Resources – Gives you selectable styleClasses!• “Grid” means spanN – Use “spans” & “offsets” for positioning elements. Chris Toohey | www.dominoGuru.com
  9. 9. Tips for Getting Started!• 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="row-fluid"> <xp:div styleClass="span2"> <xp:callback facetName="navigation" /> </xp:div> <xp:div styleClass="span10"> <xp:callback facetName="content" /> </xp:div> </xp:div> </xp:div> </xp:view> Standard Browser Layout Chris Toohey | www.dominoGuru.com
  10. 10. Tips for Getting Started!• 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="row-fluid"> <xp:div styleClass="span2"> <xp:callback facetName="navigation" /> </xp:div> <xp:div styleClass="span10"> <xp:callback facetName="content" /> </xp:div> </xp:div> </xp:div> </xp:view> Mobile Browser Layout Chris Toohey | www.dominoGuru.com
  11. 11. 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! Chris Toohey | www.dominoGuru.com
  12. 12. Pros and Cons of Responsive Layouts• What is Progressive Enhancement? Combination of Graceful Degredation and leveraging client type specific functionlity. Chris Toohey | www.dominoGuru.com
  13. 13. Pros and Cons of Responsive Layouts• What is Progressive Enhancement? Combination of Graceful Degredation and leveraging client type specific functionlity. Chris Toohey | www.dominoGuru.com
  14. 14. Pros and Cons of Responsive Layouts• What is Progressive Enhancement? Combination of Graceful Degredation and leveraging client type specific functionlity. Chris Toohey | www.dominoGuru.com
  15. 15. Pros and Cons of Responsive Layouts• 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… Chris Toohey | www.dominoGuru.com
  16. 16. Pros and Cons of Responsive LayoutsChris Toohey | www.dominoGuru.com
  17. 17. Pros and Cons of Responsive LayoutsChris Toohey | www.dominoGuru.com
  18. 18. Pros and Cons of Responsive Layouts 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…Chris Toohey | www.dominoGuru.com
  19. 19. Pros and Cons of Responsive Layouts 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…Chris Toohey | www.dominoGuru.com
  20. 20. 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. Chris Toohey | www.dominoGuru.com

×