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
ht