Responsive Design : site Web adaptable

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

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 :

Concevoir et développer des interfaces Web pour tous types de terminaux
Adopter une approche de conception ergonomique
Découvrir les composants graphiques, les frameworks et les librairies Responsives
Optimiser les performances d’affichage des pages sur mobiles et ordinateurs

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.

En Bref

Niveau : Moyen
Prix : Financement possible
Cours : Adaptable & Personnalisable
Nombre : Individuel ou petit groupe de choix
Type : À distance et/ou Présentiel
Date : Flexible, à convenir
Format : Journée / demi-journée / module
Durée : À définir (généralement 3 à 9 jours)

Télécharger en pdf

Contenu de la formation

L’environnement du Web

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

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

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

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

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

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

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

Optimisation et performance

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