school Are you a developer in an agency in the UK, Indonesia or India? Find out more about our free 2 day Progressive Web Apps training .

Il tuo primo sito per dispositivi multipli

La creazione delle esperienze per dispositivi multipli non è un'operazione molto difficile. Seguendo questa guida creeremo la pagina di destinazione di un prodotto di esempio per il nostroCorso di sviluppo Web per dispositivi mobili CS256 adattabile a tutti i tipi di dispositivo.

diversi dispositivi che visualizzano il progetto finale

L'idea dello sviluppo per dispositivi multipli con funzionalità, formati dello schermo e metodi di interazione molto diversi può sembrare scoraggiante, ma è non impossibile.

La creazione di siti reattivi non è difficile come sembra: questa guida spiega come iniziare. Abbiamo diviso la guida in due semplici passaggi:

  1. Definizione di Information Architecture (IA) e struttura della pagina, 2. Aggiunta di elementi di design per ottenere reattività e un aspetto gradevole con tutti i dispositivi.

Creazione di struttura e contenuti personali

I contenuti sono l'aspetto più importante di ogni sito. Iniziamo a progettarli in maniera indipendente dal design. In questa guida inizieremo identificando i contenuti necessari, per poi creare una struttura delle pagine in base a essi e impostare una disposizione semplice, lineare e in grado di funzionare correttamente sui viewport estesi in entrambe le dimensioni.

Creazione della struttura della pagina

Abbiamo individuato il necessario:

  1. Un'area che offra una visione d'insieme del corso 'CS256: Mobile web development'
  2. Un modulo per la raccolta delle informazioni degli utenti interessati al nostro prodotto
  3. Una descrizione approfondita e un video
  4. Alcune immagini del prodotto in funzione
  5. Una tabella informativa per soddisfare le richieste

TL;DR

  • Inizia identificando i contenuti necessari.
  • Crea una bozza della Information Architecture (IA) dei viewport estesi in entrambe le dimensioni.
  • Crea una struttura della pagina con i contenuti ma senza fogli di stile.

Abbiamo delineato anche una bozza dell'Information Architecture (IA) e della disposizione dei viewport estesi in entrambe le dimensioni.

IA per viewport ristretti IA per viewport ampi

È possibile convertirla facilmente nelle bozze delle sezioni di una struttura di pagina da utilizzare per il resto del progetto.

<!doctype html>
<html>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>CS256: Mobile Web development - structure</title>
  </head>
  <body>   
    <div id="headline">
      <header>
        <h1></h1>
        <p></p>
      </header>
      <div id="blurb">
        <p></p>
        <ul>
          <li>
        </ul>
      </div>
      <form method="post" id="register"> 
      </form>
    </div>
    <div id="section1">
      <h2></h2>
      <p></p>
      <ul>
        <li>
      </ul>
      <video></video>
    </div>
    <div id="section2">
      <h2></h2>
      <p></p>
      <div id="images">
        <img>
      </div>
    </div>
    <div id="section3">
      <h2></h2>
      <p></p>
    </div>
    <footer>
      <p></p>
    </footer>
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-52746336-1');ga('send','pageview');
  var isCompleted = {};
  function sampleCompleted(sampleName){
    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
      ga('send', 'event', 'WebCentralSample', sampleName, 'completed'); 
      isCompleted[sampleName] = true;
    }
  }
</script>
  </body>
</html>

Aggiunta di contenuti alla pagina

La struttura di base del sito è completa. Conosciamo le sezioni necessarie, i contenuti da visualizzare in ciascuna di esse e il punto in cui posizionarli nell'Information Architecture complessiva. Adesso possiamo iniziare a sviluppare il sito.

Creazione di titolo e modulo

Il titolo e il modulo di notifica delle richieste sono i componenti principali della pagina da presentare subito all'utente.

Nel titolo, inserisci un testo semplice per descrivere il corso:

<div id="headline">
  <div class="container">
    <header>
      <h1>Mobile Web Development</h1>
      <p>Building Mobile Web Experiences</p>
    </header>
    <div id="blurb">
      <p>So you've heard mobile is kind of a big deal, and you're not
      sure how to transform your traditional desktop-focused web apps
      into fast, effective multi-device experiences.</p>
      <p>This course is designed to teach web developers what
      they need to know to create great cross-device web
      experiences.</p>
      <p>This course will focus on building mobile-first web apps,
      which will work across multiple platforms including:</p>
      <ul>
        <li>Android,</li>
        <li>iOS,</li>
        <li>and others.</li>
      </ul>
    </div>
    <form method="post" id="register">
    </form>
  </div>
</div>

Compila anche il modulo. Si tratta di un semplice modulo per la raccolta di nome e numero di telefono dell'utente e dell'orario di preferenza per il contatto telefonico.

Tutti i moduli devono contenere etichette e segnaposto, in modo da consentire agli utenti di concentrarsi sugli elementi, capire come compilarli e utilizzare strumenti di accessibilità per il rilevamento della struttura del modulo. L'attributo name non si limita a inviare il valore del modulo al server, ma suggerisce anche la corretta compilazione automatica del modulo per conto dell'utente.

Aggiungiamo aree semantiche per aiutare gli utenti a velocizzare e semplificare l'immissione dei contenuti usando dispositivi mobili. Ad esempio, durante la digitazione di un numero telefonico, l'utente dovrebbe visualizzare il solo tastierino numerico.

<form method="post" id="register">
   <h2>Register for the launch</h2>
   <label for="name">Name</label>
   <input type="text" name="name" id="name" 
      placeholder="Thomas A Anderson" required>
   <label for="email">Email address</label>
   <input type="email" name="email" id="email" 
      placeholder="neo@example.com" required>
   <label for="tel">Telephone</label>
   <input type="tel" name="tel" id="tel" 
      placeholder="(555) 555 5555" required>
   <input type="submit" value="Sign up">
</form>

Creazione delle sezioni Video e Informazioni

Le sezioni dei contenuti Video e Informazioni richiedono maggiore attenzione. Segue un elenco delle funzionalità e un segnaposto video che consente di ammirare i nostri prodotti in funzione.

<div id="section1">
  <div class="container">
    <h2>What will I learn?</h2>
    <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
    <p>You'll understand what it takes to:</p>
    <ul>
      <li>build great web experiences on mobile devices</li>
      <li>use the tools you need to test performance</li>
      <li>apply your knowledge to your own projects in the future</li>
    </ul>
    <video controls poster="udacity.png">
      <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
      <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
      <p>Sorry your browser doesn't support video. 
         <a href="udacity.mov">Download the video</a>.
      </p>
    </video>
    <br>
  </div>
</div>

Spesso i video vengono utilizzati per descrivere i contenuti in maniera più interattiva e illustrano la dimostrazione di un prodotto o concetto.

Rispettando le best practice puoi integrare facilmente i video nel tuo sito:

  • Aggiungi un attributo controls per semplificare la riproduzione del video.
  • Aggiungi un'immagine poster per offrire un'anteprima del contenuto.
  • Aggiungi diversi elementi <source> in base ai formati video supportati.
  • Inserisci un testo alternativo per scaricare il video in caso di impossibilità di riproduzione in finestra.
<video controls poster="udacity.png">
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm"></source>
  <source src="udacity.mov" type="video/mov"></source>
  <p>Sorry your browser doesn't support video. 
     <a href="udacity.mov">Download the video</a>.
  </p>
</video>

Creazione della sezione Immagini

I siti privi di immagini sono poco attraenti. Esistono due tipi di immagini:

  • Immagini di contenuto, che vengono inserite nel documento per fornire con informazioni aggiuntive.
  • Immagini di stile, per abbellire l'aspetto del sito spesso attraverso immagini di sfondo, pattern e gradienti. Affronteremo questo argomento nel prossimo articolo.

La sezione Immagini della pagina è una raccolta di immagini di contenuto

che consentono di convogliare il significato della pagina. Sono simili alle fotografie usate negli articoli dei giornali. Utilizziamo fotografie dei tutor del progetto Chris Wilson, Peter Lubbers e Sean Bennet

<div id="section2">
  <h2>Who will teach me?</h2>
  <p>The world's leading mobile web developers.</p>

  <div id="images">
    <img src="chriswilson.png" alt="Chris Wilson: Course Instructor">
    <img src="peterlubbers.png" alt="Peter Lubbers: Course Instructor">
    <img src="seanbennett.png" alt="Sean Bennet: Course Developer">
  </div>

  <br>
</div>

che è possibile scalare al 100% della larghezza dello schermo, condizione ideale per i dispositivi con viewport ristretto ma non per quelli con viewport ampio (come i PC desktop). Questo problema è l'oggetto della sezione sul responsive design.

Alcune persone non riescono a visualizzare le immagini e utilizzano quindi una tecnologia di assistenza come gli screen reader, che analizzano i dati sulla pagina per restituirli in forma verbale. Verifica che tutte le immagini di contenuto siano dotate di un tag descrittivo alt, utile allo screen reader per la lettura dei dati all'utente.

Quando aggiungi i tag alt, il relativo testo deve essere il più conciso possibile ma fornire una descrizione dell'immagine. Ad esempio, nella nostra demo formattiamo l'attributo in modo semplice, ovvero Name: Role per comunicare informazioni sufficienti relative alla natura della sezione, dedicata agli autori e ai rispettivi ruoli.

Aggiunta della sezione dei dati in tabella

L'ultima sezione è una semplice tabella per presentare le caratteristiche tecniche del prodotto.

Usa le tabelle solo per dati come ad esempio le matrici di informazioni.

<div id="section3">
  <h2>Mobile. Why should I care?</h2>
  <p>It is huge.  Everywhere.</p>
  <table>
    <caption>
      <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
    </caption>
    <thead>
       <tr>
         <th>Country</th>
         <th>Desktop share</th>
         <th>Tablet share</th>
         <th>Mobile share</th>
       </tr>
    </thead>
    <colgroup>
       <col span="1">
       <col span="1">
       <col span="1">
       <col span="1">
    </colgroup>
    <tbody>
     <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
        <td>32%</td>
        <td>1%</td>
        <td>67%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
        <td>69%</td>
        <td>13%</td>
        <td>18%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
        <td>69%</td>
        <td>9%</td>
        <td>22%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
        <td>86%</td>
        <td>4%</td>
        <td>10%</td>
      </tr>
    </tbody>
  </table>
  <br>
</div>

La maggior parte dei siti deve contenere un footer per la visualizzazione di contenuti come termini e condizioni, limitazioni di responsabilità e di altro tipo, di solito inadatti all'area principale di navigazione o a quella dei contenuti.

Nel nostro sito inseriamo solo i link alla sezione di termini e condizioni, a una pagina di contatti e ai nostri profili sui social media.

<footer>
  <div class="container">
    <p>We always need a footer.</p>
  </div>
</footer>

Abbiamo delineato il sito e individuato tutti i principali elementi strutturali. Abbiamo verificato anche la presenza di contenuti pertinenti e della loro collocazione ottimale per la soddisfazione delle esigenze aziendali.

Contenuto

Al momento la pagina offre un aspetto poco gradevole. Si tratta tuttavia di una scelta intenzionale. I contenuti sono l'aspetto più importante di ogni sito, ma occorreva prima disporre di Information Architecture e densità di tipo corretto. La guida è stata un'ottima base per iniziare. Nella prossima guida assegneremo uno stile ai nostri contenuti.

Ottenere reattività

È possibile accedere al Web con numerosi dispositivi che spaziano dai telefoni ai televisori e con dimensioni dello schermo molto diverse fra loro. Ciascun dispositivo offre vantaggi e limiti. Quale web developer devi supportare tutti i tipi di dispositivo.

Stiamo creando un sito adatto ai diversi formati dello schermo e tipi di dispositivo. Nell'articolo precedente abbiamo assemblato la Information Architecture della pagina e creato una struttura di base. In questa guida trasformeremo la struttura di base in una pagina gradevole e reattiva con numerosi formati dello schermo.

Contenuti
Contenuti e struttura
Designed site
Sito definitivo

Seguendo i principi dello sviluppo Web per piattaforme mobili, abbiamo iniziato lo sviluppo per un viewport ristretto e simile a quello di un telefono cellulare. Quindi abbiamo scalato il tutto per i dispositivi di formato maggiore. Abbiamo allargato il viewport cercando di individuare l'aspetto ottimale del design e della disposizione.

In precedenza abbiamo creato alcuni progetti con diverse visioni d'insieme per la visualizzazione dei contenuti. Adesso occorre adattare la pagina alle diverse disposizioni. Dobbiamo scegliere dove posizionare i breakpoint (i punti in cui la disposizione e gli stili cambiano) in base al modo in cui i contenuti vengono adattati al formato dello schermo.

TL;DR

  • Utilizza sempre un viewport.
  • Inizia sempre con un viewport ristretto per poi scalarlo o ingrandirlo.
  • Stabilisci i breakpoint per adattare i contenuti.
  • Crea una visione d'insieme della disposizione usando i principali breakpoint.

Aggiungi un Viewport

Anche in una pagina semplice devi sempre inserire un meta tag viewport. Il viewport è il componente più importante per creare esperienze adatte a dispositivi multipli. Senza di esso il sito non funzionerà al meglio sui dispositivi mobili.

Il viewport consente al browser di scalare la pagina per adattarla allo schermo. Esistono diverse configurazioni per usare il viewport per la visualizzazione della pagina. Seguono alcuni suggerimenti di default:

<meta name="viewport" content="width=device-width, initial-scale=1">

Il viewport risiede nella sezione head del documento e deve essere dichiarato una sola volta.

Applicare uno stile semplice

Esistono linee guida specifiche su caratteri e branding di prodotto e società indicati nella guida di stile.

Guida di stile

La guida consente di creare una visione d'insieme della rappresentazione visiva della pagina e verificare la coerenza del design.

Colori
#39b1a4
#ffffff
#f5f5f5
#e9e9e9
#dc4d38

Aggiungere immagini stilistiche

Nella guida precedente abbiamo aggiunto le immagini 'di contenuto', ovvero elementi importanti per la descrizione del nostro prodotto. Le immagini stilistiche non appartengono ai contenuti principali ma consentono di migliorare gli aspetti estetici e aiutano a concentrare l'attenzione dell'utente su una determinata parte dei contenuti.

Ad esempio, come per l'immagine del titolo dei contenuti 'above the fold'. Queste immagini vengono spesso utilizzate per incoraggiare l'utente a cercare ulteriori informazioni sul prodotto.

Sito progettato

Sono molto facili da inserire. Nel nostro caso useremo lo sfondo dell'intestazione, applicato mediante un semplice CSS.

#headline {
  padding: 0.8em;
  color: white;
  font-family: Roboto, sans-serif;
  background-image: url(backgroundimage.jpg);
  background-size: cover;
}

Abbiamo scelto un'immagine di sfondo semplice e sfumata per non distrarre l'utente, impostandola in modo da coprire l'intero elemento e adattarsi alle dimensioni della finestra mantenendo le corrette proporzioni.

Impostare il primo breakpoint

La qualità visiva del progetto inizia a diminuire usando circa 600 pixel di larghezza. Nel nostro caso, la larghezza della riga supera 10 parole (lunghezza di lettura ottimale), il limite che intendiamo impostare.

600 pixel sono perfetti per creare il nostro primo breakpoint grazie a uno spazio sufficiente per riposizionare gli elementi e adattarli al meglio allo schermo. A tale scopo, utilizziamo la tecnologia media query.

@media (min-width: 600px) {

}

Uno schermo più grande offre maggiore spazio e flessibilità di visualizzazione dei contenuti.

Nel contesto della nostra pagina di prodotto occorre:

  • Limitare la larghezza massima del design.
  • Alterare il padding degli elementi e ridurre le dimensioni del testo.
  • Spostare il modulo per conservare l'allineamento con il contenuto del titolo.
  • Fare in modo che il video si sposti intorno ai contenuti.
  • Ridurre le dimensioni delle immagini e visualizzarle in una griglia dall'aspetto più gradevole.

Limitare la larghezza massima del design

Per semplificare il processo di sviluppo, abbiamo scelto sole disposizioni principali, ovvero un viewport ristretto e uno ampio.

Abbiamo deciso anche di creare due sezioni a vivo nel viewport ristretto, sono presenti anche in quello ampio. In altre parole, occorre limitare la larghezza massima dello schermo per fare in modo che il testo e i paragrafi non diventino un'unica riga lunga sugli schermi ultra-wide. Questo punto deve corrispondere a circa 800 pixel.

A tale scopo, occorre limitare la larghezza e centrare gli elementi. Occorre creare un contenitore intorno a ciascuna sezione principale e applicare un attributo margin: auto. In questo modo, lo schermo può allargarsi mantenendo il contenuto al centro e alla dimensione massima di 800 pixel.

Il contenitore sarà un semplice div nel seguente modulo:

<div class="container">
...
</div>
<div id="section1">
  <div class="container">
    <h2>What will I learn?</h2>
.container {
  margin: auto;
  max-width: 800px;
}

Modifica del padding e riduzione delle dimensioni del testo

Nel viewport ristretto non è disponibile molto spazio per la visualizzazione dei contenuti, quindi occorre ridurre le dimensioni e lo spessore dei caratteri per adattarli allo schermo.

Con un viewport più ampio è opportuno supporre che l'utente disponga di uno schermo più grande osservato a maggiore distanza. Per aumentare la leggibilità dei contenuti è possibile incrementare dimensioni e spessore dei caratteri, oltre a modificare il padding per mettere in risalto alcune aree.

Nella nostra pagina del prodotto aumenteremo il padding degli elementi della sezione mantenendolo al 5% della larghezza. Aumenteremo anche le dimensioni delle intestazioni di ciascuna sezione.

#headline {
  padding: 20px 5%;
}

Adattamento degli elementi al viewport ampio

Il nostro viewport ristretto utilizzava una visualizzazione a linee in pila. Ciascuna sezione principale e i relativi contenuti venivamo visualizzati in ordine dall'alto verso il basso.

Il viewport ampio offre più spazio per la visualizzazione ottimale dei contenuti su schermo. Per la nostra pagina di prodotto, la IA consente di:

  • Spostare il modulo rispetto alle informazioni dell'intestazione.
  • Posizionare il video alla destra dei punti principali.
  • Inserire le immagini nei riquadri.
  • Espandere la tabella.

Spostamento dell'elemento Modulo

Il viewport ristretto offre un minore spazio orizzontale per il posizionamento ottimale degli elementi su schermo.

Per utilizzare al meglio lo spazio orizzontale dello schermo, occorre interrompere il flusso lineare dell'intestazione e avvicinare modulo ed elenco.

#headline #blurb {
  float: left; 
  font-weight: 200;
  width: 50%;
  font-size: 18px;
  box-sizing: border-box;
  padding-right: 10px;
}

#headline #register {
  float:right;
  padding: 20px;
  width: 50%;
  box-sizing: border-box;
  font-weight: 300;
}

#headline br {
  clear: both;
}
#headline {
  padding: 20px 5%;
}

Spostamento dell'elemento Video

Nell'interfaccia del viewport ristretto, il video occupa l'intera larghezza dello schermo e si trova dopo l'elenco delle funzionalità principali. Nel viewport ampio, il video verrà scalato in verticale arrivando a dimensioni eccessive e ottenendo un aspetto anomalo se posizionato accanto all'elenco delle funzionalità.

Allontana l'elemento video dal flusso verticale del viewport ristretto e posizionalo a fianco dell'elenco puntato dei contenuti nel viewport ampio.

#section1 ul {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding-right: 1em;
}

#section1 video {
  width: 50%;
  float: right;
}

Inserimento delle immagini nei riquadri

Nell'interfaccia del viewport ristretto (soprattutto per dispositivi mobili), le immagini coprono la larghezza dello schermo e sono disposte in pila verticale. Questa disposizione non è adatta a un viewport ampio.

Per visualizzare correttamente le immagini in un viewport ampio, scalale al 30% della larghezza del contenitore e disporle in orizzontale (e non in verticale come nella visualizzazione ristretta). Inoltre, aggiungeremo un raggio al bordo e un'ombreggiatura alla casella in modo da rendere le immagini più visibili.

#section2 div img {
   width: 30%;
   margin: 1%;
   box-sizing: border-box;
   border-radius: 50% 50%;
   box-shadow: black 0px 0px 5px;
 }

Aumento della reattività delle immagini nei confronti dei DPI

Usando le immagini è importante valutare dimensioni del viewport e densità della visualizzazione.

Il Web è stato concepito per gli schermi a 96 dpi. Con l'introduzione dei dispositivi mobili, si è verificato un notevole aumento della densità in pixel degli schermi, per non parlare dei display Retina dei laptop. Pertanto, le immagini codificate a 96 dpi possono avere un aspetto sgradevole sui dispositivi a DPI elevati.

Segue una soluzione ancora non particolarmente diffusa. È possibile visualizzare un'immagine ad alta densità su un display ad alta densità, a patto che il browser supporti tale funzionalità.

<img src="photo.png" srcset="photo@2x.png 2x">

Tabelle

Le tabelle sono difficili da posizionare in modo corretto nei dispositivi con viewport ristretto, pertanto occorre prestare particolare attenzione.

Nei viewport ristretti è consigliabile suddividere la tabella in due righe, spostando titolo e celle in una riga per eseguire la suddivisione delle colonne.

Nel nostro sito abbiamo dovuto creare un breakpoint aggiuntivo per i contenuti della tabella. Nello sviluppo incentrato sui dispositivi mobili è difficile annullare gli stili applicati, pertanto occorre separare il CSS della tabella per il viewport ristretto da quello per il viewport ampio. Così facendo si ottiene un'interruzione chiara e coerente.

@media screen and (max-width: 600px) {
  table thead {
    display: none;
  }

  table td {
    display: block;
    position: relative;
    padding-left: 50%;
    padding-top: 13px;
    padding-bottom: 13px;
    text-align: left;
    background: #e9e9e9;
  }

  table td:before {
    content: attr(data-th) " :";
    display: inline-block;
    color: #000000;
    background: #e9e9e9;
    border-right: 2px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 33%;
    max-height: 100%;

    font-size: 16px;
    font-weight: 300;
    padding-left: 13px;
    padding-top: 13px;
  }
}

In conclusione

CONGRATULAZIONI. A questo punto hai creato il tuo primo esempio di pagina di destinazione di prodotto compatibile con un'ampia gamma di dispositivi, fattori di forma e formati dello schermo.

Queste linee guida rappresentano un buon inizio:

  1. Crea una IA di base e analizza i contenuti prima di iniziare la codifica.
  2. Imposta sempre un viewport.
  3. Crea l'esperienza di base con un approccio rivolto alle piattaforme mobili.
  4. Dopo aver creato l'esperienza mobile, aumenta la larghezza del display fino a ottenere un aspetto ottimale, quindi imposta il breakpoint.
  5. Ripeti la procedura più volte.