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

GULLIVER E IL DESIGN
Gulliver's Travels, by Jonathan Swift,
released in 1700

LILLIPUZIANI E
GIGANTI

COSA ACCOMUNA GULLIVER
AI MODERNI DESIGNERS?

ENTRAMBI DEVONO
ADATTARSI AL CONTESTO

MOBILE EXPERIENCE

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

MOBILE EXPERIENCE
DISPLAY CON DIMENSIONI DIFFERENTI

MOBILE EXPERIENCE
CONSIDERARE FUTURI
UPDATE TECNOLOGICI

RESPONSIVE DESIGN

RESPONSIVE DESIGN
HEADER
CONTENT SIDEBAR
FOOTER
BROWSER VIEW - FIXED LAYOUT

RESPONSIVE DESIGN
SMARTHPHONE VIEW - FIXED LAYOUT
Gulliver i
in 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
RESPONSIVE DESIGN
SMARTHPHONE VIEW - RESPONSIVE LAYOUT

RESPONSIVE DESIGN
PERCHÈ DOVREI USARE UN APPROCCIO
RESPONSIVE PER I MIEI PROGETTI?
DESIGN USABILITY MARKET

DESIGN

RESPONSIVE DESIGN
DESIGN
DESKTOP MOBILE
960 PX 320 PX
LOGO
MENU
CONTENT
LOGO MENU
CONTENT SIDEBAR
FOOTER
FOOTER FOOTER

RESPONSIVE DESIGN
DESIGN
MODULAR
GRID
SYSTEM

RESPONSIVE DESIGN
DESIGN
FLUID
DESIGN
THINKING

USABILITY

RESPONSIVE DESIGN
USABILITY
CONTENT IS
THE KEY
sistema gerarchico prioritario
velocita d’accesso alle informazioni
accessibità
bassa percentuale d’errore
MOBILE DEVICES

RESPONSIVE DESIGN
PENSA
GRANDE
IN

RESPONSIVE DESIGN
PENSA
PICCOLO
IN

RESPONSIVE DESIGN
USABILITY
PROBLEMA
Prenotare un tavolo per una
cena di lavoro al ristorante
più in della città.
AZIONI
1. Aprire il sito uﬃciale 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

RESPONSIVE DESIGN
USABILITY
FIVE PEOPLE TRY TO FIGURE OUT THE NEW BLACKBERRY Z10
FONTE: MASHABLE

MARKET
THEMEFOREST MOJO THEMES
CODE CANYON
WPMART
WOO THEMES
STUDIO PRESS

CODING

HOW TO CODING A RESPONSIVE LAYOUT
RESPONSIVE
FLUID
GRID & TYPO

FLUID
GRID & TYPO
700 PX 180 PX
TOTAL WIDTH IN PIXELS: 960PX

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

% EM

FLUID WRAPPER
.wrapper {
width = 90%;
margin = 30px auto;
}
valore di contesto arbitrario

OBIETTIVO / CONTESTO = UNITÀ RELATIVA

900 / 960 = 0,9375 % = 93,75 %
PERCENTUALE
VALORE RELATIVO
OBIETTIVO
CONTESTO

FLUID BLOG
.blog {
width = 93,75%;
margin = 0px auto;
}
valore calcolato

WRAPPER: 90%
BLOG: 93,75%
CONTENT: 77,7777778 % SIDEBAR: 20%

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.

PADDING: 20 / 700 = ,028571429 = 2,8571429 %

FLUID TEXT
body {
font-size = 16px; /* 1em = 16px */
}
h1 {
font-size = 1,875em; /* 1em = 16px */
}
30 / 16 = 1,875

FLUID TEXT INHERITANCE
h1 {
font-size = 1,875em; /* 30/16 */
}
h1 a {
font-size = 0,333333333em; /* 10/30 */
}
10 / 30 = 0,333333333

FLUID
GRID & TYPO
FLUID
MEDIA
RESPONSIVE

FLUID MEDIA
.big-thumbnails {
max-width = 100%;
}

FLUID MEDIA .big-thumbnails {
max-width = 100%;
}
MAX-WIDTH: 100%

RESPONSIVE
FLUID
GRID & TYPO
FLUID
MEDIA
MEDIA
QUERIES
RESPONSIVE

DISPLAY CON DIMENSIONI DIFFERENTI

DISPLAY AREA
RENDERING SURFACE

MEDIA TYPES
all braille embossed handheld print
projection screen speech tty tv

MEDIA TYPES
<link rel="stylesheet" href="style.css" media="screen"/>

MEDIA TYPES
@media screen {
.big-thumbnails { max-width: 100%; }
}

MEDIA QUERIES
@media screen and (min-width: 1024px)
{
}

MEDIA QUERIES TYPES
width height device-width device-height orientation
aspect-ratio device-aspect-ratio color color-index

MEDIA QUERIES TYPES
@media screen and (min-width: 480px) and (orientation: landscape)
{
...
}

VIEWPORT

VIEWPORT
980 PX
LAYOUT RENDERING

VIEWPORT
CANVAS SCALING
<meta name="viewport" content="initial-scale=1.0" width="device-width"/>
LIVELLO ZOOM 100% CANVAS WIDTH

BREAKPOINTS

BREAKPOINTS
320 600 768
480
1024

BREAKPOINTS
1200
1400

COMPATIBILITÀ

COMPATIBILITÀ
BROWSERS SUPPORT

FLUID MEDIA - IE FIX
.big-thumbnails {
width = 100%;
}

COMPATIBILITÀ
RESPOND.JS
developed by Scott Jehl
JS

COMPATIBILITÀ
RESPOND.JS IMPLEMENTATION
@media screen and (min-width: 1024px)
{
} /*/mediaquery*/

COMPATIBILITÀ
E SE JAVASCRIPT È DISATTIVATO?

RESPONSIVE SITES

RESPONSIVE SITES
thenextweb.com - new inspiring responsive design websites

RISORSE

COMPATIBILITÀ
RESPONSIVE FRAMEWORKS
Titan Framework
Foundation
Responsive Grid System
Ingrid
Bootstrap
Gumby
Less+ Framework

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

COMPATIBILITÀ
RESPONSIVE TESTING
http://www.responsinator.com
http://lab.maltewassermann.com/viewport-resizer/
http://screenqueri.es
Aptus

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

Responsive Design - Wordcamp 2013

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (13)

Ähnlich wie Responsive Design - Wordcamp 2013

Ähnlich wie Responsive Design - Wordcamp 2013 (13)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Responsive Design - Wordcamp 2013