Livret personnel de compétences

Responsive Design : site Web adaptable

Ce livret personnel de compétences a pour objectif de permettre au stagiaire de suivre sa progression tout au long de la formation.
Il permet au stagiaire de se positionner par rapport aux compétences attendues à la fin de la formation.
Ce positionnement est personnel et s’enrichit au fil des apports et échanges avec le formateur.
Ce livret sera rempli tout au long de la formation par le stagiaire.
Les tableaux de compétences seront également remplis en parallèle par le formateur puisqu’ils serviront à établir un diagnostic final sur les connaissances acquises au cours de la formation.

Objet du référentiel pédagogique

Ce référentiel pédagogique présente l’ensemble des compétences évaluées dans les domaines et sous-domaines de la formation.
Il précise les compétences techniques attendues à la fin de la formation.

Résumé

Responsive Design : site Web adaptable

Apprenez les bases de l’adaptabilité pour votre site Web

formation web responsive design
Les concepteurs de sites Web doivent dorénavant revoir leur approche pour que leurs interfaces s’adaptent à la diversité des terminaux. La notion de Responsive Web Design est encore assez récente. Elle consiste à adapter le design d’un site web afin qu’il puisse être consulté indépendamment de la plateforme du client : ordinateur, tablette, navigateur mobile… Dans cette formation, vous allez découvrir les enjeux associés au Responsive Web Design et vous allez apprendre à maîtriser une méthodologie de mise en œuvre ainsi que les bonnes pratiques pour créer et adapter votre site en Responsive Design.

Objectif

A l’issue de la formation Responsive Design : site Web adaptable, diverses compétences vous seront transmises, notamment :

Les pré-requis

Maîtriser l’environnement de Windows et la micro-informatique est nécessaire pour suivre cette formation, de même que des connaissances de base en HTML et CSS.

Public concerné

Toute personne souhaitant être initiée au Responsive Design et souhaitant optimiser son site Web.

Validation

Une attestation de fin de stage
est délivrée.
Une évaluation pratique & théorique sera réalisée en fin de parcours.

Les points forts

Formation réalisable à distance,
en présentiel ou un mix des deux.
Formation sur mesure et adaptée.
Devenez autonomes !

Accessibilité

Pour les personnes
en situation de handicap,
Vous pouvez consulter cette page pour vous orienter au mieux.

Délai d'accès

Il est variable en fonction
de votre statut et du
financement de la formation.
Pour en savoir plus, contactez-nous

En Bref

Contenu de la formation

L’environnement du Web (de 1h à 3h)

  • Internet, le Web et son fonctionnement
  • Distinguer les principaux navigateurs : Google Chrome, Mozilla Firefox, Opera, Safari, Internet Explorer
  • L’importance du référencement
  • Connaitre les principaux moteurs de recherche : Google, Yahoo, Bing
  • Les sites vitrines / sites de ventes en ligne
  • La mutation des modes de communication
  • Les évolutions du Web 1.0 au Web collaboratif

Quelques notions pour bien démarrer (de 1h à 3h)

  • Rappel des différents langages : Php, JavaScript, MySQL…
  • Changements, interprétations de chaque navigateur
  • Retour sur les normes W3C
  • Les bases du référencement interne/SEO
  • La structure des documents HTML
  • Les balises obsolètes et les nouvelles balises
  • Les terminaux : types et résolution, périphériques, navigateurs…

Définition du Responsive Design (de 2h à 4h)

  • La définition d’origine
  • Les grands principes
  • L’impact sur la gestion de projet
  • Les outils de conception
  • Les outils de test
  • Ressources essentielles

Démarche de conception (de 3h à 5h)

  • Séparation contenu/contenant
  • Approche portrait/paysage, tactile, impact sur l’ergonomie
  • Créer un plan de tests
  • Les différences entre design Web et design Mobile

Media Queries (de 3h à 5h)

  • Adaptation des CSS aux caractéristiques du terminal
  • Règles conditionnelles (orientation, device-width…)
  • JavaScript et les anciens navigateurs
  • Réglage complémentaire de rendu visuel : Viewport

Principe de grille flexible, fluide (de 3h à 5h)

  • Le principe de conception selon une grille
  • Importance des blocs, approche contenu/contenant
  • Unités de mesure (%, em, px), mode Retina
  • Eviter les débordements
  • Points de rupture
  • Principe des box, layout avec CSS3

Framework et librairies responsive (de 2h à 4h)

  • Détecter les ressources avec « Modernizr »
  • Librairies de substitution : less, css3pie…
  • Frameworks CSS 960 grid, HTML5 BoilerPlate, Bootstrap, Foundation, Skeleton, 320…

Optimisation et performance (de 3h à 5h)

  • Mesurer la performance de chargement
  • Optimisation de bande passante
  • Répartition Client/Serveur
  • Optimisation des ressources graphiques
  • Gestion du cache

A = Acquis
ECA = En cours d’acquisition
NA = Non acquis