{"id":1201,"date":"2023-10-10T09:00:57","date_gmt":"2023-10-10T07:00:57","guid":{"rendered":"https:\/\/spin.srl\/blog\/?p=1201"},"modified":"2024-03-22T09:52:34","modified_gmt":"2024-03-22T08:52:34","slug":"come-rendere-una-pagina-web-responsive","status":"publish","type":"post","link":"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/","title":{"rendered":"Come rendere una pagina web responsive"},"content":{"rendered":"<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"578\" height=\"434\" src=\"https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-06-094347.png\" alt=\"responsive\" class=\"wp-image-1202\" srcset=\"https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-06-094347.png 578w, https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-06-094347-300x225.png 300w, https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-06-094347-150x113.png 150w\" sizes=\"auto, (max-width: 578px) 100vw, 578px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Hai un sito web ma una delle sue grandi pecche \u00e8 la fruibilit\u00e0 dai dispositivi mobili? Sapevi che Google ha adottato la filosofia del <a href=\"https:\/\/www.mysocialweb.it\/mobile-first-indexing\/\" target=\"_blank\" rel=\"noopener\">Mobile First Indexing<\/a>, cio\u00e8 la precedenza di visibilit\u00e0 sui motori di ricerca ai siti web mobile-friendly?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se tra i tuoi obiettivi c\u2019\u00e8 la SEO mi dispiace, ma non pu\u00f2 scappare da questo onere: devi adattare il tuo sito web anche ai dispositivi mobili. La buona notizia \u00e8 che oggi vedremo come si fa a rendere un sito responsive!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tuttavia questo \u00e8 un articolo destinato a chi ha gi\u00e0 una conoscenza del linguaggio HTML e CSS, se purtroppo non conosci questi due linguaggi proseguire risulter\u00e0 difficile. Se sei completamente all&#8217;asciutto di questi argomenti, o hai bisogno di qualche rinfrescata ti consigli di utilizzare queste due utilissime risorse:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3schools.com\/html\/\" target=\"_blank\" rel=\"noopener\">Tutorial HTML W3Schools<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3schools.com\/css\/\" target=\"_blank\" rel=\"noopener\">Tutorial CSS W3Schools<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">In tal caso, per\u00f2, ci tengo a farti sapere che se utilizzi un CMS con un tema, probabilmente la maggior parte (o tutto) il lavoro \u00e8 stato gi\u00e0 fatto dal tema stesso, reso responsive all\u2019origine dagli sviluppatori.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se invece il tuo sito web \u00e8 completamente gestito da te, purtroppo, dovrai sporcarti le mani con il CSS e l\u2019HTML. Entriamo subito in azione!<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><strong>HTML e CSS: Introduzione<\/strong><\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"289\" src=\"https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-06-094945.png\" alt=\"html e css\" class=\"wp-image-1203\" srcset=\"https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-06-094945.png 550w, https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-06-094945-300x158.png 300w, https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-06-094945-150x79.png 150w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Sicuramente conosci gi\u00e0 questi due linguaggi, ma ribadire le differenze e gli scopi non fa mai male. Soprattutto per chi ha cominciato da poco a masticare questi linguaggi.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019HTML (hypertext markup language) \u00e8 un linguaggio di markup che, preso da solo, consente semplicemente di formattare il testo, assegnare un significato ai nostri testi (se si tratta di un paragrafo, di un sottotitolo o altro) e inserire dei metadati in una pagina.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Una pagina in HTML puro apparirebbe scarna e simile alla pagina di un vecchio libro. La magia avviene quando si unisce al CSS. Questo linguaggio, infatti, consente di personalizzare l\u2019aspetto grafico dei componenti di una pagina html. Pu\u00f2 farlo su componenti generali (ad esempio applicare una regola a tutti i paragrafi o a tutta la pagina html) oppure a componenti di classe\/specifici (mediante i selettori).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sebbene nel panorama del web esistano tanti strumenti che ci esonerano dall&#8217;usare questi linguaggi, la massima flessibilit\u00e0 e controllo la si pu\u00f2 raggiungere solo con loro.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se non sei neofita di questi linguaggi quello che ho appena detto risulter\u00e0 inutile e banale, ma adesso passeremo al livello successivo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se sei arrivato fin qui, probabilmente, qualche utilizzo di questi due linguaggi lo hai fatto, ma ti manca quel passo in pi\u00f9 per avere un pieno controllo della tua pagina web. Dopo aver fatto una bellissima personalizzazione con il CSS, ti sei reso conto che, quando visiti quella pagina da uno smartphone \u00e8 davvero orribile da vedere. Il testo \u00e8 grande come lo \u00e8 sul computer e, per leggere anche brevi testi, devi far scorrere lo schermo. A meno che la tua pagina non contenga l\u2019ingrediente segreto della Coca Cola, alla fine anche il pi\u00f9 temerario abbandonerebbe subito la tua pagina. Con conseguenti penalizzazioni da parte di Google e un importante saluto a una consistente fetta di utenti: ricorda che oggi il traffico web \u00e8 dominato dagli smartphone.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ricorda bene, come \u00e8 stato detto in <a href=\"https:\/\/spin.srl\/blog\/come-ottenere-visite-sul-tuo-sito-web-scala-google-con-la-seo\/\" target=\"_blank\" rel=\"noopener\">questo articolo<\/a> relativo alla SEO, che l&#8217;abbandono del tuo sito dopo pochi istanti viene letto da Google come &#8220;l&#8217;utente, pur avendo trovato questa pagina tra i risultati della ricerca, l&#8217;ha abbandonata subito; quindi questo risultato potrebbe non essere di qualit\u00e0 e non dovrebbe pi\u00f9 apparire tra i risultati&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Quello che ti sei perso sulla strada, dunque, \u00e8 la gestione responsive del tuo CSS. E credimi, se sei stato in grado di scrivere del codice CSS per la tua pagina, \u00e8 molto pi\u00f9 facile da fare che da spiegare.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><strong>Come scrivere del CSS responsive<\/strong><\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"651\" height=\"251\" src=\"https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-06-095211.png\" alt=\"dimensioni schermo\" class=\"wp-image-1204\" srcset=\"https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-06-095211.png 651w, https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-06-095211-300x116.png 300w, https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/09\/Screenshot-2023-09-06-095211-150x58.png 150w\" sizes=\"auto, (max-width: 651px) 100vw, 651px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">La prima cosa da sapere \u00e8 che non dovrai scrivere codice CSS in modo diverso da come hai fatto finora. Puoi tirare un sospiro di sollievo. Ci sono sostanzialmente due approcci:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilizzo di misure relative (% oppure vh\/vw)<\/li>\n\n\n\n<li>Utilizzo di <a href=\"https:\/\/www.w3schools.com\/css\/css3_mediaqueries_ex.asp\" target=\"_blank\" rel=\"noopener\">media query<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019utilizzo di misure relative \u00e8 quello pi\u00f9 semplice e immediato, in quanto consiste nell\u2019allocare in maniera relativa dello spazio. Ad esempio:<br><code>.mia_classe {<br>&nbsp; &nbsp; &nbsp;width: 100%;<br>\n}<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c8 per sua natura responsive, perch\u00e9 si adatter\u00e0 in base alle dimensioni.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019unit\u00e0 di misura vh, invece, si riferisce all\u2019altezza della finestra del browser ed \u00e8 anch\u2019essa una misura relativa. Il valore massimo \u00e8 100, quindi si potrebbe vedere come una misura molto simile alla percentuale. Similarmente, la misura vw si riferisce alla larghezza della finestra del browser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A questo punto sarebbe lecito chiedersi cosa cambia tra vh\/vw e la %. La risposta \u00e8 che vh\/vw non dipendono dal contenitore padre, in quanto rappresentano sempre l&#8217;altezza o larghezza della finestra. Infatti, se inserissimo un elemento con height 100% in un contenitore che occupa, ad esempio, 300px, allora l&#8217;altezza del 100% si adatterebbe a quel contenitore (e quindi sarebbe di 300px). Utilizzando una misura vh o vw l&#8217;elemento avrebbe l&#8217;altezza o larghezza desiderata (sforando le eventuali dimensioni del contenitore padre).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un esempio del suo utilizzo \u00e8 il seguente:<br><code>.header {<br>    height: 100vh;<br>}<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ci sono per\u00f2 circostanze in cui utilizzare le media query diventa utile o necessario. Se ad esempio vogliamo cambiare un elemento grafico al variare delle dimensioni, oppure se vogliamo eliminare degli elementi nel caso di dispositivi mobile\/desktop utilizzare le misure relative non ci porter\u00e0 lontano. Lo stesso discorso si applica al caso della gestione delle dimensioni dei font: in questo caso applicare misure relative potrebbe risultare instabile.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Utilizzare le media query, per\u00f2, \u00e8 molto pi\u00f9 facile di quello che si possa pensare.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La prima cosa da tenere a mente sono le dimensioni dei differenti dispositivi. Ovviamente non serve conoscerli a memoria, all\u2019occorrenza puoi tornare su questa pagina e vedere i parametri di riferimento.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Desktop: 1920 x 1080 pixel<\/li>\n\n\n\n<li>Portatile: 1366 x 768 pixel<\/li>\n\n\n\n<li>Tablet: 1024 x 768 pixel<\/li>\n\n\n\n<li>Smartphone: 320 x 480 pixel<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Da questi valori dobbiamo prendere il maggiore (quindi, nel caso dello smartphone, tra 320 e 480 dobbiamo considerare il 480) e scrivere la seguente regola CSS:<br><code>@media (max-width: 480px) {<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">}<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Attenzione alle parentesi graffe, perch\u00e9 la media query \u00e8 come \u201cun altro foglio css\u201d al cui interno vanno inserite le regole esattamente come hai sempre fatto. Quindi, ad esempio, una media query per smartphone potrebbe essere questa:<br><code>@media (max-width: 480px) {<br>    .sidebar {<br>       display: none;<br>    }<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>     .main {<br>       padding-left: 0;<br>    }<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>     .main p {<br>        font-size: 14px;<br>    }<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>    .main img {<br>        max-width: 100%;<br>    }<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>}<\/code><br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Come puoi vedere, la prima regola nasconde il menu laterale sul dispositivo mobile. Questo \u00e8 utile per liberare spazio sullo schermo e rendere pi\u00f9 facile la navigazione sulla pagina web. La seconda regola rimuove la barra laterale dal contenuto principale. Questo \u00e8 utile per rendere il contenuto principale pi\u00f9 focalizzato e meno distratto. La terza regola ridimensiona il testo principale in modo che sia pi\u00f9 leggibile su un dispositivo mobile. Questo \u00e8 utile per garantire che i visitatori possano leggere facilmente il testo, anche se stanno usando uno schermo piccolo. La quarta regola ridimensiona le immagini in modo che si adattino alla larghezza del dispositivo mobile. Questo \u00e8 utile per evitare che le immagini vengano ritagliate o sfocate.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Avrai notato che la scrittura delle regole \u00e8 uguale a come hai sempre fatto, l\u2019unica differenza \u00e8 che tutte queste nuove regole sono racchiuse in:<br><code>@media (max-width: 480px) {<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>}<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adesso tutto quello che dovrai fare \u00e8 dedicare un po\u2019 di tempo a rendere responsive le tue pagine, ma sono sicuro che, dopo un po\u2019, ci proverai anche del gusto a farlo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se questa guida ti \u00e8 stata utile perch\u00e9 non lasci un commento per farcelo sapere?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hai un sito web ma una delle sue grandi pecche \u00e8 la fruibilit\u00e0 dai dispositivi&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1370,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"powered_cache_disable_cache":false,"footnotes":""},"categories":[15,4],"tags":[],"class_list":["post-1201","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-evidenza","category-generale"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Come rendere una pagina web responsive - SPIN S.r.l.<\/title>\n<meta name=\"description\" content=\"Se stai cercando di rendere il tuo sito web responsive, con questa guida aggiornata al 2026, potrai farlo subito e senza difficolt\u00e0.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come rendere una pagina web responsive - SPIN S.r.l.\" \/>\n<meta property=\"og:description\" content=\"Se stai cercando di rendere il tuo sito web responsive, con questa guida aggiornata al 2026, potrai farlo subito e senza difficolt\u00e0.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/\" \/>\n<meta property=\"og:site_name\" content=\"SPIN S.r.l.\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/spin.srl.ricerca.innovazione.trasf.tecnologico\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-10T07:00:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T08:52:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/10\/sfondo-responsive.png\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"557\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vittorio Matranga\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@consorziospin\" \/>\n<meta name=\"twitter:site\" content=\"@consorziospin\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vittorio Matranga\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/\"},\"author\":{\"name\":\"Vittorio Matranga\",\"@id\":\"https:\/\/spin.srl\/blog\/#\/schema\/person\/c0cc42cac6e321e02716a272f09d8860\"},\"headline\":\"Come rendere una pagina web responsive\",\"datePublished\":\"2023-10-10T07:00:57+00:00\",\"dateModified\":\"2024-03-22T08:52:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/\"},\"wordCount\":1198,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/spin.srl\/blog\/#organization\"},\"articleSection\":[\"Evidenza\",\"Generale\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/\",\"url\":\"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/\",\"name\":\"Come rendere una pagina web responsive - SPIN S.r.l.\",\"isPartOf\":{\"@id\":\"https:\/\/spin.srl\/blog\/#website\"},\"datePublished\":\"2023-10-10T07:00:57+00:00\",\"dateModified\":\"2024-03-22T08:52:34+00:00\",\"description\":\"Se stai cercando di rendere il tuo sito web responsive, con questa guida aggiornata al 2026, potrai farlo subito e senza difficolt\u00e0.\",\"breadcrumb\":{\"@id\":\"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/spin.srl\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Come rendere una pagina web responsive\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/spin.srl\/blog\/#website\",\"url\":\"https:\/\/spin.srl\/blog\/\",\"name\":\"SPIN S.r.l.\",\"description\":\"Blog\",\"publisher\":{\"@id\":\"https:\/\/spin.srl\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/spin.srl\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/spin.srl\/blog\/#organization\",\"name\":\"SPIN S.r.l.\",\"url\":\"https:\/\/spin.srl\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/spin.srl\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/01\/cropped-cropped-cropped-new_logo.webp\",\"contentUrl\":\"https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/01\/cropped-cropped-cropped-new_logo.webp\",\"width\":325,\"height\":60,\"caption\":\"SPIN S.r.l.\"},\"image\":{\"@id\":\"https:\/\/spin.srl\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/spin.srl.ricerca.innovazione.trasf.tecnologico\/\",\"https:\/\/twitter.com\/consorziospin\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/spin.srl\/blog\/#\/schema\/person\/c0cc42cac6e321e02716a272f09d8860\",\"name\":\"Vittorio Matranga\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/spin.srl\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a5c9e2319ad8d9ba376b0b728e0bb1a019bc06142f5222ac428323d3af054e33?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a5c9e2319ad8d9ba376b0b728e0bb1a019bc06142f5222ac428323d3af054e33?s=96&d=mm&r=g\",\"caption\":\"Vittorio Matranga\"},\"description\":\"In questo blog mi occupo di tematiche legate in diversa forma al tema dell'innovazione e della tecnologia. Sin da piccolo appassionato di informatica mi divertivo a creare siti web e applicazioni elementari cercando di capire cosa ci fosse sotto il cofano. Questa passione mi ha condotto alla mia professione di informatico dopo aver conseguito una laurea in informatica presso l'Universit\u00e0 della Calabria (Unical). Periodicamente pubblico articoli attinente a questi temi.\",\"sameAs\":[\"https:\/\/spin.srl\/blog\",\"https:\/\/linkedin.com\/in\/vittorio-matranga\/\"],\"url\":\"https:\/\/spin.srl\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Come rendere una pagina web responsive - SPIN S.r.l.","description":"Se stai cercando di rendere il tuo sito web responsive, con questa guida aggiornata al 2026, potrai farlo subito e senza difficolt\u00e0.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/","og_locale":"it_IT","og_type":"article","og_title":"Come rendere una pagina web responsive - SPIN S.r.l.","og_description":"Se stai cercando di rendere il tuo sito web responsive, con questa guida aggiornata al 2026, potrai farlo subito e senza difficolt\u00e0.","og_url":"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/","og_site_name":"SPIN S.r.l.","article_publisher":"https:\/\/www.facebook.com\/spin.srl.ricerca.innovazione.trasf.tecnologico\/","article_published_time":"2023-10-10T07:00:57+00:00","article_modified_time":"2024-03-22T08:52:34+00:00","og_image":[{"width":900,"height":557,"url":"https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/10\/sfondo-responsive.png","type":"image\/png"}],"author":"Vittorio Matranga","twitter_card":"summary_large_image","twitter_creator":"@consorziospin","twitter_site":"@consorziospin","twitter_misc":{"Scritto da":"Vittorio Matranga","Tempo di lettura stimato":"6 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/#article","isPartOf":{"@id":"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/"},"author":{"name":"Vittorio Matranga","@id":"https:\/\/spin.srl\/blog\/#\/schema\/person\/c0cc42cac6e321e02716a272f09d8860"},"headline":"Come rendere una pagina web responsive","datePublished":"2023-10-10T07:00:57+00:00","dateModified":"2024-03-22T08:52:34+00:00","mainEntityOfPage":{"@id":"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/"},"wordCount":1198,"commentCount":0,"publisher":{"@id":"https:\/\/spin.srl\/blog\/#organization"},"articleSection":["Evidenza","Generale"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/","url":"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/","name":"Come rendere una pagina web responsive - SPIN S.r.l.","isPartOf":{"@id":"https:\/\/spin.srl\/blog\/#website"},"datePublished":"2023-10-10T07:00:57+00:00","dateModified":"2024-03-22T08:52:34+00:00","description":"Se stai cercando di rendere il tuo sito web responsive, con questa guida aggiornata al 2026, potrai farlo subito e senza difficolt\u00e0.","breadcrumb":{"@id":"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/spin.srl\/blog\/come-rendere-una-pagina-web-responsive\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/spin.srl\/blog\/"},{"@type":"ListItem","position":2,"name":"Come rendere una pagina web responsive"}]},{"@type":"WebSite","@id":"https:\/\/spin.srl\/blog\/#website","url":"https:\/\/spin.srl\/blog\/","name":"SPIN S.r.l.","description":"Blog","publisher":{"@id":"https:\/\/spin.srl\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/spin.srl\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/spin.srl\/blog\/#organization","name":"SPIN S.r.l.","url":"https:\/\/spin.srl\/blog\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/spin.srl\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/01\/cropped-cropped-cropped-new_logo.webp","contentUrl":"https:\/\/spin.srl\/blog\/wp-content\/uploads\/2023\/01\/cropped-cropped-cropped-new_logo.webp","width":325,"height":60,"caption":"SPIN S.r.l."},"image":{"@id":"https:\/\/spin.srl\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/spin.srl.ricerca.innovazione.trasf.tecnologico\/","https:\/\/twitter.com\/consorziospin"]},{"@type":"Person","@id":"https:\/\/spin.srl\/blog\/#\/schema\/person\/c0cc42cac6e321e02716a272f09d8860","name":"Vittorio Matranga","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/spin.srl\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a5c9e2319ad8d9ba376b0b728e0bb1a019bc06142f5222ac428323d3af054e33?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a5c9e2319ad8d9ba376b0b728e0bb1a019bc06142f5222ac428323d3af054e33?s=96&d=mm&r=g","caption":"Vittorio Matranga"},"description":"In questo blog mi occupo di tematiche legate in diversa forma al tema dell'innovazione e della tecnologia. Sin da piccolo appassionato di informatica mi divertivo a creare siti web e applicazioni elementari cercando di capire cosa ci fosse sotto il cofano. Questa passione mi ha condotto alla mia professione di informatico dopo aver conseguito una laurea in informatica presso l'Universit\u00e0 della Calabria (Unical). Periodicamente pubblico articoli attinente a questi temi.","sameAs":["https:\/\/spin.srl\/blog","https:\/\/linkedin.com\/in\/vittorio-matranga\/"],"url":"https:\/\/spin.srl\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/spin.srl\/blog\/wp-json\/wp\/v2\/posts\/1201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spin.srl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spin.srl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spin.srl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spin.srl\/blog\/wp-json\/wp\/v2\/comments?post=1201"}],"version-history":[{"count":8,"href":"https:\/\/spin.srl\/blog\/wp-json\/wp\/v2\/posts\/1201\/revisions"}],"predecessor-version":[{"id":1438,"href":"https:\/\/spin.srl\/blog\/wp-json\/wp\/v2\/posts\/1201\/revisions\/1438"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/spin.srl\/blog\/wp-json\/wp\/v2\/media\/1370"}],"wp:attachment":[{"href":"https:\/\/spin.srl\/blog\/wp-json\/wp\/v2\/media?parent=1201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spin.srl\/blog\/wp-json\/wp\/v2\/categories?post=1201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spin.srl\/blog\/wp-json\/wp\/v2\/tags?post=1201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}