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.

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_