UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter
Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter
EN UNE HEURE, VOUS AVEZ DIT?!? R E N N O C E D S SAN
C'EST PAS POSSIBLE! KTHXBY
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» 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) COMPTER... pfiouu
PENDANT 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
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.) COMPTER... 1 à 3 jours
TOTAL? ENTRE 6 ET 12 JOURS OU PLUS
LE RESPONSIVE, C'EST PAS DU «BONUS»! E D I C É D E S ÇA T N O EN AM
AgoraCMS «bureau»
AgoraCMS «mobile» Zoom nécessaire Navigation aveugle Design «cassé» Mauvaise expérience
AgoraCMS «Responsive»?
FACILE!
BON, ON S'Y MET? Crédits Crédits :: flickr.com/photos/bfishadow flickr.com/photos/bfishadow
NOTIONS INDISPENSABLES C'EST BIEN PARCE QUE C'EST VOUS
NOTIONS INDISPENSABLES La surface d'affichage Les Media Queries CSS3 Box-sizing pour vous servir Halte aux débordements
LA SURFACE D'AFFICHAGE Crédits Crédits :: flickr.com flickr.com kalexanderson
DES VRAIS ET DES FAUX PIXELS
DES VRAIS ET DES FAUX PIXELS 960px
4 E N O IPH 640px 3 E N O IPH 320px
LARGEUR PHYSIQUE» S L E X I P S I A «VR 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»» S L E X I P X «FAU 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» Safari : 980px Opera mini : 850px Opera mobile : 980px Android 1 : 800px Android 2 : 800px Android 3 : 800px Android 4 : 980px IE mobile : 1024px» S L E X I P X «FAU
www.mobitest.me
4 E N O IPH 640px LARGEUR PHYSIQUE 320px DEVICE-WIDTH 980px VIEWPORT
4 E N O IPH Niveau de zoom : 320 / 980 = 0,33x 320px DEVICE-WIDTH 980px VIEWPORT
FORCER LE VIEWPORT Crédits Crédits :: flickr.com flickr.com st3f4n
LA BALISE META «VIEWPORT» <meta name="viewport" content="width=device-width"> Largeur de fenêtre = device-width
LA BALISE META «VIEWPORT» <meta name="viewport" content="width=device-width"> <meta name="viewport" content="initial-scale=1.0"> Niveau 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)
<meta name="viewport" content="initial-scale=1.0"> Niveau de zoom : 320 / 320 = 1x
LES MEDIA QUERIES CSS3 Crédits Crédits :: flickr.com flickr.com st3f4n
Pas de Media Queries? <link rel="stylesheet" href="styles.css" media="screen" > Tous les écrans sont ciblés
<link rel="stylesheet" href="styles.css" media="screen" > Avec Media Queries : <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 640px)" > Sont ciblés : écrans dont la fenêtre est inférieure ou égale à 640 pixels
Dans un fichier CSS : @media (max-width:640px) { body { width: auto; } } Ici : plein de styles CSS dédiés aux petits écrans
Dans un fichier CSS : @media (max-width:640px) { body { width: auto; } } En pratique : body { background-color: black; } @media (max-width:640px) { body { background-color: red; } }
RÉSULTAT Fenêtre de largeur supérieure à 640px Moins de 640px
MEDIA QUERIES width / height largeur / hauteur de viewport device-width / device-height largeur / hauteur du device orientation : portrait ou landscape etc. 9
BOX-SIZING Crédits Crédits :: flickr.com flickr.com jing_dong
MA JOLIE BOÎTE div { width: 500px; padding: 0; }
MA JOLIE BOÎTE div { width: 500px; padding: 0; } 500px
MA JOLIE BOÎTE div { width: 500px; padding: 10px; }
MA JOLIE BOÎTE div { width: 500px; padding: 10px; } 520px
MA JOLIE BOÎTE div { width: 50%; padding: 1em; border-width: 1px; }
MA JOLIE BOÎTE 50%+2em+2px 50%+2em+2px div { width: 50%; padding: 1em; border-width: 1px; }
BOX-SIZING! 50% 50% div { width: 50%; padding: 1em; border-width: 1px; box-sizing: border-box; }
BOX-SIZING! * { -webkit-box-sizing : border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 8
DÉBORDEMENTS Crédits Crédits :: flickr.com flickr.com jing_dong
FAUT QUE ÇA RENTRE! ERF :(
WORD-WRAP div { word-wrap: break-word; overflow-wrap: break-word; } 6
HYPHENS div { -webkit-hyphens -moz-hyphens -ms-hyphens hyphens } : : : : auto; auto; auto; auto; 10
ET LES IMAGES? 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?
CETTE FOIS, C'EST PARTI!
ANALYSE DE L'EXISTANT
ANALYSE 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» 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
STYLES «RESET» www.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 (TER) Tout en douceur...
TEMPS PASSÉ Production effective de CSS Compréhension de l'existant Réflexions en amont, stratégie Corrections bugs, anomalies = = = = 6 heures 4 heures 4 heures 1 heure 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 à «l'arrache»
ALLER PLUS LOIN... ERF!
ALLER PLUS LOIN
BREF : UN BON DÉBUTUFFISANT S N I S I MA Crédits : flickr.com/photos/udono
CRÉDITS Photos, illustrations : flickr.com (licence CC) Police : Delicious Delicious Heavy Icones et pictos : iconfider.net findicons.com icônes Star Wars : Everaldo Coelho (free) icônes noires : Token Dark par Brsev (free)
MERCI! Raphaël Goetter Crédits : flickr.com/photos/st3f4n @goetter