Formation Responsive Web Design

Adaptez vos designs web sur tous les terminaux mobiles et de bureau en privilégiant les performances et la rapidité d'affichage.

Parce que les notions de Responsive, de Mobile First et de Retina sont encore un peu floues pour vous (c'est le cas de le dire). Parce que vous ne savez pas pourquoi « des fois ça marche et des fois pas » ou pourquoi « ça ne veut pas rentrer ».

Cette formation aborde, de manière claire et méthodologique, toutes les bonnes pratiques Responsive modernes utiles aux intégrateurs ou développeurs front-end.

Vous retiendrez de cette formation :

  • comment penser "fluide" vos designs grâce aux unités dédiées et à CSS3 Flexbox,
  • l'intérêt des Media Queries, de la balise meta "viewport" et du Mobile First,
  • comment modifier le design lorsque le contexte change,
  • les explications concernant les tailles réelles et supposées des écrans mobiles,
  • et toutes les techniques d'optimisation des performances sur mobiles.

Attention, cette formation est dédiée à l'adaptation d'un design existant au média mobile, elle n'est pas consacrée au développement d'applications natives. Nous n'y aborderons pas non plus l'intégration d'e-mails mobiles.

État des lieux du Web mobile

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

Techniques de design fluide

  • box-sizing
  • Les unités fluides (unités %, em, rem, vw, vh, vmin, vmax)
  • Un design fluide / élastique (float, BFC, table-cell, calc())
  • Des Grilles fluides (frameworks, CSS3 Grid Layout)
  • CSS3 Flexbox (orientation, flexibilité, ordonnancement, alignements)
  • Récapitulatif des techniques de design fluide
  • Exercices associés

Flexbox, le roi du Responsive

  • Distribution
  • Alignements
  • Ordonnancement
  • Flexibilité
  • Compatibilité navigateurs
  • Exercices associés

Un contenu fluide

  • 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.)
  • Bonus : points de suspension, cas des liens, cas des éléments préformatés
  • Des composants fluides

Un design Responsive

  • Les Media Queries en CSS
  • Les critères pour mobiles (width, height, device-width, device-pixel-ratio, orientation, etc.)
  • Le cumul de critères ("et", "ou", "non")
  • Prise en compte de l'orientation
  • Mobile First : pourquoi les petits écrans en priorité ?
  • La meta HTML "viewport"
  • Comment choisir ses breakpoints

Les tailles des devices mobiles

  • Des vrais et des faux pixels
  • Taille de fenêtre virtuelle : Viewport
  • Taille d'écran : screen-width
  • Taille déclarée : device-width
  • Le pixel-ratio

Les images responsive

  • "Retina" ?
  • La base : les images fluides
  • Images de décoration (cover, image-set())
  • Images de contenu (srcset, <picture>)
  • Astuce des compressive images
  • Tester la connectivité et la bande passante

Performances et Web mobile

  • Comment tester
  • Notions de ligne de flottaison, chemin critique, visually complete et speed index
  • Atelier performances mobiles
  • Thème "côté serveur"
  • Thème "poids et volume"
  • Thème "nombre de requêtes"
  • Thème "blocage et attente"
  • Thème "calculs et traitements"
  • Astuces spécifiques web mobile (sprites, SVG, font-icon, polices, animations, boutons "sociaux")
  • Soigner son chemin critique

Techniques responsive

  • Charger conditionnellement
  • Déplacer des éléments selon les devices
  • Les composants responsive
  • Les navigations responsive
  • Comment tester ?

Ressources utiles

  • Outils en ligne
  • Outils de tests
  • Galeries de sites web mobiles

Public

Développeurs web et intégrateurs souhaitant adapter un design existant au média mobile et aux différents terminaux, principalement via CSS.

Objectifs

Comprendre 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. La première journée est entièrement dédiée à l'adaptation, via langage CSS, d'un design existant à l'ensemble des périphériques nomades (tablettes, smartphones, netbooks). La seconde journée détaille toutes les bonnes pratiques concernant les performances et optimisation pouvant être appliquées sur des sites web mobiles. Cette formation n'est pas consacrée au développement d'applications natives.

Prérequis

Être déjà familier avec les subtilités des langages HTML et CSS. Avoir suivi une formation telle que "CSS, techniques de pros!"est un plus. Cette formation n'est pas du tout adaptée aux débutants complets en CSS.

Moyens pédagogiques

Dans le cas de sessions inter-entreprises, à Strasbourg ou à Paris, la formation est dispensée dans les salles pédagogiques adaptées à des apprentissages informatiques : capacité de 1 à 8 personnes, équipement informatique fourni pour chacun des stagiaires, vidéo-projecteur et paperboard.

Suivi et appréciation des résultats

L'exécution physique de l'action de formation est suivie à l'aide de feuilles de présence émargées par demi-journée par les stagiaires et le formateur. Sanction : attestation de fin de stage.

Besoin d'un financement ?

Une formation est un investissement, pour mieux vous permettre de vous former, des possibilités de financement vous sont proposées.

Voir les différents financements

Avant cette formation, préparez-vous avec :

À la suite de cette formation, nous vous recommandons :

Témoignages

Ils ont aimé

On nous a demandé de dire quand c'est bien. Alors, je le dis. C'est bien. Très bien même. Excellente formation & formateur, bon fil conducteur, bonne ambiance. Ça respire la maitrise. Ça permet de remettre en question les (mauvaises) bases acquises et de repartir avec de précieux conseils. On nous a demandé de dire aussi quand c'est pas bien, alors, je le dis : la Carola est meilleure que la Cristaline ;)
Je reviens de cette formation très satisfaite, c'était un condensé de remise à niveau très efficace, vraiment utile et instructif. Un immense merci à l'accueil chaleureux et la disponibilité. En plus d'être pédagogue et à l'écoute, vous nous avez reçus comme des rois. Sûrement à très bientôt pour une autre formation !
J'ai aimé : l'alternance entre les explications théoriques et les applications pratiques qui permet de toujours être attentif, les applications pratiques sur un cas très ciblé et concret qui permettent de bien comprendre l'élément étudié en question, l'humour du formateur, les tartes flambées alsaciennes et la choucroute ! Vraiment un très bonne formation, comme d'habitude.

Envie de connaître la date
de nos prochaines formations ?

Calendrier des formations

Nous contacter

Téléphone : 09 54 96 50 50 Adresse e-mail : contact alsacreations point fr

Alsacréations
10 Place du Temple Neuf
67000 Strasbourg, France