Mobile Web Design Practices:
Page Layout
IT 4213 Mobile Web Development
Jack G. Zheng
Spring 2021
Overview
This lecture notes focus more on general page
level layout design for mobile devices.
• Page layout and general principles
• Basic layout patterns
• Three CSS coding techniques using
– div float
– grid
– flex
2
Layout
•
Layout is the placement and arrangement of contents and other elements on a web page. It
involves the following factors about contents:
– Position
– Area size and shape
– Alignment and spacing
– Grouping
•
Layout can be design at three levels
– Site level layout (global layout): a consistent layout for all pages of a website (or a sub-site). It
determines general display style for a site. This is usually done with a master page or a layout template.
– Page level layout: similar to site level but more specific to a particular page.
– Local layout: layout of certain content types or elements on a particular region of a page.
•
Layout is a common topic of other content designs.
– Menu layout (module 6)
– Data/information items layout (module 7): structured data, unstructured information, mixed type
– Form layout (module 8)
– Multimedia display layout (module 9)
– Others: profile display (product, people, company, etc.), dashboard, articles, social, system admin, etc.
These specific content may have its own design considerations. Please do some research on your own if
related to your project. The class does not focus on these.
• More about layout: https://en.wikipedia.org/wiki/Page_layout
3
Layout Basis
• Most pages follow a grid layout basis, in which a page is
logically divided into rows and columns, and each area is
some kind of rectangle without overlapping.
– This is what we will focus on.
– Some more artistic focused sites may follow a more open and
flexible layout, like magazine covers. It’s not our focus.
4
https://www.w3schools.com
/css/css_rwd_grid.asp
General Layout Principles
• Layout should serve content
• Single column design works
best on small vertical screens
• Be r