UN SITE WEB RESPONSIVE EN UNE HEURE?

Transcription

1 UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter

2 Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com

3 EN UNE HEURE, VOUS AVEZ DIT?!? R E N N O C E D S SAN

4 C'EST PAS POSSIBLE! KTHXBY

5 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

6 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

7 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

8 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

9 TOTAL? ENTRE 6 ET 12 JOURS OU PLUS

10 LE RESPONSIVE, C'EST PAS DU «BONUS»! E D I C É D E S ÇA T N O EN AM

11 AgoraCMS «bureau»

12 AgoraCMS «mobile» Zoom nécessaire Navigation aveugle Design «cassé» Mauvaise expérience

13 AgoraCMS «Responsive»?

14 FACILE!

15 BON, ON S'Y MET? Crédits Crédits :: flickr.com/photos/bfishadow flickr.com/photos/bfishadow

16 NOTIONS INDISPENSABLES C'EST BIEN PARCE QUE C'EST VOUS

17 NOTIONS INDISPENSABLES La surface d'affichage Les Media Queries CSS3 Box-sizing pour vous servir Halte aux débordements

18 LA SURFACE D'AFFICHAGE Crédits Crédits :: flickr.com flickr.com kalexanderson

19 DES VRAIS ET DES FAUX PIXELS

20 DES VRAIS ET DES FAUX PIXELS 960px

21 4 E N O IPH 640px 3 E N O IPH 320px

22 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

23 «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

24 «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

25

26 4 E N O IPH 640px LARGEUR PHYSIQUE 320px DEVICE-WIDTH 980px VIEWPORT

27 4 E N O IPH Niveau de zoom : 320 / 980 = 0,33x 320px DEVICE-WIDTH 980px VIEWPORT

28 FORCER LE VIEWPORT Crédits Crédits :: flickr.com flickr.com st3f4n

29 LA BALISE META «VIEWPORT» <meta name="viewport" content="width=device-width"> Largeur de fenêtre = device-width

30 LA BALISE META «VIEWPORT» <meta name="viewport" content="width=device-width"> <meta name="viewport" content="initial-scale=1.0"> Niveau de zoom = 1

31 VIEWPORT DANS LES { width: device-width; zoom: 1; } Déjà reconnu par Opera, IE Mobile 10 et Firefox mobile

32 <meta name="viewport" content="initial-scale=1.0"> Niveau de zoom : 320 / 320 = 1x

33 LES MEDIA QUERIES CSS3 Crédits Crédits :: flickr.com flickr.com st3f4n

34 Pas de Media Queries? <link rel="stylesheet" href="styles.css" media="screen" > Tous les écrans sont ciblés

35 <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

36 Dans un fichier CSS (max-width:640px) { body { width: auto; } } Ici : plein de styles CSS dédiés aux petits écrans

37 Dans un fichier CSS (max-width:640px) { body { width: auto; } } En pratique : body { background-color: black; (max-width:640px) { body { background-color: red; } }

38 RÉSULTAT Fenêtre de largeur supérieure à 640px Moins de 640px

39 MEDIA QUERIES width / height largeur / hauteur de viewport device-width / device-height largeur / hauteur du device orientation : portrait ou landscape etc. 9

40 BOX-SIZING Crédits Crédits :: flickr.com flickr.com jing_dong

41 MA JOLIE BOÎTE div { width: 500px; padding: 0; }

42 MA JOLIE BOÎTE div { width: 500px; padding: 0; } 500px

43 MA JOLIE BOÎTE div { width: 500px; padding: 10px; }

44 MA JOLIE BOÎTE div { width: 500px; padding: 10px; } 520px

45 MA JOLIE BOÎTE div { width: 50%; padding: 1em; border-width: 1px; }

46 MA JOLIE BOÎTE 50%+2em+2px 50%+2em+2px div { width: 50%; padding: 1em; border-width: 1px; }

47 BOX-SIZING! 50% 50% div { width: 50%; padding: 1em; border-width: 1px; box-sizing: border-box; }

48 BOX-SIZING! * { -webkit-box-sizing : border-box; -moz-box-sizing: border-box; box-sizing: border-box; } 8

49 DÉBORDEMENTS Crédits Crédits :: flickr.com flickr.com jing_dong

50 FAUT QUE ÇA RENTRE! ERF :(

51 WORD-WRAP div { word-wrap: break-word; overflow-wrap: break-word; } 6

52 HYPHENS div { -webkit-hyphens -moz-hyphens -ms-hyphens hyphens } : : : : auto; auto; auto; auto; 10

53 ET LES IMAGES? Tiens, c'est tout cassé là!

54 ET LES IMAGES? img { max-width : 100%; height : auto; } /* IE8 uniquement (bugfix) */.ie8 img { width : auto; } Une bordure sur l'image?

55 CETTE FOIS, C'EST PARTI!

56 ANALYSE DE L'EXISTANT

57 ANALYSE DE L'EXISTANT

58 ANALYSE DE L'EXISTANT

59 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!

60 ON FIXE LE NIVEAU DE ZOOM

61 FEUILLE DE STYLES MOBILE Appliquée seulement sur écrans de largeur de fenêtre au maximum de 960 pixels

62 STYLES «RESET»

63 RETOUR À LA NORMALE Pour les éléments problématiques : width : auto height : auto float : none position : static padding : 0 margin : 0 etc.

64 QUELQUES PARTICULARITÉS

65 TIENS, UN BADGE!

66 STYLES SMARTPHONES

67 RE-STYLAGE DU BADGE

68 ADAPTATIONS DIVERSES

69 LA NAVIGATION 2 colonnes + une séparation

70 LA NAVIGATION (BIS)

71 LA NAVIGATION (TER) Tout en douceur...

72 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

73 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»

74 ALLER PLUS LOIN... ERF!

75 ALLER PLUS LOIN

76 BREF : UN BON DÉBUTUFFISANT S N I S I MA Crédits : flickr.com/photos/udono

77 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)

78 MERCI! Raphaël Goetter Crédits :