Formation Responsive Web Design « Adapter son site pour le Web mobile » Responsive Web Design Franck Dumesnil – blogperformance com 1
| Previous PDF | Next PDF |
[PDF] Programme de formation Responsive Web Design - Clever Institut
Description Le « Responsive Web Design » (RWD) consiste à adapter le design d'un site web afin qu'il puisse être consulté indépendamment de la plateforme
[PDF] Programme détaillé de la formation Responsive Web Design
20 jui 2017 · Adaptez une interface aux différentes tailles d'écrans avec le Responsive Web Design (RWD) Cette formation RWD permet de maîtriser les
[PDF] Formation Responsive Web Design
Formation Responsive Web Design « Adapter son site pour le Web mobile » Responsive Web Design Franck Dumesnil – blogperformance com 1
[PDF] Formation Responsive Design Web - AgoraTIC Formation
ORGANISME DE FORMATION RÉFÉRENCÉ SOUS LE NUMÉRO : 117 555 432 La formation Responsive Design Web a pour objectif de vous permettre de
[PDF] HTML5 / CSS3 / Responsive Web Design - MIn2RIEN
Formation continue HTML5 / CSS3 / Responsive Web Design Objectifs > Acquérir des connaissances en HTML5 / CSS 3 / Responsive Web Design o CSS 3
[PDF] Formation Webmaster Intermédiaire : Responsive Web Design (RWD)
Formation Webmaster Intermédiaire : Responsive Web Design (RWD) Formation éligible au CPF, contactez-nous au 09 72 37 73 73 pour en savoir plus
[PDF] Responsive Web Design (RWD) - CNRS
Responsive Web Design (RWD) CSS 3 et Mobile first Créer des applications Web d'abord pour mobiles : Pourquoi le Responsive (vs app mobile) ? 6
[PDF] CSS3 POUR LE RESPONSIVE WEB DESIGN - ACF - Audit Conseil
CSS3 POUR LE RESPONSIVE WEB DESIGN ACF - Audit Conseil Formation - www audit-conseil-formation com 1/2 Audit Conseil Formation 87, rue Général
[PDF] Adopté par les CPL du 21/03/2002 et du 23/12/2002. 1 sur 9
[PDF] Référentiel des compétences Education préscolaire et primaire Niveau licence. 1. Concevoir des situations d enseignement-apprentissage
[PDF] Profils de candidats Décembre 2015
[PDF] Refonte de la politique Vacances de la CAF de l Ardèche
[PDF] BTS SERVICES ET PRESTATIONS DES SECTEURS SANITAIRE ET SOCIAL
[PDF] La mise en œuvre des normes IPSAS
[PDF] LETTRE D ENTENTE ENTRE LE SYNDICAT DU PERSONNEL ENSEIGNANT DU COLLÈGE AHUNTSIC LE COLLÈGE D ENSEIGNEMENT GÉNÉRAL ET PROFESSIONNEL D AHUNTSIC
[PDF] Dès le 1 janvier 2010, il ne sera donc plus possible de conclure de CAV et de CIRMA.
[PDF] 3/13. 5 https://eiopa.europa.eu/publications/administrative/jc201377 POG Joint_Position_.pdf. 6 JO L 335 du17.12.2009, p. 1.
[PDF] Le montage et la gestion administrative des projets co-financés par l'union Européenne
[PDF] Coordinateur de Projet H/F - Zinder - NIGER
[PDF] R-15 Règlement relatif aux droits de scolarité et aux droits spéciaux. Adopté par le Conseil d administration le 27 octobre 2014.
[PDF] Monsieur Denis Comeau, commissaire-parent, est absent.
[PDF] DEMANDE D AIDES LOCA-PASS
Formation Responsive Web Design
" Adapter son site pour le Web mobile » Responsive Web Design Franck Dumesnil - blogperformance.com 1Table des matières
LE CONTEXTE :.................................................................................................................................3
De quoi parle-ton en Responsive design ?.......................................................................................3
Exemples de sites web Responsive......................................................................................................4
PENSER MOBILE FIRST...................................................................................................................4
LES OUTILS........................................................................................................................................5
Outils de développement.................................................................................................................5
Chrome :......................................................................................................................................8
Outils de tests sur mobile.................................................................................................................9
UN CONTENU FLUIDE ..................................................................................................................10
Les contenu non fluides.................................................................................................................10
comment rendre un contenu fluide ...............................................................................................11
Les images responsives ............................................................................................................11
Exercice : Rendre une image responsive..............................................................................12
Les vidéos responsive...............................................................................................................12
Les tableaux responsive............................................................................................................12
Exercice : Créer une page d'accueil contenant une vidéo totalement responsive................12
Rappels sur la hiérarchie parent enfant des classes CSS....................................................................12
RESPONSIVE WEB DESIGN EN 3 POINTS..................................................................................12
LE VIEWPORT : La première étage du RWD...................................................................................12
zoom sur écran :.............................................................................................................................12
MEDIA QUERIES.............................................................................................................................14
Les syntaxes d'appel des média queries.........................................................................................14
Exercice de Responsivité.........................................................................................................14
Exercices - TP :..................................................................................................................................20
Création d'un menu de navigation mobile :...................................................................................21
Création d'une grille de tableau responsive en css :.......................................................................21
Les frameworks de développement MOBILE :..................................................................................21
1- Utiliser BOOTSTRAP :........................................................................................................21
2- Utilisation de Jquery Mobile................................................................................................21
3- Utiliser Foundation framework :..........................................................................................21
Concepts de la grille (ligne / colomnes ) de foundation :..............................................................22
Le composant GRID :...............................................................................................................22
Le composant TOP-BAR..........................................................................................................25
Le composant INTERCHANGE...............................................................................................25
Avec les images :..................................................................................................................26
Le cas d'une image de Background :....................................................................................27
Étendre le css avec SAAS et COMPASS :.........................................................................................28
Les navigateurs mobiles :...................................................................................................................34
Créer un thème wordpress avec foundation framework :...................................................................34
Commment Optimiser la performance mobile :.................................................................................34
Sprite images : Comment ça fonctionne ?..........................................................................................34
LIENS UTILES..................................................................................................................................35
Responsive Web Design Franck Dumesnil - blogperformance.com 2LE CONTEXTE :
De quoi parle-ton en Responsive design ?
http://www.liquidapsive.com/3 Systèmes d'exploitation mobile :
FRONT-END / BACK END : les navigateurs mobiles pour ces OS :Exemples de sites web Responsive
http://leidgens-piscines.be/ http://www.creativeslashers.com/ http://www.legipass.com/ http://zurb.com/responsive http://www.liberation.fr/ Responsive Web Design Franck Dumesnil - blogperformance.com 3Testez si votre site est " mobile-friendly »
PENSER MOBILE FIRST = PENSER USAGE MOBILE
•Le contenu est d'abord pensé pour le mobile.•Le design et les fonctionnalités ne se voient plus dégradés mais "enrichis" pour la tablette et
le desktop. •Ne pas vouloir " faire rentrer tout le contenu ». •Qui dit mobile, dit Tactile (Touch), qui dit Usage Responsive Web Design Franck Dumesnil - blogperformance.com 4LES OUTILS
Outils de développement :
Brakets : Editeur html5 / CSS3 avec Plugins
http://brackets.io/Brackets est un éditeur open-source pour le web design et le développement sur des technologies Web telles
que HTML, CSS et JavaScript. Le projet a été créé et est maintenu par Adobe, et est publié sous une licence
MIT.Surligner l'aperçu en direct
Une fonctionnalité très interessante est le " highlight » de la partie sélectionnée.Comment l'activer ?
Il faut pour cela :
1°) ouvrir un dossier et non un fichier seul.
2°) l'adresse ne doit pas être une adresse locale mais une adresse serveur local :
ex: http://127.0.0.1:51138/colonnes.html Pour cela aller dans les paramètres du projet et mettre comme adresse locale : http://127.0.0.1 ou http://localhost à l'installation de Brakets un serveur web est installé. Responsive Web Design Franck Dumesnil - blogperformance.com 53°) ensuite allez dans affichage > surlignement dans l'aperçu en direct
Modifier le code css directement dans le html
sous mac : cmd + E en se positionnant sur la balise html (ex : body) ou bien la classe ou le id.le style est alors mis à jour visuellement sans avoir à basculer vers le fichier css , sauver, revenir vers la html
et rafraichir. Toutes ces actions sont faites en direct.Sous windows :
CTRL + E (en se positionnant sur la balise ou la classe), Brakets ouvre le fichier de style directement dans la
structure HTML. Responsive Web Design Franck Dumesnil - blogperformance.com 6CLIC-DROIT : On peut via clic-droit (windows) ouvrir une fenêtre contextuelle d'édition rapide permettant
de modifier visuellement la couleur d'un élément. Plugins de développement CSS rapide : le cas d'EMMET http://docs.emmet.io/Tutoriaux brakets :
http://css-snippets.com/brackets-course/ Responsive Web Design Franck Dumesnil - blogperformance.com 7Chrome :
Installer chrome pour tous les utilisateurs.
Les outils pour développeurs de chrome :
On utilisera chrome pour lire le code source de certaines pages web dont on souhaite analyser le code mais
aussi pour tester en direct des nouveaux styles css sans pour autant devoir télécharger le contenu.
Responsive Web Design Franck Dumesnil - blogperformance.com 8Outils de tests sur mobile :
Tests de responsivité :
http://responsivetest.netEmulateurs :
http://mobiletest.me http://www.responsinator.com/Generateurs :
Pour générer du code et ensuite vernir le mettre à jour, et dans un souci de productivité, nous utiliserons un
outil de génération de code pour le design de colonnes (ou grids)UN CONTENU FLUIDE
Faire en sorte que le contenu apparaisse toujours à l'écran.Les contenu non fluides :
ex : http://www.errefom.fr/Débordement du contenu :
Lorsque la fenêtre du navigateur est réduite le contenu n'apparaît plus. Responsive Web Design Franck Dumesnil - blogperformance.com 9Un contenu fluide :
ex : prenons le cas du site www.lefigaro.fr2 colonnes : Une colonne fluide , une colonne fixe
comment rendre un contenu fluide ? EM : REM min-width et max-widthResponsive Web Design Franck Dumesnil - blogperformance.com 10
Les images responsives :
La base :
Les spécificités :
http://responsiveimages.org/Le cas des logos responsive :
http://www.responsivelogos.co.uk/Responsive Web Design Franck Dumesnil - blogperformance.com 11
On peut créer un logo responsive avec des sprites et le format SVG.Exercice : Rendre une image responsive
1)créer une image en png sur pixlr
2)mettre l'imae dans un div
3)créer la classe
Les vidéos responsive
voir www.embedresponsively.comLes tableaux responsive :
Une façon de créer des tableaux responsive est d'utiliser le selecteur nth-child() pour accéder aux divers
élements d'un tableauEx : table th:nth-child(3){display: none;}
Exercice : Créer une page d'accueil contenant une vidéo totalement responsive Rappels sur la hiérarchie parent enfant des classes CSSComment fonctionnent les classes CSS ?
Les styles CSS fonctionnent sur le principe d'imbrication, de parenté et d'héritage. .nav .active a { attributs du lien } .nav ul li { attributs de li }RESPONSIVE WEB DESIGN EN 3 POINTS :
1.Le viewport
2.Le container et les medias fluides
3.Les media queries
LE VIEWPORT : La première étage du RWD
zoom sur écran : Comment autoriser ou interdire l'agrandissement via l'élargissement ou le pincement des doigts ? Exercice : montrer comment autoriser on interdire le zoom sur écran mobile. http://viewportsizes.com/Responsive Web Design Franck Dumesnil - blogperformance.com 13
http://viewportsizes.com/mine/Conception des interfaces : Les wireframes
1)s'inspirer :
2)Créer
http://mocknow.com/MEDIA QUERIES
http://www.w3.org/TR/css3-mediaqueries/Les syntaxes d'appel des média queries :
Comprendre rapidement les media queries :
Responsive Web Design Franck Dumesnil - blogperformance.com 14
Exercice de Responsivité: Passer de 3 à 1 colonnes en fonction de la dimension de la fenêtre du
navigateur. Partie 1 : Créer une page de 3 colonnes non responsive1°) créer une classe colonne-1-3 :
cette classe va s'appliquer à chacune des 3 colonnes. Il faut compter les bordures et les marges dans la largeur globale de 100%. Dans ce cas, on divide 100 par 3 (3 colonnes) soit 33.33 %. on décide de donner une marge de 1% autour de chaque colonne, soit 6%. il faut donc d'abord faire100 - 6 = 94% et ensuite diviser 94 / 3 = 31.33 %. Dans ce cas aucune bordure
n'est possible dans les colonnes.1°) créer une classe permettant de styler chaque colonne indépendamment :
cela permettra de styler différemment chaque colonne lors du changement de taille d'écran.Responsive Web Design Franck Dumesnil - blogperformance.com 15
3°) le cas du OnePLus One :
sa résolution est de 1920 x 1080. hors en mode vertical , lorsque je consulte la page en mode " portrait » le test montre
que la résolution est de 980. si je met max-width à 980, l'affichage passe sur 2 colonnes et si le met max-width à 979, le
css n'est pas modifié et l'affichage reste sur 3 colonnes.Tant que la résolution d'écran ou la largeur de la fenêtre du navigateur est supérieur ou égale à 980 pixels, on reste sur 3
colonnes. Dès que cette résolution passe à 979 et inférieure, on passe à 2 colonnes.3°) passage à 1 colonne :
lorsque la résolution ou la largeur de la fenetre du navigateur est inférieure à 580 px, alors le css utilisé est celui
ci-dessus.Lors du passage à 1 colonne, on créé 2 classes : une classe mobile qui sert à afficher le contenu d'une colonne sans
limite sur toute la largeur et une classe cacher-mobile destinée à masquer les contenu qui en hériteront comme la sidebar
par exemple.On applique les classes cacher-mobile et mobile aux div contenu et sidebar auxquels ont veut attribuer des styles
particuliers lors du passage à l'écran mobile.Responsive Web Design Franck Dumesnil - blogperformance.com 16
4°) Suppression de contenus non vitaux en mode mobile :
il suffit d'appliquer la classe cacher-mobile aux div que l'on veut masquer.Responsivite du menu de navigation
création d'un menu de navigation avec ul > li (liste non ordonnée)Responsive Web Design Franck Dumesnil - blogperformance.com 17
Création des styles pour affichage au delà de 980 pixels : (desktop)Rappel Règles CSS
Pour attribuer un style à un
1°) on sélectionne la balise html de destination ex : ul
2°) on sélectionne la classe sur laquelle on souhaite attribuer le style ex : .nav
3°) on écrit : ul.nav { /* le style entre les crochets */ }
Pour rendre fluide la liste ul > li il faut mettre : ul.nav { width: auto; }Pour espacer les liens du menu entre eux :
ul.nav li { padding-left : 10px ; } menus en fonctions de la taille d'écran :Responsive Web Design Franck Dumesnil - blogperformance.com 18
@media screen and (max-width:620px) { ul.nav { width: 60%; font-size: 1.1em; @media screen and (max-width:579px) { ul.nav { width: 320px; font-size: 1.2em; Pour conserver le menu sur 3 lignes, je bloque la largeur sur 320 px.Responsive Web Design Franck Dumesnil - blogperformance.com 19