FORMATION RESPONSIVE WEB DESIGN

Adaptez votre site pour le web mobile !

Vous souhaitez adapter votre site web aux différents types de terminaux sans avoir recours à plusieurs ressources ? Cette formation de 2 jours vous apporte les réponses pratiques aux problématiques de conception ergonomique et de gestion des contraintes liées au Responsive Web Design.

Demander un devis gratuit Télécharger le Catalogue Formations

 

Appréhendez les enjeux du Responsive Web !

Témoignages & avis client sur la formation Responsive Web Design !


Formation très intéressante

Agnès Farges, Assistante commerciale
Editions Grasset

Une formation a 360° qui donne une excellente vision de tous les outils à notre disposition. Un lieu d'échanges et une bonne dynamique impulsée par le formateur qui, au-delà de connaître son métier, le vit avec passion et cela se ressent !

Anne-Sophie Quennevat, Responsable Marketing Opérationnel
Groupe April
Formation Responsive Web Design Plus d’infos sur academy.chartered-managers.com RESPONSIVE WEB DESIGN Ecran non tactile, non retina 800x600 / 1024x768 Mode d’intéraction unique clavier / souris Accès internet rapide ADSL / Cable 5 ans a.i (avant l’iPhone) Ecran non tactile, non retina 240x320 Mode d’intéraction multiple clavier / flèches / pointer / tactile Accès internet lent (et cher !) WAP / i-Mode / BBI Pas trop utilisé Ecran tactile ou pas De 320x480 à 720x1280 Mode d’intéractions multiples Tactile, clavier, les deux, … Accès internet moyen 3G / 4G, Wifi, … Affichage portrait / paysage Affiche "le web », mais en tout petit (et sans Flash) Développer et maintenir une application native pour toutes les plateformes devient un nouveau problème plus qu’une solution… Ceci sans régler le vrai problème: adapter le contenu au périphérique qui l’affiche. Quelques chiffres du marché Soit un ordinateur « moyen » Windows 7 ADSL entre 5 et 7 Mo (donnée ARCEP) Ecran non Retina Format paysage Utilisé avec un clavier et une souris Résolution moyenne autour de 1300x900 Navigateur moderne (Chrome, Firefox et IE11) Mise en page fluide Des grilles dès la conception Mise en page fluide Des grilles pour les wireframes « Bootstrap » s’est installé comme LA référence des frameworks responsive, et bénéficie d’une grande communauté d’utilisateurs. Les thèmes et plugins sont donc nombreux et fournis. Il intégré des styles prédéfinis, une grille responsive, et une libraire Javascript contenant un set d’outils complet. Principalement développé par Twitter, son support dans le temps et plus ou moins assuré. En comparaison, Skeleton ou BluePrintCSS n’ont pas reçu de mise à jour depuis 2011… En revanche, il impose une syntaxe HTML précise, et il en coutera déjà 200ko rien que pour lui seul à vos visiteurs… Bootstrap (par Twitter) http://getbootstrap.com Themes Boostrap (gratuits & payants) http://www.bootstrapzero.com Theme FlatUI pour Bootstrap http://designmodo.github.io/Flat-UI/ Bootstrap (par Twitter) http://getbootstrap.com https://developer.apple.com/xcode/ https://developer.android.com/tools/help/emulator.html http://dev.windows.com/fr-fr/develop/download-phone-sdk https://remote.modern.ie https://www.virtualbox.org http://www.browserstack.com https://saucelabs.com Pour tester son site sur une multitude de navigateurs

CONTENU DE LA FORMATION

1. Panorama du web mobile
  • Les chiffres clés du marché mobile
  • Lexique : périphériques, OS, navigateurs
  • Les usages
  • Les standards actuels (HTML5, CSS3)
  • Les différents types de terminaux
  • Différence entre résolution et taille d’affichage
2. Définitions du Responsive Web Design
  • Définition du Responsive Web Design
  • Les impacts sur le web design classique
  • Interface Utilisateur (UI) et Expérience Utilisateur (UX)
  • Rapprochement mobile-desktop : vers un seul développement ?
  • Les contraintes ergonomiques et fonctionnelles
3. Les principes fondamentaux du Responsive Web Design
  • La notion de points de rupture
    • Définition
    • Où se situent les points de rupture ?
  • La notion de Mobile First
    • Définition
    • « Progressive enhancement »
    • Les méthodes de développement
4. Créer une grille d’affichage flexible
  • Grill fixe en pixels vs grille flexible en pourcentage
  • Les unités de mesure fluides (% et em)
  • La formule cible / contexte = résultat
  • L’approche contenu/contenant
  • Box, layout avec CSS3
5. Utiliser des médias flexibles
  • Rendre les images flexibles : images de fond / adaptation HTML5
  • Marges et espaces flexibles
  • Créer des vidéos adaptatitves
  • Avoir des menus adaptatifs
  • Avoir des tableaux et des formulaires flexibles
  • Comment régler le problème de reconnaissance par les anciens navigateurs
6. Appliquer des Media Queries
  • Différence entre viewport et screen
  • Le principe des media queries
  • Gérer les règles conditionnelles (orientation, device-width…)
  • Javascript et les anciens navigateurs
  • Application aux navigateurs mobiles
  • Cibler la résolution rétina
7. Javascript pour le Responsive Web Design
  • Tester les media queries
  • Tester le viewport
  • Tester le navigateur
  • Modification dynamique des contenus
  • Redirection par Javascript
8. Les frameworks Responsive Web Design
  • Avantages et inconvénients d’un framework RWD
  • Etat des lieux des frameworks existants : Bootstrap, Skeleton, Foundation, HTML5 Boilerplate, 960 grid…
  • Zoom sur Bootstrap
9. Tester son site responsive
  • Tester son site responsive sur tous les terminaux
  • Les émulateurs
  • Les solutions en ligne
  • Exemple d’un site responsive testé en temps réel
10. Performances et optimisations
  • Mesurer la performance de chargement
  • Bande passante et bonnes pratiques
  • Optimisation des médias
  • Requêtes et chargements surperflus

A qui s'adresse cette formation ?

Webdesigners
Chefs de projets web
Responsables communication
Webmasters
Responsables informatique
Responsables e-marketing
Chefs de produits
Responsables Internet
Web marketeurs

 

 

Nos autres thématiques : Mobile Marketing, Les bases techniques du Web, Dreamweaver


Prochaines Dates de formation Disponibilités mises à jour le : 08/05/2015

Dates Lieu Inscription

Nous sommes désolés, aucune session n'est pour le moment planifiée à Lyon.


Disponible en e-learning Disponible en Intra-Entreprise

Maîtriser les principes du web mobile est l’un des nouveaux enjeux se présentant aux agences digitales et annonceurs. Avec un nombre toujours plus élevé de terminaux débarquant sur le marché, la connectivité mobile s’impose comme le nouveau canal à exploiter. La formation Responsive Web Design de CHARTERED MANAGERS academy est mise à la disposition des professionnels souhaitant créer et optimiser leurs sites sur tablettes. Cette offre est disponible à Lyon, les participants s’inscrivant pour deux jours d’atelier à l’hôtel Novotel de Gerland. En plus de permettre de mieux appréhender l’importance du Responsive Web Design, ces cours sont l’occasion de maîtriser les contraintes graphiques et ergonomiques imposées par le RWD.

Lyon - Salle pour la formation Responsive Web Design
Opéra Lyon - formation Responsive Web Design
Lyon - formation Responsive Web Design

Prochaines Dates de formation Disponibilités mises à jour le : 08/05/2015

Dates Lieu Inscription

Nous sommes désolés, aucune session n'est pour le moment planifiée à Marseille.


Disponible en e-learning Disponible en Intra-Entreprise

Le Responsive Web Design consiste à l’élaboration de sites Internet adaptés à une utilisation sur terminal mobile. Pour les annonceurs, entreprises et agences digitales souhaitant rester compétitives, maîtriser le RWD revêt une importance capitale. Les Internautes sont désormais de plus en plus nombreux à rechercher une expérience utilisateur aussi fluide que possible, qu’ils se connectent via un ordinateur ou une tablette. La formation Responsive Web Design élaborée par CHARTERED MANAGERS academy s’impose comme une alternative sur mesure pour les annonceurs. Accessible dans les Bouches-du-Rhône, notamment à Marseille, cet atelier vise à guider dans la création et l’optimisation de sites web pour smartphones. Organisée au Novotel du Vieux Port, la formation Responsive Web Design aborde des points essentiels comme les chiffres-clés du marché mobile, la notion de point de rupture et de Mobile First.

Marseille - Salle pour la formation Responsive Web Design
Vieux port Marseille - formation Responsive Web Design
Marseille - formation Responsive Web Design

Prochaines Dates de formation Disponibilités mises à jour le : 08/05/2015

Dates Lieu Inscription

Nous sommes désolés, aucune session n'est pour le moment planifiée à Nice/Sophia.


Disponible en e-learning Disponible en Intra-Entreprise

Offrant de multiples opportunités, la connectivité mobile représente un enjeu de première importance pour les agences digitales ainsi que les professionnels présents sur Internet. Avoir un site mobile permet en effet de toucher une plus grande part de mobinautes et de répondre à leur besoin en expérience utilisateur ergonomique. La formation Responsive Web Design proposée par CHARTERED MANAGERS academy est pensée pour familiariser les professionnels avec ce concept des plus porteurs. Unités de mesure fluides, images flexibles, qualité contenant/contenu ou encore notion de Mobile First sont autant de thèmes traités par les experts de CHARTERED MANAGERS academy. L’atelier sur Nice/Sophia-Antipolis, en région PACA, est organisé sur deux jours au Sophia Country Club.

Nice/Sophia-Antipolis - Salle pour la formation Responsive Web Design
Promenade des anglais Nice - formation Responsive Web Design
Nice/Sophia-Antipolis - formation Responsive Web Design

Prochaines Dates de formation Disponibilités mises à jour le : 08/05/2015

Dates Lieu Inscription
06 & 07 Juillet 2015 Paris Pré-inscription Moins de 6 places disponibles
&

Paris

Pré-inscription Formation Responsive Web Design
Places disponibles

L’avènement du web mobile a favorisé une transformation radicale des habitudes des Internautes. Les sites web doivent désormais s’adapter à la lecture sur terminaux mobile, c’est ce que l’on appelle le concept de Responsive Web Design. Les professionnels désireux de cibler les utilisateurs du web mobile peuvent participer à la formation Responsive Web Design élaborée par CHARTERED MANAGERS academy. Pensé pour répondre aux contraintes du web mobile, cet atelier Responsive Web Design est accessible à Paris, en Île de France.

Paris - Salle pour la formation Responsive Web Design
Arc de triomphe Paris - formation Responsive Web Design
Paris - formation Responsive Web Design

Prochaines Dates de formation Disponibilités mises à jour le : 08/05/2015

Dates Lieu Inscription

Nous sommes désolés, aucune session n'est pour le moment planifiée à Toulouse.


Disponible en e-learning Disponible en Intra-Entreprise

Exploiter la connectivité mobile est le gage d’une augmentation majeure du chiffre d’affaires pour les entreprises et autres annonceurs présents sur le web. Les sites pour tablettes ou adaptés à n’importe quel terminal mobile ont en effet l’avantage de pouvoir répondre aux nouvelles exigences en ergonomie et en fluidité de navigation. CHARTERED MANAGERS academy propose aux propriétaires de sites web et aux agences digitales en général sa formation Responsive Web Design. Ceux présents en Haute-Garonne peuvent s’inscrire à Toulouse. Deux jours de cours intensifs sont en effet prévus à l’Hôtel Pullman.

Toulouse - Salle pour la formation Responsive Web Design
Capitole Toulouse - formation Responsive Web Design
Toulouse - formation Responsive Web Design

Prochaines Dates de formation Disponibilités mises à jour le : 08/05/2015

Dates Lieu Inscription

Nous sommes désolés, aucune session n'est pour le moment planifiée à Bordeaux.


Disponible en e-learning Disponible en Intra-Entreprise

Les sites pour tablettes et terminaux mobiles comptent au nombre des plus consultés du fait de l’avènement de la connectivité mobile. En apprenant à maîtriser les bases fondamentales du Responsive Web Design, les professionnels et autres annonceurs présents sur le canal digital mettent toutes les chances de leur côté pour attirer de nouveaux prospects. La formation Responsive Web Design telle qu’elle est élaborée par les experts de CHARTERED MANAGERS academy prend en compte les nouvelles habitudes des Internautes/Mobinautes. Permettant d’avoir un site mobile intuitif et ergonomique, cet atelier est organisé dans de nombreuses villes de France, dont Bordeaux. Les cours se dérouleront dans un hôtel du centre-ville pour plus de praticité.

Bordeaux - Salle pour la formation Responsive Web Design
Place de la Bourse Bordeaux - formation Responsive Web Design
Bordeaux - formation Responsive Web Design

Prochaines Dates de formation Disponibilités mises à jour le : 08/05/2015

Dates Lieu Inscription

Nous sommes désolés, aucune session n'est pour le moment planifiée à Strasbourg.


Disponible en e-learning Disponible en Intra-Entreprise

Se connectant de plus en plus souvent par le biais de leurs terminaux mobiles, les Internautes recherchent aujourd'hui des sites web pour smartphones, tablettes et autres télévisions connectées. Pour les annonceurs, agences digitales et les professionnels présents sur le web, il devient important de s’adapter aux nouvelles habitudes de leurs prospects. Solution sur mesure pour former ou perfectionner les acquis, la formation Responsive Web Design élaborée par les experts de CHARTERED MANAGERS academy apporte une vision approfondie des bases fondamentales du RWD. Les cours de Strasbourg sont organisés dans un hôtel du centre-ville pendant deux jours.

Strasbourg - Salle pour la formation Responsive Web Design
Cathédrale Strasbourg - formation Responsive Web Design
Strasbourg - formation Responsive Web Design

Prochaines Dates de formation Disponibilités mises à jour le : 08/05/2015

Dates Lieu Inscription

Nous sommes désolés, aucune session n'est pour le moment planifiée à Genève.


Disponible en e-learning Disponible en Intra-Entreprise

Le concept de Responsive Web Design est actuellement l’un des plus porteurs. Consistant à créer des sites web adaptés à une navigation sur terminal mobile, sur télévision connectée ou via un ordinateur, le RWD s’impose comme un secteur d’avenir. CHARTERED MANAGERS academy apporte sa solution sur mesure aux professionnels désireux d’avoir un site mobile, sa formation Responsive Web Design. Accessible dans la ville de Genève, cet atelier donne l’opportunité de se familiariser avec la notion de point de rupture, les différentes images flexibles, et le principe de Mobile First. Les cours sont programmés sur deux jours, dans un hôtel du centre-ville.

Genève - Salle pour la formation Responsive Web Design
Brunswick Genève Responsive Web Design
Genève - formation Responsive Web Design

Prochaines Dates de formation Disponibilités mises à jour le : 08/05/2015

Dates Lieu Inscription

Nous sommes désolés, aucune session n'est pour le moment planifiée à Nantes.


Disponible en e-learning Disponible en Intra-Entreprise

Répondant aux besoins en connectivité mobile et en ergonomie, les sites pour tablettes et pour terminaux mobiles en général comptent au nombre des plus utilisés à ce jour. Pour faire efficacement face à la concurrence, un annonceur ou une agence digitale se doit ainsi de maîtriser le concept de RWD. La formation Responsive Web Design s’impose comme une solution sur mesure pour se lancer avec succès. Accessible dans la ville de Nantes, l’atelier se déroulera dans un hôtel du centre-ville.

Nantes - Salle pour la formation Responsive Web Design
Place Royal Nantes - formation Responsive Web Design
Nantes - formation Responsive Web Design

Prochaines Dates de formation Disponibilités mises à jour le : 08/05/2015

Dates Lieu Inscription

Nous sommes désolés, aucune session n'est pour le moment planifiée à Montpellier.


Disponible en e-learning Disponible en Intra-Entreprise

Le Responsive Web Design est un domaine des plus prometteurs. Les Internautes étant de plus en plus nombreux à privilégier la connectivité mobile, avoir un ou des sites web pour smartphones est le gage d’une augmentation significative du nombre de prospects pour une marque présente sur le web. Répondant à ce besoin des professionnels présents sur le canal digital, CHARTERED MANAGERS academy propose sa formation Responsive Web Design. Dans la ville de Montpellier entre autres, deux jours de cours sont programmés dans un hôtel du centre-ville.

Montpellier - Salle pour la formation Responsive Web Design
Château d'eau Montpellier Responsive Web Design
Montpellier - formation Responsive Web Design

Quiz sur la Formation Responsive Web Design

1. Un écran de mobile plus grand affiche un plus grand nombre de pixels




2. Qu'est-ce que le viewport ?





3. Comment sont définies les dimensions du viewport ?





4. Quelle est la valeur de “device-width” pour un iPhone 4 en mode paysage ?





5. La valeur de “device-width” change-elle lorsque l'orientation change ? (portrait / paysage)




6. Y'a t'il une différence entre “width” et “device-width” ?





7. Il est important de tester mon site sur des versions d’Android “vieille” d'il y a 3 ans ?





8. Je peux redéfinir le viewport à une largeur fixe




9. Qu'est ce qu'un “breakpoint”





10. Un breakpoint ne s'applique que selon la largeur de l'écran




Shadow 1
 
Demander un devis gratuit Télécharger le Catalogue Formations

CHARTERED MANAGERS academy