Presentation is loading. Please wait.

Presentation is loading. Please wait.

UNIVERSITÀ DEGLI STUDI DI PAVIA Facoltà di Lettere e Filosofia, Scienze Politiche, Giurisprudenza, Ingegneria, Economia Corso di laurea in Comunicazione.

Similar presentations


Presentation on theme: "UNIVERSITÀ DEGLI STUDI DI PAVIA Facoltà di Lettere e Filosofia, Scienze Politiche, Giurisprudenza, Ingegneria, Economia Corso di laurea in Comunicazione."— Presentation transcript:

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: 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)

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

20

21

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

23


Download ppt "UNIVERSITÀ DEGLI STUDI DI PAVIA Facoltà di Lettere e Filosofia, Scienze Politiche, Giurisprudenza, Ingegneria, Economia Corso di laurea in Comunicazione."

Similar presentations


Ads by Google