Formation Responsive Web Design

Découvrez les techniques essentielles permettant de rendre vos applications Responsive

Prix (Formation inter-entreprise)

1000€ HT / personne

Durée

2 jours

Dates

Nous pouvons organiser des sessions à d'autres dates ou dans d'autres villes (Bordeaux, Lille, Lyon, Marseille, Montpellier, Nantes, Nice, Paris, Strasbourg, Toulouse...)

L’arrivée des Smartphones a radicalement changé notre manière d’appréhender le web. Cloisonnés pendant de nombreuses années sur des résolutions qui ont peu évoluées et sur un réseau stable, la plus part des sites internet ont des difficultés à s’afficher convenablement sur un téléphone mobile.
Et ceci n’est que la partie visible de l’iceberg, reste à gérer la notion de tactile, l’explosion du nombre de navigateurs, l’arrivée des TV connectées et maintenant des lunettes et autres montres intelligentes.
Pour tenter de répondre à ces nouveaux besoins sans devoir développer un site dédié à chaque périphérique, le Responsive Web Design (RWD), ou conception de sites adaptifs, a émergé.

Cette formation vous permettra de mieux appréhender les concepts de base derrière ce terme : Grilles fluides, médias adaptifs, media queries, dégradation élégante (responsive degradation), amélioration progressive (progressive enhancement), mobile first, etc. Mais également de découvrir les normes créées ou améliorées pour répondre à ces problématiques : Flexbox, Picture, srcset, font-icon, svg, etc.

En plus de tous ces sujets directement liés aux problématiques des sites adaptatifs, nous évoquerons rapidement comment ces changements vont impacter votre manière d’optimiser et de tester vos sites ainsi que certaines problématiques spécifiques au mobile et qui vous aiderons à mieux anticiper les difficultés particulières liées aux smartphones et tablettes.

Les objectifs

  • Mieux comprendre les problématiques de la conception d’un site Responsive
  • Découvrir les outils qui vous aideront dans la réalisation de vos sites RWD
  • Expérimenter sur un petit projet en environnement maitrisé

Pré-requis

  • Syntaxe de base des langages CSS, HTML et javascript
  • Expérience en développement web
  • Ordinateur portable à apporter
  • Smartphone ou tablette à apporter fortement recommandé

Le programme de la formation Responsive Web Design

Introduction au Responsive Web Design

  • Qu’est-ce que le RWD
  • Adaptif vs fluide vs responsive
  • Amélioration progressive vs Dégradation élégante
  • Penser et concevoir son site autrement
  • Tour d’horizon des problématiques associées

Découverte des outils utiles

  • browserstack
  • browsersync
  • Chrome Dev Tools
  • jsconsole
  • ...

Concevoir un site fluide

  • Rappel sur les unités relatives
  • Concevoir une grille fluide

Concevoir un site adaptif

  • Gérer son viewport
  • Utiliser les média queries
  • Bien définir ses points de ruptures

Découverte de la norme Flexbox

Gérer les images

  • Images de fonds
  • Icônes avec font-icon et svg
  • Utiliser la balise Picture et l'attribut srcset
  • Support des anciens navigateurs

La performance

  • Optimiser ses ressources et définir un "budget performance"
  • Chargement conditionnel
  • Détecter les fonctionnalités du navigateur

Le web mobile

  • Les problématiques
  • Développer des interfaces tactiles
  • Tester et déboguer

Télécharger le programme

Le(s) formateur(s)

Mathieu Parisot Mathieu Parisot est formateur sur les technologies web. Développeur de sites web depuis le début des années 2000 avant d'en faire son métier, il a pu intervenir sur de nombreux projets dans des contextes techniques et fonctionnels variés : progiciel web, réalisation de forfaits, intervention sur des sites grand public e-commerce ou bancaires.

Passionné d'innovation et très curieux, il participe à de nombreuses rencontres, anime des conférences et rédige des articles autour du web. Il est également co-organisateur des Humantalks Paris.

Nous vous invitons à lire l'interview de Mathieu Parisot, il nous raconte son histoire et présente en détail ses formations.

1 témoignage

Le programme est très bien conçu. Les ateliers permettent d'assimiler la méthodologie au fur et à mesure afin de rendre notre site responsive. On a envie d'appliquer cela dès le lendemain.

Joffrey MANZANARES
Portageo

Besoin d'aide ?

Vous souhaitez discuter avec nous à propos de votre projet de formation ?
Vous voulez plus d'information sur une formation ou notre fonctionnement ?


Rappel Email

Nos forces

  • Des formation à taille humaine
  • Des formateurs passionnés
  • Des véritables workshop
Accèder au Manifeste

Nos clients

Decathlon
Axa
INRIA
SAP
FNAC
CNRS

Nos formations en images

Sass et Compass
CasperJS
Ruby on Rails
Ruby

Formation Responsive Web Design

Découvrez les techniques essentielles permettant de rendre vos applications Responsive

L’arrivée des Smartphones a radicalement changé notre manière d’appréhender le web. Cloisonnés pendant de nombreuses années sur des résolutions qui ont peu évoluées et sur un réseau stable, la plus part des sites internet ont des difficultés à s’afficher convenablement sur un téléphone mobile.
Et ceci n’est que la partie visible de l’iceberg, reste à gérer la notion de tactile, l’explosion du nombre de navigateurs, l’arrivée des TV connectées et maintenant des lunettes et autres montres intelligentes.
Pour tenter de répondre à ces nouveaux besoins sans devoir développer un site dédié à chaque périphérique, le Responsive Web Design (RWD), ou conception de sites adaptifs, a émergé.

Cette formation vous permettra de mieux appréhender les concepts de base derrière ce terme : Grilles fluides, médias adaptifs, media queries, dégradation élégante (responsive degradation), amélioration progressive (progressive enhancement), mobile first, etc. Mais également de découvrir les normes créées ou améliorées pour répondre à ces problématiques : Flexbox, Picture, srcset, font-icon, svg, etc.

En plus de tous ces sujets directement liés aux problématiques des sites adaptatifs, nous évoquerons rapidement comment ces changements vont impacter votre manière d’optimiser et de tester vos sites ainsi que certaines problématiques spécifiques au mobile et qui vous aiderons à mieux anticiper les difficultés particulières liées aux smartphones et tablettes.

Les objectifs

  • Mieux comprendre les problématiques de la conception d’un site Responsive
  • Découvrir les outils qui vous aideront dans la réalisation de vos sites RWD
  • Expérimenter sur un petit projet en environnement maitrisé

Pré-requis

  • Syntaxe de base des langages CSS, HTML et javascript
  • Expérience en développement web
  • Ordinateur portable à apporter
  • Smartphone ou tablette à apporter fortement recommandé

Le programme de la formation Responsive Web Design

Introduction au Responsive Web Design

  • Qu’est-ce que le RWD
  • Adaptif vs fluide vs responsive
  • Amélioration progressive vs Dégradation élégante
  • Penser et concevoir son site autrement
  • Tour d’horizon des problématiques associées

Découverte des outils utiles

  • browserstack
  • browsersync
  • Chrome Dev Tools
  • jsconsole
  • ...

Concevoir un site fluide

  • Rappel sur les unités relatives
  • Concevoir une grille fluide

Concevoir un site adaptif

  • Gérer son viewport
  • Utiliser les média queries
  • Bien définir ses points de ruptures

Découverte de la norme Flexbox

Gérer les images

  • Images de fonds
  • Icônes avec font-icon et svg
  • Utiliser la balise Picture et l'attribut srcset
  • Support des anciens navigateurs

La performance

  • Optimiser ses ressources et définir un "budget performance"
  • Chargement conditionnel
  • Détecter les fonctionnalités du navigateur

Le web mobile

  • Les problématiques
  • Développer des interfaces tactiles
  • Tester et déboguer

Télécharger le programme

Le(s) formateur(s)

Mathieu Parisot Mathieu Parisot est formateur sur les technologies web. Développeur de sites web depuis le début des années 2000 avant d'en faire son métier, il a pu intervenir sur de nombreux projets dans des contextes techniques et fonctionnels variés : progiciel web, réalisation de forfaits, intervention sur des sites grand public e-commerce ou bancaires.

Passionné d'innovation et très curieux, il participe à de nombreuses rencontres, anime des conférences et rédige des articles autour du web. Il est également co-organisateur des Humantalks Paris.

Nous vous invitons à lire l'interview de Mathieu Parisot, il nous raconte son histoire et présente en détail ses formations.

1 témoignage

Le programme est très bien conçu. Les ateliers permettent d'assimiler la méthodologie au fur et à mesure afin de rendre notre site responsive. On a envie d'appliquer cela dès le lendemain.


Portageo