Tweet
Tweet

Slide 1

Slide 1 text

Web Mobile et CSS Comment adapter un design sur mobile www.alsacreations.com www.goetter.fr www.ie7nomore.com twitter : @goetter Raphaël Goetter Webdesign · standards web · intégration · HTML · CSS · papa · alsacréations · autodidacte · sport · formation · écriture · webmobile · accessibilité · photographie

Slide 2

Slide 2 text

Web Mobile et CSS Comment adapter un design sur mobile Et aussi... Sortie le 17 mars Techniques CSS avancées Positionnement avancé (inline-block, modèle tabulaire, modèle de boîte flexible et autres positionnements CSS3) Gestion de projet (conventions, optimisation des performances, frameworks) HTML5, CSS3 Résolution de bogues Multimédia (web mobile, e-mailing, impression, projection,...)

Slide 3

Slide 3 text

Web Mobile et CSS Comment adapter un design sur mobile Comment adapter (rapidement) un site web sur terminal mobile ?

Slide 4

Slide 4 text

Web Mobile et CSS Comment adapter un design sur mobile Mobinaute ?

Slide 5

Slide 5 text

Web Mobile et CSS Comment adapter un design sur mobile Votre navigateur ?

Slide 6

Slide 6 text

Web Mobile et CSS Comment adapter un design sur mobile Web mobile ?

Slide 7

Slide 7 text

Au programme Do you want to play mobile ? Raphaël Goetter alsacreations.com @goetter Confoo 2011 Des usages, des chiffres et des lettres Vers l’infini et au-delà ! Largeur(s) : tout est une question de taille CSS3 Media Queries à la rescousse Comment adapter pour le Web Mobile ? Un café et l’addition s’il vous plaît

Slide 8

Slide 8 text

Au programme Do you want to play mobile ? Raphaël Goetter alsacreations.com @goetter Confoo 2011 Applications natives Langages Java, Objective-C, C++

Slide 9

Slide 9 text

Au programme Do you want to play mobile ? Raphaël Goetter alsacreations.com @goetter Confoo 2011 Applications natives Langages Java, Objective-C, C++ Sites web dédiés Nouvelle structure HTML, médias optimisés

Slide 10

Slide 10 text

Au programme Do you want to play mobile ? Raphaël Goetter alsacreations.com @goetter Confoo 2011 Applications natives Langages Java, Objective-C, C++ Sites web dédiés Nouvelle structure HTML, médias optimisés Adaptation de design existant Adapter aux mobiles grâce à CSS

Slide 11

Slide 11 text

Quelques statistiques Des usages, des chiffres et des lettres

Slide 12

Slide 12 text

Quelques statistiques Des usages, des chiffres et des lettres Raphaël Goetter alsacreations.com @goetter Confoo 2011 de «mobinautes» en France (contre 13% au Québec, mais en progression de 65% par an) Sources : Médiamétrie + ARCEP + cyberpresse.ca 28%

Slide 13

Slide 13 text

Quelques statistiques Des usages, des chiffres et des lettres Navigateurs mobiles au Canada

Slide 14

Slide 14 text

Quelques statistiques Des usages, des chiffres et des lettres Navigateurs mobiles en Amérique du Nord

Slide 15

Slide 15 text

Quelques statistiques Des usages, des chiffres et des lettres Et dans le monde ?

Slide 16

Slide 16 text

Quelques statistiques Des usages, des chiffres et des lettres Raphaël Goetter alsacreations.com @goetter Confoo 2011 Conclusion : Faire un design pour mobile... Ce n’est pas faire un site pour iPhone !

Slide 17

Slide 17 text

Quelques statistiques Des usages, des chiffres et des lettres Raphaël Goetter alsacreations.com @goetter Confoo 2011 Fréquence de renouvellement des téléphones mobiles Source : Strategies.fr (2007) et Mobifrance.com (2008) 16 mois

Slide 18

Slide 18 text

Quelques statistiques Des usages, des chiffres et des lettres Raphaël Goetter alsacreations.com @goetter Confoo 2011 Fréquence de renouvellement des téléphones mobiles 16 mois Les mobiles vont plus vite, plus haut, plus fort...

Slide 19

Slide 19 text

Vers l'infini et au-delà Les mobiles, à la conquête du monde ?

Slide 20

Slide 20 text

Vers l'infini et au-delà Les mobiles, à la conquête du monde ? Raphaël Goetter alsacreations.com @goetter Confoo 2011 Le jeu des ressemblances... Nokia N8 Nokia C3, C5 etc. Apple iPhone Apple iPad Apple iPod Torch OS6 (récents) HTC Tattoo HTC Desire etc. Galaxy S Wave etc. Palm Pre etc.

Slide 21

Slide 21 text

Vers l'infini et au-delà Les mobiles, à la conquête du monde ? Raphaël Goetter alsacreations.com @goetter Confoo 2011 Le jeu des ressemblances... Nokia N8 Nokia C3, C5 Nokia récents Apple iPhone Apple iPad Apple iPod Torch OS6 (récents) HTC Tattoo HTC Desire etc. Galaxy S Wave etc. Palm Pre etc. WebKit

Slide 22

Slide 22 text

Vers l'infini et au-delà Les mobiles, à la conquête du monde ? Raphaël Goetter alsacreations.com @goetter Confoo 2011 moteurs de rendu très aux normes (Webkit (50%), presto, gecko) un potentiel extraordinaire Sur mobiles : moteurs de rendu hétéroclites (Internet Explorer (50%), webkit, gecko) tenir compte des retardataires Sur écrans de bureau :

Slide 23

Slide 23 text

Vers l'infini et au-delà Les mobiles, à la conquête du monde ? Raphaël Goetter alsacreations.com @goetter Confoo 2011 Positionnement avancé (inline-block, table-layout) CSS 2.1 avancé (:before, :after, sélecteurs, first-child) CSS 3 (border-radius, box-shadow, @font-face, flexible model, transparence, transformations, animations, media-query) HTML 5 (formulaires, géolocalisation, etc.)

Slide 24

Slide 24 text

Vers l'infini et au-delà Les mobiles, à la conquête du monde ? Raphaël Goetter alsacreations.com @goetter Confoo 2011 Conclusion : YAY ! Et passons enfin aux choses sérieuses…

Slide 25

Slide 25 text

Largeur(s) Parce que tout est une question de taille une question de taille ?

Slide 26

Slide 26 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Largeur(s) Et... Si on ne touchait à rien ?

Slide 27

Slide 27 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Largeur(s)

Slide 28

Slide 28 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Largeur(s)

Slide 29

Slide 29 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Largeur(s)

Slide 30

Slide 30 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Largeur(s)

Slide 31

Slide 31 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Largeur(s)

Slide 32

Slide 32 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Largeur(s)

Slide 33

Slide 33 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Largeur(s) Si on ne touchait à rien ? Contenus minuscules Textes illisibles sans zoom Multicolonnes gênantes Dépassement de contenus ou d’images Design inadapté Mauvaise expérience utilisateur

Slide 34

Slide 34 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Largeur(s) Préambule : quelle est la largeur d’un terminal mobile ?

Slide 35

Slide 35 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Un écran, plusieurs largeurs : 1- screen width 2- device-width 3- viewport Largeur(s)

Slide 36

Slide 36 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Un écran, plusieurs largeurs : 1- screen width Largeur(s) « Largeur physique réelle de l’écran d’un terminal mobile »

Slide 37

Slide 37 text

Parce que tout est une question de taille HTC Tattoo, HTC Legend : 240px Iphone 3 : 320px BlackBerry Torch : 360px Samsung Galaxy S, HTC HD7 : 480px Iphone 4 : 640px Ipad : 768px Raphaël Goetter alsacreations.com @goetter Confoo 2011 Un écran, plusieurs largeurs : 1- screen width Largeur(s)

Slide 38

Slide 38 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Un écran, plusieurs largeurs : 2- device-width Largeur(s) « Largeur déclarée par un terminal mobile »

Slide 39

Slide 39 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Un écran, plusieurs largeurs : 2- device-width Iphone 3 : 320px Iphone 4 : 320px ! Ipad : 768px Largeur(s)

Slide 40

Slide 40 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Un écran, plusieurs largeurs : 3- Viewport Largeur(s) « Surface virtuelle qu’un mobile accepte d’afficher par défaut à l’écran »

Slide 41

Slide 41 text

Parce que tout est une question de taille Android : 800px Opera : 850px Safari : 980px IEMobile : 1024px Raphaël Goetter alsacreations.com @goetter Confoo 2011 Un écran, plusieurs largeurs : 3- Viewport Largeur(s)

Slide 42

Slide 42 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Tableau récapitulatif (Apple) : Terminal Screen Width Device-width Viewport Iphone 3 (portrait) 320px 320px 980px Iphone 4 (portrait) 640px 320px 980px Iphone 4 (paysage) 960px 480px 980px Ipad (portrait) 768px 768px 980px Largeur(s)

Slide 43

Slide 43 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Conclusion : Faire un design pour mobile... Ce n’est pas fixer sa largeur à 320px ! Largeur(s)

Slide 44

Slide 44 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 La solution ? Jouer avec le levier « viewport » Largeur(s)

Slide 45

Slide 45 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Largeur(s) Viewport à l’appréciation du mobile

Slide 46

Slide 46 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Forcer la largeur du Viewport à 320px Largeur(s)

Slide 47

Slide 47 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 La balise HTML Meta « Viewport » Définir la largeur du Viewport en pixels Largeur(s)

Slide 48

Slide 48 text

Parce que tout est une question de taille La balise HTML Meta « Viewport » width=480 width=320 width=980 Largeur(s)

Slide 49

Slide 49 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 La balise HTML Meta « Viewport » Adapter le viewport à la largeur du terminal Largeur(s)

Slide 50

Slide 50 text

Parce que tout est une question de taille La balise HTML Meta « Viewport » Adapter le viewport à la largeur du terminal Bingo ! Largeur(s)

Slide 51

Slide 51 text

Parce que tout est une question de taille Hey, mais ça déborde ! 320px c’est tout cassé, là ... width=device-width Largeur(s) img 640px

Slide 52

Slide 52 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Conclusion : Définir un viewport commun n’est qu’une (bonne) première étape Largeur(s)

Slide 53

Slide 53 text

Parce que tout est une question de taille Raphaël Goetter alsacreations.com @goetter Confoo 2011 Conclusion : Définir un viewport commun n’est qu’une (bonne) première étape Largeur(s) C’est là qu’interviennent les Media Queries

Slide 54

Slide 54 text

Media Queries à la rescousse Alerte à Malibu dans votre smartphone Daniel Glazman

Slide 55

Slide 55 text

Media Queries à la rescousse Alerte à Malibu dans votre smartphone Raphaël Goetter alsacreations.com @goetter Confoo 2011 Les médias habituels Screen : écran Print : imprimante Handheld : périphériques mobiles Speech, Braille : synthèses vocales, plages Projection : projecteurs (slides) TV : téléviseur All : tous les médias à la fois

Slide 56

Slide 56 text

Media Queries à la rescousse Alerte à Malibu dans votre smartphone Raphaël Goetter alsacreations.com @goetter Confoo 2011 Dans le contexte : @media print { body { width: 21cm; } } @media handheld { body { width: auto; } }

Slide 57

Slide 57 text

Media Queries à la rescousse Alerte à Malibu dans votre smartphone Raphaël Goetter alsacreations.com @goetter Confoo 2011 Syntaxe CSS Media Query @media (screen and max-width:640px) { body { width: auto; } } Au sein d'une feuille de style :

Slide 58

Slide 58 text

Media Queries à la rescousse Alerte à Malibu dans votre smartphone Raphaël Goetter alsacreations.com @goetter Confoo 2011 Exemple de Media Query Appel depuis la page HTML :

Slide 59

Slide 59 text

Media Queries à la rescousse Alerte à Malibu dans votre smartphone Raphaël Goetter alsacreations.com @goetter Confoo 2011 Media Query en action ! Écran de largeur supérieure à 640px Moins de 640px

Slide 60

Slide 60 text

Media Queries à la rescousse Alerte à Malibu dans votre smartphone Raphaël Goetter alsacreations.com @goetter Confoo 2011 Cibler un écran de moins de 640px en paysage ? Facile ! @media screen and (max-width:640px) and (orientation:landscape) { body { width: auto; } }

Slide 61

Slide 61 text

Media Queries à la rescousse Alerte à Malibu dans votre smartphone Raphaël Goetter alsacreations.com @goetter Confoo 2011 En pratique : passer de flottants à mono-colonne #nav #content #nav #content

Slide 62

Slide 62 text

Media Queries à la rescousse Alerte à Malibu dans votre smartphone Raphaël Goetter alsacreations.com @goetter Confoo 2011 En pratique : passer de flottants à mono-colonne #nav { float: left; width: 200px;} #content { float: left; width: 760px; } @media (max-width:640px) { #nav, #content { float: none; width: auto;} } Feuille de style CSS unique

Slide 63

Slide 63 text

Media Queries à la rescousse Alerte à Malibu dans votre smartphone Raphaël Goetter alsacreations.com @goetter Confoo 2011 Et la compatibilité navigateurs de bureau ? ✔ Mozilla Firefox : 3.5+ ✔ Internet Explorer : 9+ ✔ Google Chrome : 5+ ✔ Opera : 10.5+ ✔ Apple Safari : 4+ Mais où sont cachés IE6, IE7 et IE8 ?

Slide 64

Slide 64 text

Media Queries à la rescousse Alerte à Malibu dans votre smartphone Mobile Moteur Navigateur Media Queries Iphone, iPad, iPod, Blackberry récents Webkit Safari Mobile OUI Nexus, certains HTC / Motorola / Nokia / SonyEricsson, Samsung Galaxy et Wave, Palm Webkit Chrome Mobile OUI Multiplateformes Presto Opera OUI Anciens Blackberry Mango Blackberry NON LG, Anciens HTC, anciens Samsung Trident (Windows / Bada) IE Mobile (IE7) NON HTC, Samsung, nouveaux Nokia Trident (Windows Phone 7) IE Mobile (IE7/IE9) NON / OUI Raphaël Goetter alsacreations.com @goetter Confoo 2011

Slide 65

Slide 65 text

Media Queries à la rescousse Alerte à Malibu dans votre smartphone Le truc en plus pour IE Mobile Styles pour tous Styles pour mobiles Commentaire conditionnel pour IE mobile

Slide 66

Slide 66 text

Adapter pour le mobile Les bonnes recettes de grand-mère

Slide 67

Slide 67 text

Adapter pour le mobile Les bonnes recettes de grand-mère Raphaël Goetter alsacreations.com @goetter Confoo 2011 Bonne pratique n°1 : Meta Viewport automatique

Slide 68

Slide 68 text

Adapter pour le mobile Les bonnes recettes de grand-mère Raphaël Goetter alsacreations.com @goetter Confoo 2011 Bonne pratique n°1 : Meta Viewport automatique

Slide 69

Slide 69 text

Adapter pour le mobile Les bonnes recettes de grand-mère Raphaël Goetter alsacreations.com @goetter Confoo 2011 Bonne pratique n°2 : Dimensions fluides

Slide 70

Slide 70 text

Adapter pour le mobile Les bonnes recettes de grand-mère Raphaël Goetter alsacreations.com @goetter Confoo 2011 Bonne pratique n°2 : Dimensions fluides Pas de blocs avec width supérieur au device-width Attention à min-width, margin et padding Attention aux dimensions de images HTML

Slide 71

Slide 71 text

Adapter pour le mobile Les bonnes recettes de grand-mère Raphaël Goetter alsacreations.com @goetter Confoo 2011 Bonne pratique n°3 : Une seule colonne !

Slide 72

Slide 72 text

Adapter pour le mobile Les bonnes recettes de grand-mère Raphaël Goetter alsacreations.com @goetter Confoo 2011 Bonne pratique n°3 : Une seule colonne ! Remettre les éléments dans le flux (float: none, position: static) Préférer les empilements verticaux aux colonnes

Slide 73

Slide 73 text

Adapter pour le mobile Les bonnes recettes de grand-mère Raphaël Goetter alsacreations.com @goetter Confoo 2011 Bonne pratique n°4 : Gérez les débordements

Slide 74

Slide 74 text

Adapter pour le mobile Les bonnes recettes de grand-mère Raphaël Goetter alsacreations.com @goetter Confoo 2011 Bonne pratique n°4 : Gérez les débordements max-width: 100% sur img, table, td, blockquote, object, embed, video, input, textarea word-wrap:break-word sur blocs de contenus white-space: pre-wrap sur code, pre, samp

Slide 75

Slide 75 text

Adapter pour le mobile Les bonnes recettes de grand-mère Raphaël Goetter alsacreations.com @goetter Confoo 2011 Bonne pratique n°5 : Supprimez le superflu

Slide 76

Slide 76 text

Adapter pour le mobile Les bonnes recettes de grand-mère Raphaël Goetter alsacreations.com @goetter Confoo 2011 Bonne pratique n°5 : Supprimez le superflu body { background: url(caribou.jpg); } #pub { background: url(sirop_erable.jpg); } @media screen and (max-width:640px) { body { background: none; } #pub { display: none; } }

Slide 77

Slide 77 text

Adapter pour le mobile Les bonnes recettes de grand-mère Raphaël Goetter alsacreations.com @goetter Confoo 2011 Bonne pratique n°6 : Adaptez les tailles de polices

Slide 78

Slide 78 text

Adapter pour le mobile Les bonnes recettes de grand-mère Raphaël Goetter alsacreations.com @goetter Confoo 2011 Bonne pratique n°6 : Adaptez les tailles de polices @media screen and (max-width:640px) and (orientation:landscape) { body { -webkit-text-size-adjust: 80% } }

Slide 79

Slide 79 text

Adapter pour le mobile Les bonnes recettes de grand-mère Raphaël Goetter alsacreations.com @goetter Confoo 2011 Bonne pratique n°7 : Un zeste de HTML5

Slide 80

Slide 80 text

Adapter pour le mobile Les bonnes recettes de grand-mère Raphaël Goetter alsacreations.com @goetter Confoo 2011 Bonne pratique n°7 : Un zeste de HTML5 ...

Slide 81

Slide 81 text

Adapter pour le mobile Les bonnes recettes de grand-mère Raphaël Goetter alsacreations.com @goetter Confoo 2011 Bonne pratique n°8 : Optimiser la navigation

Slide 82

Slide 82 text

Adapter pour le mobile Les bonnes recettes de grand-mère Raphaël Goetter alsacreations.com @goetter Confoo 2011 Bonne pratique n°8 : Optimiser la navigation #competences nav a { display: block; padding: 6px 18px; width: 92%; ... }

Slide 83

Slide 83 text

Adapter pour le mobile Les bonnes recettes de grand-mère Un exemple concret : alsacreations.fr

Slide 84

Slide 84 text

Un café et l’addition Ressources et crédits Ressources Raphaël Goetter alsacreations.com @goetter Confoo 2011 Galerie de sites utilisant media queries : www.mediaqueri.es

Slide 85

Slide 85 text

Un café et l’addition Ressources et crédits Ressources Raphaël Goetter alsacreations.com @goetter Confoo 2011 Base de données smartphones : www.deviceatlas.com Validateur W3C Mobile : http://validator.w3.org/mobile/ Media queries JS pour IE : https://github.com/scottjehl/Respond

Slide 86

Slide 86 text

Un café et l’addition Ressources et crédits Raphaël Goetter alsacreations.com @goetter Confoo 2011 Crédits Photos, illustrations : www.fotolia.fr Police : Fontin Sans Rg Icones et pictos : WPZOOM Developer Icon

Slide 87

Slide 87 text

Merci ! Raphaël Goetter alsacreations.com @goetter Tous droits réservés