Web e Code Script

Robadagrafici diventa un blog responsive

Dopo due anni di attività il blog di comunicazione Robadagrafici cambia veste.

Dopo un’attenta analisi delle statistiche del sito e valutato l’alto numero di accessi ricevuti da dispositivi diversi da quelli “desktop”, abbiamo pensato di aggiornarci secondo le ultime tecnologie del responsive web-design.

Da oggi, accendendo da smartphone o tablet, il blog adatterà automaticamente i contenuti a tali dispositivi, captandone le dimensioni dello schermo.

Abbiamo aggiunto alla ricetta del nuovo sito un pizzico di CSS3, piccole animazioni (sullo stato hover delle anteprime del post) per renderlo più accattivante senza l’utilizzo del quasi defunto Adobe Flash.

blog-robadagrafici-responsive

Come creare un sito responsive design

La realizzazione di un sito responsive non deve lasciare nulla al caso, bisogna avere perfettamente in mente cosa si vuole realizzare. Si procede step by step attraverso i seguenti passaggi:

  • La progettazione del sito e l’organizzazione dei contenuti

    La prima fase, la più importante, è quella progettuale.
    Decidiamo quali dovranno essere le sezioni in base ai contenuti del sito, come organizzarle, cosa mostrare e cosa nascondere sui diversi dispositivi.
    Aiutiamoci disegnando a grandi linee su carta il nostro progetto, o utilizzando strumenti che rappresentano visivamente il nostro layout. Questo ci aiuterà ad avere ben chiaro ciò che desideriamo dal nostro sito.

  • La ricostruzione digitale del progetto con un programma di grafica

    Dopo questa prima “fase di ideazione” si può procedere alla ricostruzione in digitale del nostro progetto, attraverso programmi di grafica, quali ad esempio Adobe Photoshop.
    Per quanto attiene alla esportazione delle immagini, cerchiamo di limitarne l’uso quando se ne può fare a meno, in modo da ottenere un sito leggero: evitiamo quindi di utilizzarle per le tinte piatte, sfruttiamo invece il css più possibile.

  • La ricostruzione in html del sito con l’utilizzo delle media queries

    Ora che abbiamo il nostro layout, passiamo alla costruzione del sito web in html. Se abbiamo posto la dovuta attenzione alla fase progettuale avremo le idee chiare e sapremo come dovranno comportarsi i nostri div. Utilizziamo le media queries e il metodo a cascata % per rendere il nostro layout flessibile. Le media queries dicono alla pagina quale css seguire quando si raggiungono determinati breakpoints (punti di rottura), mentre il metodo a cascata % dà fluidità appunto attraverso le percentuali.
    Ovviamente, per chi lo volesse, in questa fase si costruisce il tema responsive per il CMS che si intende utilizzare, noi di Robadagrafici ad esempio abbiamo costruito un tema responsive per WordPress.

  • La fase di testing

    Non ci resta che verificare il comportamento del sito su vari dispositivi. Se non disponete di un tablet, o di uno smartphone, non vi allarmate, potete usufruire dei tool gratuiti per testare online il sito responsive.




emoticons

avatar
Autore: Valerio Del Re

Dott. in Comunicazione e Pubblicità per le Organizzazioni,
Grafico e Web Designer freelance, CEO presso Robadagrafici


Cosa ne pensi? Esprimi la tua opinione.
Scrivi un commento.

Loading Facebook Comments ...

Ti potrebbero interessare anche:


font-awesome

Icon Font Awesome. Come inserire sul sito icone tramite font

Le icone sono ormai uno standard per chi realizza siti internet. Permettono infatti un’ottima personalizzazione per lo stile […]


testare-sito-mobile-online

Testare sito mobile online. Effettua il test con Google

Se sei un webdesigner sicuramente nell’ultimo periodo ti starai dedicando allo studio della tecnica del responsive design. Un […]


orologio-esadecimale

What colour is it? L’orologio esadecimale

Oggi vi segnalo un sito creativo, da veri nerd, per appassionati di grafica e web. Si tratta del […]


sfumature-css3

Come creare una sfumatura con CSS3

CSS3 ha tantissime potenzialità che ogni web designer dovrebbe conoscere per evitare di fare un uso spropositato di […]


css3-box-shadow

Ombra CSS3. Come aggiungerla a testo, div e immagini

CSS3 è una rivoluzione. Ci permette di aggiungere tanti effetti grafici agli oggetti presenti nelle nostre pagine web, […]


css3-border-radius

Come smussare angoli di immagini e div con CSS3 Border Radius

Con Html5 e CSS3 il mondo del web ha fatto un notevole passo avanti, offrendo un’esperienza più ricca […]


mappa-vettoriale-jquery

Mappa del mondo con ingrandimento in jQuery

Creare una mappa navigabile per il sito internet è diventata ormai pratica comune, specialmente quando si tratta di […]


atlas

Arriva Atlas, la concorrenza di Facebook a Google

È ufficiale: Google ha un concorrente. Si chiama Atlas ed è di proprietà di Facebook. Quest’ultimo aveva acquistato […]


jquery-document-ready-function

La base della sintassi di jQuery: $(document) .ready()

Se vi state avvicinando da poco a jQuery e state iniziando a studiarlo, avrete notato che spesso il […]


php-if-else

PHP: gestire le condizioni con le istruzioni if e else

Se state realizzando un sito nel linguaggio di programmazione Php, magari con il CMS WordPress, imparare a gestire […]


Shares

Robadagrafici.com non è una testata giornalistica in quanto viene aggiornato senza alcuna periodicità. Non può pertanto considerarsi prodotto editoriale ai sensi della legge 62/2001. Le immagini e i testi pubblicati sono valutati come di pubblico dominio: qualora il loro uso violasse diritti d'autore, lo si comunichi all'autore del blog che provvederà alla loro pronta rimozione.
Tutti i contenuti sotto Licenza Creative Commons. Marchi e loghi di soggetti terzi utilizzati in questo sito sono di proprietà esclusiva dei rispettivi proprietari.
Roba da Grafici © 2011-2016 - Progetto a cura di ServiziWeb Srl - Privacy & Cookies Policy