Synthèse sur le responsive web design avec des exemples orientés bibliothèque. Stage Enssib - Septembre 2013.

1. *en bibliothèque
@jsicot
Stage ENSSIB - Sept. 2013
&Ergonomie web
mobile*

2. Vous et
votre
mobile ?
Christian Tan, My smartphone is smarter than you, Flickr, by-nc-sa

3. 15M
6M 4M
Source : GFK et Gartner, Mai 2013

4. 38%
des français possèdent un
smartphone au 1er
semestre 2012
Source : Google, Mai 2012
60% Taux de pénétration
envisagé pour l’Europe à
l’horizon 2015
Source : Morgan Stanley Research, Juin 2012

5. 25,1M de mobinautes / mois
en France
Source : Médiamétrie, Juin 2013
8,3% du trafic internet
Source : GS StatsCounter, MyFanGroup, 2013

6. 1% du trafic internet
en 2011
4% du trafic internet
en 2012

7. 98% À la maison
79% Au travail
76% En déplacement
76% Dans un magasin
65% Dans les transports
62% Au café
45% Chez le médecin
44% Dans les aéroports
42% Lors d’événements sociaux
26% En cours
Source : Google, Notre planète mobile : France, Mai 2012

8. 85%Des utilisateurs utilisent leur
smartphone pour
rechercher des
informations locales
Source : Google, Notre planète mobile :
France, Mai 2012

9. Proposer une
expérience
utilisateur différente...?
Youflavio, minority-report-omg-02, Flickr, by-sa

10. Les horaires
Quels services/contenus pour
un site mobile de bibliothèque
1 Plan et accès2
Recherche simple4
Compte lecteur
5
Formulaire de contact 6
Actualités3Bases de données
compatibles mobile
7

11. Que dire des
solutions ?

12. Application native
Avantages
Meilleure
intégration
graphique et
matérielle
Visibilté +
grace aux
markets
Meilleures
performances
Inconvénients
Doit être
téléchargée
Termes et
conditions
des markets
1 app / OS
Développement
+ complexe
(SDK)

14. Web App
Avantages
Multi
Plate-formes
Maintenance
+ aisée
Full web
HTML5
Inconvénients
Maintenance
doublée
Ne peut pas
utiliser les
APIs natives
(APN, etc)
URIs multiples
2 sites
Site mobile
+ pauvre que
l’original

15. Framework complémentaire à
la librairie jQuery !
Jquery mobile
Interface utilisateur pensée
pour un usage mobile avec
prise en compte des gestes et
des écrans tactiles
Simplicité d’utilisation.
Technologies HTML5 et
CSS
Personnalisable. Un thème roller
permet de créer son propre
thème très facilement.
Jason Cooper, Developing a Prototype Library WebApp for Mobile Devices, Ariadne, Juin 2013
Permet de créer facilement des
applications Web cross-
plateforme (compatibles tous
les navigateurs, responsive
design, multiplateforme)

18. Application hybride
Avantages
Une seule app
déployée sur
plusieurs OS
Accès aux API
natives
HTML5, JS,
CSS3
Inconvénients
MaintenanceUX et design
non natif
Inconvénients
des
applications

20. @joehewitt
Dear iPhone/iPad web designers: the browser
already has a back button, so your site doesn’t
need one. don’t copy apps just to imitate.
‟

21. Fragmentation des
terminaux

22. Source : http://opensignal.com/reports/fragmentation.php

23. CyberHades, google glass, Flickr, by-sa
SamsungTomorrow, GALAXY Gear, Flickr, by-nc-sa

24. Ethan Marcotte, Responsive Web Design
Fragmenting our content across different
“device-optimized” experiences is a losing
proposition, or at least an unsustainable one.
‟

25. Sortir du
cadre
djwudi, Before: Old, dying 17" CRT, Flickr - by-nc-sa

26. John Allsopp, A Dao of Web Design, 2000
The control which designers know in the print
medium, and often desire in the web medium, is
simply a function of the limitation of the printed
page. We should embrace the fact that the web
doesn’t have the same constraints, and design
for this flexibility.
‟

27. Jeremy Keith, «Context» adactio
For over a decade, we have
pretended that there’s a mythical
perfect size that every person will
be using
‟

28. Stephen Hay, The Haystack
There is no mobile web. There
is only The Web, which we
view in different ways‟

29. Brad Frost, Mobile-First Responsive Web Design

31. Stephanie Rieger
We need to make smarter content not
smarter containers
‟

32. Veronica Erb, Friday 2:45pm, The Myths of Mobile Context #ias12 @globalmoxie, Flickr, by-nc-sa
Au delà des mythes

33. Les horaires
Quels services/contenus pour
un site mobile de bibliothèque
1 Plan et accès2
Recherche simple4
Compte lecteur
5
Formulaire de contact 6
Actualités3

34. Les utilisateurs de mobiles
sont pressés et distraits
1 Mobile = Moins2
La multiplication des
gestuelles ou clics
sont le diable
4
«Il nous faut un site web mobile !»
5
Mobile = Apps 6
«Complexité» est
un vilain mot
3Les CMS et les APIs sont
pour les geeks 7
7 croyances à dépasser
Source : Josh Clark , The Seven Deadly Myths of Mobile, 2012

35. Stéphanie Walter, Content is like water, CC BY-SA

36. Get your content ready to
go anywhere because it’s
going to go everywhere‟ Brad Frost, For a Future-Friendly Web

38. Ethan Marcotte, Responsive Web Design
Rather than tailoring disconnected designs to
each of an ever-increasing number of web
devices, we can treat them as facets of the same
experience
‟

42. Newton icon par Mark bauer, Dribbble
Splorp, HTML5 vs Newton: The Boston Globe, Flickr

43. Trent Walton, Fit To Scale
My love for responsive centers around the idea
that my website will meet you wherever you are
from mobile to full-blown desktop and anywhere
in between.
‟

46. 1. «Mobile first»

47. Petite graine
deviendra...
Patricia, Silence ça pousse, Flickr, by-nc-sa

48. Brad Frost, Mobile-First Responsive Web Design

49. Inspirez-vous !HGK handmade, Little patchwork WIP, Flickr, by-nc-sa

50. Sauce Babilonia, Mobile first, Flickr, by-nc
Maquettez
votre projet !

51. 2. Grilles fluides
Pulpolux, Protective net, Flickr, by-nc

52. We should start thinking about layout as an
enhancement
‟ Ethan Marcotte

53. Ethan Marcotte, Fluid Grids
Target ÷ Context = Result
‟

54. %

55. 940px
720px 220px

56. 940px
720px 220px
76.6% 23.4%
100%

57. .left {
float: left;
width: 76.6%; }
.right {
float: right;
width: 23.4%; }

58. Système de grilles de Skeleton

59. 3. Media fluides
Priit Kallas, Splash (fluid mechanics), Wikimedia,

60. em

61. img,video {
max-width:100%;
height: auto; }

65. 4. Media Queries

66. Smartphone (portrait) 320px
Smartphone (paysage) 480px
Tablette 7’ (portrait) 768px
Tablette 10’ (portrait) 768px
Tablette 10’ (paysage) 1024px
Écran large 1200px
Les points de rupture

68. <link rel=“stylesheet” type=“text/css”
href=mobile.css” media=“screen and
max-width:480px)” />

69. /* Smartphone mode portrait */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* Smartphone mode paysage */
@media only screen and (min-width : 321px) {
/* Styles */
}

70. /* Tablette mode portrait */
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation :
portrait) {
/* Styles */
}
/* Tablette mode paysage */
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation :
landscape) {
/* Styles */
}

71. Assurer la compatibilité avec les anciennes
versions des navigateurs tels qu’Internet
Explorer

72. 3. Une question
de performances
brian hefele, speed limit 10, Flickr, by-nc

73. Responsive design
Avantages
Multi
Plate-formes
+ Évolutif
+ Pérenne
Un seul
ensemble
d’URIs
SEO ++
Inconvénients
Dev
+ exigeant
+ long
Délicat dans le
cadre d’une
refonte
Orienté
contenu
Gestion des
perfs
Maintenance

75. Les frameworks
foundation.zurb.comgetbootstrap.com
Comparatif : http://responsive.vermilion.com/compare.php

77. Testez votre design
http://www.webdesignerdepot.com/2013/07/how-to-test-
responsive-designs-for-free/
Touring Club..., Crash-test de compatibilité - Kompatibilitätscrashtest, Flickr, by-nc

78. Matthew Reidsma, LOL,Github - https://github.com/mreidsma/lol
Reidsma, Matthew. « Responsive Web Design for Libraries: Beyond the Mobile Web ». Books
and Contributions to Books (1 mars 2013). http://scholarworks.gvsu.edu/library_books/5.

83. Liste de sites
académiques et de
bibliothèques
Eric Rumsey, Responsive Design Sites: Higher Ed, Libraries, Notables

84. Reste un problème de taille :
Les bibliothèques ne maîtrisent pas la
totalité des contenus/services offerts