Vous êtes ici

Formation Responsive Web Design

Formation Responsive Web Design

Formation Responsive Web Design : adaptez votre site web pour les appareils mobiles.

Dispensée par les membres de notre équipe d'intégrateurs web, notre formation Responsive Web Design est destinée aux aux développeurs web et webdesigners désirant répondre aux problématiques de conception et de gestion liées au Responsive Web Design. Cette formation a pour objectif de vous donner les clés pour appréhender les enjeux du Responsive Web Design, en termes de techniques, de design. et de bonnes pratiques à mettre en oeuvre.

Contexte :

L'essor du web mobile et le nombre croissant de terminaux ont bouleversé les comportements des internautes. Il devient donc crucial de réfléchir à l'optimisation des sites web pour qu'ils s'adaptent aux différents résolutions d'écran (ordinateur. mobile. tablette, télévision connectée) afm d'offrir aux visiteurs l'expérience utilisateur la plus confortable et ergonomique possible. Le responsive design permet de concevoir un site unique compatible quel que soit le support emprunté. Toutefois, le responsive design impose des contraintes techniques lourdes et implique de revoir en profondeur les rôles et expertises des développeurs.

Public :

Cette formation s'adresse aux développeurs web et webdesigners désirant obtenir des réponses pratiques aux problématiques de conception ergonomique et de gestion des contraintes liées au Responsive Web Design. Pour tirer pleinement profit de cette formation, il est nécéssaire de connaître les bases de HTML et de CSS, de savoir se servir d'un éditeur de texte et d'avoir quelques notions de JavaScript ou d'un autre langage de programmation.

Objectifs :

Faire l'état des lieux du Web mobile, les orientations et standards en vigueur ainsi que les systèmes et navigateurs.
Découvrir toutes les techniques concrètes permettant d’adapter un design sur un terminal nomade actuel et d’optimiser les performances et temps d’affichage.
A noter cette formation n’est pas spécifiquement dédié au HTML5 et à la CSS3, ces notions seront revues rapidement dans le cadre du RWD

Durée :

3 jours

Les Plus :

Dans le cadre de la formation de nombreux exercices seront proposés pour mieux appréhender le RWD. La troisième journée sera plus particulièrement consacré à la mise en pratique et à la réalisation de sites internet à partir de cas concrets.
Le support de formation complet fourni dès le début de la formation.

Certification :

Possibilité de délivrer une formation certifiante TOSA dans le cadre du CPF ou de la Période de Professionnalisation.
Prévoir le coût de la certification en supplément

Logo TOSA.

 

Pour toute demande concernant la formation contactez-nous au

03 80 60 52 99

Programme :

État des lieux du Web mobile

  •  Périphériques, OS, navigateurs, moteurs, langages
  •  Le marché mobile et ses statistiques

Un design fluide

  • Faire du «Responsive Web Design»
  • Tailles d’écran «critiques» (points de rupture)
  • Les unités pixel, em, %, rem, vh, vw : pour quel usage ?
  • Colonnes fluides : les limites ergonomiques
  • Minimas et maximas
  • Révision sur la notion de flux et de boîtes
  • Un contenu fluide
  • Se faciliter la vie avec box-sizing
  • Gérer les débordements de contenus (césures et autres coupures)
  • Gérer les débordements de médias (images, vidéos,flash, etc.)
  • Le cas des «images responsives»

Les tailles d’un mobile

  •  Comprendre la notion de pixels réels, device-width et viewport
  •  Taille d’écran : screen-width
  •  Taille déclarée : device-width
  •  Taille de fenêtre virtuelle : Viewport
  •  Forcer le Viewport en HTML et en CSS
  •  Adapter le design : les CSS3 Media Queries
  • Ajouter des conditions avec Media Queries
  • Une vraie reflexion lors de la conception

La conception d’un site en RWD

  • La fin du pixel perfect
  • Les nouvelles règles (break points, mobile first)
  • Les méthodes pour garder le contrôle de la mise en page
  • Mobile et desktop deux affichage différents (RESS)
  • Comment traiter la cas du menu en affichage mobile

Adapater ces contenus pour qu’il soit responsive

  • Notion BFC occuper l’espace restant
  • Repenser son design pour les petits écrans
  • Savoir réordonner les éléments pour un affichage pour mobile

Le cas des images pour différentes utilisations

  • Images HD rétina
  • Illustrations vectoriel : format SVG, canvas et responsive
  • Polices images
  • Image en full backgroundet rwd

Polices embarqués

  • Polices de caractères et caractères spéciaux
  • Fonts web

Tableaux de données responsive

  • Les limites du RWD
  • Les astuces pour un affichage optimisé

Adaptation des autres médias vidéos, sons, animations..

  • Révision rapides des balises sémantiques HTML5
  • Les balises HTML5 spécifiques aux rich media

Performances, optimisation

  • Performances et Web mobile
  • CSS unifiés, Media Queries, Classes conditionnelles, minification
  • Optimiser le poid des images
  • Sprites, Data URI

Bonnes pratiques

  • Remettre les navigateurs à zéros
  • L’art de l’automatisation
Retour en haut de page