View
16.008
Download
1
Category
Preview:
DESCRIPTION
La grande majorité des sites actuels offrent une expérience utilisateur désastreuse sur un écran réduit : textes et menus de navigation minuscules, zoom obligatoire, débordements qui “cassent” le design, multi-colonnes non adaptées, contenus superflus, etc. Cette présentation a pour objectif de proposer des solutions concrètes pour adapter rapidement un site web existant au média mobile à travers quelques exercices pratiques fondés sur les possibilités avancées du langage CSS en Responsive Web Design.
Citation preview
Raphaël GoetterRaphaël Goetter
UN SITE WEB RESPONSIVE ENUNE HEURE ?
UN SITE WEB RESPONSIVE ENUNE HEURE ?
TOP CHRONO !TOP CHRONO !
alsacreations.fralsacreations.comgoetter.frknacss.commobitest.me
@goetter
alsacreations.fralsacreations.comgoetter.frknacss.commobitest.me
@goetter
Raphaël GoetterRaphaël Goetter
EN UNE HEURE, VOUS AVEZ DIT ?EN UNE HEURE, VOUS AVEZ DIT ?
SANS DECONNER ?!
SANS DECONNER ?!
C'EST PASPOSSIBLE !C'EST PASPOSSIBLE !
KTHXBYKTHXBY
AVANT DE SE LANCER...
Analyser et comprendre le code existant(template de CMS qui « laisse à désirer »)
Identifier les problèmes en amont(largeurs, iframes, points de rupture)
Faire un choix de maquette et d'ergo
Faire un choix de navigation
Penser « Performance Web »
Penser « HD » et « Retina »
Analyser et comprendre le code existant(template de CMS qui « laisse à désirer »)
Identifier les problèmes en amont(largeurs, iframes, points de rupture)
Faire un choix de maquette et d'ergo
Faire un choix de navigation
Penser « Performance Web »
Penser « HD » et « Retina » → COMPTER 2 à 4 jours → COMPTER 2 à 4 jours
AVANT DE SE LANCER...(bis)
Connaître le contexte mobile(navigateurs, moteurs, spécificités)
Comprendre le Viewport(device-width, pixel-ratio, viewport)
Maîtriser les CSS3 Media Queries(et HTML / CSS en général)
Connaître le contexte mobile(navigateurs, moteurs, spécificités)
Comprendre le Viewport(device-width, pixel-ratio, viewport)
Maîtriser les CSS3 Media Queries(et HTML / CSS en général)
→ COMPTER... pfiouu → COMPTER... pfiouu
PENDANTProduire du code pour écrans multiples(tablettes, smartphones, écrans larges)
Produire des adaptations pour 2 orientations
Penser « tactile »(positions et largeurs des zones tactiles)
Prendre en compte tous les gabarits(home, page-type, formulaires, galeries, etc.)
Ajouter / développer du JavaScript dédié
Produire du code pour écrans multiples(tablettes, smartphones, écrans larges)
Produire des adaptations pour 2 orientations
Penser « tactile »(positions et largeurs des zones tactiles)
Prendre en compte tous les gabarits(home, page-type, formulaires, galeries, etc.)
Ajouter / développer du JavaScript dédié
→ COMPTER... 3 à 6 jours → COMPTER... 3 à 6 jours
ET APRES ? CORRIGER !
Bugs sur tableaux HTML, iframes, vidéos, etc.
Bugs CSS ou JS inexpliqués(table-cell, flexbox, événements, touch)
Modifier le HTML si nécessaire
Problèmes de compatibilités(anciens Android, Blackberry, etc.)
Bugs sur tableaux HTML, iframes, vidéos, etc.
Bugs CSS ou JS inexpliqués(table-cell, flexbox, événements, touch)
Modifier le HTML si nécessaire
Problèmes de compatibilités(anciens Android, Blackberry, etc.)
→ COMPTER... 1 à 3 jours → COMPTER... 1 à 3 jours
TOTAL ?TOTAL ?ENTRE 6 ET 12 JOURSENTRE 6 ET 12 JOURS
… OU PLUS… OU PLUS
LE RESPONSIVE,C'EST PAS
DU « BONUS » !
LE RESPONSIVE,C'EST PAS
DU « BONUS » !ÇA SE DÉCIDE
EN AMONTÇA SE DÉCIDE
EN AMONT
AgoraCMS « bureau »
Zoom nécessaire
Navigation aveugle
Design « cassé »
Mauvaise expérience
Zoom nécessaire
Navigation aveugle
Design « cassé »
Mauvaise expérience
AgoraCMS « mobile »
AgoraCMS « Responsive » ?
FACILE !
Crédits : flickr.com/photos/bfishadowCrédits : flickr.com/photos/bfishadow
BON, ON S'Y MET ?
NOTIONSINDISPENSABLES
NOTIONSINDISPENSABLESC'EST BIEN PARCE QUE C'EST VOUSC'EST BIEN PARCE QUE C'EST VOUS
La surface d'affichage
Les Media Queries CSS3
Box-sizing pour vous servir
Halte aux débordements
La surface d'affichage
Les Media Queries CSS3
Box-sizing pour vous servir
Halte aux débordements
NOTIONS INDISPENSABLES
Crédits : flickr.com kalexandersonCrédits : flickr.com kalexanderson
LA SURFACE D'AFFICHAGE
DES VRAIS ET DES FAUX PIXELS
DES VRAIS ET DES FAUX PIXELS
960px960px960px960px
640px640px640px640px 320px320px320px320pxIPHONE4IPHONE4
IPHONE3IPHONE3
LARGEUR PHYSIQUE« VRAIS PIXELS »« VRAIS PIXELS »
iPhone 3 : 320px
Samsung Galaxy S : 480px
iPhone 4, iPhone 5 : 640px
Nokia Lumia 920 : 768px
iPad, iPad Mini : 768px
Sony Xperia Z : 1080px
Samsung Galaxy S4 : 1080px
iPad 3 : 1536px
iPhone 3 : 320px
Samsung Galaxy S : 480px
iPhone 4, iPhone 5 : 640px
Nokia Lumia 920 : 768px
iPad, iPad Mini : 768px
Sony Xperia Z : 1080px
Samsung Galaxy S4 : 1080px
iPad 3 : 1536px
« DEVICE-WIDTH »« FAUX PIXELS »« FAUX PIXELS »
iPhone 3, 4, 5 : 320px
Nokia Lumia 920 : 320px
Sony Xperia Z : 360px
Samsung Galaxy S4 : 360px
iPad 1, 2, 3 : 768px
iPad mini : 768px
iPhone 3, 4, 5 : 320px
Nokia Lumia 920 : 320px
Sony Xperia Z : 360px
Samsung Galaxy S4 : 360px
iPad 1, 2, 3 : 768px
iPad mini : 768px
« VIEWPORT »« FAUX PIXELS »« FAUX PIXELS »
Safari : 980px
Opera mini : 850px
Opera mobile : 980px
Android 1 : 800px
Android 2 : 800px
Android 3 : 800px
Android 4 : 980px
IE mobile : 1024px
Safari : 980px
Opera mini : 850px
Opera mobile : 980px
Android 1 : 800px
Android 2 : 800px
Android 3 : 800px
Android 4 : 980px
IE mobile : 1024px
www.mobitest.me
640px640px640px640pxIPHONE4IPHONE4
320px320px320px320px
980px980px980px980px
DEVICE-WIDTHDEVICE-WIDTH
VIEWPORTVIEWPORT
LARGEUR PHYSIQUELARGEUR PHYSIQUE
IPHONE4IPHONE4
320px320px320px320px
980px980px980px980px
DEVICE-WIDTHDEVICE-WIDTH
VIEWPORTVIEWPORT
Niveau de zoom :320 / 980 = 0,33xNiveau de zoom :320 / 980 = 0,33x
Crédits : flickr.com st3f4nCrédits : flickr.com st3f4n
FORCER LE VIEWPORT
<meta name="viewport" content="width=device-width">
LA BALISE META « VIEWPORT »
Largeur de fenêtre = device-widthLargeur de fenêtre = device-width
<meta name="viewport" content="width=device-width">
LA BALISE META « VIEWPORT »
<meta name="viewport" content="initial-scale=1.0">
Niveau de zoom = 1Niveau de zoom = 1
VIEWPORT DANS LES SPECS
@viewport { width: device-width; zoom: 1;}
Déjà reconnu par Opera, IE Mobile 10 et Firefox mobile (ex. @-o-viewport)Déjà reconnu par Opera, IE Mobile 10 et Firefox mobile (ex. @-o-viewport)
Niveau de zoom :320 / 320 = 1xNiveau de zoom :320 / 320 = 1x
<meta name="viewport" content="initial-scale=1.0">
Crédits : flickr.com st3f4nCrédits : flickr.com st3f4n
LES MEDIA QUERIES CSS3
<link rel="stylesheet" href="styles.css" media="screen" >
Pas de Media Queries ?Pas de Media Queries ?
Tous les écrans sont ciblésTous les écrans sont ciblés
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 640px)" >
<link rel="stylesheet" href="styles.css" media="screen" >
Avec Media Queries :Avec Media Queries :
Sont ciblés : écrans dont la fenêtre est inférieure ou égale à 640 pixelsSont ciblés : écrans dont la fenêtre est inférieure ou égale à 640 pixels
@media (max-width:640px) { body { width: auto; }}
Dans un fichier CSS :Dans un fichier CSS :
Ici : plein de styles CSS dédiés aux petits écrans
Ici : plein de styles CSS dédiés aux petits écrans
body { background-color: black; }
@media (max-width:640px) { body { background-color: red; }}
@media (max-width:640px) { body { width: auto; }}
Dans un fichier CSS :Dans un fichier CSS :
En pratique :En pratique :
Fenêtre de largeur supérieure à 640pxFenêtre de largeur supérieure à 640px Moins de 640pxMoins de 640px
RÉSULTAT
MEDIA QUERIESwidth / heightlargeur / hauteur de viewport
device-width / device-heightlargeur / hauteur du device
orientation : portrait ou landscape
etc.
width / heightlargeur / hauteur de viewport
device-width / device-heightlargeur / hauteur du device
orientation : portrait ou landscape
etc.
99
Crédits : flickr.com jing_dongCrédits : flickr.com jing_dong
BOX-SIZING
MA JOLIE BOÎTE
div { width: 500px; padding: 0;}
MA JOLIE BOÎTE
div { width: 500px; padding: 0;}
500px500px500px500px
MA JOLIE BOÎTE
div { width: 500px; padding: 10px;}
MA JOLIE BOÎTE
div { width: 500px; padding: 10px;}
520px520px520px520px
MA JOLIE BOÎTE
div { width: 50%; padding: 1em; border-width: 1px;}
MA JOLIE BOÎTE
div { width: 50%; padding: 1em; border-width: 1px;}
50%+2em+2px50%+2em+2px50%+2em+2px50%+2em+2px 50%+2em+2px50%+2em+2px50%+2em+2px50%+2em+2px
BOX-SIZING !
div { width: 50%; padding: 1em; border-width: 1px; }
50%50%50%50% 50%50%50%50%
box-sizing: border-box;
BOX-SIZING !
* { -webkit-box-sizing : border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
88
Crédits : flickr.com jing_dongCrédits : flickr.com jing_dong
DÉBORDEMENTS
FAUT QUE ÇA RENTRE !
ERF :(ERF :(
WORD-WRAP
div { word-wrap: break-word; overflow-wrap: break-word;}
66
HYPHENS
div { -webkit-hyphens : auto; -moz-hyphens : auto; -ms-hyphens : auto; hyphens : auto;}
1010
ET LES IMAGES ?
Tiens, c'est tout cassé là !Tiens, c'est tout cassé là !
ET LES IMAGES ?
img { max-width : 100%; height : auto;}
/* IE8 uniquement (bugfix) */ .ie8 img { width : auto;}
Une bordure sur l'image ?Une bordure sur l'image ?
CETTE FOIS, C'EST PARTI !
ANALYSE DE L'EXISTANT
ANALYSE DE L'EXISTANTANALYSE DE L'EXISTANT
ANALYSE DE L'EXISTANT
ANALYSE DE L'EXISTANT
6 fichiers CSS différents
42 fois « font-size »
70 fois « !important »
30 fois « margin: 0 »
27 fois « padding: 0 »
23 fois « position »
30 fois « float »
12 fois « clear »
6 fichiers CSS différents
42 fois « font-size »
70 fois « !important »
30 fois « margin: 0 »
27 fois « padding: 0 »
23 fois « position »
30 fois « float »
12 fois « clear » OK, no stress !OK, no stress !
ON FIXE LE NIVEAU DE ZOOM
FEUILLE DE STYLES MOBILE
Appliquée seulement sur écrans de largeur de fenêtre au maximum de 960 pixels
Appliquée seulement sur écrans de largeur de fenêtre au maximum de 960 pixels
STYLES « RESET »
www.knacss.comwww.knacss.com
RETOUR À LA NORMALE
Pour les éléments problématiques :• width : auto• height : auto• float : none • position : static• padding : 0• margin : 0• etc.
QUELQUES PARTICULARITÉS
TIENS, UN BADGE !
STYLES SMARTPHONES
RE-STYLAGE DU BADGE
ADAPTATIONS DIVERSES
LA NAVIGATION
2 colonnes + une séparation
LA NAVIGATION (BIS)LA NAVIGATION (BIS)
LA NAVIGATION (TER)LA NAVIGATION (TER)
Tout en douceur...
AVANTAVANT
TEMPS PASSÉ
Production effective de CSS = 6 heures
Compréhension de l'existant = 4 heures
Réflexions en amont, stratégie = 4 heures
Corrections bugs, anomalies = 1 heure
Production effective de CSS = 6 heures
Compréhension de l'existant = 4 heures
Réflexions en amont, stratégie = 4 heures
Corrections bugs, anomalies = 1 heure
→ TOTAL : 15 heures → TOTAL : 15 heures
NON TRAITÉ
Seule la Homepage a été prise en compte
Ergonomie : le minimum vital a été fait pour smartphones et tablettes
Aucune adaptation faite pour les différentes orientations
Performances web : aucun effort n'a été fait dans ce domaine
Écrans « HD » et « Retina » : aucune prise en compte
Seule la Homepage a été prise en compte
Ergonomie : le minimum vital a été fait pour smartphones et tablettes
Aucune adaptation faite pour les différentes orientations
Performances web : aucun effort n'a été fait dans ce domaine
Écrans « HD » et « Retina » : aucune prise en compte
→ à « l'arrache » → à « l'arrache »
ALLER PLUS LOIN...
ERF !
ALLER PLUS LOIN
Crédits : flickr.com/photos/udono
BREF : UN BON DÉBUT… MAIS INSUFFISANT
… MAIS INSUFFISANT
Photos, illustrations : flickr.com (licence CC)
Police : DeliciousDelicious Heavy
Icones et pictos :iconfider.netfindicons.comicônes Star Wars : Everaldo Coelho (free)icônes noires : Token Dark par Brsev (free)
Photos, illustrations : flickr.com (licence CC)
Police : DeliciousDelicious Heavy
Icones et pictos :iconfider.netfindicons.comicônes Star Wars : Everaldo Coelho (free)icônes noires : Token Dark par Brsev (free)
CRÉDITS
Raphaël Goetter @goetter
MERCI !MERCI !
Crédits : flickr.com/photos/st3f4n
Recommended