Ergonomie web et mobile en bibliothèque
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Ergonomie web et mobile en bibliothèque

on

  • 5,949 views

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

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

Statistics

Views

Total Views
5,949
Views on SlideShare
3,811
Embed Views
2,138

Actions

Likes
22
Downloads
40
Comments
2

7 Embeds 2,138

http://www.scoop.it 1288
http://www.iphone-entreprise.com 770
https://twitter.com 51
http://www.linkedin.com 24
http://cloud.feedly.com 2
http://ranksit.com 2
http://getpocket.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ergonomie web et mobile en bibliothèque Presentation Transcript

  • 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)
  • 13. 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
  • 14. 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)
  • 15. 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
  • 16. @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. ‟
  • 17. Fragmentation des terminaux
  • 18. Source : http://opensignal.com/reports/fragmentation.php
  • 19. CyberHades, google glass, Flickr, by-sa SamsungTomorrow, GALAXY Gear, Flickr, by-nc-sa
  • 20. Ethan Marcotte, Responsive Web Design Fragmenting our content across different “device-optimized” experiences is a losing proposition, or at least an unsustainable one. ‟
  • 21. Sortir du cadre djwudi, Before: Old, dying 17" CRT, Flickr - by-nc-sa
  • 22. 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. ‟
  • 23. Jeremy Keith, «Context» adactio For over a decade, we have pretended that there’s a mythical perfect size that every person will be using ‟
  • 24. Stephen Hay, The Haystack There is no mobile web. There is only The Web, which we view in different ways‟
  • 25. Brad Frost, Mobile-First Responsive Web Design
  • 26. Stephanie Rieger We need to make smarter content not smarter containers ‟
  • 27. Veronica Erb, Friday 2:45pm, The Myths of Mobile Context #ias12 @globalmoxie, Flickr, by-nc-sa Au delà des mythes
  • 28. 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
  • 29. 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
  • 30.  Stéphanie Walter, Content is like water, CC BY-SA
  • 31. Get your content ready to go anywhere because it’s going to go everywhere‟ Brad Frost, For a Future-Friendly Web
  • 32. 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 ‟
  • 33. Newton icon par Mark bauer, Dribbble Splorp, HTML5 vs Newton: The Boston Globe, Flickr
  • 34. 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. ‟
  • 35. 1. «Mobile first»
  • 36. Petite graine deviendra... Patricia, Silence ça pousse, Flickr, by-nc-sa
  • 37. Brad Frost, Mobile-First Responsive Web Design
  • 38. Inspirez-vous !HGK handmade, Little patchwork WIP, Flickr, by-nc-sa
  • 39. Sauce Babilonia, Mobile first, Flickr, by-nc Maquettez votre projet !
  • 40. 2. Grilles fluides Pulpolux, Protective net, Flickr, by-nc
  • 41. We should start thinking about layout as an enhancement ‟ Ethan Marcotte
  • 42. Ethan Marcotte, Fluid Grids Target ÷ Context = Result ‟
  • 43. %
  • 44. 940px 720px 220px
  • 45. 940px 720px 220px 76.6% 23.4% 100%
  • 46. .left { float: left; width: 76.6%; } .right { float: right; width: 23.4%; }
  • 47. Système de grilles de Skeleton
  • 48. 3. Media fluides Priit Kallas, Splash (fluid mechanics), Wikimedia,
  • 49. em
  • 50. img,video { max-width:100%; height: auto; }
  • 51. 4. Media Queries
  • 52. 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
  • 53. <link rel=“stylesheet” type=“text/css” href=mobile.css” media=“screen and max-width:480px)” />
  • 54. /* Smartphone mode portrait */ @media only screen and (max-width : 320px) { /* Styles */ } /* Smartphone mode paysage */ @media only screen and (min-width : 321px) { /* Styles */ }
  • 55. /* 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 */ }
  • 56. Assurer la compatibilité avec les anciennes versions des navigateurs tels qu’Internet Explorer
  • 57. 3. Une question de performances brian hefele, speed limit 10, Flickr, by-nc
  • 58. 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
  • 59. Les frameworks foundation.zurb.comgetbootstrap.com Comparatif : http://responsive.vermilion.com/compare.php
  • 60. 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
  • 61. 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.
  • 62. Liste de sites académiques et de bibliothèques Eric Rumsey, Responsive Design Sites: Higher Ed, Libraries, Notables
  • 63. Reste un problème de taille : Les bibliothèques ne maîtrisent pas la totalité des contenus/services offerts