Responsive Web Design

Développeurs front-end, UX Designers, Web Designers, Chefs de projet Web

• Appréhender les tenants et aboutissants du Responsive Web Design
• Intégrer dans leur gestion de projet les implications du Responsive Web Design
• Mettre en œuvre les techniques de conception de sites web adaptatifs

tat des lieux du Web mobile

• Usage de devices différents 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

é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

nalyse de quelques sites

• Parcours de quelques sites de nature différente pour visualiser les possibilités et pratiques du Responsive Web Design

a mise en page

• Les grilles macro typographiques
• Rythme vertical et rythme horizontal
• Mise en page fixe vs. liquide vs. élastique
• Unités CSS à utiliser
• Techniques actuelles et futures de définition de grilles : float, flexbox, grid layout, etc.
• Principaux frameworks de grilles responsives : Bootstrap, Foundation, etc.

es 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

e viewport

• La notion de viewport
• La meta viewport
• Valeurs pertinentes de viewport
• La cas particulier de iOS

é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

léments méthodologiques pour les projets responsives

• L'impact sur le cycle projet : conception, design, intégration, tests
• Pratiques courantes et pratique « idéale »
• L'approche Atomic Design

dapter 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

a performance

• L'approche côté serveur : RESS
• L'approche côté client : le chargement conditionnel

e référencement naturel (SEO)

• Impact sur les contenus
• Impact sur les images

Une attestation de participation sera transmise aux participants