SlideShare une entreprise Scribd logo
Lyon, 27/06/2013
Responsive web design
enjeux et stratégies
Mehdi Kabab
Expert Front-end / Développeur web
mkabab@clever-age.com
@piouPiouM
Lyon, 27/06/2013Responsive web design @ Be clever meetings
1. Définitions
2. État du marché
3. Les enjeux du RWD
4. De nouvelles contraintes
5. Stratégies d'adaptation
Sommaire
2
Définitions
Lyon, 27/06/2013Responsive web design @ Be clever meetings
3
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Les feature phones
4
§ Media « handheld » (depuis 1998)
§ Incapables d’afficher un site desktop
§ iMode
§ WML
§ WAP
§ etc…
§ Cibles du moteur de recherche
m.google.com
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Les smartphones
5
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Définition
Responsive Web Design
6
§ Design réactif qui change en fonction de la taille de
l’écran
§ expérience de consultation optimale
§ facilite la lecture et la navigation
Lyon, 27/06/2013Responsive web design @ Be clever meetings
elysee.fr, du desktop au mobile
Responsive Web Design
§ Design réactif qui change en fonction de la taille de
l’écran
§ expérience de consultation optimale
§ facilite la lecture et la navigation
7
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Définition
Responsive Web Design
§ Design réactif qui change en fonction de la taille de
l’écran
§ expérience de consultation optimale
§ facilite la lecture et la navigation
§ Concepts principaux
§ @media queries
§ mise en place de grilles fluides à l’aide d’unités relatives
§ définition de « points de rupture » (breakpoints)
§ des images flexibles
§ aucune intervention sur le DOM
§ partiellement vrai suivant le contexte projet
8
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Une parenthèse
Adaptive Web Design
§ Amélioration progressive
§ détection des capacités du
matériel
§ Ergonomie réactive
§ modification des paradigmes
d’usage
§ Performance
§ chargement asynchrone des
données
9
RESPONSIVE
ADAPTIVE
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Un rappel
Ceci n’est pas la finalité du RWD
§ Sur mobile ou tablette, nous ne redimensionnons pas
la fenêtre du navigateur
10
http://www.enssib.fr/
État du marché
Lyon, 27/06/2013Responsive web design @ Be clever meetings
11
Lyon, 27/06/2013Responsive web design @ Be clever meetings
En France
Taux de pénétration des smartphones
12
18 à 29
30 à 49
50 et +
Tous
0 25 50 75 100
38%
19%
44%
70%
%
Âge
Source : http://www.ourmobileplanet.com/ (chiffres de 2012)
Lyon, 27/06/2013Responsive web design @ Be clever meetings
De nouveaux usages
Lieux d’utilisation du smartphone
13
France
0 25 50 75 100
3%
28%
63%
42%
44%
45%
62%
65%
76%
76%
79%
98%
%
Source : http://www.ourmobileplanet.com/ (chiffres de 2012)
Domicile Travail
En déplacement Dans un magasin
Restaurant Café ou salon de thé
Cabinet médical Aéroport
À une réunion entre amis Transports publiques
École Ailleurs
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Les principaux systèmes
Acteurs du marché
14
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Répartition des acteurs du marché
15
France
0 25 50 75 100
4%
42%
12%
25%
%
Pays
Source : http://www.ourmobileplanet.com/ (chiffres de 2012)
Android BlackBerry OS
iOS Microsoft Windows Mobile
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Différente selon le pays
Répartition des acteurs du marché
16
France
États-Unis
0 25 50 75 100
5%
4%
32%
42%
11%
12%
40%
25%
%
Pays
Source : http://www.ourmobileplanet.com/ (chiffres de 2012)
Android BlackBerry OS
iOS Microsoft Windows Mobile
Lyon, 27/06/2013Responsive web design @ Be clever meetings
De nombreux navigateurs
§ Safari
§ Android Webkit
§ Google Chrome
§ Dolphin
§ BlackBerry Webkit
§ Opera Mobile
§ Opera Mini
§ Firefox Mobile
§ Internet Explorer
§ Etc.
17
Les enjeux du RWD
Lyon, 27/06/2013Responsive web design @ Be clever meetings
18
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Les avantages
Créer une application mobile
19
§ Se télécharge et s’installe
§ App Store
§ Android market
§ Windows Phone Store
§ BlackBerry World
§ Usage avancé des fonctionnalités de l’appareil
§ photo
§ gyroscope
§ stockage
§ Possibilité d’être mis en avant
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Les inconvénients
Créer une application mobile
§ Développements spécifiques par plateforme
§ Ciblé à un type d’appareil
§ smartphone
§ tablette
§ Licence de développement
§ Coût de mise en ligne
§ Mise à jour pour chaque OS et par type d’appareil
§ Dépendant des caprices des éditeurs des plateformes
§ Apple et ses iOS
§ Contenus non indexables par un moteur de recherche
20
Lyon, 27/06/2013Responsive web design @ Be clever meetings
21
http://bradfrostweb.com/blog/post/this-is-the-web/
Lyon, 27/06/2013Responsive web design @ Be clever meetings
22
http://bradfrostweb.com/blog/post/this-is-the-web/
Lyon, 27/06/2013Responsive web design @ Be clever meetings
23
Une application
par périphérique ?
NO WAY!
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Avantages
Site mobile dédié
24
§ Cibler les smartphones
§ PHP Mobile Detect
http://mobiledetect.net/
§ sponsorisé par BrowserStack
§ Possibilité de modifier le
parcours du client
§ Modifier son vecteur de
communication
§ Ignorer les tablettes
§ frustration de l’utilisateur
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Inconvénients
Site mobile dédié
25
§ Solution de détection non fiable à 100%
§ Double développements
§ Suivant la solution CMS, la mise en œuvre peut être
difficile
§ Prévoir la bascule vers la version desktop
§ gestion des URLs
§ Attention aux contenus !
§ styles en lignes
§ double contribution ?
Lyon, 27/06/2013Responsive web design @ Be clever meetings
26
Et si nous
devenions flexibles ?
RWD
Lyon, 27/06/2013Responsive web design @ Be clever meetings
27
Lyon, 27/06/2013Responsive web design @ Be clever meetings
28
http://mediaqueri.es/
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Bénéfices du RWD
29
§ Compatibilité infinie (ou presque, on parle de Web ;-)
§ être future friendly
§ URL uniques
§ partage sans préjuger de la plateforme de notre interlocuteur
§ SEO friendly
§ Design basé sur le contenu
§ Côté client : rapproche les expériences
§ look and feel identique
§ Côté back-office : simplifie les développements
§ Moindre coût
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Stratégie de décision
30
§ RWD si
§ usages similaires
§ maitrise du contenu
§ Développements distincts si
§ besoin spécifique
§ chemin de l’utilisateur différent
§ vecteur de communication différent (boutiques vs société)
§ servir deux contenus différents
Règle générale
Lyon, 27/06/2013Responsive web design @ Be clever meetings
31
Mobile First
Desktop First
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Mobile First RWD
32
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Une porte ouverte à l’Adaptive Web Design
Mobile First RWD
§ Force à se concentrer sur l’essentiel
§ contenu
§ fonctionnalités de base
§ Introduction rapide des nouvelles technologies
§ géolocalisation
§ évènements touch
§ Améliore les performances du site
§ moins de HTML
§ moins de ressources chargées
§ Enrichissement progressif
33
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Enrichissement progressif
§ Détecter les capacités du
navigateur côté client
§ Si le navigateur est évolué et en
fonction du viewport :
§ transformation de liens d’accès à des
ressources en composants intégrés
§ remplacement dynamique d’images
§ chargement de librairies JavaScript
34
Source : http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
De nouvelles contraintes
Lyon, 27/06/2013Responsive web design @ Be clever meetings
35
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Des contraintes à ne pas négliger
36
1. Les enjeux du design
2. Une qualité irréprochable
3. La problématique des images
Lyon, 27/06/2013Responsive web design @ Be clever meetings
37
Les enjeux du design
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Designer une grille réactive
38
§ Comprendre les besoins de l’utilisateur en amont
§ Définir une grille fluide
§ Une mise en page flexible
Bureau Mobile
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Les bonnes questions à se poser
39
§ iPhone5 ou Nexus 4 ou Galaxy S4 ?
§ aucun !
§ pas assez représentatifs, le marché évolue trop vite
§ Combien de colonnes doit comporter le design ?
§ 1 pour les smartphones, 2 pour les tablettes, plus pour le desktop
§ mais c’est le contexte projet qui sera finalement déterminant
§ Quelles tailles pour les colonnes ?
§ dépendant du contenu (images, vidéos, textes)
§ sous-colonnes ?
§ 60 à 80 caractères par ligne pour être agréable à lire
Choisir ses points de rupture
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Une dextérité approximative
Une expérience utilisateur différente
§ Navigation au doigt sur les
mobiles
§ visée moins précise qu’une souris
§ les zones d’interaction doivent être
agrandies (au moins 44px)
40
Source : http://www.lukew.com/ff/entry.asp?1649
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Navigation au doigt
41
49%
36%
72% 28%
15%
90% 10%
http://uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
33% 67%
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Une expérience utilisateur différente
§ Pas de survol sur les
mobiles
§ ne pas cacher de contenu
pour l’afficher au survol
§ les navigations doivent être
repensées
§ Pas de flash
§ Éviter les modales et
autres pop-up
§ la plaie du web mobile
§ pensées pour le desktop
42
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Une expérience utilisateur différente
§ Accès à l’information
§ Repenser la page en terme de hiérarchie
§ Améliorer la lisibilité des textes
§ Espace disponible réduit
§ Privilégier le contenu et non le branding
§ Rendre certains éléments accessibles depuis une URL
43
Lyon, 27/06/2013Responsive web design @ Be clever meetings
44
Une qualité
irréprochable
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Nécessite plus de rigueur
45
§ L’intégrateur, un expert indispensable
§ interlocuteur qui possèdent l’expertise
§ connaissances supplémentaires que peu de développeurs
possèdent
§ Se conformer au catalogue de composants graphiques
§ stop au bricolage de fortune
§ ne pas importer un composant où il n’est pas prévu :
comportement aléatoire
§ Respecter les consignes d’écrit web en place
§ respect de la titraille
§ proscrire les styles CSS en ligne
Lyon, 27/06/2013Responsive web design @ Be clever meetings
46
La problématique
des images
© Apple
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Problème rencontré
Images responsives
§ Pourquoi faire charger à un mobile des images
destinées au desktop ?
§ contrainte de poids
§ contrainte de vitesse
§ contrainte de performance du matériel
§ contrainte de consommation de la batterie
47
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Deux choix de contribution
Images responsives
48
§ Une image de grande
résolution
§ affichée dans le navigateur et
réduite visuellement si
nécessaire
§ contribution simplifiée
§ temps de chargement
augmenté
§ consommation processeur
§ En attendant une vraie solution
§ http://adaptive-images.com/
§ http://responsiveimages.org/demos/
§ Plusieurs images
§ le navigateur charge
dynamiquement l’image la
plus adaptée
§ contribution plus lourde
§ expérience utilisateur grandie
vs
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Des problèmes à la pelle
Le cas Retina
49
§ Concerne toutes les solutions mobiles
§ 4 fois plus de pixels affichés sur une même zone
§ images à contribuer 4 fois plus grandes
§ images plus lourdes
Source : http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Images normales sur écran Retina
50
§ Des images floues sur les écrans haute définition
Source : http://www.noupe.com/design/the-mobile-web-css-image-replacement-for-retina-display-devices.html
Stratégies d’adaptation
Lyon, 27/06/2013Responsive web design @ Be clever meetings
51
Lyon, 27/06/2013Responsive web design @ Be clever meetings
52
#1 Navigation responsive,
tour d’horizon des solutions
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Toggle navigation
53
§ Cacher la navigation sous un lien de menu
§ menu révélé puis masqué au clic
§ pousse le contenu vers le bas
§ Exemples :
§ http://www.starbucks.com/
§ http://m.bbc.co.uk/news
§ http://www.smashingmagazine.com/
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Toggle navigation
54
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Navigation Off-canvas
§ Cacher la navigation sous un lien
de menu
§ menu révélé puis masqué au clic
§ le menu apparaît depuis l’extérieur de la
page
§ comportement similaire aux applications
natives (Facebook)
§ Exemples :
§ http://www.kaemingk.com/fr/
§ http://mashable.com/
55
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Footer Anchor
§ Un lien qui renvoie au menu affiché en bas de page
§ Exemple :
§ http://grillroyal.com/
56
Lyon, 27/06/2013Responsive web design @ Be clever meetings
57
#2 Afficher des cartes
Google Maps
© Google
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Le problème des cartes dans un contexte mobile
Adaptation des cartes Google Maps
§ Contenu iframe
§ difficile à rendre fluide
§ cache misère à la pérennité incertaine
§ Réduction de la zone d’affichage
§ perte de la zone de focus
§ une expérience utilisateur amoindrie
§ Poids à charger non négligeable
§ temps de chargement plus longs
58
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Solution
Adaptation des cartes Google Maps
§ Recourir à l’API de cartes statiques pour les mobiles
§ https://developers.google.com/maps/documentation/imageapis/
§ chargement d’une image
§ ajouter un lien pour afficher la carte dans la solution du fournisseur
de contenu.
§ Démo :
§ http://codepen.io/piouPiouM/full/wyFfs
59
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Solution
Adaptation des cartes Google Maps
§ « Mais, mais l’internaute quittera le site ! »
§ Il le quittera de toute manière pour arriver à utiliser la carte.
§ Mais il le quittera sans aucune frustration !
§ Il est préférable de donner une solution alternative utilisable que
de forcer le client à exploiter un composant non adapté.
60
Lyon, 27/06/2013Responsive web design @ Be clever meetings
Crédits
61
Martin Fisch
http://www.flickr.com/photos/marfis75/5374308475/
Horia Varlan
http://www.flickr.com/photos/horiavarlan/4514164700/
kaybee07
http://www.flickr.com/photos/lyza/7382235106/
Sheila Sund
http://www.flickr.com/photos/sheila_sund/8371975708/
Nicolas Janik
http://www.flickr.com/photos/n1colas/2598073727/
Stéphanie Walter
http://commons.wikimedia.org/wiki/
File:Content_is_like_water.png
GBPublic_PR
http://www.flickr.com/photos/gbpublic/8488281915/
Lyzadanger
http://www.flickr.com/photos/lyza/7382235106/
fdecomite
http://www.flickr.com/photos/fdecomite/6767395283/
Phil Campbell
http://www.flickr.com/photos/clanlife/6369792721/
Mark Lyken
http://www.flickr.com/photos/lykenlove/5927193171/
Davidlohr Bueso
http://www.flickr.com/photos/daverugby83/5842180515/

Contenu connexe

Tendances

Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by Vanksen
Vanksen
 
Réussir son projet mobile (Livre blanc)
Réussir son projet mobile (Livre blanc)Réussir son projet mobile (Livre blanc)
Réussir son projet mobile (Livre blanc)
Olivier Robé
 
Information google apps
Information google appsInformation google apps
Information google apps
inovallee
 
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
Chambé-Carnet
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
USERADGENTS
 
HTML 5, applications natives ou hybrides : comment choisir ?
HTML 5, applications natives ou hybrides :  comment choisir ?HTML 5, applications natives ou hybrides :  comment choisir ?
HTML 5, applications natives ou hybrides : comment choisir ?
Philippe Dumont
 
Tendances Web Design 2015
Tendances Web Design 2015Tendances Web Design 2015
Tendances Web Design 2015
Philippe Rondepierre
 
Site Internet, les tendances en 2014
Site Internet, les tendances en 2014Site Internet, les tendances en 2014
Site Internet, les tendances en 2014
Vincent Pereira
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
Raphaël Goetter
 
Developpement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache CordovaDeveloppement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache Cordova
Microsoft
 
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
altima°
 
Viniacom - Les bonnes raisons de passer au mobile.
Viniacom - Les bonnes raisons de passer au mobile.Viniacom - Les bonnes raisons de passer au mobile.
Viniacom - Les bonnes raisons de passer au mobile.
Viniacom
 
Les bases du responsive design
Les bases du responsive designLes bases du responsive design
Les bases du responsive design
Voyelle Voyelle
 

Tendances (13)

Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by Vanksen
 
Réussir son projet mobile (Livre blanc)
Réussir son projet mobile (Livre blanc)Réussir son projet mobile (Livre blanc)
Réussir son projet mobile (Livre blanc)
 
Information google apps
Information google appsInformation google apps
Information google apps
 
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
 
HTML 5, applications natives ou hybrides : comment choisir ?
HTML 5, applications natives ou hybrides :  comment choisir ?HTML 5, applications natives ou hybrides :  comment choisir ?
HTML 5, applications natives ou hybrides : comment choisir ?
 
Tendances Web Design 2015
Tendances Web Design 2015Tendances Web Design 2015
Tendances Web Design 2015
 
Site Internet, les tendances en 2014
Site Internet, les tendances en 2014Site Internet, les tendances en 2014
Site Internet, les tendances en 2014
 
Un site web responsive en une heure
Un site web responsive en une heureUn site web responsive en une heure
Un site web responsive en une heure
 
Developpement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache CordovaDeveloppement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache Cordova
 
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
 
Viniacom - Les bonnes raisons de passer au mobile.
Viniacom - Les bonnes raisons de passer au mobile.Viniacom - Les bonnes raisons de passer au mobile.
Viniacom - Les bonnes raisons de passer au mobile.
 
Les bases du responsive design
Les bases du responsive designLes bases du responsive design
Les bases du responsive design
 

Similaire à Responsive web design, enjeux et stratégies

Bien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignBien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web Design
Greg Hoin
 
Mobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileMobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobile
WSI France
 
Présentation Responsive Webdesign
Présentation Responsive WebdesignPrésentation Responsive Webdesign
Présentation Responsive Webdesign
Willy Bahuaud
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
NiceToMeetYou
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
defimedia
 
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Idean France
 
L'index de Google devient "Mobile First" : comment vous y préparer ? - Petit ...
L'index de Google devient "Mobile First" : comment vous y préparer ? - Petit ...L'index de Google devient "Mobile First" : comment vous y préparer ? - Petit ...
L'index de Google devient "Mobile First" : comment vous y préparer ? - Petit ...
Peak Ace
 
14 raisons qui font que le responsive design n'est pas la meilleure option
14 raisons qui font que le responsive design n'est pas la meilleure option14 raisons qui font que le responsive design n'est pas la meilleure option
14 raisons qui font que le responsive design n'est pas la meilleure option
Romain Danel
 
Conférence SEO mobile – mobile first - 10 ans CyberCité Nantes
Conférence SEO mobile –  mobile first - 10 ans  CyberCité NantesConférence SEO mobile –  mobile first - 10 ans  CyberCité Nantes
Conférence SEO mobile – mobile first - 10 ans CyberCité Nantes
CyberCité
 
2018 le seo à l heure du mobile first index
2018 le seo à l heure du mobile first index2018 le seo à l heure du mobile first index
2018 le seo à l heure du mobile first index
Philippe YONNET
 
Grand Est Numérique - 14 septembre - Le SEO à l'heure du Mobile First - Phili...
Grand Est Numérique - 14 septembre - Le SEO à l'heure du Mobile First - Phili...Grand Est Numérique - 14 septembre - Le SEO à l'heure du Mobile First - Phili...
Grand Est Numérique - 14 septembre - Le SEO à l'heure du Mobile First - Phili...
Peak Ace
 
Mobile first index et speed update - Petit déjeuner Bordeaux - Julie Vidalin
Mobile first index et speed update - Petit déjeuner Bordeaux - Julie VidalinMobile first index et speed update - Petit déjeuner Bordeaux - Julie Vidalin
Mobile first index et speed update - Petit déjeuner Bordeaux - Julie Vidalin
Peak Ace
 
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxRéunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
Club des Community Managers de Lyon
 
20100205 Rss Lunch 5 Sqli Agency
20100205 Rss Lunch 5 Sqli Agency20100205 Rss Lunch 5 Sqli Agency
20100205 Rss Lunch 5 Sqli Agency
Wax Interactive
 
Dans la jungle des sites mobiles - comment les rendre (vraiment) SEO-friendly ?
Dans la jungle des sites mobiles  - comment les rendre (vraiment) SEO-friendly ?Dans la jungle des sites mobiles  - comment les rendre (vraiment) SEO-friendly ?
Dans la jungle des sites mobiles - comment les rendre (vraiment) SEO-friendly ?
Aymeric Bouillat
 
Conférence au salon E-marketing | En 2016, Google et le référencement sont ...
Conférence au salon E-marketing  |  En 2016, Google et le référencement sont ...Conférence au salon E-marketing  |  En 2016, Google et le référencement sont ...
Conférence au salon E-marketing | En 2016, Google et le référencement sont ...
Peak Ace
 
Comment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de GoogleComment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de Google
Kseo Conseil
 
Développement mobile hybride ou natif : quid du ROI ?
Développement mobile hybride ou natif : quid du ROI ?Développement mobile hybride ou natif : quid du ROI ?
Développement mobile hybride ou natif : quid du ROI ?
in-Tact
 
Le SEO à l'heure du Mobile - SEO Camp'Us Lille - Décembre 2013
Le SEO à l'heure du Mobile - SEO Camp'Us Lille - Décembre 2013Le SEO à l'heure du Mobile - SEO Camp'Us Lille - Décembre 2013
Le SEO à l'heure du Mobile - SEO Camp'Us Lille - Décembre 2013
François BONTEMPS
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012
MBA Multimedia
 

Similaire à Responsive web design, enjeux et stratégies (20)

Bien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignBien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web Design
 
Mobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileMobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobile
 
Présentation Responsive Webdesign
Présentation Responsive WebdesignPrésentation Responsive Webdesign
Présentation Responsive Webdesign
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
 
Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...Responsive Web Design : best practices et retour d'expérience de Backelite et...
Responsive Web Design : best practices et retour d'expérience de Backelite et...
 
L'index de Google devient "Mobile First" : comment vous y préparer ? - Petit ...
L'index de Google devient "Mobile First" : comment vous y préparer ? - Petit ...L'index de Google devient "Mobile First" : comment vous y préparer ? - Petit ...
L'index de Google devient "Mobile First" : comment vous y préparer ? - Petit ...
 
14 raisons qui font que le responsive design n'est pas la meilleure option
14 raisons qui font que le responsive design n'est pas la meilleure option14 raisons qui font que le responsive design n'est pas la meilleure option
14 raisons qui font que le responsive design n'est pas la meilleure option
 
Conférence SEO mobile – mobile first - 10 ans CyberCité Nantes
Conférence SEO mobile –  mobile first - 10 ans  CyberCité NantesConférence SEO mobile –  mobile first - 10 ans  CyberCité Nantes
Conférence SEO mobile – mobile first - 10 ans CyberCité Nantes
 
2018 le seo à l heure du mobile first index
2018 le seo à l heure du mobile first index2018 le seo à l heure du mobile first index
2018 le seo à l heure du mobile first index
 
Grand Est Numérique - 14 septembre - Le SEO à l'heure du Mobile First - Phili...
Grand Est Numérique - 14 septembre - Le SEO à l'heure du Mobile First - Phili...Grand Est Numérique - 14 septembre - Le SEO à l'heure du Mobile First - Phili...
Grand Est Numérique - 14 septembre - Le SEO à l'heure du Mobile First - Phili...
 
Mobile first index et speed update - Petit déjeuner Bordeaux - Julie Vidalin
Mobile first index et speed update - Petit déjeuner Bordeaux - Julie VidalinMobile first index et speed update - Petit déjeuner Bordeaux - Julie Vidalin
Mobile first index et speed update - Petit déjeuner Bordeaux - Julie Vidalin
 
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxRéunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
 
20100205 Rss Lunch 5 Sqli Agency
20100205 Rss Lunch 5 Sqli Agency20100205 Rss Lunch 5 Sqli Agency
20100205 Rss Lunch 5 Sqli Agency
 
Dans la jungle des sites mobiles - comment les rendre (vraiment) SEO-friendly ?
Dans la jungle des sites mobiles  - comment les rendre (vraiment) SEO-friendly ?Dans la jungle des sites mobiles  - comment les rendre (vraiment) SEO-friendly ?
Dans la jungle des sites mobiles - comment les rendre (vraiment) SEO-friendly ?
 
Conférence au salon E-marketing | En 2016, Google et le référencement sont ...
Conférence au salon E-marketing  |  En 2016, Google et le référencement sont ...Conférence au salon E-marketing  |  En 2016, Google et le référencement sont ...
Conférence au salon E-marketing | En 2016, Google et le référencement sont ...
 
Comment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de GoogleComment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de Google
 
Développement mobile hybride ou natif : quid du ROI ?
Développement mobile hybride ou natif : quid du ROI ?Développement mobile hybride ou natif : quid du ROI ?
Développement mobile hybride ou natif : quid du ROI ?
 
Le SEO à l'heure du Mobile - SEO Camp'Us Lille - Décembre 2013
Le SEO à l'heure du Mobile - SEO Camp'Us Lille - Décembre 2013Le SEO à l'heure du Mobile - SEO Camp'Us Lille - Décembre 2013
Le SEO à l'heure du Mobile - SEO Camp'Us Lille - Décembre 2013
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012
 

Responsive web design, enjeux et stratégies

  • 1. Lyon, 27/06/2013 Responsive web design enjeux et stratégies Mehdi Kabab Expert Front-end / Développeur web mkabab@clever-age.com @piouPiouM
  • 2. Lyon, 27/06/2013Responsive web design @ Be clever meetings 1. Définitions 2. État du marché 3. Les enjeux du RWD 4. De nouvelles contraintes 5. Stratégies d'adaptation Sommaire 2
  • 3. Définitions Lyon, 27/06/2013Responsive web design @ Be clever meetings 3
  • 4. Lyon, 27/06/2013Responsive web design @ Be clever meetings Les feature phones 4 § Media « handheld » (depuis 1998) § Incapables d’afficher un site desktop § iMode § WML § WAP § etc… § Cibles du moteur de recherche m.google.com
  • 5. Lyon, 27/06/2013Responsive web design @ Be clever meetings Les smartphones 5
  • 6. Lyon, 27/06/2013Responsive web design @ Be clever meetings Définition Responsive Web Design 6 § Design réactif qui change en fonction de la taille de l’écran § expérience de consultation optimale § facilite la lecture et la navigation
  • 7. Lyon, 27/06/2013Responsive web design @ Be clever meetings elysee.fr, du desktop au mobile Responsive Web Design § Design réactif qui change en fonction de la taille de l’écran § expérience de consultation optimale § facilite la lecture et la navigation 7
  • 8. Lyon, 27/06/2013Responsive web design @ Be clever meetings Définition Responsive Web Design § Design réactif qui change en fonction de la taille de l’écran § expérience de consultation optimale § facilite la lecture et la navigation § Concepts principaux § @media queries § mise en place de grilles fluides à l’aide d’unités relatives § définition de « points de rupture » (breakpoints) § des images flexibles § aucune intervention sur le DOM § partiellement vrai suivant le contexte projet 8
  • 9. Lyon, 27/06/2013Responsive web design @ Be clever meetings Une parenthèse Adaptive Web Design § Amélioration progressive § détection des capacités du matériel § Ergonomie réactive § modification des paradigmes d’usage § Performance § chargement asynchrone des données 9 RESPONSIVE ADAPTIVE
  • 10. Lyon, 27/06/2013Responsive web design @ Be clever meetings Un rappel Ceci n’est pas la finalité du RWD § Sur mobile ou tablette, nous ne redimensionnons pas la fenêtre du navigateur 10 http://www.enssib.fr/
  • 11. État du marché Lyon, 27/06/2013Responsive web design @ Be clever meetings 11
  • 12. Lyon, 27/06/2013Responsive web design @ Be clever meetings En France Taux de pénétration des smartphones 12 18 à 29 30 à 49 50 et + Tous 0 25 50 75 100 38% 19% 44% 70% % Âge Source : http://www.ourmobileplanet.com/ (chiffres de 2012)
  • 13. Lyon, 27/06/2013Responsive web design @ Be clever meetings De nouveaux usages Lieux d’utilisation du smartphone 13 France 0 25 50 75 100 3% 28% 63% 42% 44% 45% 62% 65% 76% 76% 79% 98% % Source : http://www.ourmobileplanet.com/ (chiffres de 2012) Domicile Travail En déplacement Dans un magasin Restaurant Café ou salon de thé Cabinet médical Aéroport À une réunion entre amis Transports publiques École Ailleurs
  • 14. Lyon, 27/06/2013Responsive web design @ Be clever meetings Les principaux systèmes Acteurs du marché 14
  • 15. Lyon, 27/06/2013Responsive web design @ Be clever meetings Répartition des acteurs du marché 15 France 0 25 50 75 100 4% 42% 12% 25% % Pays Source : http://www.ourmobileplanet.com/ (chiffres de 2012) Android BlackBerry OS iOS Microsoft Windows Mobile
  • 16. Lyon, 27/06/2013Responsive web design @ Be clever meetings Différente selon le pays Répartition des acteurs du marché 16 France États-Unis 0 25 50 75 100 5% 4% 32% 42% 11% 12% 40% 25% % Pays Source : http://www.ourmobileplanet.com/ (chiffres de 2012) Android BlackBerry OS iOS Microsoft Windows Mobile
  • 17. Lyon, 27/06/2013Responsive web design @ Be clever meetings De nombreux navigateurs § Safari § Android Webkit § Google Chrome § Dolphin § BlackBerry Webkit § Opera Mobile § Opera Mini § Firefox Mobile § Internet Explorer § Etc. 17
  • 18. Les enjeux du RWD Lyon, 27/06/2013Responsive web design @ Be clever meetings 18
  • 19. Lyon, 27/06/2013Responsive web design @ Be clever meetings Les avantages Créer une application mobile 19 § Se télécharge et s’installe § App Store § Android market § Windows Phone Store § BlackBerry World § Usage avancé des fonctionnalités de l’appareil § photo § gyroscope § stockage § Possibilité d’être mis en avant
  • 20. Lyon, 27/06/2013Responsive web design @ Be clever meetings Les inconvénients Créer une application mobile § Développements spécifiques par plateforme § Ciblé à un type d’appareil § smartphone § tablette § Licence de développement § Coût de mise en ligne § Mise à jour pour chaque OS et par type d’appareil § Dépendant des caprices des éditeurs des plateformes § Apple et ses iOS § Contenus non indexables par un moteur de recherche 20
  • 21. Lyon, 27/06/2013Responsive web design @ Be clever meetings 21 http://bradfrostweb.com/blog/post/this-is-the-web/
  • 22. Lyon, 27/06/2013Responsive web design @ Be clever meetings 22 http://bradfrostweb.com/blog/post/this-is-the-web/
  • 23. Lyon, 27/06/2013Responsive web design @ Be clever meetings 23 Une application par périphérique ? NO WAY!
  • 24. Lyon, 27/06/2013Responsive web design @ Be clever meetings Avantages Site mobile dédié 24 § Cibler les smartphones § PHP Mobile Detect http://mobiledetect.net/ § sponsorisé par BrowserStack § Possibilité de modifier le parcours du client § Modifier son vecteur de communication § Ignorer les tablettes § frustration de l’utilisateur
  • 25. Lyon, 27/06/2013Responsive web design @ Be clever meetings Inconvénients Site mobile dédié 25 § Solution de détection non fiable à 100% § Double développements § Suivant la solution CMS, la mise en œuvre peut être difficile § Prévoir la bascule vers la version desktop § gestion des URLs § Attention aux contenus ! § styles en lignes § double contribution ?
  • 26. Lyon, 27/06/2013Responsive web design @ Be clever meetings 26 Et si nous devenions flexibles ? RWD
  • 27. Lyon, 27/06/2013Responsive web design @ Be clever meetings 27
  • 28. Lyon, 27/06/2013Responsive web design @ Be clever meetings 28 http://mediaqueri.es/
  • 29. Lyon, 27/06/2013Responsive web design @ Be clever meetings Bénéfices du RWD 29 § Compatibilité infinie (ou presque, on parle de Web ;-) § être future friendly § URL uniques § partage sans préjuger de la plateforme de notre interlocuteur § SEO friendly § Design basé sur le contenu § Côté client : rapproche les expériences § look and feel identique § Côté back-office : simplifie les développements § Moindre coût
  • 30. Lyon, 27/06/2013Responsive web design @ Be clever meetings Stratégie de décision 30 § RWD si § usages similaires § maitrise du contenu § Développements distincts si § besoin spécifique § chemin de l’utilisateur différent § vecteur de communication différent (boutiques vs société) § servir deux contenus différents Règle générale
  • 31. Lyon, 27/06/2013Responsive web design @ Be clever meetings 31 Mobile First Desktop First
  • 32. Lyon, 27/06/2013Responsive web design @ Be clever meetings Mobile First RWD 32
  • 33. Lyon, 27/06/2013Responsive web design @ Be clever meetings Une porte ouverte à l’Adaptive Web Design Mobile First RWD § Force à se concentrer sur l’essentiel § contenu § fonctionnalités de base § Introduction rapide des nouvelles technologies § géolocalisation § évènements touch § Améliore les performances du site § moins de HTML § moins de ressources chargées § Enrichissement progressif 33
  • 34. Lyon, 27/06/2013Responsive web design @ Be clever meetings Enrichissement progressif § Détecter les capacités du navigateur côté client § Si le navigateur est évolué et en fonction du viewport : § transformation de liens d’accès à des ressources en composants intégrés § remplacement dynamique d’images § chargement de librairies JavaScript 34 Source : http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
  • 35. De nouvelles contraintes Lyon, 27/06/2013Responsive web design @ Be clever meetings 35
  • 36. Lyon, 27/06/2013Responsive web design @ Be clever meetings Des contraintes à ne pas négliger 36 1. Les enjeux du design 2. Une qualité irréprochable 3. La problématique des images
  • 37. Lyon, 27/06/2013Responsive web design @ Be clever meetings 37 Les enjeux du design
  • 38. Lyon, 27/06/2013Responsive web design @ Be clever meetings Designer une grille réactive 38 § Comprendre les besoins de l’utilisateur en amont § Définir une grille fluide § Une mise en page flexible Bureau Mobile
  • 39. Lyon, 27/06/2013Responsive web design @ Be clever meetings Les bonnes questions à se poser 39 § iPhone5 ou Nexus 4 ou Galaxy S4 ? § aucun ! § pas assez représentatifs, le marché évolue trop vite § Combien de colonnes doit comporter le design ? § 1 pour les smartphones, 2 pour les tablettes, plus pour le desktop § mais c’est le contexte projet qui sera finalement déterminant § Quelles tailles pour les colonnes ? § dépendant du contenu (images, vidéos, textes) § sous-colonnes ? § 60 à 80 caractères par ligne pour être agréable à lire Choisir ses points de rupture
  • 40. Lyon, 27/06/2013Responsive web design @ Be clever meetings Une dextérité approximative Une expérience utilisateur différente § Navigation au doigt sur les mobiles § visée moins précise qu’une souris § les zones d’interaction doivent être agrandies (au moins 44px) 40 Source : http://www.lukew.com/ff/entry.asp?1649
  • 41. Lyon, 27/06/2013Responsive web design @ Be clever meetings Navigation au doigt 41 49% 36% 72% 28% 15% 90% 10% http://uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php 33% 67%
  • 42. Lyon, 27/06/2013Responsive web design @ Be clever meetings Une expérience utilisateur différente § Pas de survol sur les mobiles § ne pas cacher de contenu pour l’afficher au survol § les navigations doivent être repensées § Pas de flash § Éviter les modales et autres pop-up § la plaie du web mobile § pensées pour le desktop 42
  • 43. Lyon, 27/06/2013Responsive web design @ Be clever meetings Une expérience utilisateur différente § Accès à l’information § Repenser la page en terme de hiérarchie § Améliorer la lisibilité des textes § Espace disponible réduit § Privilégier le contenu et non le branding § Rendre certains éléments accessibles depuis une URL 43
  • 44. Lyon, 27/06/2013Responsive web design @ Be clever meetings 44 Une qualité irréprochable
  • 45. Lyon, 27/06/2013Responsive web design @ Be clever meetings Nécessite plus de rigueur 45 § L’intégrateur, un expert indispensable § interlocuteur qui possèdent l’expertise § connaissances supplémentaires que peu de développeurs possèdent § Se conformer au catalogue de composants graphiques § stop au bricolage de fortune § ne pas importer un composant où il n’est pas prévu : comportement aléatoire § Respecter les consignes d’écrit web en place § respect de la titraille § proscrire les styles CSS en ligne
  • 46. Lyon, 27/06/2013Responsive web design @ Be clever meetings 46 La problématique des images © Apple
  • 47. Lyon, 27/06/2013Responsive web design @ Be clever meetings Problème rencontré Images responsives § Pourquoi faire charger à un mobile des images destinées au desktop ? § contrainte de poids § contrainte de vitesse § contrainte de performance du matériel § contrainte de consommation de la batterie 47
  • 48. Lyon, 27/06/2013Responsive web design @ Be clever meetings Deux choix de contribution Images responsives 48 § Une image de grande résolution § affichée dans le navigateur et réduite visuellement si nécessaire § contribution simplifiée § temps de chargement augmenté § consommation processeur § En attendant une vraie solution § http://adaptive-images.com/ § http://responsiveimages.org/demos/ § Plusieurs images § le navigateur charge dynamiquement l’image la plus adaptée § contribution plus lourde § expérience utilisateur grandie vs
  • 49. Lyon, 27/06/2013Responsive web design @ Be clever meetings Des problèmes à la pelle Le cas Retina 49 § Concerne toutes les solutions mobiles § 4 fois plus de pixels affichés sur une même zone § images à contribuer 4 fois plus grandes § images plus lourdes Source : http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
  • 50. Lyon, 27/06/2013Responsive web design @ Be clever meetings Images normales sur écran Retina 50 § Des images floues sur les écrans haute définition Source : http://www.noupe.com/design/the-mobile-web-css-image-replacement-for-retina-display-devices.html
  • 51. Stratégies d’adaptation Lyon, 27/06/2013Responsive web design @ Be clever meetings 51
  • 52. Lyon, 27/06/2013Responsive web design @ Be clever meetings 52 #1 Navigation responsive, tour d’horizon des solutions
  • 53. Lyon, 27/06/2013Responsive web design @ Be clever meetings Toggle navigation 53 § Cacher la navigation sous un lien de menu § menu révélé puis masqué au clic § pousse le contenu vers le bas § Exemples : § http://www.starbucks.com/ § http://m.bbc.co.uk/news § http://www.smashingmagazine.com/
  • 54. Lyon, 27/06/2013Responsive web design @ Be clever meetings Toggle navigation 54
  • 55. Lyon, 27/06/2013Responsive web design @ Be clever meetings Navigation Off-canvas § Cacher la navigation sous un lien de menu § menu révélé puis masqué au clic § le menu apparaît depuis l’extérieur de la page § comportement similaire aux applications natives (Facebook) § Exemples : § http://www.kaemingk.com/fr/ § http://mashable.com/ 55
  • 56. Lyon, 27/06/2013Responsive web design @ Be clever meetings Footer Anchor § Un lien qui renvoie au menu affiché en bas de page § Exemple : § http://grillroyal.com/ 56
  • 57. Lyon, 27/06/2013Responsive web design @ Be clever meetings 57 #2 Afficher des cartes Google Maps © Google
  • 58. Lyon, 27/06/2013Responsive web design @ Be clever meetings Le problème des cartes dans un contexte mobile Adaptation des cartes Google Maps § Contenu iframe § difficile à rendre fluide § cache misère à la pérennité incertaine § Réduction de la zone d’affichage § perte de la zone de focus § une expérience utilisateur amoindrie § Poids à charger non négligeable § temps de chargement plus longs 58
  • 59. Lyon, 27/06/2013Responsive web design @ Be clever meetings Solution Adaptation des cartes Google Maps § Recourir à l’API de cartes statiques pour les mobiles § https://developers.google.com/maps/documentation/imageapis/ § chargement d’une image § ajouter un lien pour afficher la carte dans la solution du fournisseur de contenu. § Démo : § http://codepen.io/piouPiouM/full/wyFfs 59
  • 60. Lyon, 27/06/2013Responsive web design @ Be clever meetings Solution Adaptation des cartes Google Maps § « Mais, mais l’internaute quittera le site ! » § Il le quittera de toute manière pour arriver à utiliser la carte. § Mais il le quittera sans aucune frustration ! § Il est préférable de donner une solution alternative utilisable que de forcer le client à exploiter un composant non adapté. 60
  • 61. Lyon, 27/06/2013Responsive web design @ Be clever meetings Crédits 61 Martin Fisch http://www.flickr.com/photos/marfis75/5374308475/ Horia Varlan http://www.flickr.com/photos/horiavarlan/4514164700/ kaybee07 http://www.flickr.com/photos/lyza/7382235106/ Sheila Sund http://www.flickr.com/photos/sheila_sund/8371975708/ Nicolas Janik http://www.flickr.com/photos/n1colas/2598073727/ Stéphanie Walter http://commons.wikimedia.org/wiki/ File:Content_is_like_water.png GBPublic_PR http://www.flickr.com/photos/gbpublic/8488281915/ Lyzadanger http://www.flickr.com/photos/lyza/7382235106/ fdecomite http://www.flickr.com/photos/fdecomite/6767395283/ Phil Campbell http://www.flickr.com/photos/clanlife/6369792721/ Mark Lyken http://www.flickr.com/photos/lykenlove/5927193171/ Davidlohr Bueso http://www.flickr.com/photos/daverugby83/5842180515/