Responsive Layout Frameworks for XPages Application UI

Dec 12, 2012Download as PPTX, PDF3 likes3,415 views

The document discusses responsive layout frameworks for XPages applications. It covers what responsive layouts are, popular frameworks like Twitter Bootstrap, tips for getting started like using Bootstrap styles and grids, and the pros and cons of responsive layouts versus progressive enhancement. Responsive layouts make a single design adapt to different screen sizes but may be slower, while progressive enhancement combines graceful degradation and client-specific functionality.

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

Chris Toohey | www.dominoGuru.com

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

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

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

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

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

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

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

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

Pros and Cons of Responsive Layouts

Chris 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 Personal Email Address
11 lines before the New Contact’s
Phone Number…

Chris Toohey | www.dominoGuru.com

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

Let Connect come to you! In this webinar, Brian Gleeson and Martin Donnelly from the IBM Development Team present their Connect 2016 session. Bootstrap was integrated into the XPages Extension Library in 2014 and has continued to rapidly evolve ever since. This responsive design capability empowers you to build the slickest Domino Web applications ever - where the user experience dynamically adapts for the desktop, tablet, or smaller mobile devices. Brian and Martin will show you how to quickly and easily transform your old applications into something that will impress your end users (and your boss)!

IBM Connect 2016 - AD1548 - Building Responsive XPages Applicationsbeglee

This document provides an agenda for a presentation on building responsive XPages applications using Bootstrap. The presentation will introduce Bootstrap 3 and 4, provide demos of features like grids and media queries, and cover tips and best practices. Speakers will discuss upgrading to newer Bootstrap versions, changes in Bootstrap 4, and tools for testing responsive designs. The ExtLibX project for supporting Bootstrap 4 in XPages will also be presented.

XPages Workshop: Customizing OneUIMichael McGarel

Engage - Expanding XPages with Bootstrap Plugins for ultimate usabilityJohnny Oldenburger

Develop highly user friendly responsive web (XPages) applications by making use of Bootstrap and JQuery Plugins as Select2, DateTimePickers, Multiselect, Confirmation, Modals, Popovers and Notifications for ultimate usability based on the latest versions of these plugins, including solutions for the AMD problem. Expect more of XPages Applications and go beyond the basics and create applications that nobody ever thought possible using XPages. Comprehensive demos of several plugins are shown within an XPages application.

AD1387: Outside The Box: Integrating with Non-Domino Apps using XPages and Ja...panagenda

Users don’t care where their data lives. They just want to get their work done quickly and efficiently. They would prefer to do their work without opening three different applications and five different browser tabs. That means your applications need to share data and work well with other applications. So what can you do? Use XPages and Java, of course! Kathy and Julian will give you integration tips and examples of connecting your XPages apps to both IBM and non IBM technologies. Walk away with a head full of knowledge and a sample database full of working code. NOTE: this session is geared towards XPages and Java developers, beginners welcome! A presentation from Julian Robichaux (panagenda) and Kathy Brown (PSC Group).

Take Your XPages Development to the Next Levelbalassaitis

Slide deck from IBM ConnectED 2015 session BP105: Take Your XPages Development to the Next Level This intermediate-level session is for anyone who has a little bit of XPages experience. In the session, we dug deeper into a number of features that are built into XPages and can help improve application responsiveness, streamline design with code reuse, and take more control over the output that is generated by XPages controls. There was way too much content to fit into a single session, but the slide deck includes all of the extra material that was prepared. Topics: Application Responsiveness Server-Side JavaScript Modifying Component Output Java Custom Controls Debugging Tips Event Handlers Dojo

MWLUG 2016 : AD117 : Xpages & jQuery DataTablesMichael Smith

- DataTables is a jQuery plugin that enhances the accessibility of data in HTML tables. It allows for easy creation of rich, interactive views in XPages applications. - Data can be added to DataTables from HTML, a JavaScript array, or an Ajax data source like REST. Callbacks provide a way to add interactivity similar to the XPages lifecycle. - Advanced configuration options include click handlers, renderers, filtering, lazy loading, and categorization to create feature-rich views.

Rapidly prototyping web applications using BackPressNathaniel Taintor

From my talk at WordCamp Seattle 2011: Most people who work with WordPress every day have at best a passing familiarity with what BackPress is. And for good reason – its a very unfinished project, with very few real-world examples and very scarce documentation. At its heart, though, BackPress is (was) a very ambitious project, and still can be valuable to developers who learned to code hacking on WordPress. The same functionality and structure that makes WordPress so easy and pleasant to work on can be harnessed to just about any end you can imagine. I’ll try to explain when and where BackPress might be a good choice to use on a project, and what to look at if you’re thinking about getting started in it.

jQuery - the world's most popular java script library comes to XPagesMark Roden

This document discusses using jQuery with XPages. It begins with an introduction to jQuery, explaining that it is a popular JavaScript library that simplifies document manipulation, events, animation, and AJAX. It then compares jQuery to Dojo and provides guidance on when each should be used. The document demonstrates how jQuery works via its API and methods. It also explains how to add jQuery to an XPages application either directly in code or via a theme. Finally, it discusses jQuery plugins and how they can provide ready-made functionality to solve requirements.

Blisstering drupal module development ppt v1.2Anil Sagar

1. Implement hook_form() to define the form structure using Form API elements like #type, #title, etc. 2. Add validation and submission handlers to validate form data and process form submission. 3. In the validation handler, validate the form data and use drupal_set_message() to display errors. 4. In the submission handler, save the form values and use drupal_set_message() to display success messages. This allows you to create a basic configuration form, validate the submitted data, and save the configuration values on successful validation using Drupal's Form

XPages Binary OutputJohnFoldager

Great Responsive-ability Web DesignMike Wilcox

With great power, comes great responsive-ability web design. Responsive web design (RWD) will be demystified. Believe it or not, it's more than just media queries, although those will be discussed. It starts with proper UI design and application architecture, and then the dive into CSS - but not too deep! You don't have to be an expert to do RWD, but it helps to have some idea of what you are doing.

Component Driven Design and DevelopmentCristina Chumillas

This document discusses component-driven design and development. It covers topics like components, design systems, CSS methodologies, style guides, and how to implement a component-based approach in Drupal. Specific methodologies discussed include Atomic Design, BEM, OOCSS, SMACSS. It also covers style guides, KSS for generating documentation from code, and various Drupal-specific techniques for building out components like display suite, panels, and code alterations. The overall message is that taking a component and design system approach improves reusability, efficiency, and maintainability of projects.

Angular mobile angular_uDoris Chen

Angular: Go Mobile! How could you develop a mobile app across iOS, Android or windows devices? We’ll show how Apache Cordova opens the world of mobile app development to web developers. In the session, a “To Do” app using Angular will be explored and then it will be demonstrated step by step on how to turn it into a mobile app, with access to native device capabilities. Along the way, you'll also learn what kind of apps are best-suited for the hybrid architecture and when to make the switch from web app to mobile app.

Battle of the Front-End Frameworks: Bootstrap vs. FoundationRachel Cherry

This document compares the Bootstrap and Foundation front-end frameworks. Both frameworks provide pre-built CSS and JavaScript components to help build responsive websites, but they differ in some key ways. Bootstrap uses Less/Sass and supports IE8 with polyfills, while Foundation only uses Sass and does not support IE8. Foundation has a more flexible grid system and "mobile-first" CSS, while Bootstrap requires adding classes for full responsiveness. Overall, the document analyzes the differences in functionality, compatibility, and implementation of these popular front-end frameworks.

Drupal 6 to 7 migration guideEbizon

The document provides instructions for upgrading a Drupal 6 website to Drupal 7. It outlines the key steps, which include converting custom modules and themes, backing up the database and files, downloading Drupal 7, running the update.php script, and testing the upgraded site. It also addresses common issues such as changes to how nodes, comments, users, and taxonomy are handled in Drupal 7 compared to Drupal 6. The FAQ section answers additional questions about differences between the two versions.

jQuery Comes to XPagesTeamstudio

Whether you want to add some serious eye candy to your XPages Applications or just want to do more with less code, jQuery, the world’s most popular JavaScript framework can help you. Come to this webinar and find out how you can use some of the thousands of jQuery plugins, in harmony with Dojo, within your XPages applications to create a better experience not only for your users, but for you as a developer. In this webinar, we'll look at how jQuery works, how to add it to your XPages, and how a complete JavaScript beginner can take advantage of its power. We'll demonstrate many working examples -- and a sample database will be provided.

Best Practice Checklist for Building a Drupal WebsiteAcquia

This document provides a checklist for building a Drupal site, including planning content types and fields, implementing views and panels, testing, and deploying the site. It covers content strategy, search engine optimization, accessibility, responsive design, user accounts, content types, views, cleanup, and pre-launch tasks. Completing the checklist helps ensure a cleaner configuration, smoother launch, and consistency across the site build process.

State of jQuery June 2013 - Portlanddmethvin

The jQuery Foundation coordinates work on the jQuery project, including code, documentation, infrastructure, and events. It is a non-profit organization funded by conferences, donations, and memberships. The Foundation maintains jQuery and related projects like jQuery UI, jQuery Mobile, and QUnit on GitHub. jQuery 1.x continues to support older browsers while jQuery 2.x supports modern browsers, with both versions maintaining API compatibility. Major releases in 2012 included jQuery 1.9 in January and jQuery 2.0 in April.

Practical tipsmakemobilefaster oscon2016Doris Chen

Doris Chen is a senior developer evangelist at Microsoft who focuses on web technologies like JavaScript and HTML5. Her presentation covers optimizing Cordova app performance, including measuring startup cost and memory usage, using CSS for gradients instead of images, animating with translate3d instead of left/top, and handling events through bubbling instead of individual listeners. She provides tips like keeping the DOM simple, batching layout changes, and cleaning up unused objects to prevent memory leaks.

Drupal Frontend Performance and ScalabilityAshok Modi

This document discusses strategies for improving Drupal frontend performance. It introduces the presenters and their backgrounds working with Drupal. Then it outlines various tools for measuring performance, points of optimization like reducing requests and file sizes, optimizing caching, and techniques like lazy loading images and minifying files. Specific optimizations discussed include using CDNs, Gzip compression, and optimizing CSS/JS selectors. The goal is to define objectives, diagnose issues, and apply optimizations at various points to improve frontend load times and site performance.

Responsive Web Design: Clever Tips and TechniquesVitaly Friedman

Agile documentation with Confluence and Sparx Enterprise ArchitectPer Spilling

Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas

In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users. This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!

What's New in Bootstrap 5Jubair Ahmed Junjun

Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...Mediacurrent

This document summarizes a presentation about using Display Suite, Context, Views, and Panels modules in Drupal to build sites. It discusses how these modules can be used individually and together to construct content, arrange blocks on pages, and display content lists. Display Suite is highlighted as a powerful tool for building custom content and Views, while Context is useful for arranging blocks. The presentation provides examples of how to integrate these modules and considers real-world use cases.

Responsive WebsitesJoe Seifi

Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens

Websites are viewed on all kinds of devices, in all kinds of browsers. In this presentation, I explain how you can adapt your site to these different environments, using modern browser hooks and techniques. I cover the various aspects (and some gotchas) of the viewport mechanism and media queries, and shed a light on how new CSS3 properties allow you to optimize images and videos for multiple screens.

More Related Content

What's hot (20)

MWLUG 2016 : AD117 : Xpages & jQuery DataTablesMichael Smith

Rapidly prototyping web applications using BackPressNathaniel Taintor

jQuery - the world's most popular java script library comes to XPagesMark Roden

Blisstering drupal module development ppt v1.2Anil Sagar

XPages Binary OutputJohnFoldager

Great Responsive-ability Web DesignMike Wilcox

Component Driven Design and DevelopmentCristina Chumillas

Angular mobile angular_uDoris Chen

Battle of the Front-End Frameworks: Bootstrap vs. FoundationRachel Cherry

Drupal 6 to 7 migration guideEbizon

jQuery Comes to XPagesTeamstudio

Best Practice Checklist for Building a Drupal WebsiteAcquia

State of jQuery June 2013 - Portlanddmethvin

Practical tipsmakemobilefaster oscon2016Doris Chen

Drupal Frontend Performance and ScalabilityAshok Modi

Responsive Web Design: Clever Tips and TechniquesVitaly Friedman

Agile documentation with Confluence and Sparx Enterprise ArchitectPer Spilling

Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas

What's New in Bootstrap 5Jubair Ahmed Junjun

Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...Mediacurrent

MWLUG 2016 : AD117 : Xpages & jQuery DataTablesMichael Smith

Rapidly prototyping web applications using BackPressNathaniel Taintor

jQuery - the world's most popular java script library comes to XPagesMark Roden

Blisstering drupal module development ppt v1.2Anil Sagar

XPages Binary OutputJohnFoldager

Great Responsive-ability Web DesignMike Wilcox

Component Driven Design and DevelopmentCristina Chumillas

Angular mobile angular_uDoris Chen

Battle of the Front-End Frameworks: Bootstrap vs. FoundationRachel Cherry

Drupal 6 to 7 migration guideEbizon

jQuery Comes to XPagesTeamstudio

Best Practice Checklist for Building a Drupal WebsiteAcquia

State of jQuery June 2013 - Portlanddmethvin

Practical tipsmakemobilefaster oscon2016Doris Chen

Drupal Frontend Performance and ScalabilityAshok Modi

Responsive Web Design: Clever Tips and TechniquesVitaly Friedman

Agile documentation with Confluence and Sparx Enterprise ArchitectPer Spilling

Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas

What's New in Bootstrap 5Jubair Ahmed Junjun

Learn Drupal's Most Powerful Site-Building Modules: Display Suite, Context, V...Mediacurrent

Similar to Responsive Layout Frameworks for XPages Application UI (20)

Responsive WebsitesJoe Seifi

Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens

SCREENS - 2012-09-28 - Responsive Web Design, get the best from your designFrédéric Harper

This document discusses responsive web design and how websites can adapt to different devices. It notes how people now access the web through desktop browsers, mobile browsers, tablets, TVs, game consoles and more. Responsive web design involves making sites flexible through techniques like flexible grids, flexible images and media, and media queries. Media queries allow stylesheets to be tailored for different device widths. Key aspects of responsive design include considering user needs over our own, adapting to device capabilities, and future-proofing sites. The document provides examples of responsive patterns and techniques.

Responsive Web Design - What You Need to Know to Get Startedjennybchicken

Responsive web design (RWD) uses fluid grids and flexible images to provide optimal viewing experiences across different devices. It involves using media queries and conditional CSS to progressively enhance a website for different screen sizes rather than separate mobile sites. Key aspects of RWD include flexible grids, media queries, and flexible images and media. Popular frameworks like 960 Grid System help build flexible layouts. More websites are adopting RWD to create responsive designs that work on any device.

Bootstrap Framework Yaowaluck Promdee

Multi screen HTML5Ron Reiter

HTML CSS & JavascriptDavid Lindkvist

Business of Front-end Web DevelopmentRachel Andrew

1) Rachel Andrew discusses considerations when choosing tools and frameworks for front-end development projects, emphasizing progressive enhancement and ensuring the core experience works for all. 2) She argues against over-reliance on frameworks, which can mask issues and prevent learning core skills. Frameworks should be used lightly and evaluated on a case-by-case basis. 3) Andrew talks about the importance of standards-based development and contributing to emerging specifications like CSS Grid Layout, rather than depending entirely on pre-processors. Her goal is to encourage continued progress of the open web.

Web Development for UX DesignersAshlimarie

Let's dig into the Omega Theme!Mediacurrent

The Omega Drupal 7 Base Theme is a highly configurable HTML5/960 grid base theme that uses built-in media queries to make the site responsive. Each zone (group of regions) can be configured for content first layouts, that resize and rearrange themselves depending on the screen size of the user's device. The presentation will walk-through the theory behind Omega's mobile-first approach, how to use the many configuration options on the theme settings page, pitfalls to avoid, and what's on the forecast for Omega 4.x! Additional Resources: bit.ly/omega-tips

Responsivedesign 7-3-2012Thomas Carney

The document is a presentation by Tom Carney about responsive web design. It discusses Carney's background in web development for over 10 years and experience with mobile and responsive design for 18 months. The presentation covers the introduction of responsive design, responsive design techniques like grids, media queries and plugins, transitioning websites to responsive design, responsive design workflows, and examples of responsive design. It addresses setting separate mobile sites versus responsive design and takes questions from the audience.

Responsive websites. ToolboxWojtek Zając

Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Christian Rokitta

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. What are CSS grids and media queries, how do they work and how integrate these in my APEX application design? These are the questions I want to answer during my presentation, build an example explication using Theme 25, the responsive theme provided in Oracle Application Express 4.2.

Mobile Monday Presentation: Responsive Web DesignCantina

Responsive UX - One size fits all @BigDesign conference #BigD12touchtitans

Building Responsive Websites with DrupalSuzanne Dergacheva

Everyone is going mobile these days and Drupal is no exception. There are lots of techniques for building mobile-friendly websites with Drupal from full-blown mobile applications to using a mobile-specific theme. Responsive design is a simpler way of designing for mobile. The goal of responsive design is to design a site so that the layout adapts to the width of the user's screen, making websites usable on all kinds of devices from mobile phones to large monitors. This webinar will discuss how you can apply responsive design techniques to a Drupal website and will include the following topics: * Steps to building a responsive Drupal 7 theme * Challenges when designing a responsive layout * Drupal elements that are particularly challenging to adapt * CSS techniques for responsive design * Responsive Drupal base themes

Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Suzanne Dergacheva

Everyone is going mobile these days and Drupal is no exception. There are lots of techniques for building mobile-friendly websites with Drupal from full-blown mobile applications to using a mobile-specific theme. Responsive design is a simpler way of designing for mobile. The goal of responsive design is to design a site so that the layout adapts to the width of the user's screen, making websites usable on all kinds of devices from mobile phones to large monitors. This session will discuss how you can apply responsive design techniques to your Drupal website and how to make design choices that work within a responsive framework. Topics will include: Steps to building a responsive Drupal 7 theme Challenges when designing a responsive layout Drupal elements that are particularly challenging to adapt CSS techniques for responsive design Responsive Drupal base themes

Front end development best practicesKarolina Coates

Clean separationatorreno

Create Responsive Website Design with Bootstrap 3Wahyu Putra

Responsive WebsitesJoe Seifi

Responsive design: techniques and tricks to prepare your websites for the mul...Andreas Bovens

SCREENS - 2012-09-28 - Responsive Web Design, get the best from your designFrédéric Harper

Responsive Web Design - What You Need to Know to Get Startedjennybchicken

Bootstrap Framework Yaowaluck Promdee

Multi screen HTML5Ron Reiter

HTML CSS & JavascriptDavid Lindkvist

Business of Front-end Web DevelopmentRachel Andrew

Web Development for UX DesignersAshlimarie

Let's dig into the Omega Theme!Mediacurrent

Responsivedesign 7-3-2012Thomas Carney

Responsive websites. ToolboxWojtek Zając

Responsive Web Design & APEX Theme 25 (OGh APEX World 2014)Christian Rokitta

Mobile Monday Presentation: Responsive Web DesignCantina

Responsive UX - One size fits all @BigDesign conference #BigD12touchtitans

Building Responsive Websites with DrupalSuzanne Dergacheva

Creating a Responsive Drupal Theme: Presentation from DrupalCamp Montreal 2012Suzanne Dergacheva

Front end development best practicesKarolina Coates

Clean separationatorreno

Create Responsive Website Design with Bootstrap 3Wahyu Putra

Responsive Layout Frameworks for XPages Application UI

1. Responsive Layout Frameworks for XPages Application UI Chris Toohey December 12, 2012 Chris Toohey | www.dominoGuru.com

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. 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. What is a Responsive Layout? • “Fluid Grid System” [Often 12 “Grid” Layout] Chris Toohey | www.dominoGuru.com

5. Industry-standard Responsive Layout Frameworks. Chris Toohey | www.dominoGuru.com

6. Industry-standard Responsive Layout Frameworks. Chris Toohey | www.dominoGuru.com

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. 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. 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. 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. 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. 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. 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. 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. 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. Pros and Cons of Responsive Layouts Chris Toohey | www.dominoGuru.com

17. Pros and Cons of Responsive Layouts Chris Toohey | www.dominoGuru.com

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. 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. 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

Responsive Layout Frameworks for XPages Application UI

Recommended

More Related Content

What's hot (20)

Similar to Responsive Layout Frameworks for XPages Application UI (20)

Responsive Layout Frameworks for XPages Application UI