Come far apparire un sito web uguale su dispositivi mobili e desktop

Non si fa apparire tutto uguale su un desktop e un dispositivo mobile. Sarebbe piuttosto inutilizzabile su una delle dimensioni dello schermo se lo facessi. Una cosa popolare da fare è chiamata responsive design. L'obiettivo del responsive design è quello di rendere tutto bello su tutti i dispositivi. Il responsive design mantiene le cose nello stesso ordine nel DOM, ma non significa che tutto sarà presente in tutte le viste. Per esempio, un'intestazione orizzontale con link di navigazione nel desktop, potrebbe trasformarsi in un menu hamburger e avere meno opzioni nel mobile.

Spesso nel responsive design si usa un sistema a griglia per aiutare a garantire che le cose appaiano bene in ogni vista (desktop, tablet e mobile). Ecco un esempio che utilizza le righe e le colonne di fondazione di zurb. Con le righe di fondazione, si ottengono 12 colonne per ogni riga visiva. Puoi assegnare un numero diverso di colonne in ogni vista. Puoi avere un'intestazione composta da 4 link. Puoi rendere ogni link largo 3 colonne nel desktop, 6 colonne nel tablet e 12 colonne nel mobile. Il CSS su ogni link assomiglia a "columns large-3 medium-6 small-12". Il risultato sarà che su desktop avrai 4 link in una fila orizzontale. In tablet avrai due file di due link. Su mobile avrete 4 righe di 1 link ciascuna.

Il vostro obiettivo è quello di creare una buona esperienza utente su quanti più dispositivi possibile. Questo non avrà lo stesso aspetto su tutti i dispositivi.