Responsive web design

Gli smartphones ed i tablet si stanno diffondendo sempre di più, è anche possibile che chi aveva acquistato un pc solo per poter vedere la posta, seguire i social network e fare altre operazioni basilari, scelga per un acquisto successivo un dispositivo mobile piuttosto che un computer. A questo punto per quelli che sviluppano per il web si pone una nuova domanda: come faccio a rendere il sito a cui sto lavorando compatibile non solo con tutti i browser, ma anche con tutte le risoluzioni monitor, comprese quelle degli smartphone?

Se il sito è a più colonne è molto probabile che dovrà essere riorganizzato in modo che visualizzi in una colonna tutti i contenuti. Ma come si fa? Come per la stampa, è possibile creare dei fogli di stile pensati per funzionare solo con i dispositivi mobili.

Per prima cosa si può iniziare inserendo nel foglio di stile un codice come questo:

@media only screen and (max-device-width: 480px) {
//le regole che volete applicare }

tutto ciò che verrà inserito all’interno infatti, funzionerà solo per la risoluzione indicata.

Oppure ancora meglio, si può inserire vicino al link che richiama il foglio di stile per i monitor, quello per l’iphone ad esempio:



Perchè parlo di foglio di stile per l’iphone? Perchè è possibile che sia necessario farne altri, per l’ipad ad esempio.

Ma come faccio a capire se i miei fogli di stile vanno bene se non ho uno o più dispositivi? Per questo ti possono aiutare questi due simulatori:


iPhone 4 Simulator – Simula la visualizzazione di una pagina web su iphone 4


The Responsinator – Simula la visualizzazione di una pagina web su vari dispositivi mobili, dall’iphone al kindle fire

Per approfondire l’argomento, ti consiglio di avere sempre a portata di mano un manuale di css e magari di leggere questo libro:


Responsive Web Design

Commenti

Vuoi cominciare a pubblicizzarti online o hai già iniziato a farlo ma cerchi qualcuno che elabori una strategia per te e segua la crescita della tua attività? Contattami raccontandomi qualcosa di te e verificheremo insieme se e come posso aiutarti.

Post Correlati

Leave a comment