How To

Chiarimenti sul concetto di «sito Web responsive»

Più di qualcuno mi ha chiesto, via email o sui social: «ma, esattamente, cosa si intende per sito responsive? Non significa, tutto sommato, “reattivo”, nel senso che è veloce a rispondere alle sollecitazioni ricevute dall’internauta che lo visita?». La risposta è, contemporaneamente, si e no. Chiariamo brevemente e in modo semplice.

Responsive può essere ritenuto un neologismo di settore. Un termine, come tanti altri, che quando impiegato in uno specifico contesto può assumere un significato diverso a seconda delle circostanze. Tecnicamente è diventata una parola con un comportamento polisemico, a seconda del registro e del lessico del settore in cui è impiegata.

Nel campo dei siti Web, per responsive deve intendersi un sito capace di “percepire” la risoluzione video del display su cui è visualizzato, nonché le sue proporzioni: “capire”, cioè, se è visualizzato su un display orizzontale – più largo che alto – o verticale – più alto che largo – e “comportarsi” di conseguenza in base a tali “sollecitazioni”.

Quando si progetta un sito in questo modo, tutto si “adatta” da sé: la larghezza dei paragrafi, la disposizione delle varie aree di testo, le dimensioni delle immagini e dei filmati, l’aspetto dei menù.

Il concetto non è difficile da comprendere. Guardate il sorgente del mio sito principale, www.mvpnetwork.it, scritto rigorosamente a mano da me (sono pagine statiche, prosegue dopo il blocco):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>MVPNetwork</title>
    <link rel="stylesheet" href="mvpnetwork.css" type="text/css"
      media="all">
  </head>
  <body link="#0000EE" text="#000000" vlink="#551A8B" alink="#EE0000"
    bgcolor="#c0c0c0">
    <div id="topbox">
      <div id="topleft"> <img alt="MVPNetwork"
          src="mvpnetwork%20logo.png"> </div>
      <div id="topright">
        <p><i>... since the beginning of the Internet</i></p>
        <p><i>A comprehensive table of resources in the company.</i></p>
      </div>
    </div>
    <div id="breadcrumb"><a href="/">Home</a> | <a href="company.html">Company</a>
      | <a href="privacy.html">Privacy</a> | <a href="contacts.html">Contacts</a>
      | <a href="sites.html">Sites</a> | <a href="news.html"> News</a>
      | <a target="_blank" href="http://www.mvpnetwork.net">Intranet</a>
    </div>
    <hr size="2" width="100%">
    <div id="textarea">
      <p><em><strong>MVPNetwork</strong> </em>is a long term name under
        which Marco V. Principato (see below) started experimenting with
        Internet and Communications since 1992. It went online for the
        1st time since 1999 with the 1st, historical, registered domain
        name (<a target="_blank" href="mvpnetwork.net-1st-reg.jpg">see
          image</a>) and is still the name under which he manages his
        network of computers.</p>
      <p>Marco V. Principato is a computer scientist since 1980’s, now
        retired and enjoying Communications Science studies at
        Università degli Studi Roma Tre (in Rome, Italy). He
        graduated&nbsp;<em>cum laude</em> in 2015 and earned a Bachelor
        of Science in Communication. He will (hopefully) continue with
        further studies and with post-doctoral specialties.<br>
      </p>
      <p>Check Marco V. Principato’s profile on <a
          href="http://www.linkedin.com/in/principato" target="_blank">LinkedIn</a>,
        <a href="https://www.facebook.com/principato" target="_blank">Facebook</a>,
        or follow him <a href="https://twitter.com/netspy"
          target="_blank">on Twitter</a>.<br>
        <br>
      </p>
      <hr size="2" width="100%"></div>
  </body>
</html>

Come vedete, è molto breve. Questo è il foglio di stile CSS (che vale per tutte le pagine del sito):

/* 
	MVPNetwork.it Style
	Copyright Marco V. Principato - Roma, Italy
	All Rights Reserved

*/

/************************************************************************************
RESET
*************************************************************************************/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
	margin: 0;
	padding: 0;
}
img, fieldset {
	border: 0;
}

p {
	padding-bottom: 1.35em;
	line-height: 1.2em;
}

ol, ul {
	padding-left: 4%;
}

ol li {
	margin-bottom: 1.0em;
}

#topbox {
	border: none;
	width: 80%;
	margin-left: 10%;
	padding: 1em;
	font-family: Helvetic, Helvetica, Sans, 'Sans Serif';
	font-weight: bold;
	font-size: 1.0em;
}

#topleft {
	float: left;
}

#topright {
	float: right;
}

#breadcrumb {
	background: #d0d0d0;
	border-top: #e0e0e0;
	border-left: #e0e0e0;
	border-bottom: #b0b0b0;
	border-right: #b0b0b0;
	border-style: solid;
	border-width: thin;
	overflow: hidden;
	width: 80%;
	margin-left: 10%;
	padding: 0.25em;
	font-family: Helvetic, Helvetica, Sans, 'Sans Serif';
	font-weight: bold;
	font-size: 1.3em;
}

#textarea {
	margin: 5%;
	padding: 0.25em;
	font-family: Helvetic, Helvetica, Sans, 'Sans Serif';
}

#rightimage {
	float: right;
	width: 15%;
	height: auto;
	overflow: hidden;
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

Ora, aprite un’altra finestra del browser, visualizzate quella pagina e provate a “stringere” il browser, draggando il lato destro o sinistro della finestra verso quello opposto, fino a creare una finestra verticale stretta e alta, come fosse il display di uno smartphone. Osservate cosa accade: i paragrafi si stringono, l’area occupata aumenta verticalmente e diminuisce orizzontalmente, se si stringe parecchio il menù passa anch’esso a capo ma non va “fuori schermo”, eccetera.

Provate, infine, a visualizzarlo sul browser del vostro smartphone: girate lo smartphone prima in orizzontale, poi tornate in verticale, e osservate i cambiamenti.

Ecco: questo significa essere responsive. E, come vedete, lo si può essere anche in modo molto semplice e con pochissime istruzioni: ci vogliono quelle giuste, ovviamente.

Se avete compreso il concetto, ora potete approfondirlo per applicarlo anche agli altri elementi. La base è quella del “pensare relativo”, dove il relativo si riferisce alle coordinate di riferimento che, essendo variabili – perché non conosciamo a priori le dimensioni e le proporzioni dello schermo su cui si è visualizzati – dovranno essere guardate come tali e non come valori assoluti.

Purtroppo ora non vi resta che studiare: fogli di stile CSS e linguaggio HTML di base. Scoprirete che non solo è possibile ma neppure difficile.

Un’altra domanda che mi è stata rivolta: «perché hai scelto, sia per NIBBLE che per il New Blog Times, di presentare temi grafici del tutto diversi per i device fissi e per quelli mobili?».

Perché in entrambi i casi il design dei temi grafici “fissi” mi piace con quelle proporzioni e non altre. Ciò rende impossibile “pensare relativo”, dunque non sarebbero adattabili senza cambiare esteticamente in maniera profonda.

Allora ho scelto di adottare temi mobili di WPTouch, i quali entrano in gioco solo se il browser è mobile e sono essi stessi, nel loro ambito, responsive: si adattano, cioè, sia al piccolissimo schermo di un iPhone 5S come allo schermo un po’ più grande di un iPhone 6S o di un piccolo tablet con schermo da 6 o 7 pollici, tanto in orizzontale che in verticale. Se, invece, il browser è “fisso” (un PC), viene presentato il relativo tema grafico a proporzioni fisse.

Tutto chiaro?

Buon Ferragosto!

Commenti Facebook
Tag

Marco Valerio Principato

Informatico sin dal 1980, ha quasi sempre svolto questa attività sia nella Pubblica Amministrazione che fuori. Ora libero professionista e laureato con lode in Scienze della Comunicazione, si dedica alla donna della sua vita, ai suoi hobby e ai suoi siti.

Contenuti correlati

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*