Pubblicato il 09/07/2023
da alnao nella categoria Css3 & Bootstrap
Con responsive web design (a volte abbreviato con la sigla RWD) si descrive la tecnologia di sviluppo web per la creazione di siti web in grado di auto-adattarsi al dispositivo con il quale vengono caricati i contenuti del sito, lo scopo finale è quello di avere un unico sito web che si “disegna” a seconda del dispositivo dell’utente senza dover aver versioni diverse a seconda del dispositivo. Basta pensare al grande problema dei dispositivo mobili e alle varie tecnologie esistenti: senza responsive bisogna creare diverse versioni dello stesso codice: iPhone, ipad, android, tablet andoid, MsWindows phone e MSWindows tablet, senza contare altri dispositivi come le smart-telelevision.Responsive vuole imporre uno standard di sviluppo bastato interamente su HTML5 e CSS3 con poco aiuto di Javascript e della libreria Jquery, il vantaggio di questo standard è che, ad oggi, tutti i browser sono compatibili con questi standard e ormai è diventato uno standard universamentemente usato.
La filosofia base di responsive è quella di usare stili diversi a seconda del dispositivo, quindi il browser caricherà CSS diversi a seconda delle caratteristiche che esso ottiene dalla finestra del programma in esecuzione (o dalla app), questa filosofia obbliga il programmatore ad ideare una griglia formata a blocchi che si spostano e si posizionano a seconda dello spazio a disposizione nel monitor (o schermo) dell’utente: ovviamente un pc ha uno schermo più largo dove ci stanno più blocchi rispetto ad un cellulare dove a fatica viene visualizzato un blocco solo, in tutta questo ovviamente testi, immagini e qualsiasi altro componente devono essere necessariamente flessibili e con larghezza fissa. Tipicamente queste strutture sono posizionati a delle determinate grandezze 320 pixel, 600 pixel, 1024 pixel oppure oltre i 1024 pixel per essere associate a rispettivamente cellulari, tablet, schermo piccolo (come i notebook) e schermo grande.
Attraverso i CSS si possono studiare vari modi per modificare il posizionamento degli elementi e ordinarli a seconda delle proprie esigenze, questo perché i siti Responsive richiedono che gli elementi siano dimensionati nei fogli di stile tramite percentuali (oppure em) e non con unità assolute come pixel o punti. La complessità della tecnologia Responsive è il trovare il giusto compromesso tra contenuti e esigenze dei dispositivi mobile, perché con Responsive bisogna sempre fare un compromesso tra le possibili grandi dimensioni di un contenuto (come un testo molto lungo, immagini di grandi dimensioni o video) e i dispositivi mobili dove lo spazio a disposizione è limitato e non sempre è possibile visualizzare tutto una sola schermata.
Per realizzare un sito con Responsive ed avere un buon risultato bisogna prima di tutto aver presente quale risultato si vuole ottenere tenendo presente dei limiti e delle caratteristiche delle tecnologie che andremo ad usare, usando HTML e CSS si possono superare i problemi grazie a Responsive e ai breackpoint. Un breackpoint è un punto della pagina, dalla quale parte una linea orrizontale ideale lungo la quale verranno “posizionati” gli oggetti con i CSS e le queries di responsive.
Un semplice esempio di codice con un breackpoint è:
<!DOCTYPE html><html>
<head>
<title>www.alnao.it</title>
<style type="text/css">
.breackpoint { background: blue;}
@media screen and (min-width: 480px) {
.breackpoint { background: green; }
}
@media screen and (min-width: 768px) {
.breackpoint { background: yellow; }
}
@media screen and (min-width: 1024px) {
.breackpoint { background: red; }
}
</style>
</head>
<body>
<span>Contenuto precedente</span>
<div class="breackpoint">Responsive web design e i suoi breackpoint</div>
<span>Contenuto successivo</span>
</body>
</html>
In questo semplice esempio la classe breackpoint definisce un punto “di rottura”, grazie alle media queries introdotte nel prossimo articolo è possibile definire un comportamento grafico diverso a seconda della larghezza del dispositivo, ipotizzando contenuti precedenti e successivi a questo elemento, questo diventa un punto di rottura indicato tecnicamente come “breackpoint”.
