Responsive Webdesign

Responsive Web Design
Formation Digital /web

Adapter le design d’un site web pour être consulté sur ordinateur, tablette, navigateur mobile
Le bon affichage d'un site Web sur un mobile ou PC, permettant une navigation optimale, est désormais au cœur des préoccupations des développeurs web et de leurs clients.Cette formation traite de façon pratique ces techniques plus que jamais d'actualité pour les webmasters.

Objectifs

Connaître les techniques et les principes du Responsive Design.
Savoir gérer les feuilles de styles (CSS3) pour optimiser l'ergonomie d'un site.
Savoir adapter une page Web et son menu à la résolution d'écran d'un mobile.
Réaliser des sites Web qui s'adaptent aux résolutions de chaque écran, mobile ou PC.

2 jours ( 14h )Durée

MUL-014Référence

Public

Intégrateurs, Webmasters, développeurs Web.

Prérequis

Connaissance de HTML5/CSS3.

Programme

  • État des lieux
  • Les supports, les OS, les navigateurs, les technologies
  • Statistiques par navigateurs et plateformes
  • Tailles d'écran et densité des pixels
  • Modes Paysage et Portrait
  • Navigateurs
  • Analyse de quelques sites
  • Le responsive design
  • Qu'est-ce que le Responsive Design ?
  • Viser l'ergonomie Mobile
  • Les unités pixel, em et % : pour quel usage ?
  • L’impact sur la gestion de projet
  • Les contraintes ergonomiques et fonctionnelles
  • Les outils de conception
  • Les outils de test
  • 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 des grilles
  • Les principaux frameworks de grilles responsives (Bootstrap, Foundation, Suit, etc)
  • Rendre les éléments fluides
  • Les grilles fluides (apprendre à travailler en pourcentage, sites internet d'aide à la création de grilles fluides)
  • Les images flexibles
  • Vidéos fluides
  • Adapter la page pour le mobile
  • Adaptation du Menu
  • Utilisation des Ancres
  • Repositionnements
  • Suppression des éléments inutiles
  • Gérer les polices
  • Adapter les images
  • Images et largeurs fluides
  • Principe de l’affichage Retina
  • Images bitmap (gif, png, jpeg) et images vectorielles (svg, fontes)
  • Enregistrer ses images avec une définition optimale
  • Les plugins jQuery pour le Responsive Webdesign
  • ResponseJs
  • Flexslider
  • FitVids
  • PageSlide
  • Trucs et astuces
  • Séparer les scripts js
  • Adapter la taille du Viewport
  • Redimensionner les éléments
  • Réordonner les contenus : le menu en bas

En savoir plus

Responsable pédagogique : Michèle GUERRIN
  • Profil de l'intervenant
  • Les formateurs Onlineformapro spécialisés Multimédia sont sélectionnés, homologués, formés et supervisés selon un processus Qualité mis en œuvre par la direction pédagogique.
  • Moyens pédagogiques
  • Alternance d’apports théoriques et mise en pratique sur des cas concrets qui assurent l'acquisition d'un savoir-faire pour une mise en production aisée et immédiate.
  • Modalités d'évaluation
  • Des évaluations formatives réalisées en cours de formation.
    Une évaluation de satisfaction est réalisée en fin de parcours.
    A l’issue de la formation, une attestation de formation est fournie à chaque participant.
  • 100 % de sessions garanties

Prochaine session

Nous consulter

Une question ?

* = Champs obligatoires

  • guillemets J'ai retenu Onlineformapro tout simplement parce qu'ils sont "inégalables".
     
    Leur réactivité, disponibilité; la simplicité de l'outil et en même temps sa puissance. Je n'ai rien trouvé de mieux sur le marché. guillemets

    Jacky Portal - ESTC Marseille   

  • guillemets Nous avions déjà eu l’occasion de travailler avec Onlineformapro sur d’autres projets et avons été satisfaits par leur réactivité et leur créativité. guillemets

    Lydia David Duluc - Banque Populaire   

  • guillemets La solution Onlineformapro est une solution "tout en un" pratique facile à utiliser et à piloter.

    Nous bénéficions à la fois d'une plateforme de gestion d'apprenants facile à administrer avec des contenus sur étagère adaptés, d'une plateforme collaborative pratique et évolutive et d'outils auteur correspond parfaitement à nos attentes.

    Ces outils nous ont permis de gagner énormément de temps. guillemets

    Marion Flautre - ESC Amiens   

  • guillemets Nous avons retenu Onlineformapro pour différentes raisons : la convivialité et la souplesse d’organisation du LMS, la personnalisation possible de la plateforme collant parfaitement à notre mode de fonctionnement très atypique. guillemets

    Laurent Laval - Movadis  


  • guillemets Tout se passe très bien avec les équipes de développement d'Onlineformapro, c’est un bonheur.
     
    La qualité de la relation (courtoisie, disponibilité) s’ajoute à la prestation technique qui est très qualitative. guillemets

    Béatrice Andréani - Société Alinéa     

  • guillemets La solution Onlineformapro est conviviale, elle respecte les pratiques pédagogiques de nos formateurs.

    La mise à jour permanente garantit la pérennité de notre investissement. guillemets


    Romuald Mignot - DGD Formation  

  • guillemets Le graphisme ludique de la solution Onlineformapro nous a vraiment séduit. 

    L’ergonomie et la facilité de réalisation des contenus (formations et évaluations) ont été des éléments déterminants dans le choix de la solution.guillemets


    Pascal Maury - Fiducial Informatique
     

Certification de Services QUALIOPI

Logo Certification services Qualiopi

CGV et Tarifs inter-entreprises