un site web responsive en une heure

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