1 / 23

Mobile web e responsive design: stato dell’arte e analisi del caso unipv.eu

UNIVERSITÀ DEGLI STUDI DI PAVIA Facoltà di Lettere e Filosofia, Scienze Politiche, Giurisprudenza, Ingegneria, Economia Corso di laurea in Comunicazione Professionale e Multimedialità. Mobile web e responsive design: stato dell’arte e analisi del caso unipv.eu Relatore: Prof. Marco Porta

farrah-galloway
Télécharger la présentation

Mobile web e responsive design: stato dell’arte e analisi del caso unipv.eu

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. UNIVERSITÀ DEGLI STUDI DI PAVIAFacoltà di Lettere e Filosofia, Scienze Politiche, Giurisprudenza, Ingegneria, EconomiaCorso di laurea in Comunicazione Professionale e Multimedialità Mobile web e responsive design: stato dell’arte e analisi del caso unipv.eu Relatore: Prof. Marco Porta Correlatore: Prof. Mauro Mosconi Tesi di laurea di Giulia Biasini Anno Accademico 2011/2012

  2. Mobile web: capabilities - Italy: the european Country with more smartphones - 15 millions internet accounts - The m-commerce is constantly growing - Good ROI of mobile advertisement

  3. Mobile web: problems - 59% mobile users’ average success rate - Difficult input - Slow download - Mis-designed websites

  4. Mobile Usability The effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments*. *Usability - ISO 9241 definition

  5. Mobile content: the design - Information design: lesscontents, one-column layout - Interaction design:input minimization, feedback - Visual design:affordance, visualframework

  6. Cases comparison

  7. Cases comparison: Wikipedia • Information: verticalhierarchy,foldedforms • Interaction: buttonswith • differentfunctionstooclose • Visual: goodvisualframework

  8. Cases comparison: Facebook • Information: long scrolling, • friends in alphabeticalorder • Interaction: closebottonswith • differentfunctions • Visual design: no affordance

  9. Cases comparison: Libero - Information: progressive disclosure, verticalhierarchy, little STM loading - Interaction:very easy input - Visual: medium affordance, goodvisualframework

  10. Implementation

  11. Implementation: four methods • Laissez-faire: no usability • No Styling: no usability • Media queries: no info and • navigation design • Mobile version: mobile • capabilities

  12. Responsive web design - Multiplatform site - Site abletoadaptitseftto the context in whichitisviewed - Flexibleimages, contents and grid-based layout

  13. Responsive web design

  14. Responsive web design @media only screen and (max-width: 980px) and (min-width: 821px) @media only screen and (max-width: 820px) and (min-width: 621px) @media only screen and (max-width: 620px) and (min-width: 501px) @media only screen and (max-width: 500px) and (min-width: 341px) @media only screen and (max-width: 340px) and (min-width: 5px) 

  15. Case study unipv.eu: desktop

  16. Case study unipv.eu: tablet

  17. Case study unipv.eu: mobile

  18. Case study unipv.eu: before and after

  19. Case studyunipv.eu: before and after

  20. Case study unipv.eu: before and after

  21. Case study unipv.eu: before and after

  22. Conclusion - Mobile web: capabilities vs problems - Mobile content: the design - Cases comparison - Implementation: four methods - Responsive web design

More Related