Targeting dispositivi mobile via css

Nei prossimi giorni pubblicherò una serie di mini articoli dedicati ad alcuni accorgimenti che si possono adottare fin da subito per rendere il proprio sito più mobile friendly ed anche alcuni tips per gli sviluppatori wordpress.

Partiamo dal targeting della dimensione schermo per i dispositivi mobile (smartphone e tablet): il modo migliore per utilizzare uno stile specifico che vada a sovrascrivere parte di quello principale è di usare l’attributo @media nel css specificando le regole per poter essere applicabile (nel nostro caso la larghezza in pixel dello schermo).

Esempio tratto dal css di [link id='199' text='Helicon']:

@media screen and (max-width: 1050px) { ... } /* Small Screens: < 1050px  */
@media screen and (max-width: 770px)  { ... } /* Tablet: < 770px  */
@media screen and (max-width: 480px)  { ... } /* Smartphone H: < 480px  */
@media screen and (max-width: 380px)  { ... } /* Smartphone V: < 380px  */

In questo caso il css è impostato in modo che abbia una struttura principale e successivamente 4 variazioni in base al supporto di visualizzazione, ciò ci permette di avere un layout semi-flessibile e adattabile, pratica che, secondo me, permette di mantenere una alta leggibilità e usabilità con il minimo di sforzo, a patto che tutto ciò venga preso in considerazione in fase di progettazione per evitare di avere una base che per sua stessa natura sarebbe difficilmente “frammentabile” come vedremo ora.

Questo è lo schema che ho preparato in fase di progettazione, ovviamente il layout di per se è molto semplice ma è l’esempio perfetto per dimostrare fin dove ci si può spingere con il riordinamento delle varie sezioni in base al supporto di fruizione.

Come potete vedere in questo modo l’utente ha prima di tutto un vantaggio enorme, non avrà mai bisogno di ingrandire un particolare elemento della pagina per poterlo leggere, la dimensione del carattere sarà sempre la stessa dal pc allosmartphone, così come i pulsanti ed ogni altro elemento manterrà la dimensione originale (con qualche variazione per i grandi schermi in cui entra in gioco una semi-flessibilità delle colonne laterali).

In un prossimo/i post spiegherò esattamente come ho fatto per [link id='199' text='Helicon'] a raggiungere un risultato prefisso nel progetto.

Per ora concludo qui questa che potremmo definire solo una introduzione ad un argomento a cui mi sono da poco interessato in modo serio ed effettivamente riserva molte più sorprese di quante mi aspettassi.

Mi piacerebbe sapere cosa ne pensate, qualcuno di voi ha già provato ad applicare il media screen per aggiungere un po’ di flessibilità ai propri lavori (anche senza spingersi fino alle versioni mobile)?







One Response to “Targeting dispositivi mobile via css”

Complimenti Raffaele,

Interessante introduzione ad un tema cruciale per il prossimo (beh! direi attuale) futuro sulla progettazione di Interfacce flessibili per il Web, tra layout liquido e media queries.

Bene, Benissimo che anche in Italia si inizino ad affrontare i punti salienti, le argomentazioni più calde sul “Responsive Web Design” (così come lo si sente rimbalzare tra i blog d’oltreoceano e oltremanica).

Dovremo tutti prendere parecchia confidenza con un nuovo modo di approcciare il Web Design e la moltitudine di media cui i nostri Lavori dovranno adattarsi.

Seguirò con interesse l’evoluzione dei tuoi articoli…

Mirco Moretti added these pithy words on Feb 21 11 at 5:32 pm