1.
Web Usability

2.
Responsive Web Design

3.
Responsive Web Design
Phone Tablet Laptop Desktop
Different Types of Devices

4.
You put water into a cup, it becomes the cup.
You put water into a bottle, it becomes the bottle.
You put it into a teapot, it becomes the teapot.
- Bruce Lee

5.
RWD VS. AWD
Responsive Web Design
● A single template is delivered across
all devices
● Use media query to detect the device
● Longer page loads
● Existing websites need rebuilding
● Separate templates are delivered
dependent upon device
● Server-side device detection
● Fast page loads
● Existing website doesn't require
alteration
Responsive Web Design Adaptive Web Design

6.
AWDRWD
mobile.xxx.com www.xxx.comwww.xxx.com

7.
CSS2 Media Query
1. <link rel="stylesheet" href="core.css" media="all"/>
2. <link rel="stylesheet" href="screen.css" media="screen"/>
3. <link rel="stylesheet" href="print.css" media="print"/>

8.
CSS3 Media Query
1. body { color: blue; }
2. @media (max-width: 768px) {
3. body { color: red; }
4. }
5. @media (min-width: 768px) and (max-width: 1024px) {
6. body { color: green; }
7. }

9.
Breakpoints
Responsive Web Design
xsmall small medium large xlarge xxl
600 960 1920160012800 pixels

10.
Responsive Web Design
Fluid Grids
A
B
C
A
B C
A B C
A -> xs-12 sm-12 lg-4
B,C -> xs-12 sm-6 lg-4
xsmall small medium large xlarge xxl
600 960 1920160012800 pixels
lg-4 lg-4 lg-4
sm-6 sm-6
sm-12xs-12

11.
The Following Style Properties Matters
Responsive Web Design
ABCDE
ABCDE
Box size
width / height
Space size
margin / padding
Font size
font-size / ling-height
Image size
background-size

12.
Patterns
Responsive Web Design
Reveal Transform Divide
Reflow Expand Position

13.
Reveal
Patterns
Item A
Item B
Item C

14.
Transform
Patterns
Item A Item B Item C
Item A
Item B
Item C

15.
Divide
Patterns

16.
Reflow
Patterns
A
B
C
A
B
C

17.
Expand
Patterns

18.
Position
Patterns
Action A
Action B
Action C
Action A
Action B
Action C

19.
Single-page Application

20.
What’s SPA?
20
Single-page Application
A single-page application, or SPA for short, is a web application that fits on
a single web page with the goal of providing a user experience similar to
that of a desktop application. In an SPA, either all necessary code – HTML,
JavaScript, and CSS – is retrieved with a single page load, or the
appropriate resources are dynamically loaded and added to the page as
necessary, usually in response to user actions. – Wiki

21.
Why SPA?
21
Single-page Application
✓ Speeds up the loading of secondary
pages
✓ Reduced number of resource
requests
✓ Better mobile device experience
✓ Oriented on the apps with a big
amount of interactive client-side code
✓ Easier state tracking
✗ Speed of initial load can be slow
✗ Complexity of navigation
✗ Not as SEO-friendly as desired
✗ An SPA model breaks the browser's
design for page history navigation
✗ An SPA will have to call a function to
update the analytics package
Pros Cons

22.
Design Guideline
Single-page Application
✓ Use illustration instead of blank area while the data loading
✓ Use loader or progress bar to indicate asynchronous access
✓ Separate asynchronous data load
✓ Provide smooth UI flows
✓ Display action status or messages
✓ Provide visual effects

23.
Illustration
LoaderSeparate data load

24.
Reference
Web Usability
● Adaptive web design - Wikipedia
● Responsive UI - Layout - Material design guidelines
● Responsive web design - Wikipedia
● Responsive Web Design vs. Adaptive Design (INFOGRAPHIC)