Skip to main content link. Accesskey S
  • Help
  • IBM Logo
  • IBM Web Experience Factory wiki
  • All Wikis
  • All Forums
  • ANNOUNCEMENT: Wiki changed to read-only. READ MORE...
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • IBM Redbooks
  • API Documentation
Search
Community Articles > Resources for Developers > Using a Data Layout to implement Responsive Web Design
  • Share Show Menu▼
  • Subscribe Show Menu▼

About the Original Author

Click to view profileIBM contributorGarry Sager
Contribution Summary:
  • Articles authored: 16
  • Articles edited: 0
  • Comments Posted: 1

Recent articles by this author

Custom UI for sorting a list display

This article with the accompanying sample shows you how to add sorting to list layouts using IBM Web Experience Factory.

Using the new responsive HTML template

The new responsivetemplate.html template allows details, create, and update pages to dynamically and responsively support a two column layout. The template has a layout that uses css floats to lay out the fields. Columns are automatically laid out with the first field in the first column and the ...

Using the new Multichannel Responsive Data Layouts

In this article we will talk about the responsive data layouts that we created that were based on the datalayouts we created for the Web Experience Factory feature pack. These layouts are designed to work with the default theme for Web Experience Factory 8.5, Some of these layouts require the new ...

Customer Account Sample Using the Application Page Builder

The IBM Multichannel Feature Pack for IBM Web Experience Factory v8.0.0.3 And version 8.5 includes an Application Page builder, which is an enhanced version of the original sample Application Page builder. The sample included here demonstrates a customer account application that includes ...

Using the new responsive HTML template provided with the Feature Pack for Web Experience Factory 8

The new fp80responsivetemplate.html template allows details, create, and update pages to dynamically and responsively support a two column layout. The template has a layout that uses css floats to lay out the fields. Columns are automatically laid out with the first field in the first column and ...
Community articleUsing a Data Layout to implement Responsive Web Design
Added by IBM contributorGarry Sager | Edited by IBM contributorGarry Sager on March 20, 2012 | Version 10
expanded Abstract
collapsed Abstract
No abstract provided.
Prerequisites

You should have a basic familiarity with Web Experience Factory, HTML and styles. You should also know how to create and run models. They also should be familiar with using the Data Layout builder and the contents of a data layout template.

Introduction to Using a Data Layout to implement Responsive Web Design

One of the current trends in web design is making your web pages more responsive to the environment they run on. As we all know the screen real estate for mobile phones, tables and desktop browsers are very different. So how do create pages that work well on all these devices with out having to have specific pages.

Sample description

In this sample we will show how with a simple data layout template and some style sheets we can take and create a page that responds to the size of the browser widow dynamically. All of us have seen pages on the web where there is a table that has images with info related to the image and links to the info. In this sample we will display a list of our videos that are available on our wiki. The page displays the images that were posted with he videos, the titles as the info and then links to the videos and their descriptions. The base models were built using our best practices with a service provider and consumer. The consumer model was built using the Data Services UI Consumer model wizard. This model was then changed by adding a Data Layout builder that references the Thumbnails with Info data layout.




The browser can show three items per line then the other items are wrapped to the next line.


The browser can show two items per line then the other items are wrapped to the next line.


The browser can show one item per line then the other items are wrapped to the next line. if the info text doesn't fit it will be displayed below the image.

So lets take a look at the data layout template.
In the meta data section we set the info needed by the data layout builder to add this data layout to the list. One thing of note are the style sheets section which lists three sheets. These are used to define the classes that lay the divs out. The info list style puts the images on the top with the info and links below, the info list right places the images on the left and the info to the right of it and the info list left places the info on the left and the images on the right. You should notice that the layout is completely done through the classes and the styles in the style sheets.
"ThumbnailInfo"
data-template-name-id="DataLayoutThumbnailInfo"
data-template-name="Thumbnails with Info"
data-style-picker-file-names="/data_layout_templates/ThumbnailInfoLinks_list_style_choices.css"
data-stylesheets="/data_layout_templates/ThumbnailInfo_list_style.css,/data_layout_templates/ThumbnailInfo_right_list_style.css,/data_layout_templates/ThumbnailInfo_left_list_style.css"/>
The layout container itself is just a collection of divs with classes assigned to them. Each div has a class assigned to it so that you can control all elements through the style sheets, also not that there are four data-targets to put your fields, the thumbnail, info and two links. You could easily take this template and add other divs and styles to provide other design layout patterns.
"container"
 
"thumbnail" class="thumbnail"
 
"info"
 
"info" class="infoText"
 
"links"
 
"link_left" class="linkLeft"
 
"link_right" class="linkRight"
 


The styles define in ThumbnailInfo_right_list_style.css control the layout seen in the images above. It also has an example of a media query that causes the the styles to change when the viewport of the page is less than 250px. Note that not all browsers support media queries so you shouldn't depend on them to always be there you need to make sure your pages work ok in these browsers. Internet Explorer 8 does not support media queries. So in this case the single column layout adds a horizontal scroll when the with is less than 250px.

The container is the top level div that has a fixed width of 250px and it floats to the left of the last element that cause the row of data to display in a table next to each other and wrap when it no longer fits in the window.
.container{
width:250px;
float:left
}
The thumbnail in this style sheet is to the left of the info and it floats inside the container div. It has some padding for the image and a margin on the bottom to separate it from the row below
.thumbnail{
float: left;
padding: 5px 2px 2px 2px;
display: inline;
margin-bottom: 5px;
width: 38%;
}
The info in this style sheet is to the right of the thumbnail and it floats inside the container div.
.info{
float:left;
width: 58%;
}
This set the image sizes for images within the thumbnail
.thumbnail img{
width: 80px;
height: 80px;
}
Set this style if you want styles set on all text in the info div
.infoText{
}
This makes the links float to the left side inside the container div.
.links{
float:left;
}
This controls the link on the left side the border and padding control the | character.
.linkLeft{
float:left;
border-right: thin solid gray;
text-align: right;
padding-right: 5px;
}
This controls the right link and it's padding
.linkRight{
float:left;
padding-left: 5px;
}
This section is an example of a media query it change the styles when the view port is less than 250px wide
@media all and (max-width: 250px) {

This makes the container the complete width since we know it is less than 250px. Any styles set in the styles above still are applied if there is a style that need to be changed it needs to be reset in this section.
.container{
width:100%;
float:left
}
This changes the thumbnail to just display at the top with nothing next to it
.thumbnail{
padding: 5px 2px 2px 2px;
margin-bottom: 5px;
}
This makes the images scale up from the 80px to fill the thumbnail container
.thumbnail img{
width: 200%;
height: 200%;
}
This place the info below the thumbnail the clear style causes the float to be negated.
.info{
width: 100%;
clear:both;
}
This places the link on the left above the link on the right it also removes the | character.
.linkLeft{
float:left;
width: 100%;
border-right: none;
text-align: left;
}
This places the link on the right below the link on the left it also removes the padding.
.linkRight{
float:left;
padding-left: 0px;
}
}

So to customize the layouts for your use you could easily make a copy of one of the style sheets and customize the widths of the containers and images as you would need.

Resources

Data Layout builder help (describes the Data layout template file format)


http://www-10.lotus.com/ldd/pfwiki.nsf/dx/Data_Layout_builder_wpf701

Data Layout video
http://www-10.lotus.com/ldd/pfwiki.nsf/dx/Transforming_Tables_into_Lists_using_the_Data_Layout_Builder

Data Layout UI Patterns
http://www-10.lotus.com/ldd/pfwiki.nsf/dx/List_Layout_UI_Patterns_
expanded Attachments (1)
collapsed Attachments (1)
File TypeSizeFile NameCreated OnDelete file
application/x-zip 176 KB ResponsiveUI.zip 3/12/12, 1:29 PM
expanded Versions (18)
collapsed Versions (18)
Version Comparison     
VersionDateChanged by              Summary of changes
18Jun 20, 2012, 1:15:48 PMGarry Sager  IBM contributor
17Apr 13, 2012, 7:12:57 AMGarry Sager  IBM contributor
15Apr 12, 2012, 2:51:28 PMRob Flynn  IBM contributor
14Apr 4, 2012, 10:41:06 AMGarry Sager  IBM contributor
13Apr 4, 2012, 8:28:55 AMGarry Sager  IBM contributor
12Apr 4, 2012, 8:26:47 AMGarry Sager  IBM contributor
11Mar 21, 2012, 1:46:17 PMGarry Sager  IBM contributor
This version (10)Mar 20, 2012, 10:19:50 AMGarry Sager  IBM contributor
9Mar 13, 2012, 1:07:16 PMGarry Sager  IBM contributor
8Mar 13, 2012, 10:27:38 AMGarry Sager  IBM contributor
7Mar 13, 2012, 10:26:57 AMGarry Sager  IBM contributor
6Mar 13, 2012, 10:25:49 AMGarry Sager  IBM contributor
5Mar 13, 2012, 10:22:30 AMGarry Sager  IBM contributor
4Mar 13, 2012, 9:41:13 AMGarry Sager  IBM contributor
3Mar 13, 2012, 9:08:48 AMGarry Sager  IBM contributor
2Mar 13, 2012, 9:04:17 AMGarry Sager  IBM contributor
1Mar 13, 2012, 9:01:11 AMGarry Sager  IBM contributor
1Mar 13, 2012, 7:54:16 AMGarry Sager  IBM contributor
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedHelpAbout
  • IBM Collaboration Solutions wikis
  • IBM developerWorks
  • IBM Software support
  • Twitter LinkIBMSocialBizUX on Twitter
  • BlogsIBMSocialBizUX on Facebook
  • ForumsLotus product forums
  • BlogsIBM Social Business UX blog
  • Community LinkThe Social Lounge
  • Wiki Help
  • Forgot user name/password
  • Wiki design feedback
  • Content feedback
  • About the wiki
  • About IBM
  • Privacy
  • Accessibility
  • IBM Terms of use
  • Wiki terms of use