Formation Responsive Web Design

Présentation

La notion de Responsive Web Design (conception de sites web adaptatifs) regroupe différents principes et technologies qui forment une approche de conception de sites Web dans laquelle un site est conçu pour offrir au visiteur une expérience de consultation optimale facilitant la lecture et la navigation.

L'utilisateur peut ainsi consulter le même site Web à travers une large gamme d'appareils (moniteurs d'ordinateur, smartphones, tablettes, TV, etc.) avec le même confort visuel et sans avoir recours au défilement horizontal ou au zoom avant/arrière sur les appareils tactiles notamment, manipulations qui dégradent considérablement l'expérience utilisateur. Vous apprendrez à concevoir un site Web et à anticiper et répondre aux besoins de l'utilisateur avec les techniques CSS, les principes généraux de design : les grilles fluides, les images flexibles et les media queries, afin d'obtenir une présentation quelles que soient la taille, l'orientation et la résolution de l'écran ou s'affiche le site.

Le Responsive Web Design est souvent abrégé par RWD dans les articles traitant du sujet.

Objectif

  • Cette formation s'adresse à tous les professionnels, associatifs ou aux particuliers qui souhaitent apprendre les bases nécessaires à l'élaboration d'un site Web optimisé.

Pré-requis

  • Les stagiaires doivent avoir une bonne pratique de l'outil informatique et avoir suivi le stage Html/Css et ou de bonnes connaissances InDesign

Public

  • Tous développeurs, intégrateurs ou designers web qui souhaitent apprendre les techniques pour créer ou adapter des sites en Responsive Web Design. On pense particulièrement aux écrans TV et PC, tablettes et smartphones.

Compléments d'informations

Rappel sur HTML5, CSS3 lien avec le Responsive Web Design

  • Utiliser HTML5 pour les designs réactifs
  • Utiliser CSS3 et voir les sélecteurs, typographie et modes de couleurs
  • L'API Media queries et zones de visualisation
  • Réaliser une mises en page fluides
  • Utiliser les effets esthétiques (transitions, transformations et animations) de CSS3
  • Création de formulaires avec HTML5 et CSS3
  • Compatibilité des sites réactifs avec tous les navigateurs

Technique dédiée

  • La grille flexible
    • Composition et création d'une grille flexible
    • Marges et espacement flexibles
  • Les images flexibles
    • Retour aux (codes) sources
    • Images fluides, mosa que d'arrière-plan flexible
    • Overflow
  • Passer au responsive, design
    • Mobile first
    • Vers un responsive workflow

Créer des fichiers ePub

  • Des documents Microsoft Word ou Adobe InDesign créer sa epub
  • Adapter les fichiers ePub au format sur chaque liseuse.
  • Insérer des images et des encadrés, avec habillage par le texte.Contrôler l'espacement, l'indentation et les marges, créer des liens externes et des références croisées internes.
  • Ajouter des vidéos aux livres électroniques destinés à l'iPad.
  • Mise en forme élaborée