8. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
MOBILE EXPERIENCE
80% OF CONSUMERS ACCESS
THE WEB VIA COMPUTERS
60% OF THEM USE
MOBILE DEVICES
Source: Google and the Mobile Marketing Association Survey, Late 2011
9. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
MOBILE EXPERIENCE
DISPLAY CON DIMENSIONI DIFFERENTI
10. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
MOBILE EXPERIENCE
CONSIDERARE FUTURI
UPDATE TECNOLOGICI
13. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
SMARTHPHONE VIEW - FIXED LAYOUT
Gulliver i
in Cambrig
his father i
then he r
14. I was the third of five sons.
He sent me to College in
Cambridge at fourteen
years old. Then he realize
that responsive design is
better than fixed layout on
mobile devices...
HEADER
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
SMARTHPHONE VIEW - RESPONSIVE LAYOUT
15. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
PERCHÈ DOVREI USARE UN APPROCCIO
RESPONSIVE PER I MIEI PROGETTI?
DESIGN USABILITY MARKET
17. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
DESIGN
DESKTOP MOBILE
960 PX 320 PX
LOGO
MENU
CONTENT
LOGO MENU
CONTENT SIDEBAR
FOOTER
FOOTER FOOTER
18. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
DESIGN
MODULAR
GRID
SYSTEM
21. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
USABILITY
CONTENT IS
THE KEY
sistema gerarchico prioritario
velocita d’accesso alle informazioni
accessibità
bassa percentuale d’errore
MOBILE DEVICES
22.
23. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
PENSA
GRANDE
IN
24. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
PENSA
PICCOLO
IN
25. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
USABILITY
PROBLEMA
Prenotare un tavolo per una
cena di lavoro al ristorante
più in della città.
AZIONI
1. Aprire il sito ufficiale del ristorante.
2. Accedere velocemente alla sezione contatti.
3. Recuperare il numero di telefono.
4. Avviare la chiamata e prenotare.
FLUID DESIGN THINKING
es. Posso fare a meno della foto dello
chef francese che cucina nella pagina
dei contatti?
INTERFACCIA
26. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
USABILITY
FIVE PEOPLE TRY TO FIGURE OUT THE NEW BLACKBERRY Z10
FONTE: MASHABLE
29. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
RESPONSIVE
FLUID
GRID & TYPO
30. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
FLUID
GRID & TYPO
700 PX 180 PX
TOTAL WIDTH IN PIXELS: 960PX
31. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
FLUID
GRID & TYPO
<div class = “wrapper”>
<div class = “blog”>
<div class = “content”>...</div>
<div class = “sidebar”>...</div>
</div>
</div>
wrapper = 960px
blog = 900px
content = 700px
sidebar = 180px
32. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
% EM
33. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
FLUID WRAPPER
.wrapper {
width = 90%;
margin = 30px auto;
}
valore di contesto arbitrario
34. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
OBIETTIVO / CONTESTO = UNITÀ RELATIVA
35. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
900 / 960 = 0,9375 % = 93,75 %
PERCENTUALE
VALORE RELATIVO
OBIETTIVO
CONTESTO
36. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
FLUID BLOG
.blog {
width = 93,75%;
margin = 0px auto;
}
valore calcolato
37. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
WRAPPER: 90%
BLOG: 93,75%
CONTENT: 77,7777778 % SIDEBAR: 20%
38. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
FLUID MARGINS & PADDING
MARGIN
Per fissare i margini di un elemento utilizzando un approccio fluido il
contesto è la larghezza del contenitore dell’elemento.
PADDING
Per fissare il padding di un elemento utilizzando un approccio fluido il
contesto è la larghezza dell’elemento stesso.
39. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
CONTENT: 77,7777778 % SIDEBAR: 20%
PADDING: 20 / 700 = ,028571429 = 2,8571429 %
40. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
FLUID TEXT
body {
font-size = 16px; /* 1em = 16px */
}
h1 {
font-size = 1,875em; /* 1em = 16px */
}
30 / 16 = 1,875
41. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
FLUID TEXT INHERITANCE
h1 {
font-size = 1,875em; /* 30/16 */
}
h1 a {
font-size = 0,333333333em; /* 10/30 */
}
10 / 30 = 0,333333333
42. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
FLUID
GRID & TYPO
FLUID
MEDIA
RESPONSIVE
43. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
FLUID MEDIA
.big-thumbnails {
max-width = 100%;
}
44. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
FLUID MEDIA .big-thumbnails {
max-width = 100%;
}
CONTENT: 77,7777778 % SIDEBAR: 20%
MAX-WIDTH: 100%
45. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
RESPONSIVE
FLUID
GRID & TYPO
FLUID
MEDIA
MEDIA
QUERIES
RESPONSIVE
46. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
DISPLAY CON DIMENSIONI DIFFERENTI
47. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
DISPLAY AREA
RENDERING SURFACE
48. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
49. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
MEDIA TYPES
all braille embossed handheld print
projection screen speech tty tv
50. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
MEDIA TYPES
<link rel="stylesheet" href="style.css" media="screen"/>
51. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
MEDIA TYPES
@media screen {
.big-thumbnails { max-width: 100%; }
}
52. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
MEDIA QUERIES
@media screen and (min-width: 1024px)
{
.big-thumbnails { max-width: 100%; }
}
53. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
MEDIA QUERIES TYPES
width height device-width device-height orientation
aspect-ratio device-aspect-ratio color color-index
54. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
MEDIA QUERIES TYPES
@media screen and (min-width: 480px) and (orientation: landscape)
{
...
}
74. WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RELATORE
MIRKO SANTANGELO
www.mirkosantangelo.com
Progettista grafico, Adobe Certified Expert e Beta Tester, si occupa prevalentemente di visual design
orientato alla comunicazione per clienti con rilevanza nazionale e internazionale. Il suo lavoro spazia
dalla costruzione di identità visive, marchi, icone ed interfacce per dispositivi mobili e desktop, graphic
design rivolto al settore pubblicitario ed editoriale fino alla manipolazione creativa delle immagini e la
post-produzione. Nel 2010 vince il concorso Adobe YouGC – Categoria White Papers, ed è stato
inserito dalla Siryus Cybernetic Corporation nella classifica Top 16 – Best Italian Digital Designer.
Collabora attivamente come autore per riviste e web magazine internazionali come PSDTuts+ e
Advanced Photoshop. CDO e Co-Founder di PhotoSpotLand.com.
Facebook: Mirko Santangelo Twitter: @mirkosantangelo
