1. 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 dellarte 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: - Information design: less contents, one-column layout - Interaction design: - Interaction design: input minimization, feedback - Visual design: - Visual design: affordance, visual framework

6. Cases comparison

7. Cases comparison: Wikipedia Information - Information: vertical hierarchy, folded forms - Interaction: - Interaction: buttons with different functions too close Visual - Visual: good visual framework

8. Cases comparison: Facebook -Information: -Information: long scrolling, friends in alphabetical order -Interaction: -Interaction: close bottons with different functions -Visual design -Visual design: no affordance

9. Cases comparison: Libero Information - Information: progressive disclosure, vertical hierarchy, little STM loading - Interaction: - Interaction: very easy input Visual - Visual: medium affordance, good visual framework

10. Implementation

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

12. Responsive web design - Multiplatform site adapt - Site able to adapt itseft to the context in which it is viewed - Flexible - Flexible images, contents and grid-based layout

13. Responsive web design

14. @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

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