Formation Responsive Web Design

Intégrez un design web sur tous les terminaux mobiles (smartphones, tablettes) et sur toutes plateformes (iOS, Android, Windows Phone) grâce aux CSS "Responsive Web Design", tout en tenant compte des optimisations des performances.

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 à 7 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.

É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

Rappel : 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.

Exemples de diaporamas de la formation

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é

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.
Merci pour cette formation riche en conseils et pleine de bonnes pratiques. Les points développés permettent d'avancer efficacement dans les projets web (déjà pleins de pistes pour optimiser certains sites et booster les prochaines productions). Les supports sont didactiques [et bien illustrés], avec les liens qui vont bien. Les exercices permettent de passer au concret. Les corrigés sont sympas pour se replonger dans les notions une fois la formation terminée. Un plus pour le formateur, à l'écoute, pédagogue et patient, qui livre les clés pour comprendre, invite à l'échange et au questionnement, et n'hésite pas à faire appel aux connaissances des participants. Bref une excellente formation que je ne regrette pas d'avoir suivie et que je recommande !
Formation parfaite ! Découverte de nombreuses fonctionnalités dont j'ignorais l’existence ! Encore merci pour le partage de ton expérience et de tes acquis, mon seul regret est que ça n'a pas durée plus longtemps ! Formateur très pédagogue et c'est assez rare dans ce milieu, vous avez réussi à m'expliquer et à me faire comprendre des notions complexes au travers d'exercices pratiques très bien formulés et articulés.

Validez vos connaissances avec la certification HTML / CSS Alsacréations

La Certification “HTML/CSS” Alsacréations est une validation de vos acquis d'intégrateur ou développeur front-end. Elle est un gage de compétences, vous permet de vous auto-évaluer et peut être mise en avant sur votre CV : votre score reflète des compétences professionnelles spécifiques que les employeurs apprécient.

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