Primo approccio al design adattivo

Design Adattivo
salvatore.paone@unifi.it

Wireframe disegnando su dispositivi reali

Wireframe disegnando su Photoshop

Wireframe Adattivi in HTML e CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wireframe</title>
</head>
<body>
</body>
</html>

<div id="page">
<section id="book-title"><h1>1. Book
title</h1></section>
<section id="synopsis"><h1>2.
Synopsis/description</h1></section>
<section id="purchase"><h1>3. Purchase options and
formats</h1></section>
<section id="resources"><h1>4.
Resources</h1></section>
<section id="errata"><h1>5. Errata</h1></section>
</div>

Prima di iniziare a scrivere gli stili attribuiamo una classe al
body che poi rimuoveremo quando passeremo dal
wireframe al prototipo: <body class="wireframe">
Stili:

il foglio di stile con i selettori che saranno sempre usati è
base.css:
body {
background-color: white;
font-family: sans-serif;
}
.wireframe section{
background-color: whitesmoke;
border: 1px solid gainsboro;
}

Preparo i collegamenti per i fogli di stile:
<title>Wireframe</title>
<link rel="stylesheet" href="styles/base.
css" media="screen">
<link rel="stylesheet" href="styles/medium.
<link rel="stylesheet" href="styles/large.
medium.css e large.css saranno successivamente
completate con le media query: http://www.w3.
org/TR/css3-mediaqueries/

Completo base.css:
.wireframe section{
margin: 1em;
background-color: whitesmoke;
border: 1px solid gainsboro;
font: small sans-serif;
text-align: center;
color: silver;
}
.wireframe h1 {
font-weight: 100;
}

Adeguare il wireframe affinché sia Mobile First:
http://www.abookapart.com/products/mobile-first
testandolo.
Effettuare test con dispositivi iOS:
si consiglia Xcode
Effettuare test con dispositivi Android:
si consiglia Android SDK
Oppure:
http://ami.responsivedesign.is/
http://seeresponsive.it/
http://www.responsinator.com/

Stimare l’altezza dei blocchi aiuta a comprendere cosa
succederà con i contenuti reali:
.wireframe #book-title { height: 5em; }
.wireframe #synopsis { height: 30em; }
.wireframe #purchase { height: 20em; }
.wireframe #resources { height: 50em; }
.wireframe #errata { height: 40em; }

Aggiungere la navigazione:
<nav>
<h1 id="nav">Navigation links</h1>
</nav>
Aggiungere l’ancora per il menu:
<div id="page">
<a href="#nav" class="menu">Menu</a>
...
Aggiungere gli stile anche a:
.wireframe nav,
.wireframe .menu {
...

Inoltre aggiungiamo una regola per spostare il
collegamento in alto a destra:
.wireframe .menu {
position: absolute;
margin: 0;
top: 0;
right: 0;
background-color: gainsboro;
padding: 0.5em;
color: steelblue;
}
.wireframe nav { height: 10em; }

Iniziamo a lavorare per classi di dispositivo, ma dobbiamo
informare il browser che quando diremo min-width, la
larghezza della pagina deve essere la larghezza del
dispositivo:
<meta name="viewport" content="width=device-width,
minimum-scale=1.0">
Iniziamo a creare fogli di stile in cui indichiamo la min-
width:
<link rel="stylesheet" href="styles/medium.css"
media="screen and (min-width: 600px)">
<link rel="stylesheet" href="styles/large.css"
media="screen and (min-width: 900px)">

medium.css avrà alcune regole, che smentiranno base.css
.wireframe .menu {
display: none;
}
.wireframe nav {
position: absolute;
top: 0;
width: 100%;
height: auto;
margin: 0;
border: none;
}

a cascata large.css smentirà medium.css e base.css
.wireframe section {
margin: 1em 0;
}
.wireframe #page {
position: relative;
width: 90%;
margin: 0 auto;
}
.wireframe #synopsis {
float: left;
width: 58%;
margin-top: 0;
}

andando a creare due colonne...
.wireframe #purchase {
float: right;
width: 40%;
height: 30em;
margin-top: 0;
}
.wireframe #purchase+section {
clear: both;
}

jQuery Picture
Picture è un plugin per jQuery che aiuta il webmaster a
creare della pagine responsive. Con esso le immagini si
ridimensionano correttamente quando la finestra del
browser viene rimpicciolita. Il ridimensionamento è in
verità simulato perché al plugin vengono passate più
immagini (rappresentanti la stessa cosa) con dimensioni
diverse e, a seconda della dimensione del browser, viene
istantaneamente caricata quella con la larghezza più adatta.
http://jquerypicture.com/

Inizializzare il plugin
$(function(){
$('figure.responsive').picture();
});
<figure class="responsive" data-media="
assets/images/small.png" data-media600="
assets/images/medium.png" data-media900="
assets/images/large.png" title="A Half Brained
Idea">
</figure>

Primo approccio al design adattivo

Recommandé

Recommandé

Contenu connexe

Similaire à Primo approccio al design adattivo

Similaire à Primo approccio al design adattivo (20)

Plus de Salvatore Paone

Plus de Salvatore Paone (10)

Dernier

Dernier (19)

Primo approccio al design adattivo