Elisabetta Barone - E-commerce, SEO, Web Marketing | Torino
E-commerce, SEO, Web Marketing

Web design

Cos'è un sito responsive
Guida per chi lo vende e per chi lo compra

31 Marzo 2014

Se siete un web designer aggiornato e coscienzioso probabilmente pensate che fare un sito che non sia responsive al giorno d'oggi sia una specie di peccato mortale. Probabilmente, coltivate l'illusione che tutti siano perfettamente al corrente di quello che significa il concetto di "responsive". 
Eppure... A volte capita di sentirsi dire da un cliente: "Ehi c'è un problema con il sito che mi hai fatto: se lo guardo dal tablet lo vedo tutto diverso rispetto a quando lo navigo da pc!"

Sito con layout responsive sui vari dispositivi
A obiezioni di questo tipo di solito al web designer medio sale una malinconia che neanche a Byron sula rupe. Anche perché, diciamocelo, progettare e realizzare un template responsive é molto più complesso rispetto ad un template che non lo è, ed é un vero peccato che il cliente non si renda conto di questo valore aggiunto che gli stiamo offrendo - magari regalando, perché siamo scrupolosi, appassionati ed amiamo il lavoro ben fatto.
Ma forse é solo il caso di spiegarsi un po' meglio: non tutti i clienti infatti sono tenuti a comprendere e condividere il nostro gergo tecnico. Il web design è il nostro mestiere, il loro, magari, è tutt'altro.

Cosa non è

Cominciamo col dire cosa non é un sito responsive: un sito responsive non è una versione progettata per i dispositivi mobili. 
Non si tratta cioè di qualcosa di 'altro', separato, distinto dal sito desktop. É più corretto infatti parlare, piuttosto che di sito, di design o template responsive: la responsività non interessa infatti la sostanza ma la forma. Si tratta di un vestito che si trasforma, svelando, nascondendo, spostando i vari elementi che compongono la pagina, in modo da avere sempre la foggia adatta al dispositivo dal quale è di volta in volta visualizzato (tablet, smartphone...)


Responsive Design: Bootrstrap in 5 mosse
prendere confidenza e fare amicizia

26 Luglio 2013

Aggiornamento del 7 maggio 2014: Questo post è stato scritto quando era in uso la versione di Bootstrap 2.3, oggi non più supportata e sostituita dalla 3. Tuttavia, molti template utilizzati dai web designer fanno ancora riferimento alla 2.3 quindi... Meglio non dimenticare!

Con la diffusione degli smartphone e dei tablet (un Galaxy Tab oggigiorno non si nega più a nessuno), sempre più siti implementano un template responsive, ovvero che adatta il proprio layout a seconda del device sul quale viene visualizzato.
Questi siti in pratica non necessitano di un sito mobile ma, grazie alla virtù responsiva, lo stesso sito si trasforma a seconda del supporto sul quale viene visualizzato.

Se siete degli sviluppatori di siti internet vi sarà sicuramente capitato di imbattervi in un template responsive. In questo caso le variabili da tenere presente in fase di sviluppo del css, quindi della grafica del sito, si moltiplicano... Per tutte le risoluzioni di schermo previste! Infatti, non dovrete solo preoccuparvi che i vostri voli pindarici estetici (o quelli del vostro collega grafico) siano ben accetti dai molteplici browser, ma anche alle diverse risoluzioni, ingrandendo e rimpicciolendo la finestra del browser per simulare l'effetto.

In molti casi, dietro alla magia della responsività c'è Bootstrap, un framework inizialmente sviluppato per Twitter, ora reso disponibile tramite GitHub per i più intraprendenti costruttori di template e app.

Il responsive design di Bootstrap è gestito grazie alle proprietà .min-width e .max-width: ciò che è più grande o più piccolo dei valori compresi deve essere modificato per essere visualizzato in modo ottimale.

Se il vostro scopo immediato è domare un template responsivo, le cose da sapere subito sono queste:


Web app design
intraprendere l'avventura

13 Novembre 2012

Cos’è una web app? In due parole: è un sito web che serve a fare qualcosa. Un sito ha di solito scopo informativo, mentre una app serve a svolgere un compito. Nel caso di web app aziendali, può essere uno strumento di lavoro che l’utente è obbligato ad usare per molte ore al giorno. 


Simple js news slider

24 Aprile 2012

Bettabi ha cominciato a cimentarsi con Javascript e con la potente libreria jQuery.
Ho il piacere di condividere con voi questo semplice news slider:

Immagine news slider

Visualizza la DEMO

Scarica i SORGENTI

Critiche e suggerimenti sono ben accetti :-)

Sviluppare per le LIM

13 Dicembre 2011

In questi giorni mi sto cimentando con lo sviluppo di un'applicazione didattica per bambini delle scuole elementari, propedeutica all'apprendimento della lingua inglese.

L'applicazione, che prevede una serie di semplici esercizi interattivi organizzati per categorie, corredati da audio, video, forme e colori in movimento, sarà fruita principalmente su lavagne interattive multimediali, anche note come LIM.