Clever Institut

Responsive Web Design

Par Clever Institut

Objectifs

  • 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

Programme

É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

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

Analyse de quelques 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 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.

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
  • La meta viewport
  • Valeurs pertinentes de viewport
  • La 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

É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

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

Pédagogie

30% théorie / 70% pratique

Formations de la même catégories (5)

IB Formation
Ergonomie et UX design d'interfaces graphiques pour appareils tactilesPar IB Formation

Si le marché des ventes de PC s’essouffle, celui des tablettes et smartphones continue d’afficher de bonnes performances. C’est dire l’engouement du grand public pour ces appareils. Face à ce phénomène, les entreprises "commerciales" se doivent de réagir et de proposer, comme il y a quelques années sur Internet, des applications (Apps) ou des sites web adaptés à ces appareils. Mais la diversité des tailles d’écrans comme la nécessité de proposer une navigation "tactile" très intuitive impose une sérieuse réflexion quant au design et à l’ergonomie de ce type d’interfaces. A l’issue de cette formation, les participants disposeront des connaissances et compétences qui leur permettront de réaliser des applications web ou des sites web conviviaux pour tous les utilisateurs (web et mobiles).

Orsys
Analyse et ergonomie des IHM logiciellesPar Orsys

Cette formation vous présentera les principes de l'ergonomie des IHM et vous fera découvrir les bonnes pratiques pour concevoir et améliorer leur design.

Global Knowledge
Developing on Hyperledger Fabric BlockchainPar Global Knowledge

Découvrez les besoins en applications Blockchain, ainsi que Hyperledger Fabric, le framework open source pour le développement d'applications et de solutions Blockchain à architecture modulaire. Ce cours vous présentera l'outil Hyperledger Composer, qui vous aide à créer des applications Hyperledger Fabric grâce à des travaux pratiques complets.

Ce cours est enseigné par des experts de premier plan, qui vous guideront à travers les sujets de présentation et ceux plus approfondis, tels que les étapes pour intégrer / développer une application avec Hyperledger Fabric v1.1.

Pyramyd Formation
HTML5, CSS3 et le responsive Web designPar Pyramyd Formation

CERTIFICATION ENI

La certification valide des compétences et se présente sous la forme d’un questionnaire à choix multiple adaptatif avec plusieurs niveaux de questions.