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 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 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)?

Di solito quello che serve all’inizio sono le basi, ne ho accennato nell’articolo precedente per quanto riguarda le griglie tipografiche, e sono fondamentali per definire subito quello che si può fare e con quali mezzi, perché il più delle volte si cerca di arrivare ad una soluzione usando senza saperlo il metodo sbagliato o una procedura non completa con la conseguenza di rimanere bloccati a metà.

Perché

Nello sviluppo web, nel mio caso focalizzerò il discorso più sull’uso dei css, è importantissimo fare pratica perchè non esiste una sola strada per arrivare ad un risultanto anzi, ci sono decine di modi per fare praticamente qualsiasi cosa, l’unica differenza è che nonostante all’apparenza funzionino tutte, analizzando meglio e sopratutto facendo test incrociati su altri browser si scopre che poche sono in realtà le tecniche “solide” utilizzabili con sicurezza e compatibili con la maggior parte delle piattaforme.

Per chiunque sia seriamente intenzionato a fare dello sviluppo web il mio lavoro nasce l’esigenza di dover imparare a saper gestire il maggior numero possibile di problemi o “sfide” che si presenteranno durante un progetto e che per forza di cose metteranno a dura prova le proprie conoscenze per arrivare nel minor tempo possibile ad una soluzione stabile e sicura per il futuro.

Come iniziare

Ma come si può fare pratica? Beh, a questa domanda ognuno ha la sua risposta ma il modo migliore secondo me per iniziare è di prendere una pagina che reputiamo sia realizzata bene  e tentare di ricrearla da zero, parendo prima dalla grafica e poi al codice vero e proprio. In questo modo non solo si affinerà la capacità di analizzare più a fondo un sito ma anche ci costringerà a superare delle barriere che non avremmo superato. Quanti metterebbero nel proprio design qualcosa che non saprebbero poi ricreare in html? Pochi intrepidi che evidentemente hanno tempo per poter trovare il metodo giusto rimanendo , si spera, comunque puntuali con il cliente.

Successivamente è possibile portare i propri testi ad un livello successivo buttandosi sulla creazione di pagine CSS Zen, cioè avendo un html fisso (meglio usare quello fornito da loro) non modificabile e utilizzare il solo css per applicare una grafica che avremo realizzato precedentemente dovendo così risolvere tutti i problemi che si presenteranno durante il percorso solo ed esclusivamente via css, cosa non semplice ma sono sicuramente molto gratificante il giorno che si sarà riusciti ad arrivare al risultato sperato senza strani hack e con un codice pulito e leggero.

La punta dell’iceberg

Ovviamente questo è un esempio molto generalista e come ho scritto sopra ognuno ha i suoi metodi e sopratutto: più esperienza si fa meno si avrà bisogno in futuro di fare pratica.

Si arriva ad un punto in cui guardando una pagina web si potrà subito pensare a come ricrearla scoprendo poi, analizzando il sorgente, che la vostra soluzione in realtà è molto più pratica e veloce di quella che è stata adottata nel sito che avete di fronte e allora capirete che siete pronti a tutto e sopratutto potrete iniziare a chiedervi… e ora cosa posso imparare? Come ha detto qualcuno: ”non ci sono limiti alla conoscenza” e anche senza uscire dal mondo web ci sono talmente tante figure professionali e nuovi settori che c’è solo l’imbarazzo della scelta.

Ora chiedo a voi, come avete iniziato a muovere i primi passi nel web?