Design flexible interfaces for all screen sizes
This training course helps you to create responsive web pages that will adapt to all platforms (mobile, tablet, desktop, laptop) used by Internet users. Favouring an adaptive site allows you to respond to all users. The responsive design uses flexible grids and media queries to ensure a design as portable and accessible as possible.
Is it for you ?
Web integrators, designers and developers.
Prerequisites
Knowledge of HTML (Course WE106) and style sheets (Courses WE137). Familiarity with CSS grids is desirable.
What You'll Walk Away With
- ✓ Build flexible layouts using adaptive and proportional grids
- ✓ Use media queries to adjust styles across devices and resolutions
- ✓ Integrate responsive images and media for optimal user experience
- ✓ Leverage modern CSS units (vw, vh, rem) for fluid design
- ✓ Apply responsive design and progressive enhancement principles
Training content
- Techniques for creating a flexible grid which maintains its proportions when scaled
- Inserting images and other media in a flexible manner
- New CSS measurement units (vw, vh, vmin, vmax and rem)
- Media requests for adjusting the display depending on device characteristics
- Identifying resolution breakpoints
- Using scripts adapted to older browsers that do not support media requests
- Applying the principle of continuous improvement
- Applying principles of Responsive Web Design for newsletters
- Review exercise
📌 Practical information
Our training sessions are offered in Montreal or Quebec City, in person or in a virtual classroom. Dates and locations are specified when you select your session below. If you have any questions, check out our FAQ.
