Mobile Web Design Practices:
Information Items
IT 4213 Mobile Web Development
Jack G. Zheng
Spring 2021
Overview
This lecture summarizes design practices to
present and interact with information items
• Basic types of data and information items
presentation layouts
– List, Grid, Table
• Responsive list/grid design practices
– CSS flexbox techniques for list and grid
– Card design used in list and grid
– Horizontal scroll
2
Data and Information Items
• Structured data and information are common types of content
presented on the web.
• Usually there is a collection of data items (records) that share
common attributes. These attributes and information are of
different types and lengths.
• Data/information items examples
– Product catalog  products
– Book list  books
– Search results
– Faculty  people
– News pieces
– Image gallery  images
• Presenting an overview of these items is usually the first step in
user information seeking and navigation. And we need to present
well on different sizes of screens.
3
Basic Items Layout Types
4
• Grid
– Exact grid with rows and columns (each cell is
one data item)
– Tiles (cells) with different sizes
– Horizontal or vertical flow of items
• Flow list
– A single column/row of items
• Table
– Strict rows and columns, with headers
– Each row is typical for one data item (record)
Example:
Three Display Layouts for Windows Files
5
Flow List
Table
Grid
Flow List
•
In a flow list, items are presented like a list.
• Flow list is one column (or row) based, while
grid has more columns.
• Flow list and grid are more flexible in
arranging information. Each list/grid item can
have a more complex local layout for its
attributes.
• Real world examples
– Simple list:
https://atlanta.craigslist.org/d/automotive-
services/search/aos
– More complicated flow list:
https://www.apmex.com/search?q=eagles&vt=l
(change view at the top)
– https://www.google.com/search?tbm=shop&q=nu
c
– http://camelcamelcamel.com/search?sq=shoe
6
Extended reading: Google’s design practice on mobile
https://material.io/components/lists/
There is only one column
(one item per row).
Grid
• Grid is similar to flow list but
consists of multiple columns and
rows; and each item is narrower
in width.
• Grid is suitable for ultra wide
pages; flow list items are difficult
to read if the page is too wide.
• Real world examples
– http://atlanta.craigslist.org/cta
(click on the “gallery” view link)
– https://www.google.com/search?t
bm=shop&q=nuc&&tbs=vw:g
– http://www.newegg.com/Store/Ca
tegory.aspx?Category=19
7
The number of columns may
change in a responsive design.
Data Table
8
• A data table is a concise way to show a lot of structured short information. It is basically a table
(with headings)
•
Just like grid and list, information in each cell may have additional formatting and local layout.
• Often used for
–
simple collection of related items; examples:
•
http://apps.atl.com/Passenger/FlightInfo/Search.aspx?FIDSType=A
•
https://en.wikipedia.org/wiki/Dow_Jones_Industrial_Average
– pure data set: https://www.nba.com/hawks/stats
–
comparison of items with many attributes, such as products, versions, services, etc.
•
https://www.newegg.com/Product/Productcompare?CompareItemList=14%2D137%2D467%2C14%2D932%2D208%2
C14%2D487%2D454%2C14%2D487%2D486
We will cover responsive data table
design in another module.
A table has column or
row headers.
Image from
https://en.wikipedia.org/wiki/Dow
_Jones_Industrial_Average
A Transposed Data Table
9
Many applications offer display
style choices in list, table, and grid.
In this example, the
table is transposed,
meaning each data
record is present in a
column rather than in a
row. This is often seen
in product comparisons.
Image from https://uxmag.com/articles/designing-search-results-pages
Cards
10
• Card is Google’s term to describe the small region
to display multiple piece of data/information as a
unit
– A card is like a small page with more complex layout
within.
– Reference: https://material.io/components/cards/
• A container can arrange multiple cards in different
layout, such as flow list or grid.
– Each item in the flow list and grid (or even in a cell of a
table sometimes) can apply the card design.
• Examples
– Google shopping search results
– Amazon search results
– APMEX search results
• Coding example
– http://it4213.azurewebsites.net/demo/info/info-card.html
Extended reading: Why cards are the future of the web?
https://www.intercom.com/blog/why-cards-are-the-future-
of-the-web/
CSS Flexbox for Grid/List Layout
11
• Use CSS flexbox for data items in list or grid
layout
• The flexbox layout is a layout module in CSS3
made to improve the items align, directions and
order in a container. (We have seen that in
module 5 designing page layout)
• It is a one-dimension flow layout, and works best
with a set of data/information items, like
products, books, movies, etc.
• Quick impression and playground
– https://demos.scotch.io/visual-guide-to-css3-flexbox-
flexbox-playground/demos/
Responsive Grid and List Layout
• A responsive design pattern for grid/list
– Assuming the grid/list and each cell is
fluid
– The number of columns will depend on
screen width
– Increase the number of columns for wider
screens
– Change to single column (a list) for the
narrowest screen.
• Examples (adjust width to see the
number of columns change)
– http://www.slideshare.net/explore
– http://www.bradsawicki.com
– https://www.forbes.com/billionaires/
– https://clearleft.com/about/team/
– https://grid-cats.glitch.me (this is an
example based on CSS grid)
12
Changed to list on
narrow screens
Coding Examples List
• A more complete example with the card design
– http://designshack.net/articles/css/how-to-build-a-responsive-
thumbnail-gallery/
– This example is similar to “info-grid-list-flexbox.html” above
• Here is an example based on CSS grid
– https://glitch.com/edit/#!/grid-cats
13
Instructor’s examples are live at http://it4213.azurewebsites.net/demo/info
File
Description
info-grid-list-flexbox.html
Responsive grid/list using flexbox.
info-card.html
Responsive card design using flexbox.
horizontal-scroll-1.html
horizontal-scroll-2.html
Horizontal scroll in narrow screens. 1 is the flex method, and
2 is the white space method. See slides later.
“data-grid-list-flexbox.html”
Flexbox Basic Example
14

1. Define the
display style for
the container div
2. Use width for each
item to control how many
items per row. This is for
a flow list style.
This is from the
example “data-grid-
list-flexbox.html”
Output
Responsive Grid Example
15
Change the item width
and the layout is
changed to grid style.
Use width to control the
number of columns.
Responsive Card
• Change the card layout when the
card size/shape is changed for
better viewing
– Coding example:
http://it4213.azurewebsites.net/demo/i
nfo/info-card.html
– Also see module 4 layout adjustment
for small screens
16
Making Hero Items in Layouts
• A hero item is the one much
larger in size compared to other
items. It is used to grab users’
attention.
• This example demonstrates how
to fill the whole row when the
number of items is fewer than
the number of columns
– https://css-tricks.com/designing-
a-product-page-layout-with-
flexbox/
17
Making two hero items
that attract users.
/* Select the first two */
.products .product-card:first-child,
.products .product-card:nth-child(2)
{ flex: 2 46%; }
Use :nth-child() attribute to
select a specific item in order.
Gallery and Horizontal Navigation
• Another good practice is showing items
in a carousel style to save screen real
estate on smaller screens.
• Users will navigate (scroll or swipe)
horizontally to see more items.
– Just like menu items we mentioned in
module 5.
– Here is a visual demonstration
https://dribbble.com/shots/4901594-
Horizontal-Vertical-Scroll
• Two coding methods; refer to
– https://codeburst.io/how-to-create-
horizontal-scrolling-containers-
d8069651e9c6
• Code examples from the instructor:
– http://it4213.azurewebsites.net/demo/info
/horizontal-scroll-1.html
– http://it4213.azurewebsites.net/demo/info
/horizontal-scroll-2.html
18
This part is scrollable
to right for more items.
More Flex and Layout Resources
19
• Display layout
– https://uxmag.com/articles/designing-search-results-pages
– http://www.getelastic.com/grid-vs-list/
• CSS Flex Tutorials and References
– https://www.w3schools.com/css/css3_flexbox.asp
– https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
– https://css-tricks.com/snippets/css/a-guide-to-flexbox/
– https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
– http://callmenick.com/post/flexbox-examples
– http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
– https://blog.teamtreehouse.com/responsive-design-of-the-future-with-flexbox
•
Flexbox playground
– http://demo.agektmr.com/flexbox/
– https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground
• More on CSS layout
– http://learnlayout.com/toc.html
• UI Widgets and libraries
– http://bootcards.org
– http://www.jqwidgets.com
Key Readings and Resources
• Responsive grid, list, and card
– https://getflywheel.com/layout/flexbox-create-
modern-card-design-layout/
– https://css-tricks.com/designing-a-product-page-
layout-with-flexbox/
• Horizontal scroll: https://codeburst.io/how-to-
create-horizontal-scrolling-containers-
d8069651e9c6
• https://webdesign.tutsplus.com/tutorials/solving-
problems-with-css-grid-and-flexbox-the-card-ui-
-cms-27468
20