Responsive Design - Wordcamp 2013
74
Alla scoperta del Responsive Web Design per WordPress di Mirko Santangelo WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
-
Upload
mirko-santangelo -
Category
Design
-
view
769 -
download
0
description
Transcript of Responsive Design - Wordcamp 2013
Alla scoperta del Responsive Web Design per WordPress
di Mirko Santangelo
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
GULLIVER’S TRAVELS
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
GULLIVER E IL DESIGN
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
Gulliver's Travels, by Jonathan Swift,released in 1700
GULLIVER E IL DESIGN
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
LILLIPUZIANI EGIGANTI
GULLIVER E IL DESIGN
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
COSA ACCOMUNA GULLIVERAI MODERNI DESIGNERS?
GULLIVER E IL DESIGN
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
ENTRAMBI DEVONOADATTARSI AL CONTESTO
MOBILE EXPERIENCE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
MOBILE EXPERIENCE
80% OF CONSUMERS ACCESS THE WEB VIA COMPUTERS
60% OF THEM USEMOBILE DEVICES
Source: Google and the Mobile Marketing Association Survey, Late 2011
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
MOBILE EXPERIENCE
DISPLAY CON DIMENSIONI DI!ERENTI
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
MOBILE EXPERIENCE
CONSIDERARE FUTURI UPDATE TECNOLOGICI
RESPONSIVE DESIGN
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
HEADER
CONTENT SIDEBAR
FOOTER
BROWSER VIEW - "XED LAYOUT
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
SMARTHPHONE VIEW - "XED LAYOUT
Gulliver iin Cambrig his father i then he r
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
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
PERCHÈ DOVREI USARE UN APPROCCIO RESPONSIVE PER I MIEI PROGETTI?
DESIGN USABILITY MARKET
DESIGN
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
DESIGN
DESKTOP MOBILE
960 PX 320 PX
LOGO
MENU
CONTENT
LOGO MENU
CONTENT SIDEBAR
FOOTERFOOTER FOOTER
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
DESIGN
MODULAR GRID SYSTEM
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
DESIGN
#UID DESIGNTHINKING
USABILITY
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
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
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
PENSAGRANDE
IN
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
PENSAPICCOLO
IN
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
USABILITY
PROBLEMAPrenotare un tavolo per una cena di lavoro al ristorante più in della città.
AZIONI1. Aprire il sito ufficiale del ristorante.
2. Accedere velocemente alla sezione contatti.
3. Recuperare il numero di telefono.
4. Avviare la chiamata e prenotare.
#UID DESIGN THINKINGes. Posso fare a meno della foto dello chef francese che cucina nella pagina dei contatti?
INTERFACCIA
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE DESIGN
USABILITY
FIVE PEOPLE TRY TO FIGURE OUT THE NEW BLACKBERRY Z10FONTE: MASHABLE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
MARKET
THEMEFOREST MOJO THEMES
CODE CANYONWPMART
WOO THEMESSTUDIO PRESS
CODING
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
RESPONSIVE
#UID GRID & TYPO
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
#UID GRID & TYPO
700 PX 180 PX
TOTAL WIDTH IN PIXELS: 960PX
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
#UID GRID & TYPO
<div class = “wrapper”>
<div class = “blog”><div class = “content”>...</div><div class = “sidebar”>...</div>
</div>
</div>
wrapper = 960pxblog = 900pxcontent = 700pxsidebar = 180px
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
% EM
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
#UID WRAPPER
.wrapper {width = 90%;margin = 30px auto;
}
valore di contesto arbitrario
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
OBIETTIVO / CONTESTO = UNITÀ RELATIVA
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
900 / 960 = 0,9375 % = 93,75 %
PERCENTUALE
VALORE RELATIVOOBIETTIVO
CONTESTO
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
#UID BLOG
.blog {width = 93,75%;margin = 0px auto;
}
valore calcolato
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
WRAPPER: 90%
BLOG: 93,75%
CONTENT: 77,7777778 % SIDEBAR: 20%
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
#UID MARGINS & PADDING
MARGINPer fissare i margini di un elemento utilizzando un approccio fluido il contesto è la larghezza del contenitore dell’elemento.
PADDINGPer fissare il padding di un elemento utilizzando un approccio fluido il contesto è la larghezza dell’elemento stesso.
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
CONTENT: 77,7777778 % SIDEBAR: 20%
PADDING: 20 / 700 = ,028571429 = 2,8571429 %
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
#UID TEXT
body {font-size = 16px; /* 1em = 16px */
}
h1 {font-size = 1,875em; /* 1em = 16px */
}
30 / 16 = 1,875
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
#UID TEXT INHERITANCE
h1 {font-size = 1,875em; /* 30/16 */
}
h1 a {font-size = 0,333333333em; /* 10/30 */
}
10 / 30 = 0,333333333
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
#UID MEDIA
#UID GRID & TYPO
#UID MEDIA
RESPONSIVE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
#UID MEDIA
.big-thumbnails {max-width = 100%;
}
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
#UID MEDIA .big-thumbnails {max-width = 100%;
}
CONTENT: 77,7777778 % SIDEBAR: 20%
MAX-WIDTH: 100%
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
#UID MEDIARESPONSIVE
#UID GRID & TYPO
#UID MEDIA
MEDIA QUERIES
RESPONSIVE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
DISPLAY CON DIMENSIONI DI!ERENTI
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
DISPLAY AREA
RENDERING SURFACE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
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
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
MEDIA TYPES
<link rel="stylesheet" href="style.css" media="screen"/>
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
MEDIA TYPES
@media screen {
.big-thumbnails { max-width: 100%; }
}
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%; }
}
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
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)
{
...
}
VIEWPORT
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
VIEWPORT
980 PX
LAYOUT RENDERING
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
VIEWPORT
CANVAS SCALING
<meta name="viewport" content="initial-scale=1.0" width="device-width"/>
LIVELLO ZOOM 100% CANVAS WIDTH
BREAKPOINTS
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
BREAKPOINTS
320 600 768
4801024
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
BREAKPOINTS
1200
1400
COMPATIBILITÀ
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
COMPATIBILITÀ
BROWSERS SUPPORT
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
COMPATIBILITÀ
BROWSERS SUPPORT
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
HOW TO CODING A RESPONSIVE LAYOUT
#UID MEDIA - IE "X
.big-thumbnails {width = 100%;
}
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
COMPATIBILITÀ
RESPOND.JSdeveloped by Scott Jehl
JS
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
COMPATIBILITÀ
RESPOND.JS IMPLEMENTATION
@media screen and (min-width: 1024px) {
.big-thumbnails { max-width: 100%; }
} /*/mediaquery*/
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
COMPATIBILITÀ
E SE JAVASCRIPT È DISATTIVATO?
RESPONSIVE SITES
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RESPONSIVE SITES
thenextweb.com - new inspiring responsive design websites
RISORSE
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
COMPATIBILITÀ
RESPONSIVE FRAMEWORKS
Titan Framework
Foundation
Responsive Grid System
Ingrid
Bootstrap
Gumby
Less+ Framework
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
COMPATIBILITÀ
RESPONSIVE IMAGES & MEDIA
adaptive-images.com
Julius Design - Responsive web design i migliori tutorial risorse
HeyGrady - Responsive images without javascript
Css Tricks - Which responsive images solution should you use?
Mark Tyrrell - Blueberry Slider
Viljamis - Responsive Slides
Wowslider
Speckyboy - Responsive Image
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
COMPATIBILITÀ
RESPONSIVE TESTING
http://www.responsinator.com
http://lab.maltewassermann.com/viewport-resizer/
http://screenqueri.es
Aptus
WORDCAMP BOLOGNA - 9 FEBBRAIO 2013 @WORDCAMPBOLOGNA # WPCAMPBO13
RELATORE
MIRKO SANTANGELOwww.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
![[ITALIAN] wpXtreme - Wordcamp Bologna 2013](https://static.fdocumenti.com/doc/165x107/588498a81a28ab26058b5cdb/italian-wpxtreme-wordcamp-bologna-2013.jpg)
![WordPress Community [italian] - WordCamp Milano 2011](https://static.fdocumenti.com/doc/165x107/5484bb05b4af9f9b0d8b4c4e/wordpress-community-italian-wordcamp-milano-2011.jpg)
