Publication date : 02/28/2024
Course : Responsive Design, creating adaptable Web interfaces.optional DiGiTT® remote certification
Practical course - 2d
- 14h00 - Ref. RPO
|
Download in PDF format
Share this course by email
 | Design and develop Web interfaces for all types of terminals |
| Adopt an ergonomic Mobile First design approach |
| Discover Responsive graphic components, frameworks and libraries |
| Optimize page display performance on mobiles and PCs |
Intended audience
Developers, designers, project managers and webmasters.
Prerequisites
Basic knowledge of HTML and CSS.
Course schedule
1 Terminals
- Types of terminal (mobile, tablet, TV, e-reader...) and their resolution. Devices, OS, browsers.
- The mobile market and market share.
- HTML, HTML5, CSS3 standards (API, selectors, etc.).
Hands-on work
Terminal type detection in PHP JavaScript.
2 Introduction to Responsive Design
- What is Responsive Design?
- Marcotte concept, Mobile First.
- Content/container separation.
- Portrait/landscape approach, tactile, impact on ergonomics.
- Create a test plan.
- The difference between Web design and mobile design.
3 MediaQueries
- Adapt CSS to terminal characteristics.
- Conditional rules (orientation, device-width...).
- JavaScript and older browsers.
- Additional visual rendering setting (Viewport).
- Device-oriented media queries.
Hands-on work
CSS construction for portrait/landscape modes, terminal resolution.
4 Grid principle, layout
- Classic versus grid design.
- Grid positioning.
- Units of measurement (% em px, vh, dvh), high-definition Retina mode displays.
- Avoiding overflow. Breaking points.
- Organize information on the page.
- Distribution of content within blocks.
Hands-on work
Build ergonomics based on a flexible grid.
5 Graphics components
- Flexible images: background images, HTML5 adaptation, terminal-dependent graphic quality.
- Responsive content: text break, multi-columns. Hyphenation and trimming.
- Fluid fonts: font format, size.
- Flexible margins and spaces.
- Menus, Carousels, Tables: how to display them on a small screen?
- Organization of elements according to a grid.
- Create suitable images and videos.
Hands-on work
Implementing solutions.
6 Framework and responsive libraries
- Detect resources with "Modernizr".
- Template syntax.
- The Bootstrap framework.
- The Material-UI component library.
- Other CSS Frameworks 960 grid, Foundation, Semantic UI, Skeleton, UIKit...
Hands-on work
Use of frameworks.
7 Optimization and performance
- Measure loading performance, optimize bandwidth. Client/Server distribution.
- Optimization of graphic resources.
- Cache management.
Hands-on work
Web page audits, design and technical corrections.
Options
Certification : 190 € HT
DiGiTT® certification is optional when you register for this training course, and consists of 3 stages: taking a Diag® before the course, access to a digithèque to learn the concepts and notions for each digital skill, and then taking the certification exam. This consists of a 90-minute test available in English and French.
The result certifies your skill level out of 1000 points (beginner, intermediate, advanced, expert).
Taking this course alone is not enough to guarantee a maximum score on the exam. You can schedule and take the exam online within 4 weeks of the start of your session.returnchariot
The certification option comes in the form of a voucher or invitation that will allow you to take the exam at the end of the training course.
PARTICIPANTS
Developers, designers, project managers and webmasters.
PREREQUISITES
Basic knowledge of HTML and CSS.
TRAINER QUALIFICATIONS
The experts leading the training are specialists in the covered subjects. They have been approved by our instructional teams for both their professional knowledge and their teaching ability, for each course they teach. They have at least five to ten years of experience in their field and hold (or have held) decision-making positions in companies.
ASSESSMENT TERMS
The trainer evaluates each participant’s academic progress throughout the training using multiple choice, scenarios, hands-on work and more.
Participants also complete a placement test before and after the course to measure the skills they’ve developed.
TERMS AND DEADLINES
Registration must be completed 24 hours before the start of the training.
ACCESSIBILITY FOR PEOPLE WITH DISABILITIES
Do you need special accessibility accommodations? Contact Mrs. Fosse, Disability Manager, at psh-accueil@orsys.fr to review your request and its feasibility.
Developers, designers, project managers and webmasters.
PREREQUISITES
Basic knowledge of HTML and CSS.
TRAINER QUALIFICATIONS
The experts leading the training are specialists in the covered subjects. They have been approved by our instructional teams for both their professional knowledge and their teaching ability, for each course they teach. They have at least five to ten years of experience in their field and hold (or have held) decision-making positions in companies.
ASSESSMENT TERMS
The trainer evaluates each participant’s academic progress throughout the training using multiple choice, scenarios, hands-on work and more.
Participants also complete a placement test before and after the course to measure the skills they’ve developed.
TEACHING AIDS AND TECHNICAL RESOURCES
• The main teaching aids and instructional methods used in the training are audiovisual aids, documentation and course material, hands-on application exercises and corrected exercises for practical training courses, case studies and coverage of real cases for training seminars.
• At the end of each course or seminar, ORSYS provides participants with a course evaluation questionnaire that is analysed by our instructional teams.
• A check-in sheet for each half-day of attendance is provided at the end of the training, along with a course completion certificate if the trainee attended the entire session.
• The main teaching aids and instructional methods used in the training are audiovisual aids, documentation and course material, hands-on application exercises and corrected exercises for practical training courses, case studies and coverage of real cases for training seminars.
• At the end of each course or seminar, ORSYS provides participants with a course evaluation questionnaire that is analysed by our instructional teams.
• A check-in sheet for each half-day of attendance is provided at the end of the training, along with a course completion certificate if the trainee attended the entire session.
TERMS AND DEADLINES
Registration must be completed 24 hours before the start of the training.
ACCESSIBILITY FOR PEOPLE WITH DISABILITIES
Do you need special accessibility accommodations? Contact Mrs. Fosse, Disability Manager, at psh-accueil@orsys.fr to review your request and its feasibility.