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

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

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

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

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

Cases comparison

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

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

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

Implementation

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

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

Responsive web design

@media only screen and (max-width: 980px) and (min-width: only screen and (max-width: 820px) and (min-width: only screen and (max-width: 620px) and (min-width: only screen and (max-width: 500px) and (min-width: only screen and (max-width: 340px) and (min-width: 5px)

Case study unipv.eu: desktop

Case study unipv.eu: tablet

Case study unipv.eu: mobile

Case study unipv.eu: before and after

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