An introduction of mobile web layout design in IT 4213 Mobile Web Development at Kennesaw State University - updated in Spring 2021.
About Jack Zheng
Faculty of IT at Kennesaw.edu
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 responsive: use different
layout for different screen
sizes
• General considerations
– Screen width: set up
appropriate media query
breakpoints
5
Fluid Layout
• Fluid layout is one of the basic principles of
responsive design.
– Example:
https://www.w3schools.com/css/tryresponsive_g
rid.htm
– See IT4213 module 3
• However, the design of the layout should
also consider content and limit the width
when it grows too wide.
– General recommendation is to limit characters to
80 per row.
6
Responsive Layout Patterns
• Luke Wroblewski has summarized some
common layout patterns in his widely
referenced article
– “Multi-Device Layout Patterns”
http://www.lukew.com/ff/entry.asp?1514
• The most important and most common
pattern is the column drop pattern. Many
others are based on this pattern.
Column Drop Pattern
• The change of layout is gradual, dropping columns along the way as
screen sizes get smaller
• Examples and variations
– http://www.anderssonwise.com
– http://www.bradsawicki.com
– https://www.orestis.nl
– https://www.palantir.net
– http://modernizr.com
8
The layout changes (dropping
one column) for each major
width breakpoint.
Code example
• https://www.w3schools.com/css/css
_rwd_mediaqueries.asp
• https://www.w3schools.com/css/tryit
.asp?filename=tryresponsive_col-s
• https://responsivedesign.is/patterns/
column-drop/
Mostly Fluid Pattern
• A multi-column layout relies on fluid grids and images to scale
from large screens down to small screen sizes most of the time.
• The core structure of the layout really doesn't change until the
smallest screen width.
• Kind of like column drop but only for the smallest screen.
9
The only layout change for the
smallest screen.
Layout Shifter
• This pattern does the most to adapt across
different screen sizes. That is, different layouts
are used on large, medium, and small screens.
• This is almost like a meta pattern that includes
a lot of different variations. Two example are
given below
10
More can be found at
https://designshack.net/
articles/css/5-really-
useful-responsive-web-
design-patterns/
Off Canvas Pattern
• The Off Canvas pattern takes advantage of space off the screen to
keep content or navigation hidden until either a larger screen size
allows it to be visible or a user takes action to expose it.
• Normal (vertical) scrolling usually does not expose these hidden parts.
• This is commonly used for menus – see module 6
– Extended reading http://www.lukew.com/ff/entry.asp?1569
The off-canvas parts can be
toggled using a button or
swipe gesture
More Patterns and Examples
• More specific sub-patterns
– “Off Canvas Multi-Device Layouts”
http://www.lukew.com/ff/entry.asp?1569
– https://designshack.net/articles/css/5-really-useful-
responsive-web-design-patterns/
• Layout patterns collection
– https://bradfrost.github.io/this-is-
responsive/patterns.html#layout
– https://responsivedesign.is/patterns/
• More layout examples
– http://speckyboy.com/2012/02/29/40-examples-of-
brilliant-responsive-website-layouts/
– http://spyrestudios.com/32-examples-of-usable-mobile-
website-layouts/
12
Coding the Layout Patterns
• Traditional approach
– div float (not recommended)
– table (definitely not recommended)
• Modern approach - use grid or flexbox
– Grid: a 2-dimensional way of defining layout. It is
usually used for page layout.
– Flexbox: a one-dimensional (unidirectional) way
of defining sub-section positions. It is mainly
used for positioning multiple similar items in a
local region (like product catalog). But it can be
used for page layout as well.
13
Traditional “Div Float”
• The traditional float way for arranging divs,
making use of the “float: left” features
• Code examples
– http://it4213.azurewebsites.net/demo/layout/colu
mndrop-float.html - this is a simple example with
major divs set with “float: left”
– https://www.w3schools.com/css/css_rwd_grid.as
p - this example makes use of the column count
instead of direct div width settings.
14
CSS Grid
• The CSS Grid Layout offers a grid-based
layout system, with rows and columns,
making it easier to design web page
layouts without having to use floats and
positioning.
– https://www.w3schools.com/css/css_grid.asp
•
It’s easy and really flexible to make it
responsive
• Coding examples
– http://it4213.azurewebsites.net/demo/layout/col
umndrop-grid.html - a simple example by the
instructor
– https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/Realizin
g_common_layouts_using_CSS_Grid_Layout -
a more complex layout example
• For more references on using grid
– https://www.w3schools.com/css/css_grid.asp
– https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/Basic_C
oncepts_of_Grid_Layout
– https://css-tricks.com/snippets/css/complete-
guide-grid/
15
CSS Flexbox
• CSS flexbox is a more recent standard to position content items
but it is often used for page layout.
• Coding examples
– http://it4213.azurewebsites.net/demo/layout/columndrop-flex.html -
instructor’s simple example
– See more coding examples from Google
https://developers.google.com/web/fundamentals/design-and-
ux/responsive/patterns
– An example with grid and flexbox https://glitch.com/edit/#!/grid-grail
https://grid-grail.glitch.me/
• More flexbox references for basics and examples
– 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
16
Summary of Instructor’s Examples
17
File
Description
columndrop-float.html
Responsive layout using the column drop pattern, using CSS
div float technique.
columndrop-flex.html
Responsive layout using the column drop pattern, using CSS
flex technique.
columndrop-grid.html
Responsive layout using the column drop pattern, using CSS
grid technique.
Instructor’s examples are live at http://it4213.azurewebsites.net/demo/layout/
Key Readings and Resources
• Layout patterns by Luke
– Multi-Device Layout Patterns: http://www.lukew.com/ff/entry.asp?1514
– Off Canvas Multi-Device Layouts: http://www.lukew.com/ff/entry.asp?1569
• Coding for responsive layout
– Grid: https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_C
SS_Grid_Layout
– Flexbox: https://developers.google.com/web/fundamentals/design-and-
ux/responsive/patterns
– Div float: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
• Coding tips and techniques about layout
– https://vgpena.github.io/using-css-grid-the-right-way/
– http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-
layout/
– https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-
multicol/
18
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 responsive: use different
layout for different screen
sizes
• General considerations
– Screen width: set up
appropriate media query
breakpoints
5
Fluid Layout
• Fluid layout is one of the basic principles of
responsive design.
– Example:
https://www.w3schools.com/css/tryresponsive_g
rid.htm
– See IT4213 module 3
• However, the design of the layout should
also consider content and limit the width
when it grows too wide.
– General recommendation is to limit characters to
80 per row.
6
Responsive Layout Patterns
• Luke Wroblewski has summarized some
common layout patterns in his widely
referenced article
– “Multi-Device Layout Patterns”
http://www.lukew.com/ff/entry.asp?1514
• The most important and most common
pattern is the column drop pattern. Many
others are based on this pattern.
Column Drop Pattern
• The change of layout is gradual, dropping columns along the way as
screen sizes get smaller
• Examples and variations
– http://www.anderssonwise.com
– http://www.bradsawicki.com
– https://www.orestis.nl
– https://www.palantir.net
– http://modernizr.com
8
The layout changes (dropping
one column) for each major
width breakpoint.
Code example
• https://www.w3schools.com/css/css
_rwd_mediaqueries.asp
• https://www.w3schools.com/css/tryit
.asp?filename=tryresponsive_col-s
• https://responsivedesign.is/patterns/
column-drop/
Mostly Fluid Pattern
• A multi-column layout relies on fluid grids and images to scale
from large screens down to small screen sizes most of the time.
• The core structure of the layout really doesn't change until the
smallest screen width.
• Kind of like column drop but only for the smallest screen.
9
The only layout change for the
smallest screen.
Layout Shifter
• This pattern does the most to adapt across
different screen sizes. That is, different layouts
are used on large, medium, and small screens.
• This is almost like a meta pattern that includes
a lot of different variations. Two example are
given below
10
More can be found at
https://designshack.net/
articles/css/5-really-
useful-responsive-web-
design-patterns/
Off Canvas Pattern
• The Off Canvas pattern takes advantage of space off the screen to
keep content or navigation hidden until either a larger screen size
allows it to be visible or a user takes action to expose it.
• Normal (vertical) scrolling usually does not expose these hidden parts.
• This is commonly used for menus – see module 6
– Extended reading http://www.lukew.com/ff/entry.asp?1569
The off-canvas parts can be
toggled using a button or
swipe gesture
More Patterns and Examples
• More specific sub-patterns
– “Off Canvas Multi-Device Layouts”
http://www.lukew.com/ff/entry.asp?1569
– https://designshack.net/articles/css/5-really-useful-
responsive-web-design-patterns/
• Layout patterns collection
– https://bradfrost.github.io/this-is-
responsive/patterns.html#layout
– https://responsivedesign.is/patterns/
• More layout examples
– http://speckyboy.com/2012/02/29/40-examples-of-
brilliant-responsive-website-layouts/
– http://spyrestudios.com/32-examples-of-usable-mobile-
website-layouts/
12
Coding the Layout Patterns
• Traditional approach
– div float (not recommended)
– table (definitely not recommended)
• Modern approach - use grid or flexbox
– Grid: a 2-dimensional way of defining layout. It is
usually used for page layout.
– Flexbox: a one-dimensional (unidirectional) way
of defining sub-section positions. It is mainly
used for positioning multiple similar items in a
local region (like product catalog). But it can be
used for page layout as well.
13
Traditional “Div Float”
• The traditional float way for arranging divs,
making use of the “float: left” features
• Code examples
– http://it4213.azurewebsites.net/demo/layout/colu
mndrop-float.html - this is a simple example with
major divs set with “float: left”
– https://www.w3schools.com/css/css_rwd_grid.as
p - this example makes use of the column count
instead of direct div width settings.
14
CSS Grid
• The CSS Grid Layout offers a grid-based
layout system, with rows and columns,
making it easier to design web page
layouts without having to use floats and
positioning.
– https://www.w3schools.com/css/css_grid.asp
•
It’s easy and really flexible to make it
responsive
• Coding examples
– http://it4213.azurewebsites.net/demo/layout/col
umndrop-grid.html - a simple example by the
instructor
– https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/Realizin
g_common_layouts_using_CSS_Grid_Layout -
a more complex layout example
• For more references on using grid
– https://www.w3schools.com/css/css_grid.asp
– https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/Basic_C
oncepts_of_Grid_Layout
– https://css-tricks.com/snippets/css/complete-
guide-grid/
15
CSS Flexbox
• CSS flexbox is a more recent standard to position content items
but it is often used for page layout.
• Coding examples
– http://it4213.azurewebsites.net/demo/layout/columndrop-flex.html -
instructor’s simple example
– See more coding examples from Google
https://developers.google.com/web/fundamentals/design-and-
ux/responsive/patterns
– An example with grid and flexbox https://glitch.com/edit/#!/grid-grail
https://grid-grail.glitch.me/
• More flexbox references for basics and examples
– 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
16
Summary of Instructor’s Examples
17
File
Description
columndrop-float.html
Responsive layout using the column drop pattern, using CSS
div float technique.
columndrop-flex.html
Responsive layout using the column drop pattern, using CSS
flex technique.
columndrop-grid.html
Responsive layout using the column drop pattern, using CSS
grid technique.
Instructor’s examples are live at http://it4213.azurewebsites.net/demo/layout/
Key Readings and Resources
• Layout patterns by Luke
– Multi-Device Layout Patterns: http://www.lukew.com/ff/entry.asp?1514
– Off Canvas Multi-Device Layouts: http://www.lukew.com/ff/entry.asp?1569
• Coding for responsive layout
– Grid: https://developer.mozilla.org/en-
US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_C
SS_Grid_Layout
– Flexbox: https://developers.google.com/web/fundamentals/design-and-
ux/responsive/patterns
– Div float: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
• Coding tips and techniques about layout
– https://vgpena.github.io/using-css-grid-the-right-way/
– http://designshack.net/articles/css/beating-borders-the-bane-of-responsive-
layout/
– https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-
multicol/
18