en bibliothegraveque

jsicotStage ENSSIB - Sept 2013

ampErgonomie web mobile

Vous et votre mobile

Christian Tan My smartphone is smarter than you Flickr by-nc-sa

Vous et votre mobile

Christian Tan My smartphone is smarter than you Flickr by-nc-sa

15M

6M 4M

Source GFK et Gartner Mai 2013

38 des franccedilais possegravedent un smartphone au 1er semestre 2012Source Google Mai 2012

60 Taux de peacuteneacutetration envisageacute pour lrsquoEurope agrave lrsquohorizon 2015Source Morgan Stanley Research Juin 2012

251M de mobinautes moisen FranceSource Meacutediameacutetrie Juin 2013

83 du trafic internet Source GS StatsCounter MyFanGroup 2013

1 du trafic internet en 2011

4 du trafic internet en 2012

98 Agrave la maison79 Au travail76 En deacuteplacement

76 Dans un magasin65 Dans les transports62 Au cafeacute

45 Chez le meacutedecin44 Dans les aeacuteroports42 Lors drsquoeacuteveacutenements sociaux26 En cours

Source Google Notre planegravete mobile France Mai 2012

85Des utilisateurs utilisent leur smartphone pour rechercher des informations locales

Source Google Notre planegravete mobile France Mai 2012

Proposer une expeacuterience utilisateur diffeacuterente

Youflavio minority-report-omg-02 Flickr by-sa

38 des franccedilais possegravedent un smartphone au 1er semestre 2012Source Google Mai 2012

60 Taux de peacuteneacutetration envisageacute pour lrsquoEurope agrave lrsquohorizon 2015Source Morgan Stanley Research Juin 2012

251M de mobinautes moisen FranceSource Meacutediameacutetrie Juin 2013

83 du trafic internet Source GS StatsCounter MyFanGroup 2013

1 du trafic internet en 2011

4 du trafic internet en 2012

98 Agrave la maison79 Au travail76 En deacuteplacement

76 Dans un magasin65 Dans les transports62 Au cafeacute

45 Chez le meacutedecin44 Dans les aeacuteroports42 Lors drsquoeacuteveacutenements sociaux26 En cours

Source Google Notre planegravete mobile France Mai 2012

85Des utilisateurs utilisent leur smartphone pour rechercher des informations locales

Source Google Notre planegravete mobile France Mai 2012

Proposer une expeacuterience utilisateur diffeacuterente

Youflavio minority-report-omg-02 Flickr by-sa

251M de mobinautes moisen FranceSource Meacutediameacutetrie Juin 2013

83 du trafic internet Source GS StatsCounter MyFanGroup 2013

1 du trafic internet en 2011

4 du trafic internet en 2012

98 Agrave la maison79 Au travail76 En deacuteplacement

76 Dans un magasin65 Dans les transports62 Au cafeacute

45 Chez le meacutedecin44 Dans les aeacuteroports42 Lors drsquoeacuteveacutenements sociaux26 En cours

Source Google Notre planegravete mobile France Mai 2012

85Des utilisateurs utilisent leur smartphone pour rechercher des informations locales

Source Google Notre planegravete mobile France Mai 2012

Proposer une expeacuterience utilisateur diffeacuterente

Youflavio minority-report-omg-02 Flickr by-sa

1 du trafic internet en 2011

4 du trafic internet en 2012

98 Agrave la maison79 Au travail76 En deacuteplacement

76 Dans un magasin65 Dans les transports62 Au cafeacute

45 Chez le meacutedecin44 Dans les aeacuteroports42 Lors drsquoeacuteveacutenements sociaux26 En cours

Source Google Notre planegravete mobile France Mai 2012

85Des utilisateurs utilisent leur smartphone pour rechercher des informations locales

Source Google Notre planegravete mobile France Mai 2012

Proposer une expeacuterience utilisateur diffeacuterente

Youflavio minority-report-omg-02 Flickr by-sa

98 Agrave la maison79 Au travail76 En deacuteplacement

76 Dans un magasin65 Dans les transports62 Au cafeacute

45 Chez le meacutedecin44 Dans les aeacuteroports42 Lors drsquoeacuteveacutenements sociaux26 En cours

Source Google Notre planegravete mobile France Mai 2012

85Des utilisateurs utilisent leur smartphone pour rechercher des informations locales

Source Google Notre planegravete mobile France Mai 2012

Proposer une expeacuterience utilisateur diffeacuterente

Youflavio minority-report-omg-02 Flickr by-sa

85Des utilisateurs utilisent leur smartphone pour rechercher des informations locales

Source Google Notre planegravete mobile France Mai 2012

Proposer une expeacuterience utilisateur diffeacuterente

Youflavio minority-report-omg-02 Flickr by-sa

Proposer une expeacuterience utilisateur diffeacuterente

Youflavio minority-report-omg-02 Flickr by-sa

Les horaires

Quels servicescontenus pour un site mobile de bibliothegraveque

1 Plan et accegraves2

Recherche simple4

Compte lecteur

5

Formulaire de contact 6

Actualiteacutes3Bases de donneacutees compatibles mobile

7

Que dire des solutions

Application nativeAvantages

Meilleureinteacutegration

graphique et mateacuterielle

Visibilteacute +grace aux markets

Meilleuresperformances

Inconveacutenients

Doit ecirctre teacuteleacutechargeacutee

Termes et conditions

des markets1 app OS Deacuteveloppement

+ complexe (SDK)

Que dire des solutions

Application nativeAvantages

Meilleureinteacutegration

graphique et mateacuterielle

Visibilteacute +grace aux markets

Meilleuresperformances

Inconveacutenients

Doit ecirctre teacuteleacutechargeacutee

Termes et conditions

des markets1 app OS Deacuteveloppement

+ complexe (SDK)

Application nativeAvantages

Meilleureinteacutegration

graphique et mateacuterielle

Visibilteacute +grace aux markets

Meilleuresperformances

Inconveacutenients

Doit ecirctre teacuteleacutechargeacutee

Termes et conditions

des markets1 app OS Deacuteveloppement

+ complexe (SDK)

Web AppAvantages

MultiPlate-formes

Maintenance + aiseacutee

Full webHTML5

Inconveacutenients

Maintenancedoubleacutee

Ne peut pas utiliser les

APIs natives(APN etc)

URIs multiples2 sites

Site mobile+ pauvre que

lrsquooriginal

Framework compleacutementaire agrave la librairie jQuery

Jquery mobile

Interface utilisateur penseacutee pour un usage mobile avec prise en compte des gestes et des eacutecrans tactiles

Simpliciteacute drsquoutilisation Technologies HTML5 et CSS

Personnalisable Un thegraveme roller permet de creacuteer son propre thegraveme tregraves facilement

Jason Cooper Developing a Prototype Library WebApp for Mobile Devices Ariadne Juin 2013

Permet de creacuteer facilement des applications Web cross-

plateforme (compatibles tous les navigateurs responsive design multiplateforme)

Framework compleacutementaire agrave la librairie jQuery

Jquery mobile

Interface utilisateur penseacutee pour un usage mobile avec prise en compte des gestes et des eacutecrans tactiles

Simpliciteacute drsquoutilisation Technologies HTML5 et CSS

Personnalisable Un thegraveme roller permet de creacuteer son propre thegraveme tregraves facilement

Jason Cooper Developing a Prototype Library WebApp for Mobile Devices Ariadne Juin 2013

Permet de creacuteer facilement des applications Web cross-

plateforme (compatibles tous les navigateurs responsive design multiplateforme)

Application hybrideAvantages

Une seule app deacuteployeacutee sur plusieurs OS

Accegraves aux API natives

HTML5 JS CSS3

Inconveacutenients

MaintenanceUX et design non natif

Inconveacutenients des

applications

joehewitt

Dear iPhoneiPad web designers the browser already has a back button so your site doesnrsquot need one donrsquot copy apps just to imitate‟

Fragmentation des terminaux

Source httpopensignalcomreportsfragmentationphp

CyberHades google glass Flickr by-sa

SamsungTomorrow GALAXY Gear Flickr by-nc-sa

Ethan Marcotte Responsive Web Design

Fragmenting our content across different ldquodevice-optimizedrdquo experiences is a losing proposition or at least an unsustainable one‟

Sortir du cadre

djwudi Before Old dying 17 CRT Flickr - by-nc-sa

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 doesnrsquot have the same constraints and design for this flexibility

‟

Jeremy Keith laquoContextraquo adactio

For over a decade we have pretended that therersquos a mythical perfect size that every person will be using

‟

Stephen Hay The Haystack

There is no mobile web There is only The Web which we view in different ways‟

Brad Frost Mobile-First Responsive Web Design

Stephanie Rieger

We need to make smarter content not smarter containers‟

Veronica Erb Friday 245pm The Myths of Mobile Context ias12 globalmoxie Flickr by-nc-sa

Au delagrave des mythes

Veronica Erb Friday 245pm The Myths of Mobile Context ias12 globalmoxie Flickr by-nc-sa

Au delagrave des mythes

Les horaires

Quels servicescontenus pour un site mobile de bibliothegraveque

1 Plan et accegraves2

Recherche simple4

Compte lecteur

5

Formulaire de contact 6

Actualiteacutes3

Les utilisateurs de mobiles sont presseacutes et distraits 1 Mobile = Moins2

La multiplication des gestuelles ou clics sont le diable

4

laquoIl nous faut un site web mobile raquo

5

Mobile = Apps 6

laquoComplexiteacuteraquo est un vilain mot3Les CMS et les APIs sont

pour les geeks 7

7 croyances agrave deacutepasser

Source Josh Clark The Seven Deadly Myths of Mobile 2012

Les utilisateurs de mobiles sont presseacutes et distraits 1 Mobile = Moins2

La multiplication des gestuelles ou clics sont le diable

4

laquoIl nous faut un site web mobile raquo

5

Mobile = Apps 6

laquoComplexiteacuteraquo est un vilain mot3Les CMS et les APIs sont

pour les geeks 7

7 croyances agrave deacutepasser

Source Josh Clark The Seven Deadly Myths of Mobile 2012

Steacutephanie Walter Content is like water CC BY-SA

Get your content ready to go anywhere because itrsquos going to go everywhere‟Brad Frost For a Future-Friendly Web

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‟

Newton icon par Mark bauer Dribbble

Splorp HTML5 vs Newton The Boston Globe Flickr

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‟

1 laquoMobile firstraquo

Petite graine deviendra

Patricia Silence ccedila pousse Flickr by-nc-sa

Brad Frost Mobile-First Responsive Web Design

Inspirez-vous HGK handmade Little patchwork WIP Flickr by-nc-sa

Sauce Babilonia Mobile first Flickr by-nc

Maquettez votre projet

2 Grilles fluides

Pulpolux Protective net Flickr by-nc

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

Ethan Marcotte Fluid Grids

Target divide Context = Result ‟

940px

720px 220px

940px

720px 220px

766 234

100

left float leftwidth 766

right float right width 234

Systegraveme de grilles de Skeleton

940px

720px 220px

766 234

100

left float leftwidth 766

right float right width 234

Systegraveme de grilles de Skeleton

left float leftwidth 766

right float right width 234

Systegraveme de grilles de Skeleton

Systegraveme de grilles de Skeleton

3 Media fluides

Priit Kallas Splash (fluid mechanics) Wikimedia

em

imgvideo max-width100height auto

imgvideo max-width100height auto

4 Media Queries

Smartphone (portrait) 320px

Smartphone (paysage) 480px

Tablette 7rsquo (portrait) 768px

Tablette 10rsquo (portrait) 768px

Tablette 10rsquo (paysage) 1024px

Eacutecran large 1200px

Les points de rupture

ltlink rel=ldquostylesheetrdquo type=ldquotextcssrdquo href=mobilecssrdquo media=ldquoscreen and max-width480px)rdquo gt

Smartphone mode portrait media only screen and (max-width 320px)

Styles Smartphone mode paysage media only screen and (min-width 321px)

Styles

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

Assurer la compatibiliteacute avec les anciennes versions des navigateurs tels qursquoInternet

Explorer

ltlink rel=ldquostylesheetrdquo type=ldquotextcssrdquo href=mobilecssrdquo media=ldquoscreen and max-width480px)rdquo gt

Smartphone mode portrait media only screen and (max-width 320px)

Styles Smartphone mode paysage media only screen and (min-width 321px)

Styles

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

Assurer la compatibiliteacute avec les anciennes versions des navigateurs tels qursquoInternet

Explorer

Smartphone mode portrait media only screen and (max-width 320px)

Styles Smartphone mode paysage media only screen and (min-width 321px)

Styles

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

Assurer la compatibiliteacute avec les anciennes versions des navigateurs tels qursquoInternet

Explorer

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

Assurer la compatibiliteacute avec les anciennes versions des navigateurs tels qursquoInternet

Explorer

Assurer la compatibiliteacute avec les anciennes versions des navigateurs tels qursquoInternet

Explorer

3 Une question de performances

brian hefele speed limit 10 Flickr by-nc

Responsive designAvantages

MultiPlate-formes

+ Eacutevolutif+ Peacuterenne

Un seul ensemble

drsquoURIsSEO ++

Inconveacutenients

Dev + exigeant

+ long

Deacutelicat dans le cadre drsquoune

refonte

Orienteacute contenu

Gestion desperfs Maintenance

Les frameworks

foundationzurbcomgetbootstrapcom

Comparatif httpresponsivevermilioncomcomparephp

Testez votre design httpwwwwebdesignerdepotcom201307how-to-test-

responsive-designs-for-free

Touring Club Crash-test de compatibiliteacute - Kompatibilitaumltscrashtest Flickr by-nc

Matthew Reidsma LOLGithub - httpsgithubcommreidsmalol

Reidsma Matthew laquo Responsive Web Design for Libraries Beyond the Mobile Web raquo Books and Contributions to Books (1 mars 2013) httpscholarworksgvsuedulibrary_books5

Liste de sites acadeacutemiques et de

bibliothegraveques Eric Rumsey Responsive Design Sites Higher Ed Libraries Notables

Reste un problegraveme de taille

Les bibliothegraveques ne maicirctrisent pas la totaliteacute des contenusservices offerts