Development, testing & web - Responsive Design: Creating Web Interfaces that Adapt
A practical course focused on Responsive Design: Creating Web Interfaces that Adapt. Participants build skills across three priorities: Devices, Introduction to Responsive Design, Media Queries.
Detailed programme
Devices
- Types of terminals (mobile, tablet, tv, reader...) and their resolution.
- Devices, OS, browsers.
- The mobile market and market shares.
- HTML, HTML5, CSS3 (API, selectors...).
Hands-on work
- Detection of terminal type in PHP JavaScript.
Introduction to Responsive Design
- What is Responsive Design?
- Marcotte Concept, Mobile First.
- Content/Container separation.
- Portrait/Landscape approach, touch, impact on ergonomics.
- Create a test plan.
- Difference between Web design and Mobile design.
Media Queries
- Adapting CSS to terminal characteristics.
- Conditional rules (orientation, device-width...).
- JavaScript and older browsers.
- Additional visual rendering adjustment (Viewport).
- Media queries oriented devices.
Hands-on work
- Construction of CSS according to portrait/landscape modes, terminal resolution.
Grid Layout Principle
- Classic design versus design on a grid.
- Grid positioning.
- Units of measurement (% em px, vh, dvh), high definition screens Retina mode.
- Avoid overflows. Breakpoints.
- Organize information on the page.
- Distribution of content in blocks.
Hands-on work
- Build ergonomics based on a flexible grid.
Graphics Components
- Flexible images: background images, HTML5 adaptation, adaptation of graphic quality according to the terminal.
- Responsive content: text break, multicolumns. Cut and cut.
- Fluid fonts: font format, size.
- Margins and flexible spaces.
- Menus, Carrousel, Tables: how to display them on a small screen?
- Organization of the elements according to a grid.
- Create adapted images and videos.
Hands-on work
- Implementation of solutions.
Responsive Framework and Libraries
- Detect resources with "Modernizr".
- The syntax of templates.
- The Bootstrap framework.
- Material-UI component library.
- Other Frameworks CSS 960 grid, Foundation, Semantic UI, Skeleton, UIKit...
Hands-on work
- Using frameworks.
Optimization and Performance
- Measure loading performance, bandwidth optimization.
- Client/Server breakdown.
- Optimization of graphic resources.
- Cache management.
Hands-on work
- Audit of Web pages, conceptual and technical corrections.
Tell us about your project
Our offices
- Exceev Consulting
61 Rue de Lyon
75012, Paris, France - Exceev Technology
332 Bd Brahim Roudani
20330, Casablanca, Morocco