Responsive Web DesignHuy LeIT502

Table of Contents 1. Responsive Web Design

concept Terms What, Why & Who

2. The Approaches Responsive Design Quick Approach (HTML

meta) Better Approach (CSS)

3. Frameworks & Examples

YESTERDAY

TODAY

FLUID

Responsive Age

Ethan MarcotteWhen everything started?

RESPONSIVE DESIGN

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS3 Media Queries/Rules

WHAT IS IT?@media

Responsive Web Design Patterns

FluidMostly Fluid

AdaptiveColumn dropLayout Shifter

Responsive

Common Frameworks PRE-WRITTEN STYLESHEET

Resources:Google Developers https://developers.google.com/ http://www.w3schools.com/ https://css-tricks.com/ http://alistapart.com/article/responsive-web-design/

Ethan Marcotte http://getbootstrap.com/ https://www.bostonglobe.com/ example