Come trasformare un layout fisso in layout responsive

responsive-web-design
Tempo stimato di lettura: 10 minuti, 24 secondi
Pubblicato il 11 giugno 2013

Niente panico! Puoi raggiungere il tuo obiettivo con un piccolo sforzo in più. Ma chiariamo subito che il processo responsive va pianificato all’inizio del tuo progetto, perchè si basa sul concetto ‘Mobile first’ secondo cui nella progettazione di un sito è importante partire dalle risoluzioni più piccole appunto i cellulari, per arrivare progressivamente alla versione desktop. La prossima volta, quando cominci un nuovo progetto, pensa subito alla possibilità di realizzare il sito responsive per seguire un corretto metodo di progettazione, ok? Ma veniamo al nostro obiettivo: abbiamo un sito web con classico layout fisso di 960px e vogliamo trasformarlo in responsive. Il raggiungimento di questo obiettivo dipende dalla complessità del progetto che avete realizzato.  In alcuni casi dobbiamo prendere in considerazione la possibilità che sia più conveniente ricominciare dal principio, utilizzando un buon framework come Bootstrap o Skeleton. L’utilizzo di questi frameworks facilita notevolmente in termini di lavoro e di tempo, ma per avere una visione a 360 gradi del processo responsive io preferisco e consiglio, di cominciare a progettare un layout responsive senza l’aiuto di alcun programma pre-costituito.

Cos è il responsive web design?

Sono passati 3 anni da quando Ethan Marcotte, pioniere del processo responsive con il suo famoso articolo sul “Responsive web design” del 25 maggio 2010, ha cambiato il modo di progettare un sito web, cogliendo per primo i cambiamenti che l’evoluzione tecnologica ha comportato. Si è reso conto che i propri clienti volevano il loro sito visibile anche su iphone o ipad e ha studiato un modo per far si che ciò potesse accadere. Ha creato il responsive web design, cioè la possibilità per un sito web di rispondere al suo ambiente in maniera reattiva, di guardare alle cose che lo circondano e di riaggiustare automaticamente gli elementi che lo compongono, mantenendo al tempo stesso l’usabilità e navigabilità del sito e concentrandosi sulla priorità dei contenuti. Il responsive web design da importanza ai contenuti, intesi non solo come testi ma anche come logo, menù e così via. È importante stabilirne la gerarchia per definire quali contenuti vanno inseriti in un layout di 320px e quali vanno aggiunti progressivamente all’aumentare della risoluzione dello schermo secondo un processo di “ progressive enhancement”.  Sarebbe impensabile e poco funzionale un sito con gli stessi contenuti a risoluzioni diverse. In questa fase è fondamentale una dialettica costante e costruttiva con il proprio cliente per capire le sue esigenze. Siamo arrivati ad una fase del processo di progettazione dei siti in cui è impossibile realizzare un sito senza tener conto della possibilità e necessità di creare un sito web, intelligente, flessibile e adattabile. Il RWB sta diventando il linguaggio standard e Google raccomanda fortemente la realizzazione di siti-web responsive per diversi motivi che potete leggere qui.

Procedere per fasi

Il processo responsive comprende così tanti aspetti da affrontare che occorre procedere per fasi e porsi degli obiettivi graduali. Gli ingredienti-chiave del RWD sono:

  1. Griglie fluide;
  2. Immagini fluide;
  3. Media queries;

Ma basta con le parole, passiamo alla pratica! Ho realizzato un esempio di layout fisso con i seguenti contenuti:

  • logo;
  • menù di navigazione;
  • slide imagine;
  • servizi;
  • testo servizi;
  • blog;
  • articoli blog;

Vedi Esempio Layout Fisso

Analizziamo le 3 fasi che ci permetteranno di trasformare il nostro layout fisso in layout responsive.

#fase 1 – griglie fluide

La prima parola-chiave del processo responsive è fluidità della griglia e di tutti gli elementi che contiene la griglia: testo, immagini, box e contenitori. Considerando che abbiamo il nostro layout fisso di 960px come facciamo in modo che il nostro layout si espanda o restringa in base alla dimensione del browser? 

1. TESTO

La prima operazione riguarda il testo. Per rendere il testo fluido dobbiamo abbandonare i pixel ed utilizzare le misure relative ems per due buoni motivi: primo perché ci permette di superare i problemi di IE con i font settati in px; secondo perchè con questa operazione il testo diventa fluido, cioè si adatta alla larghezza del contenitore. Spieghiamo come. Nell’esempio del layout fisso ho settato il font a 16px; per trasformarlo in misura relativa, settiamo il testo nel “body” al 100% in modo che tutti gli elementi della pagina possano essere considerati in maniera relativa rispetto alla misura di default del browser che di solito è di 16px. Inoltre, applichiamo una semplice regola matematica: TARGET : CONTENUTO = RISULTATO cioè , per ottenere il nostro risultato ( la misura relativa di 16 px) dividiamo il target (font di 16 px) per il suo contenuto ( misura di default del browser ) che è sempre di 16px; 16px : 16px = 1em ; la stessa operazione la eseguiamo per il tag “line-height”.

2.  CONTENITORE

La seconda operazione consiste nel determinare la larghezza massima del nostro contenitore in percentuale, abbandonando i 960px del layout fisso. Dividiamo il nostro target di 960px per i 16px della misura di default del font.

3.  GLI ALTRI ELEMENTI

Per completare la nostra operazione di fluidità del layout applichiamo lo stesso metodo utilizzato per il font agli altri elementi della pagina. Ogni elemento del layout deve essere trattato come una proporzione relativa rispetto al contenitore. Dobbiamo quindi non solo considerare ogni singolo elemento, ma guardare alla relazione tra loro rispetto al contenitore. Questo ci permette di convertire il nostro layout fisso in pixel in percentuali e mantenere le proporzioni della nostra griglia intatte quando questa  si ridimensiona. Per esempio l’header è largo 960px cioè significa il 100% del nostro layout.

L’header contiene al suo interno due elementi: il logo e il menù di navigazione. Come li distribuiamo rispetto al 100% dell’header?

Utilizziamo lo stesso metodo con gli altri elementi della pagina e quando calcoliamo la misura relativa di un elemento dobbiamo considerare il suo contenitore. Infatti, il testo contenuto nei servizi (p) è inserito nel contenitore  #left di larghezza 320px; il padding ed il margin quindi non andranno calcolati in base alla misura totale di 960px, ma in base al contenitore del testo che è di 320px.

La stessa cosa va fatta per i testi contenuti nel contenitore blog. Adesso il layout è fluido, eccetto le immagini e lo slider. Vediamo come renderli fluidi nella seconda fase.

#fase 2 – immagini fluide

Cosa accade quando inseriamo delle immagini fisse nel nostro layout flessibile? Il layout si ridimensiona in base allo schermo però l’immagine eccede la larghezza del contenitore. Per fare in modo che questo non accada introduciamo la regola ‘max-width’ scoperta dal designer Richard Rutter che ha creato questo esempio.

Provate a restringere la finestra dopo questa operazione. L’immagine contenuta nello slider si adatterà alla larghezza del browser. La regola max-width forza la larghezza dell’immagine a combaciare con la larghezza del suo contenitore. Il problema principale di questa regola è che IE6 e precedenti non supportano il max-width, ma è sufficiente aggiungere questo codice per superare questo problema:

La regola max-width:100% dice alla nostra immagine di non eccedere la larghezza del suo contenitore mentre la regola width:100% obbliga l’immagine a combaciare sempre con la larghezza dei loro elementi contenitori. C’è una piccola differenza tra le due regole, ma il risultato non cambia: l’immagine si adatta alla finestra del browser. La seconda fase è conclusa: il nostro layout è fluido.

Vedi Esempio Layout Fluido

Potete notare come con questo lavoro di fluidità facilita il processo responsive; Se ora proviamo a restringere il browser, i contenuti si adattano fino ad un certo punto. È chiaro che man mano che le risoluzioni degli schermi diminuiscono si deve intervenire con il terzo ingrediente-chiave rappresentato dalle media queries. Questo ci permette di ottenere un controllo totale dal layout. Lo vediamo nella prossima fase. #FASE 3: MEDIA QUERIES Prendiamo la nostra bozza che abbiamo schizzato nella fase di progettazione e dove già abbiamo definito le nostre media query ed i nostri break-points. Ma cosa sono le Media Queries (MQ)? Sono l’evoluzione delle media-types, introdotte nei Css2.1 e servono non solo ad identificare il tipo di media, ma anche ad individuare le caratteristiche del dispositivo e del browser che visualizzerà il nostro contenuto. A differenza delle media types, le media queries sono diventate parte integrante dei css3 e possono essere richiamate/importate da diversi fogli di stile, oppure possono essere inserite direttamente nel foglio di stile con gli stili da applicare ad una particolare break-point. Con le media query, non facciamo altro che ri-disporre il nostro contenuto adattandolo al dispositivo che utilizziamo per visualizzare il sito. Per maggiori dettagli sulle media queries ci sono tante buone guide sul web come quella pubblicata da html.it .

sketch

I break-points (punti di rottura) invece sono una gamma di larghezze espresse in pixel che, inserite nelle media query, stabiliscono quando il browser, raggiunta quella larghezza attuerà gli stili inseriti nelle media queries. Veniamo al nostro esempio. Adottando un approccio per contenuti, ho creato 4 media query, sufficienti a rendere il nostro layout responsive a tutte le risoluzioni. Sarebbe impensabile, infatti, visti tutti i dispositivi mobili e tablet in circolazione adottare un approccio per dispositivi a meno che non decidiamo di selezionare alcuni dispositivi come i prodotti apple, ma vorrebbe dire adottare un processo riduttivo. Nel nostro caso ho stabilito 4 break-points:

  • 320px;
  • 480px;
  • 680px;
  • 768px

La prima operazione da fare però è inserire nella head della pagina html il meta tag viewport, cioè l’area di visualizzazione della pagina; il tag viewport comunica al browser come comportarsi quando una pagina viene ridimensionata e quanto grande deve essere l’area di visualizzazione. L’istruzione minima da inserire è questa:

Stiamo dicendo al browser di impostare la larghezza (width) della viewport in base alla larghezza dello schermo del dispositivo (device-width). Con la proprietà user-scalable possiamo decidere se consentire o meno all’utente di ridimensionare/zoomare la pagina. Questa operazione è fondamentale per la realizzazione di un sito responsive; se omettessimo di inserire il tag viewport, il browser non è in grado di interpretare le MQ. Dopo aver fatto questa importante operazione analizziamo la prima media query partendo dalla risoluzione più bassa che vogliamo realizzare secondo un approccio mobile first. Con la prima media query:

diciamo al browser che se la risoluzione sarà pari ad una larghezza massima di 320px, si attueranno gli stili inseriti tra parentesi graffa. Graficamente vogliamo ottenere una griglia con una colonna facendo fluttuare gli elementi con la proprietà float:left. Con questa media query lo slide immagini e gli articoli blog non saranno visibili e li nascondiamo con la proprietà ‘display:none’. Inoltre, con un piccolo trucco trasformiamo il menù orizzontale in un menù elenco a tendina. Questo trucco è spiegato molto bene da CSS-Tricks in questo articolo.

  • logo;
  • menù di navigazione /menù a tendina
  •  slide immagini
  •  servizi
  • testo servizi
  • blog
  • articoli blog

Nella seconda media query:

diciamo al browser che quando la risoluzione dello schermo sarà pari ad una larghezza minima di 321px fino ad una massima di 480 px si attueranno  le modifiche inserite in parentesi graffa. In tal caso la griglia sarà formata sempre da 1 colonna ma con gli elementi centrati rispetto al contenitore e con maggior spazio tra gli elementi stessi. Anche in questo caso ho deciso di mantenere il menù a tendina perché le voci di menù risultavano troppo vicine tra loro; A questa risoluzione rendiamo visibile lo slide immagini. La terza media query:

che è quella in cui il browser sarà pari ad larghezza minima di 481px fino ad una massima di 680px il layout si trasformerà in una griglia di  2 colonne a 481px e arriverà a diventare una griglia di 3 colonne raggiunta la larghezza massima di 680px. In questo caso rendiamo visibili il primo articolo del blog; il menù torna a diventare orizzontale. Infine, la quarta media query,

servirà solo a fare qualche modifica relativa ai margini tra gli elementi. Ultimo consiglio: testiamo il nostro layout non solo con gli strumenti esistenti sul web, ma anche ridimensionando la finestra del browser per vedere come il contenuto si dispone, si adatta e fluttua rispetto al browser. La soluzione migliore per un layout responsive è quella di mantenere una pagina pulita, e semplice e con pochi elementi.

Conclusione

In 3 soli step abbiamo realizzato un layout responsive a tutti i dispositivi e certamente non è un processo semplice e richiede tanto lavoro e tanta progettazione in più. Ma il risultato finale paga tutti gli sforzi fatti: quanto è bello vedere un sito che si adatta anche alla risoluzione di uno smartphone o di un tablet ? Ecco il risultato finale con il layout responsive: Scarica Esempio Che ne pensi ? Vuoi condividere la tua esperienza sul RWD, o hai altro da aggiungere? Non dimenticarti di lasciare un commento! 🙂 Fonti: a list apart, guida html.It

  • Manuel Ricci

    Hai riassunto perfettamente i principi del RWD, complimenti!

    • Aledero design

      Grazie Manuel 🙂

  • Aledero design

    Grazie Manuel sono contenta che sia stata utile 🙂

  • Daniele Pavinato

    Ciao Alessandra. Complimenti e ottimo articolo!

  • Quantecose

    Sei uno spettacolo!!!!! Grazie Mille mi sei stata utilissima! Ma oltre tutto la chiarezza è stata regina ! Complimenti !

    • Aledero design

      Grazie mille a te! 🙂

  • Paolo

    Ottimo articolo, una sola considerazione che riguarda le immagini:
    la soluzione è ottima, il problema però in questo caso riguarderebbe il peso in Byte delle stesse, nel senso che anche da smartphone verrà scaricata l’immagine originale di grande risoluzione.
    Per ovviare a questo inconveniente bisogna implementare una soluzione con un linguaggio server-side?

    • Aledero design

      Ciao Paolo, la tua osservazione è giustissima, in effetti per le immagini va fatto un articolo a parte perché è un problema ancora in fase di discussione. Prima di arrivare ad una soluzione via javascript però ci sono una serie di altre possibili soluzioni illustrate benissimo in questo articolo che ti consiglio di leggere: http://css-tricks.com/on-responsive-images/ , ognuna con vantaggi e svantaggi ma sicuramente in grado di alleggerire il peso delle immagini.

      • Paolo

        Grazie!

  • Giovanni

    Ciao, volevo sapere una cosa semplicissima, per creare la versione mobile di un sito web cosa è giusto fare, creare un foglio di stile separato con relativa pagina html o è giusto creare solo un nuovo foglio css per il responsive e collegarlo alla pagina html principale?

    • Aledero design

      Ciao Giovanni, ma tu intendi creare una versione mobile separata del sito? o la versione responsive per i cellulari? Se parliamo del secondo caso adesso è possibile utilizzare le media queries direttamente nel foglio di stile principale, per cui non c’è bisogno di utilizzare un foglio di stile a parte.

  • ilmio

    Ciao complimentissimi per l’articolo.
    Torno su un argomento spinoso: le immagini e in particolar modo i banner pubblicitari. Ho un circuito banner e per richiamere i banner uso un javascript, come faccio a rendere fruibili i banner per ogni risoluzione (in pratica dovrebbero ridimensionarsi) o, al limite, escluderli da 480px in giù?
    Spero di essere stato sufficientemente chiaro.
    Buona giornata
    Sandro

    • smaury

      Se sono sotto forma di immagini basta usare una regola css del tipo:

      #contenitore_banner img{
      max-width:100%;
      max-height:100%;
      }

  • Davide

    E Per quanto riguarda i siti internet che non hanno limiti di “WIDTH”? Come faccio a impostare le percentuali partendo già dal presupposto che non voglio margini?

    • smaury

      Utilizzi appunto le percentuali, quindi
      body{
      width:100%;
      margin:0;
      }
      e imposti il resto di conseguenza
      sidebar{
      width:20%;
      }
      container{
      width:100%;
      }

      Poi gestisci le dimensioni dei caratteri con le media query

  • Marco

    Erano anni (e non scherzo) che tentavo di farmi venire la voglia di capire i fondamenti per la transizione al design fluido. Essendo sempre stato un “one man webmaster” avevo già altre tematiche (dalla grafica, al seo, alla programmazione), e lasciavo sempre indietro questa (ho tentato eh, lo giuro :-). Beh: ti devo fare i miei più vivi complimenti. Quest’articolo è eccezionalmente ben scritto, chiaro, semplice, con esempi.

    Non solo ho capito perfettamente, ma mi è pure venuto un entusiasmo che non avevo da un bel po’ di imparare cose nuove e migliorarmi. Sono venti ore di seguito che leggo documenti, approfondisco, testo.

    Grazie!

    • Aledero design

      Grazie Marco,
      siamo tutti contenti che ti sia stato utile. I tuoi complimenti non ci fanno che bene 🙂
      Seguici ancora e ci sentiamo presto!

  • salvo

    articolo molto ben fatto, complimenti

  • Alberto

    Premetto che non sono un fan dei responsive layout anche perché, se da un lato risolvono dei semplici problemi di disposizione di aree e contenuti, dall’altro ne creano altri ben più fastidiosi di tipo funzionale a partire dal non essere cross-browser e dal fatto che la disponibilità di scripts completamente compatibili ne risulta alquanto ridotta e chi, come me, si occupa di e-commerce, sicuramente conosce bene questo aspetto. In ogni modo, nei progetti dove il contenuto testuale vedi Blog o siti di News, è preponderante rispetto a quello operativo o di immagine, i responsive layout sono effettivamente un’ottima soluzione. In questo contesto, tuttavia, non trovo che l’utilizzo degli ems sia molto pratico anzi spesso il fatto di essere dipendenti dal contenitore (parent container) si rivela una sorta di boomerang. Utilizzando invece i rems che hanno il vantaggio di essere stabiliti una volta sola per tutto il sito, si ottiene un risultato più standard e controllabile in tutte le aree del layout. Per evitare problemi con browser di vecchia generazione, basta utilizzarli in seconda dichiarazione.

    • Aledero design

      Ciao Alberto,
      si sono d’accordo con te, e l’ho scritto nell’articolo di oggi che i rems sarebbero la soluzione ideale e visto che la compatibilità crossbrowser è abbastanza elevata, consiglierei di usarli al posto degli ems.

      Grazie del tuo intervento 🙂

      • Alberto

        Grazie a voi….. splendido articolo 🙂

  • Gabriele

    Buongiorno Alessandra,
    Supponiamo di aver costruito un template html non responsive. Potrebbe essere utili crearne uno responsive dedicato a smartphone, tablet e quanto altro…Nel caso in cui utilizzassi joomla come piattaforma ci sono componenti apposite per switchare il giusto template responsive o no. Mi chiedevo se si potesse fare la stessa cosa in html…ovvero come far capire allo smartphone di non utilizzare il layout html fisso ma magari quello mobile che avrò uploadato magari in una sottocartella?
    Grazie in anticipo e complimenti per il tuo lavoro!

    • smaury

      Utillizando javascript puoi rindirizzare l’utente in base al browser, oppure se utilizzi un vero e proprio layout responsive non è necessario, in quanto sarà il layout ad adattarsi al tipo di schermo!

  • denis

    Salve! Cerco anch’io di cimentarmi nel layout responsive! 😀 Per prima cosa complimenti per l’articolo! Ho appena iniziato a leggerlo e sto mettendo in pratica pezzo per pezzo, non riesco a capire come funziona: target:contenuto=risultato… Io l’ho interpretato in questo modo:

    Ho un div con id=contenitore{max-width:775px;} all’interno di questo div c’è un’altro div con id=testo{font-size:15px;} quindi per modificarlo io ho fatto: 15:775=0.01935em=font-size, il problema è che il testo è piccolissimo, se invece mantengo tutto in px è perfetto… Dov’è che sbaglio?

    Ecco il codice:

    #contenitore{
    max-width:775px;
    position:absolute;
    top:42.8%;
    left:41.3%;
    }

    #testo{
    font-size:0.01935em;
    font-family:’Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
    color:#a9a9a9;
    }

    TESTOTESTOTESTOTESTOTESTO..

    Io avevo capito che per ottenere la dimensione del testo devo dividere la dimensione che voglio ottenere, in questo caso 15px, per la dimensione del contenitore del testo che in questo caso è largo 775px…

  • Claudio

    Davvero un gran bell’articolo, mi attende un lungo weekend di lavoro per rendere flessibile un layout a cui stavo lavorando… Direi che ho trovato tutte le dritte di cui avevo bisogno! Grazie!

  • Ciao e grazie per l’articolo, davvero chiarificatore! 🙂

    Ho spulciato un po’ l’esempio scaricabile a fine articolo con l’inspector di FireFox e di Chrome, ho allargato e ristretto il vieport e ho notato un comportamento che non capisco che vado a spiegare: al max-width: 320px fai sparire lo slider (display:none) e fin qui tutto chiaro; riportando il viewport sopra i 320px di larghezza, però, solo i puntini dello slider tornano a essere visibili, le immagini dello slider no.

    Come mai succede questo? Grazie e ciao.

    Vincenzo

  • Silvia

    Ciao, grazie per l’articolo. Volevo chiederti ma la punteggiatura del codice e la sintassi è tale e quale a come deve essere?..A volte manca la punteggiatura o le misure espresse a seconda del caso. Ciao

  • Federico

    Ottimo articolo questo e già ho iniziato a mettere in atto il tutto per il mio sito, ma ho notato però che con IE non tutto funziona regolarmente…qualche soluzione a
    tal proposito?

    • Aledero design

      Ciao Federico, su quale versione di IE hai problemi? Ci sono diverse soluzioni al riguardo. In ogni caso comincia ad inserire nell’html la libreria htm5shiv come condizionale creata per supportare i nuovi tag su IE.
      Fammi sapere se hai miglioramenti

      • Ciao e grazie per la immediata risposta.
        La versione di IE con la quale ho provato è la 8, ma ho visto che non funziona nemmeno la pagina della demo scaricata dal tuo articolo. quando restringi il browser non viene nascosto il menù in alto e non compare quello a tendina, inoltre alcuni elementi non si vedono.
        Per quanto riguarda la libreria come si utilizza?
        Grazie e buona giornata
        Federico

        • Aledero design

          Si in effetti è stata una mia mancanza. Comincia ad inserire questo nella head del sito. In giornata faccio un controllo generale sulla demo e faccio ripubblicare quella corretta per IE. Grazie della segnalazione. Il codice da aggiungere è

          • Scusa Alessandra, non vedo il codice da inserire…
            Grazie

            Federico

  • Scusa Alessandra, non vedo il codice…
    grazie

    Federico

  • Veronica

    Ciao Alessandra, molto chiari i tuoi articoli. Ti posso chiedere delle indicazioni pratiche lato Art Director. Quando si inizia la progettazione di un app Responsive.
    Nell’articolo partli di css che interessano di più gli sviluppatori. Lato disegno? Grazie 1000

    • Aledero design

      Ciao Veronica, ti ringrazio per i complimenti. C’è un libro sul responsive web design impostato più lato design che sviluppo e si chiama RESPONSIVE DESIGN WORKFLOW di Stephen Hay ( Inglese ). In ogni caso mi hai dato lo spunto per preparare qualcosa di specifico su questo argomento. Stay tuned 🙂

  • Giovanni Pirone

    Ciao Alessandra, ottimo articolo!

    Ho reso il tutto responsive con le media query, quando restringo la finestra del browser il sito effettivamente fa tutto ciò che ho scritto nelle media query però poi quando lo apro sui vari dispositivi si comporta come se non lo fosse.

    Da cosa può essere dovuto?

    Grazie

    • zoulab

      Ciao! Forse hai omesso il tag viewport?

  • Ciao Alessandra e grazie per il codice,
    purtroppo però non funziona con ie8, vedo tutto sballato mentre con chrome e firefox è perfetto.
    Come fare?
    Ciao
    Federico

    • Aledero design

      Ciao, sembra strano perché io l’ho provato su ie8 e funziona.. anche su IE7, al massimo potrebbe avere con IE6… provo a dare un’altra occhiata e ti faccio sapere

      • Eccomi ancora qua,
        prova a vedere cosa vedi con IE8 a questo indirizzo e poi dimmi se potrebbe esserci una soluzione. Con IE9 tutto ok come con Chrome e Firfox.

        w.w.w.inautogarda.c.o.m./_prova/_index.p.h.p.

        Vediamo se con tutti questi punti l’indirizzo rimane postato o viene cancellato.
        Le pagine a questo indirizzo sono al momento solo in prova, devo ancora fare qualche ritocco.
        Per quanto riguarda il responsive invece mi sembra buono,
        Un’altra domanda…meglio usare il set caratteri UTF8 oppure iso-8859-1.

        Ti ringrazio infinitamente per il tempo che noi tutti ti facciamo perdere.
        Federico

        • Ciao Alessandra e rieccomi…
          allora ho guardato il tuo sito aledero design con la versione di di IE8 che ho su un portatile e purtroppo lo vedo sballato. Con IE9, Chrome e Firefox. invece tutto perfetto.
          Penso quindi che la compatibilità sia quasi impossibile da applicare per cui ho pensato di inserire una regola nell’.htaccess.
          Quando viene fatta una richiesta al sito con browser IE8 o inferiori (che ormai sono pochi ad utilizzarlo) rimando a una pagina dove specifico che per la corretta visualizzazione bisogna aggiornare IE alla versione 9 oppure visualizzarlo con altri browser che supportano css3 e html5.
          Cosa ne pensi? sbaglio?
          Ciao e grazie.
          Federico

  • Salve vorrei sapere dove dobbiamo mettere lo script della Query..nel file css o nel file html o in un file separato ? Se fosse l’ultimo caso come bisogna richiamarlo ?

  • Alex

    Salve ho provato a caricare in layout sul server per testare la compatibilità su vari dispositivi mobili ed ho notato che su risoluzione 360×640 (galaxy note 2) c’è un gioco sulla larghezza da cosa può dipendere? Si può risolvere?

    • Aledero design

      Ciao Alex grazie per la segnalazione. In effetti c’è un errore nella media query che comprende la risoluzione tra 321px e 480px. Adesso faccio caricare il file corretto o se mi scrivi in privato a ciao@alederodesign.it ti dico come correggere il codice. Scusa e grazie per avercelo segnalato

  • Ma questo sito come è realizzato? con questo css fluido?

  • dorio

    Ciao a tutti. Ho un blog e vorrei diventasse espansive. Avete qualche contatto da passarmi che li faccia per me?chiaramente parlo di lavoro remunerato eh!

  • dorio

    *responsive

  • luca

    Salve grazie per il tutorial!!!! Potrei contattarla in privato per maggiori dettagli?grazie ancora

  • sara

    Ciao,
    io stò realizzando un sito,purtroppo ho già creato le mie pagine un pò di fà quando non c’èra ancora il bisogno di adattarle ai cell ecc… per vari motivi ho abbandonato questo progetto,adesso l’hò ripreso in mano,adesso non vorrei dover fare tutto da capo, c’è un modo per modificare le mie pagine grafiche che avevo realizzato e adattarle con il responsive?
    le impostazioni che anno sono 1024×768
    grazie!

Shares