SlideShare une entreprise Scribd logo
ANDRÉ DUBREUIL
ARCHITECTE D’INFORMATION
adubreuil@tink.ca

DESIGN ADAPTATIF / MOBILITÉ
DESIGN ADAPTATIF
RESPONSIVE WEB DESIGN

DESIGN ADAPTATIF
⟶

Le terme « Design adaptatif » fait
référence à un type de design qui
s’adapte à l'environnement dans lequel
il est affiché et réagit de manière
appropriée en utilisant certains
mécanismes (CSS, HTML, Javascript,
Serveur).

⟶

Il s'agit d'une technique de conception
qui vous permet de créer un site Web
unique qui s'adapte à l'appareil sur
lequel il est visualisé, qu'il s'agisse d'un
ordinateur, un téléphone intelligent ou
une tablette.

⟶

Un site construit avec cette technique se
redimensionnera automatiquement afin
d’optimiser l’expérience sur les différents
appareils.

⟶

3 éléments clés : grille flexible, images
adaptatives, media queries.
3
RESPONSIVE WEB DESIGN

DESIGN ADAPTATIF

⟶

Mise en page fluide :
Une mise en page fluide a des dimensions
qui dépendent de la grosseur du navigateur
web de l’utilisateur. Elles sont déterminées
par un pourcentage, ce qui permet, dans la
plupart des cas, de prendre tout l’espace
alloué et de toujours être plein écran.

⟶

Mise en page adaptive :
Différentes mises en page sont déclenchées
par l’entremise de points d'arrêt
(Breakpoints). Règle générale, il peut y avoir
de trois à six points d'arrêt afin d’adapter la
mise en page à plusieurs tailles prédéfinies
(ordinateur, téléphone intelligent, tablette).

4
RESPONSIVE WEB DESIGN

DESIGN ADAPTATIF

⟶

Mise en page adaptative :
Il s'agit d'un hybride de mise en page fluide
de base et de la mise en page adaptive.
Il y a des points d'arrêt prédéfinis, mais
l’utilisation d’une grille de colonnes flexibles
permet au contenu de prendre tout l’espace
alloué à l’intérieur de celles-ci, les éléments
se transforment constamment entre les points
d’arrêts en offrant toujours la meilleure
structure du site.

5
RESPONSIVE WEB DESIGN

DESIGN ADAPTATIF

⟶

Points d’arrêt typiques :
320 pixels - Pour les appareils à petit écran, tels que
les téléphones en mode portrait.
480 pixels - Pour les appareils à petit écran, tels que
les téléphones en mode paysage.
600 pixels - Tablettes plus petites (Kindle
d'Amazon, Nook, etc.) en mode portrait.
768 pixels – Tablettes comme l'iPad en mode
portrait.
1024 pixels - Tablettes comme l'iPad en mode
paysage, ainsi que certains écrans d'ordinateur
portable, netbook, et desktop.
1200 pixels - Pour écrans larges, portables et
desktop à plus haute résolution.

6
RESPONSIVE WEB DESIGN

DESIGN ADAPTATIF

Points d’arrêt

Grille flexible

@media screen (max-width: 767px) {
…
}
@media screen (min-width: 1200px) {
…
}

.row-fluid .span1 {
width: 5.982905982905983%;
}
.row-fluid .span2 {
width: 14.52991452991453%;
}

Images

Typographie

Img {

p{

max-width: 100%;
}

font-size:0.875em; /* 16x.875=14 */
}
.sidenote {
font-size:0.75em; /* 16x0.75=12 */
}

7
RESPONSIVE WEB DESIGN

DESIGN ADAPTATIF
⟶

La force de cette approche est que vous
pouvez présenter le contenu de la bonne
taille pour la quasi-totalité de votre public
cible. La faiblesse est que vous limitez votre
capacité à adapter le contenu d’un point de
vue fonctions.

⟶

Avantages :
⟶
⟶
⟶

⟶

⟶

⟶

Avoir une seule URL pour chacune des pages
S’adapte à l’écran d’un maximum d’appareils
Facilite une expérience de marque uniforme d’un
appareil à l’autre
Les mécanismes de SEO, conversion et le suivi
(tracking) sont plus faciles à mettre en œuvre
Le soutien et la gestion du site sont simplifiés du fait
de n’avoir qu’un site web

Inconvénients :
⟶

⟶

⟶

Coûte généralement plus cher à mettre en œuvre
initialement (défis de conception et compatibilité aux
appareils et fureteurs multiples)
Difficile d’y intégrer des fonctions spécifiques aux
appareils mobiles (géolocalisation etc.)
Les temps de chargements sont généralement plus
lents que ceux d’une version mobile dédiée

8
SITE MOBILE DÉDIÉ
DEDICATED MOBILE WEBSITE

SITE MOBILE DÉDIÉ
⟶

La force de cette approche est que vous
pouvez présenter un contenu et des
fonctionnalités mieux adaptés/ciblés aux
besoins spécifiques de votre public cible
dans un contexte prédéfini.

⟶

Avantages :
⟶
⟶

⟶

⟶

⟶

Conception initiale plus facile à mettre en place
Facile d’y intégrer des fonctions spécifiques aux
appareils mobiles (géolocalisation etc.)
Possibilité de limiter les fonctions et contenu au strict
nécessaire (expérience spécifique au contexte)
Les temps de chargements sont habituellement plus
rapides que ceux d’une version adaptative

Inconvénients :
⟶

⟶
⟶

⟶

Coûte généralement plus cher à maintenir et mettre à
jour (sites multiples)
URLs multiples pour chaque page
Les mécanismes de SEO, conversion et e suivi
(tracking) sont plus difficiles à mettre en œuvre
Combien de versions différentes seront requises afin
de bien cibler nos utilisateurs (téléphone, tablette
etc.) ?

10
ALTERNATIVES
PROGRESSIVE ENHANCEMENT

AMÉLIORATION
PROGRESSIVE
⟶

L' amélioration progressive (bottom-up) est une manière
de concevoir un site web qui prend très largement en
compte l'accessibilité, la sémantique et le référencement.
En séparant strictement le fond et la forme, cette
technique permet de présenter un contenu simple et de
rendre un service minimum à tous les utilisateurs, quel
que soit le débit de leur connexion ou leur navigateur, tout
en améliorant progressivement l'affichage proposé en
fonction de l'équipement de l'internaute.

⟶

La dégradation élégante (top-down) dans le domaine de
la conception web correspond à l'adoption massive à
deux nouveaux concepts, la séparation du fond
(sémantique XHTML) et de la forme (CSS), l'adoption des
standards du W3C grâce à l'émergence de nouveaux
navigateurs sur le marché.

⟶

Cette idée de régression était soutenue par l'amélioration
rapide et continue des technologies, les développeurs
visant d'abord les navigateurs les plus récents et
considérant ensuite les autres.

⟶

Ces méthodes ont un même but, rendre le contenu
accessible au plus grand nombre. Ce qui les oppose est
leur approche du problème.

12
SERVER-SIDE - RESS

CLIENT/SERVEUR
⟶

Une conception adaptative est implantée du
côté client, ce qui signifie que la page entière
est servie au navigateur de l'appareil (le
client), celui-ci modifie ensuite l’apparence de
la page.

⟶

Les mêmes principes peuvent être appliqués
du côté serveur, c'est à dire avant même que
la page soit livrée, le serveur détecte les
attributs de l’appareil client, et offre une
version du site optimisée pour les dimensions
et caractéristiques techniques de celui-ci.

⟶

L’adaptation du côté serveur peut donc
permettre de fournir une expérience
différente et ciblée, sans vous empêcher
d'utiliser les technologies les plus
récentes, couche-sur-couche, afin de
concevoir une expérience optimale peu
importe l’appareil utilisé.

13
À CONSIDÉRER
MOBILITÉ

TROIS TYPE DE COMPORTEMENT
D’UTILISATION IMPORTANTS
⟶

L'auteur Josh Clark met l'accent sur trois aspects essentiels des comportements
d’utilisation mobile : les micro-tâches, la proximité, et le divertissement.

⟶

Ce qui rejoint assez bien la répartition que Google fait des utilisateurs de mobiles «urgent
now, repetitive now, bored now ».

⟶

Ces comportements se traduisent en certains types d’interaction communs qu’il faut
prendre en considération lors de la conception de solutions mobiles :
⟶

⟶

⟶

Recherche (informations urgentes, locales): J'ai besoin d'une réponse à quelque chose
maintenant, fréquemment lié à ma position actuelle.
Exploration / divertissement : J'ai un peu de temps à tuer et je recherche des distractions pour
occuper mon temps d'inactivité.
Création / modification (changement urgent / micro-tâches): J'ai besoin de faire quelque chose
maintenant qui ne peut attendre.

15
MOBILITÉ

LE CONTENU PRIME SUR LA NAVIGATION

⟶

⟶

⟶

Trop d'expériences Web mobiles entame la conversation avec une liste d'options de
navigation au lieu de faire primer le contenu.
Règle générale, le contenu doit primer sur la navigation pour améliorer l’expérience
mobile. Que les visiteurs y soit afin de vérifier des données fréquemment mises à jour,
pour rechercher de l'information locale, ou pour trouver des articles par l’entremise d’outils
de recherche ou de communication, ils veulent des réponses immédiates à leurs besoins
et non votre plan de site.
Il est donc important d’avoir un en-tête et une navigation simple qui permettront
l’optimisation de l’accès au contenu le plus rapidement possible malgré la résolution
d’écran réduite de certains appareils.

16
RÉFÉRENCES
RÉFÉRENCES

GRILLES FLEXIBLES

18
RÉFÉRENCES

LITTÉRATURE

19
RÉFÉRENCES

ARTICLES
⟶

http://www.hesketh.com/thought-leadership/our-publications/inclusive-web-design-future
Steven Champeon - Progressive Enhancements

⟶

http://alistapart.com/article/responsive-web-design
Ethan Marcotte - Responsive Web Design

⟶

http://alistapart.com/article/understandingprogressiveenhancement
Aaron Gustafson - Understanding Progressive Enhancement

⟶

http://blog.easy-designs.net/archives/2011/11/16/on-adaptive-vs-responsive-web-design
Aaron Gustafson - Adaptive vs Responsive Web Design

⟶

http://www.loganfranken.com/blog/251/responsive-vs-adaptive-web-design
Logan Franken - Responsive vs Adaptive Web Design

⟶

http://www.lullabot.com/articles/responsive-adaptive-web-design
Jared Ponchot - Responsive & Adaptive Web Design

⟶

http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php
Viljami Salminen - Adaptive vs Responsive, What's the Difference

⟶

http://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html
Garrett Goodman - Client-side vs Server-side

⟶

https://speakerdeck.com/dmolsen/ress-an-evolution-of-responsive-web-design
Dan Olsen – RESS

⟶

http://www.lukew.com/ff/entry.asp?1392
Luke Wroblewski - RESS
20

Contenu connexe

En vedette

French Educational System
French Educational SystemFrench Educational System
French Educational System
sallonie ritika
 
Jeux relaxation enfants
Jeux relaxation enfantsJeux relaxation enfants
Jeux relaxation enfants
Thierry Amsellem
 
050113 fax to judy clarke (boston marathon bombing) - french
050113   fax to judy clarke (boston marathon bombing) - french050113   fax to judy clarke (boston marathon bombing) - french
050113 fax to judy clarke (boston marathon bombing) - french
VogelDenise
 
I sante
I santeI sante
I sante
koopafx
 
Ht lemagicienbet
Ht lemagicienbetHt lemagicienbet
Ht lemagicienbetkelticman
 
Modulemarketing 121016134407-phpapp01
Modulemarketing 121016134407-phpapp01Modulemarketing 121016134407-phpapp01
Modulemarketing 121016134407-phpapp01Nabil Ben Zerrouk
 
Qué es movie maker
Qué es movie makerQué es movie maker
Qué es movie makerjosecirio2
 
Louaize bc conference summary french w
Louaize bc conference summary french wLouaize bc conference summary french w
Louaize bc conference summary french wIAU_Past_Conferences
 
Scrumday 2015 : Le Scrum chez Intel, retour d'expérience par Claude Aubry, Cy...
Scrumday 2015 : Le Scrum chez Intel, retour d'expérience par Claude Aubry, Cy...Scrumday 2015 : Le Scrum chez Intel, retour d'expérience par Claude Aubry, Cy...
Scrumday 2015 : Le Scrum chez Intel, retour d'expérience par Claude Aubry, Cy...
French Scrum User Group
 
Simon Duchesne
Simon DuchesneSimon Duchesne
Simon Duchesne
chahaya96
 
021013 adecco email (french)
021013   adecco email (french)021013   adecco email (french)
021013 adecco email (french)VogelDenise
 
Les evenements connectes
Les evenements connectesLes evenements connectes
Les evenements connectes
asdillrow
 
Expert Soldes Juillet 2013
Expert Soldes Juillet 2013Expert Soldes Juillet 2013
Expert Soldes Juillet 2013
Expert
 
ALIBI Sensuel
ALIBI SensuelALIBI Sensuel
ALIBI Sensuel
IMAGE IN situ
 
071310 obama email (french)
071310   obama email (french)071310   obama email (french)
071310 obama email (french)VogelDenise
 
Our services
Our servicesOur services
Our services
Salvatore Annaloro
 
Scrumday 2015 : La régression continue - une méthode pour bien faire rater l'...
Scrumday 2015 : La régression continue - une méthode pour bien faire rater l'...Scrumday 2015 : La régression continue - une méthode pour bien faire rater l'...
Scrumday 2015 : La régression continue - une méthode pour bien faire rater l'...
French Scrum User Group
 

En vedette (20)

French Educational System
French Educational SystemFrench Educational System
French Educational System
 
Jeux relaxation enfants
Jeux relaxation enfantsJeux relaxation enfants
Jeux relaxation enfants
 
050113 fax to judy clarke (boston marathon bombing) - french
050113   fax to judy clarke (boston marathon bombing) - french050113   fax to judy clarke (boston marathon bombing) - french
050113 fax to judy clarke (boston marathon bombing) - french
 
I sante
I santeI sante
I sante
 
Formation php 1
Formation php 1Formation php 1
Formation php 1
 
Rome
RomeRome
Rome
 
Ht lemagicienbet
Ht lemagicienbetHt lemagicienbet
Ht lemagicienbet
 
Modulemarketing 121016134407-phpapp01
Modulemarketing 121016134407-phpapp01Modulemarketing 121016134407-phpapp01
Modulemarketing 121016134407-phpapp01
 
Qué es movie maker
Qué es movie makerQué es movie maker
Qué es movie maker
 
Advertisement notes
Advertisement notesAdvertisement notes
Advertisement notes
 
Louaize bc conference summary french w
Louaize bc conference summary french wLouaize bc conference summary french w
Louaize bc conference summary french w
 
Scrumday 2015 : Le Scrum chez Intel, retour d'expérience par Claude Aubry, Cy...
Scrumday 2015 : Le Scrum chez Intel, retour d'expérience par Claude Aubry, Cy...Scrumday 2015 : Le Scrum chez Intel, retour d'expérience par Claude Aubry, Cy...
Scrumday 2015 : Le Scrum chez Intel, retour d'expérience par Claude Aubry, Cy...
 
Simon Duchesne
Simon DuchesneSimon Duchesne
Simon Duchesne
 
021013 adecco email (french)
021013   adecco email (french)021013   adecco email (french)
021013 adecco email (french)
 
Les evenements connectes
Les evenements connectesLes evenements connectes
Les evenements connectes
 
Expert Soldes Juillet 2013
Expert Soldes Juillet 2013Expert Soldes Juillet 2013
Expert Soldes Juillet 2013
 
ALIBI Sensuel
ALIBI SensuelALIBI Sensuel
ALIBI Sensuel
 
071310 obama email (french)
071310   obama email (french)071310   obama email (french)
071310 obama email (french)
 
Our services
Our servicesOur services
Our services
 
Scrumday 2015 : La régression continue - une méthode pour bien faire rater l'...
Scrumday 2015 : La régression continue - une méthode pour bien faire rater l'...Scrumday 2015 : La régression continue - une méthode pour bien faire rater l'...
Scrumday 2015 : La régression continue - une méthode pour bien faire rater l'...
 

Similaire à Design adaptatif / Mobilité

Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docx
Georges59
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
USERADGENTS
 
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
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
Atelier IHM Polytech Nice Sophia
 
Mobile marketing
Mobile marketingMobile marketing
Mobile marketing
HGWeb Consulting WSI agency
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
Alinoa
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
La FeWeb
 
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
 
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
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologie
ekino
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?
WebSchool Orléans
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
Julien LE THUAUT
 
Cours de Web Design part.1
Cours de Web Design part.1Cours de Web Design part.1
Cours de Web Design part.1
MC Casal
 
Webdesign, UX et UCD #1
Webdesign, UX et UCD #1Webdesign, UX et UCD #1
Webdesign, UX et UCD #1
Relax In The Air
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
Jean-Baptiste Guerraz
 
Responsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionResponsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de production
L_Demontiers
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
Actency
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web Mobile
Willy Leloutre
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
defimedia
 
Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?
Idean France
 

Similaire à Design adaptatif / Mobilité (20)

Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docx
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
 
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...
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
 
Mobile marketing
Mobile marketingMobile marketing
Mobile marketing
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
 
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
 
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
 
Responsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologie
 
"Responsive Design" : Pourquoi et comment y aller ?
 "Responsive Design" : Pourquoi et comment y aller ? "Responsive Design" : Pourquoi et comment y aller ?
"Responsive Design" : Pourquoi et comment y aller ?
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
Cours de Web Design part.1
Cours de Web Design part.1Cours de Web Design part.1
Cours de Web Design part.1
 
Webdesign, UX et UCD #1
Webdesign, UX et UCD #1Webdesign, UX et UCD #1
Webdesign, UX et UCD #1
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
 
Responsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionResponsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de production
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web Mobile
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
 
Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?
 

Design adaptatif / Mobilité

  • 3. RESPONSIVE WEB DESIGN DESIGN ADAPTATIF ⟶ Le terme « Design adaptatif » fait référence à un type de design qui s’adapte à l'environnement dans lequel il est affiché et réagit de manière appropriée en utilisant certains mécanismes (CSS, HTML, Javascript, Serveur). ⟶ Il s'agit d'une technique de conception qui vous permet de créer un site Web unique qui s'adapte à l'appareil sur lequel il est visualisé, qu'il s'agisse d'un ordinateur, un téléphone intelligent ou une tablette. ⟶ Un site construit avec cette technique se redimensionnera automatiquement afin d’optimiser l’expérience sur les différents appareils. ⟶ 3 éléments clés : grille flexible, images adaptatives, media queries. 3
  • 4. RESPONSIVE WEB DESIGN DESIGN ADAPTATIF ⟶ Mise en page fluide : Une mise en page fluide a des dimensions qui dépendent de la grosseur du navigateur web de l’utilisateur. Elles sont déterminées par un pourcentage, ce qui permet, dans la plupart des cas, de prendre tout l’espace alloué et de toujours être plein écran. ⟶ Mise en page adaptive : Différentes mises en page sont déclenchées par l’entremise de points d'arrêt (Breakpoints). Règle générale, il peut y avoir de trois à six points d'arrêt afin d’adapter la mise en page à plusieurs tailles prédéfinies (ordinateur, téléphone intelligent, tablette). 4
  • 5. RESPONSIVE WEB DESIGN DESIGN ADAPTATIF ⟶ Mise en page adaptative : Il s'agit d'un hybride de mise en page fluide de base et de la mise en page adaptive. Il y a des points d'arrêt prédéfinis, mais l’utilisation d’une grille de colonnes flexibles permet au contenu de prendre tout l’espace alloué à l’intérieur de celles-ci, les éléments se transforment constamment entre les points d’arrêts en offrant toujours la meilleure structure du site. 5
  • 6. RESPONSIVE WEB DESIGN DESIGN ADAPTATIF ⟶ Points d’arrêt typiques : 320 pixels - Pour les appareils à petit écran, tels que les téléphones en mode portrait. 480 pixels - Pour les appareils à petit écran, tels que les téléphones en mode paysage. 600 pixels - Tablettes plus petites (Kindle d'Amazon, Nook, etc.) en mode portrait. 768 pixels – Tablettes comme l'iPad en mode portrait. 1024 pixels - Tablettes comme l'iPad en mode paysage, ainsi que certains écrans d'ordinateur portable, netbook, et desktop. 1200 pixels - Pour écrans larges, portables et desktop à plus haute résolution. 6
  • 7. RESPONSIVE WEB DESIGN DESIGN ADAPTATIF Points d’arrêt Grille flexible @media screen (max-width: 767px) { … } @media screen (min-width: 1200px) { … } .row-fluid .span1 { width: 5.982905982905983%; } .row-fluid .span2 { width: 14.52991452991453%; } Images Typographie Img { p{ max-width: 100%; } font-size:0.875em; /* 16x.875=14 */ } .sidenote { font-size:0.75em; /* 16x0.75=12 */ } 7
  • 8. RESPONSIVE WEB DESIGN DESIGN ADAPTATIF ⟶ La force de cette approche est que vous pouvez présenter le contenu de la bonne taille pour la quasi-totalité de votre public cible. La faiblesse est que vous limitez votre capacité à adapter le contenu d’un point de vue fonctions. ⟶ Avantages : ⟶ ⟶ ⟶ ⟶ ⟶ ⟶ Avoir une seule URL pour chacune des pages S’adapte à l’écran d’un maximum d’appareils Facilite une expérience de marque uniforme d’un appareil à l’autre Les mécanismes de SEO, conversion et le suivi (tracking) sont plus faciles à mettre en œuvre Le soutien et la gestion du site sont simplifiés du fait de n’avoir qu’un site web Inconvénients : ⟶ ⟶ ⟶ Coûte généralement plus cher à mettre en œuvre initialement (défis de conception et compatibilité aux appareils et fureteurs multiples) Difficile d’y intégrer des fonctions spécifiques aux appareils mobiles (géolocalisation etc.) Les temps de chargements sont généralement plus lents que ceux d’une version mobile dédiée 8
  • 10. DEDICATED MOBILE WEBSITE SITE MOBILE DÉDIÉ ⟶ La force de cette approche est que vous pouvez présenter un contenu et des fonctionnalités mieux adaptés/ciblés aux besoins spécifiques de votre public cible dans un contexte prédéfini. ⟶ Avantages : ⟶ ⟶ ⟶ ⟶ ⟶ Conception initiale plus facile à mettre en place Facile d’y intégrer des fonctions spécifiques aux appareils mobiles (géolocalisation etc.) Possibilité de limiter les fonctions et contenu au strict nécessaire (expérience spécifique au contexte) Les temps de chargements sont habituellement plus rapides que ceux d’une version adaptative Inconvénients : ⟶ ⟶ ⟶ ⟶ Coûte généralement plus cher à maintenir et mettre à jour (sites multiples) URLs multiples pour chaque page Les mécanismes de SEO, conversion et e suivi (tracking) sont plus difficiles à mettre en œuvre Combien de versions différentes seront requises afin de bien cibler nos utilisateurs (téléphone, tablette etc.) ? 10
  • 12. PROGRESSIVE ENHANCEMENT AMÉLIORATION PROGRESSIVE ⟶ L' amélioration progressive (bottom-up) est une manière de concevoir un site web qui prend très largement en compte l'accessibilité, la sémantique et le référencement. En séparant strictement le fond et la forme, cette technique permet de présenter un contenu simple et de rendre un service minimum à tous les utilisateurs, quel que soit le débit de leur connexion ou leur navigateur, tout en améliorant progressivement l'affichage proposé en fonction de l'équipement de l'internaute. ⟶ La dégradation élégante (top-down) dans le domaine de la conception web correspond à l'adoption massive à deux nouveaux concepts, la séparation du fond (sémantique XHTML) et de la forme (CSS), l'adoption des standards du W3C grâce à l'émergence de nouveaux navigateurs sur le marché. ⟶ Cette idée de régression était soutenue par l'amélioration rapide et continue des technologies, les développeurs visant d'abord les navigateurs les plus récents et considérant ensuite les autres. ⟶ Ces méthodes ont un même but, rendre le contenu accessible au plus grand nombre. Ce qui les oppose est leur approche du problème. 12
  • 13. SERVER-SIDE - RESS CLIENT/SERVEUR ⟶ Une conception adaptative est implantée du côté client, ce qui signifie que la page entière est servie au navigateur de l'appareil (le client), celui-ci modifie ensuite l’apparence de la page. ⟶ Les mêmes principes peuvent être appliqués du côté serveur, c'est à dire avant même que la page soit livrée, le serveur détecte les attributs de l’appareil client, et offre une version du site optimisée pour les dimensions et caractéristiques techniques de celui-ci. ⟶ L’adaptation du côté serveur peut donc permettre de fournir une expérience différente et ciblée, sans vous empêcher d'utiliser les technologies les plus récentes, couche-sur-couche, afin de concevoir une expérience optimale peu importe l’appareil utilisé. 13
  • 15. MOBILITÉ TROIS TYPE DE COMPORTEMENT D’UTILISATION IMPORTANTS ⟶ L'auteur Josh Clark met l'accent sur trois aspects essentiels des comportements d’utilisation mobile : les micro-tâches, la proximité, et le divertissement. ⟶ Ce qui rejoint assez bien la répartition que Google fait des utilisateurs de mobiles «urgent now, repetitive now, bored now ». ⟶ Ces comportements se traduisent en certains types d’interaction communs qu’il faut prendre en considération lors de la conception de solutions mobiles : ⟶ ⟶ ⟶ Recherche (informations urgentes, locales): J'ai besoin d'une réponse à quelque chose maintenant, fréquemment lié à ma position actuelle. Exploration / divertissement : J'ai un peu de temps à tuer et je recherche des distractions pour occuper mon temps d'inactivité. Création / modification (changement urgent / micro-tâches): J'ai besoin de faire quelque chose maintenant qui ne peut attendre. 15
  • 16. MOBILITÉ LE CONTENU PRIME SUR LA NAVIGATION ⟶ ⟶ ⟶ Trop d'expériences Web mobiles entame la conversation avec une liste d'options de navigation au lieu de faire primer le contenu. Règle générale, le contenu doit primer sur la navigation pour améliorer l’expérience mobile. Que les visiteurs y soit afin de vérifier des données fréquemment mises à jour, pour rechercher de l'information locale, ou pour trouver des articles par l’entremise d’outils de recherche ou de communication, ils veulent des réponses immédiates à leurs besoins et non votre plan de site. Il est donc important d’avoir un en-tête et une navigation simple qui permettront l’optimisation de l’accès au contenu le plus rapidement possible malgré la résolution d’écran réduite de certains appareils. 16
  • 20. RÉFÉRENCES ARTICLES ⟶ http://www.hesketh.com/thought-leadership/our-publications/inclusive-web-design-future Steven Champeon - Progressive Enhancements ⟶ http://alistapart.com/article/responsive-web-design Ethan Marcotte - Responsive Web Design ⟶ http://alistapart.com/article/understandingprogressiveenhancement Aaron Gustafson - Understanding Progressive Enhancement ⟶ http://blog.easy-designs.net/archives/2011/11/16/on-adaptive-vs-responsive-web-design Aaron Gustafson - Adaptive vs Responsive Web Design ⟶ http://www.loganfranken.com/blog/251/responsive-vs-adaptive-web-design Logan Franken - Responsive vs Adaptive Web Design ⟶ http://www.lullabot.com/articles/responsive-adaptive-web-design Jared Ponchot - Responsive & Adaptive Web Design ⟶ http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php Viljami Salminen - Adaptive vs Responsive, What's the Difference ⟶ http://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html Garrett Goodman - Client-side vs Server-side ⟶ https://speakerdeck.com/dmolsen/ress-an-evolution-of-responsive-web-design Dan Olsen – RESS ⟶ http://www.lukew.com/ff/entry.asp?1392 Luke Wroblewski - RESS 20