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 EGIGANTI

COSA ACCOMUNA GULLIVERAI MODERNI DESIGNERS?

ENTRAMBI DEVONOADATTARSI AL CONTESTO

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

MOBILE EXPERIENCE

DISPLAY CON DIMENSIONI DI!ERENTI

MOBILE EXPERIENCE

CONSIDERARE FUTURI UPDATE TECNOLOGICI

RESPONSIVE DESIGN

HEADER

CONTENT SIDEBAR

FOOTER

BROWSER VIEW - "XED LAYOUT

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

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

CONTENT

LOGO MENU

CONTENT SIDEBAR

FOOTERFOOTER FOOTER

RESPONSIVE DESIGN

DESIGN

MODULAR GRID SYSTEM

RESPONSIVE DESIGN

DESIGN

#UID DESIGNTHINKING

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

PENSAGRANDE

RESPONSIVE DESIGN

PENSAPICCOLO

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

RESPONSIVE DESIGN

USABILITY

FIVE PEOPLE TRY TO FIGURE OUT THE NEW BLACKBERRY Z10FONTE: MASHABLE

MARKET

THEMEFOREST MOJO THEMES

CODE CANYONWPMART

WOO THEMESSTUDIO PRESS

CODING

HOW TO CODING A RESPONSIVE LAYOUT

RESPONSIVE

#UID GRID & TYPO

700 PX 180 PX

TOTAL WIDTH IN PIXELS: 960PX

#UID GRID & TYPO

</div>

wrapper = 960pxblog = 900pxcontent = 700pxsidebar = 180px

#UID WRAPPER

.wrapper {width = 90%;margin = 30px auto;

valore di contesto arbitrario

OBIETTIVO / CONTESTO = UNITÀ RELATIVA

900 / 960 = 0,9375 % = 93,75 %

PERCENTUALE

VALORE RELATIVOOBIETTIVO

CONTESTO

#UID BLOG

.blog {width = 93,75%;margin = 0px auto;

valore calcolato

WRAPPER: 90%

BLOG: 93,75%

CONTENT: 77,7777778 % SIDEBAR: 20%

#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.

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

#UID TEXT

body {font-size = 16px; /* 1em = 16px */

h1 {font-size = 1,875em; /* 1em = 16px */

30 / 16 = 1,875

#UID TEXT INHERITANCE

h1 {font-size = 1,875em; /* 30/16 */

h1 a {font-size = 0,333333333em; /* 10/30 */

10 / 30 = 0,333333333

#UID MEDIA

#UID GRID & TYPO

#UID MEDIA

RESPONSIVE

#UID MEDIA

.big-thumbnails {max-width = 100%;

#UID MEDIA .big-thumbnails {max-width = 100%;

MAX-WIDTH: 100%

#UID MEDIARESPONSIVE

#UID GRID & TYPO

#UID MEDIA

MEDIA QUERIES

RESPONSIVE

DISPLAY CON DIMENSIONI DI!ERENTI

DISPLAY AREA

RENDERING SURFACE

MEDIA TYPES

all braille embossed handheld print

projection screen speech tty tv

MEDIA TYPES

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

980 PX

LAYOUT RENDERING

VIEWPORT

CANVAS SCALING

LIVELLO ZOOM 100% CANVAS WIDTH

BREAKPOINTS

320 600 768

4801024

BREAKPOINTS

COMPATIBILITÀ

BROWSERS SUPPORT

COMPATIBILITÀ

BROWSERS SUPPORT

#UID MEDIA - IE "X

.big-thumbnails {width = 100%;

COMPATIBILITÀ

RESPOND.JSdeveloped by Scott Jehl

COMPATIBILITÀ

RESPOND.JS IMPLEMENTATION

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

} /*/mediaquery*/

COMPATIBILITÀ

E SE JAVASCRIPT È DISATTIVATO?

RESPONSIVE SITES

thenextweb.com - new inspiring responsive design websites

RISORSE

COMPATIBILITÀ

RESPONSIVE FRAMEWORKS

Titan Framework

Foundation

Responsive Grid System

Ingrid

Bootstrap

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

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

Responsive Design - Wordcamp 2013

Design

Transcript of Responsive Design - Wordcamp 2013

Custom taxonomies / Custom post type - wordcamp milano 2010

RESPONSIVE DESIGN - WordPress.com...Il Responsive Design è una rivoluzione del processo creativo propria del web, che mettendo a frutto una grande l essibilità, garantisce all’utente

Applicazioni web e web design responsive

"L'uso efficace di una tipografia corretta" @ WordCamp Bologna 2013

Il mio primo WordCamp Europe

Responsive Web Design - GiovanniResponsive Web Design Realizzazione di pagine web e interfacce adattive con HTML5, CSS3 e la libreria BOOTSTRAP Unità Didattica UD02: Esempi di layout

Presentazione e credits · Progetto: web content platform per i Brand Link: ultradolce.garnier.it - hydrabomb.garnier.it - #responsive design # #comunicazione #esperti in #siti di

Responsive Web Design & Single Page Application

Responsive design: progettare e realizzare siti web per tutti i dispositivi

RESPONSIVE IMAGES · RESPONSIVE IMAGES CR E ATE 3. @chumillas srcset=“large.jpg 1440w, ...

Biscovery - Mobile first responsive web design

Muse Comunicazione - Responsive Web Design - WHR 20 Novembre 2012

Speech Wordcamp 2010 - Giovambattista Fazioli

TESI DI LAUREA - tesi.cab.unipd.ittesi.cab.unipd.it/54602/1/luca_bianconi_tesi.pdf · L’obiettivo del responsive design è rendere ogni interfaccia come se fosse appositamente realizzata

Il Responsive Web Design per le organizzazioni non profit (Discussione)

Responsive Morphologies

Dal sito web all’applicazione mobilepages.di.unipi.it/milazzo/teaching/AA1617-MasterT... · Responsive web design •Nell’amito dello sviluppo di siti we il termine «responsive»

New AMPLIARE SOSTEGNO FRAGILITÀ E A RISCHIO DI ESCLUSIONE … · 2020. 4. 22. · Il design responsivo, o responsive web design, indica una tecnica di web design per la realizzazione

WordPress Community [italian] - WordCamp Milano 2011

Revenue Responsive