Responsive web design allows a single template to be delivered across all devices by using media queries to detect the device. It allows for longer page loads but existing websites do not need rebuilding. Adaptive web design delivers separate templates for each device through server-side detection, allowing for faster page loads but requiring alterations to existing websites. CSS media queries and breakpoints are important techniques for responsive design, along with fluid grids, modifying box size, spacing, fonts and images based on screen width. Common patterns include revealing, transforming, dividing, reflowing, expanding and positioning content. Single page applications load all necessary code at once allowing speedy secondary page loads but can increase initial load time and complexity.

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)