Responsive Web Design Training

Introduction to Responsive Web Design training

• Principle

• Vocabulary (screen, dimensions, resolution, grid, scan, etc.)

• media (mobile, tablet, computer, etc.)

• Breaking point

• HTML, HTML5, and CSS3 standards

• Design: Static, Liquid, Adaptive, responsive

•  

• Design and approaches

• Responsive degradation

• Mobile first

Media queries:: CSS 3

• Syntax of media queries

• Practical workshop: Adapt a web page according to screen dimensions

The Fluid Grid Concept

• The units are pixels, em, %,...

• breaking points

• multicolumns in RWD (CSS3 columns)

• Manage content overflows (text, image, etc.)

Adaptive Images

• Some solutions: The srcset attribute, Network Switching, and art direction

• Rules to respect: semantics of the tag; adapting the quality of the images;

• The 3-layer method

• the AdaptiveImages external library

• Artistic direction

Advanced techniques AND Tools

• Discover FlexBox CSS3 and its possibilities for the mobile web

• Bootstrap

• HTML shiv

• Respond.js

• jQuery plugins: ResponseJs, Flexslider,

Benefits :

• Course material for each participant

• Trainer support after training

• We offer you, in public session:

  • Tea, coffee

  • Parking (only in certain cities)

  • Wireless internet connection

Goals :

• Implement responsive web design techniques