Tout ce qu’il faut savoir : Déroulement
Suite à votre premier contact, nous vous transmettons un formulaire afin d’en savoir plus sur vous et vos acquis par rapport aux pré-requis de chaque formation.
Nous vous transmettrons tous les renseignements nécessaires (places disponibles, lieux, modalités) ainsi que les documents pour finaliser votre réservation :
- une convention de formation (dont la signature validera votre inscription)
- un programme détaillé
- un plan d’accès à nos locaux
Notre équipe vous accueillera et mettra à votre disposition le matériel nécessaire. Si vous désirez utiliser votre propre ordinateur portable avec n’importe quel système (Windows, Linux, Mac OS) pour être plus à l’aise, n’hésitez pas !
Chaque fin de formation se solde par une attestation de présence.
Formation Responsive Web Design (2 jours)
Objectifs de la formation Responsive Design
La notion de « Responsive Web Design » (RWD) 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, etc.
Cette approche peut être structurante pour un projet web car elle demande une réflexion en amont pour trouver les meilleurs axes d’adaptation.
Cette formation Responsive Web Design vous permettra de comprendre les enjeux associés au Responsive, tant d’un point de vue technique que de design.
Vous apprendrez une méthodologie de mise en œuvre et les bonnes pratiques pour créer ou adapter votre site en Responsive Design.
Cette formation Responsive Web Design vous permettra de :
Comprendre les tenants et des aboutissants du Responsive Web Design (RWD)
Intégrer le Responsive Web Design dans la gestion de votre projet
Mettre en œuvre les techniques de conception de sites web adaptatif
Contenu du cours Responsive Design
État des lieux
Comprendre les usages de navigation web selon le contexte, le moment de la journée
Activité séquentielle d’un device à l’autre
Statistiques par navigateurs et plateformes
Rapprochement mobile – desktop : un seul développement
Définition du Responsive Web 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
Exemples et analyse de sites
Parcours de quelques sites de nature différente pour visualiser les possibilités et pratiques du Responsive Web Design
La mise en page
Les grilles macro typographiques
Rythme vertical et rythme horizontal
Mise en page fixe / Mise en page liquide / Mise en page élastique
Unités CSS à utiliser
Techniques actuelles et futures de définition des grilles : float, flexbox, grid layout, etc
Les principaux frameworks de grilles responsives : Bootstrap, Foundation, etc.
Les points de rupture
Les Media Queries CSS3
Choisir les bons points de rupture
Unités CSS à utiliser
Exploiter les points de rupture en JavaScript
La stratégie Mobile First, la notion d’amélioration progressive
Le viewport
La notion de viewport
Le meta viewport
Valeurs pertinentes de viewport
Le cas particulier de iOS
Gérer les anciens navigateurs
Identifier les navigateurs ne comprenant pas les Media Queries
Leur « apprendre » à les comprendre avec Respond.js
Leur fournir une version adaptée sans JavaScript
Approche méthodologique pour les projets Responsive
L’impact sur le cycle projet : conception, design, intégration, tests
Pratiques courantes et pratique « idéale »
L’approche Atomic Design
Adapter les contenus
Les textes : faut-il réécrire des contenus ?
Les images : adaptations aux largeurs fluides et densités d’écran variables
Les vidéos
Les menus de navigation
Les tableaux de données
Les formulaires
Les publicités
La performance
L’approche côté serveur : RESS
L’approche côté client : le chargement conditionnel
Le référencement naturel (SEO)
Impact sur les contenus
Impact sur les images