Formation Responsive Web 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, naviGustur 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 oeuvre 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 adaptatifs.

Cette formation Responsive Web Design s’adresse aux développeurs front-end, aux Web designers, UX designers et aux chefs de projets web.

Bonne connaissance de l’intégration Front End HMTL et CSS.

É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 naviGusturs 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 naviGusturs

• Identifier les naviGusturs 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 varibales 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

Vous pouvez suivre cette formation Responsive Design à distance, vous participez en temps réel à la même session en même temps que les autres participants présents eux en salle de cours. Un kit spécial formation à distance vous sera envoyé avec notamment le matériel (casque micro). Vous n’avez besoin que d’un naviGustur et d’une connexion internet pour suivre dans les meilleures conditions cette formation à distance Linux Contactez-nous pour plus d’informations sur cette formation Linux à distance de chez vous ou depuis votre bureau. Attention sur cette formation toutes les sessions ne sont pas réalisables en formule cours à distance