Web stories
Understanding Responsive

Responsive Web Design (RWD): definition, components
Ergonomic and functional constraints
Viewport: concept, meta, values
Relative units (%, em) vs. absolute (px)

Screen sizes, optimal resolution
Portrait and landscape modes
Expression of sizes in percentage (%), em
Minimum and maximum sizes
Blocks, content / container approach
Box principle, layout with CSS3
Font size: set a basis for sizes, conversions em
Avoid overflows

Workshop: Multiple examples of flexible grids

Flexible images: background images, HTML5 adaptation
Flexible margins and spaces
Adapted videos
Support of CSS properties by older browsers

Workshop: Avoid overflow of images / videos

Adaptation of the display according to the resolution
Types of media
Choice of conditional rules: orientation, device-width
Internal and external media queries
Management of menus and sliders

Workshop: Creation of pure css responsive site with media-queries

Overview of existing
Bootstrap
960 grid frameworks
Optimization of graphic resources

Workshop: Building an adaptive site with Bootstrap