Description

Website designers must now review their approach so that their interfaces adapt to the diversity of terminals. This training provides practical answers to ergonomic design issues and management of constraints linked to Responsive Design.

Who is this training for ?

For whom ?

Developers, designers, project managers and webmasters.

Prerequisites

Training objectives

Design and develop web interfaces for all types of terminals Adopting a Mobile First Ergonomic Design Approach Discover graphical components, Frameworks and Responsive libraries Optimize page display performance on mobile and computers

Training program

• Terminals
  • Types of terminals (mobile, tablet, TV, e-reader.
  • ) and their resolution.
  • Devices, OS, browsers.
  • The mobile market and market shares.
  • HTML, HTML5, CSS3 standards (API, selectors.
  • ).
  • Practical work Type detection terminal in PHP JavaScript.
• Design approach
  • Marcotte concept, Mobile First.
  • Content/container separation.
  • Portrait/landscape approach, tactile, impact on ergonomics.
  • Create a test plan.
  • Difference between Web design and Mobile design.
• MediaQueries
  • Adaptation of CSS to the characteristics of the terminal.
  • Conditional rules (orientation, device-width.
  • ).
  • JavaScript and the old ones browsers.
  • Additional adjustment of visual rendering (Viewport).
  • Practical work Construction of CSS according to portrait/landscape modes, terminal resolution.
• Flexible, fluid grid principle
  • Classic design vs. grid design.
  • Importance of blocks, content/container approach.
  • Units of measurement (% em px), Retina mode.
  • Avoid overflows.
  • Breaking points.
  • Principle of boxes, layout with CSS3.
  • Practical 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.
  • Hyphenation and cutting .
  • Fluid fonts: font format, size.
  • Flexible margins and spaces.
  • Adaptable menus, adaptive carousel.
  • Creation layout with flexbox (organization of elements according to a grid).
  • Create suitable images and videos.
  • Practical work Implementation of solutions.
• Framework et librairies responsive
  • Detect resources with "Modernizr".
  • Substitution libraries (less, css3pie.
  • ).
  • CSS 960 frameworks grid, HTML5 BoilerPlate, Bootstrap, Foundation, Skeleton, 320.
  • Practical work Using frameworks.
• Optimisation et performance
  • Measure loading performance, bandwidth optimization.
  • Client/Server distribution.
  • Optimization of graphics resources.
  • Management cache.
  • Practical work Auditing of web pages, conceptual and technical corrections.