Come assicurarsi che il tuo sito abbia un bell'aspetto su tutti i dispositivi

Solo 10 anni fa i webmaster non dovevano preoccuparsi di creare più versioni di un sito Web per la visualizzazione su piattaforme diverse. I consumatori utilizzavano computer desktop o portatili a casa o in ufficio per cercare prodotti, prenotare vacanze e leggere le ultime notizie. Gli schermi, sebbene di dimensioni diverse, presentavano informazioni ai consumatori con gli stessi modelli di progettazione e c'era un senso di prevedibilità che rendeva il lavoro un po' più semplice.

Oggi i consumatori accedono al Web da desktop, laptop, smartphone, tablet, e-reader e console di gioco. Questi dispositivi utilizzano varie velocità di connessione, sono disponibili in numerose dimensioni dello schermo, risoluzione variabile e offrono velocità di elaborazione che vanno dalla tartaruga alla lepre in termini di tempo di reazione. Con i consumatori che navigano sulla tua pagina su un numero qualsiasi di dispositivi diversi, come puoi assicurarti che il tuo sito abbia un bell'aspetto, indipendentemente dal dispositivo che usano per interagire con il tuo marchio?

In questo post, discuteremo i fattori che devi tenere a mente e offriremo alcuni suggerimenti utili per guidarti attraverso l'ottimizzazione della tua pagina web per la visualizzazione su più dispositivi.

Come vedere il tuo sito su dispositivi diversi

Se sei come la maggior parte degli americani, probabilmente hai uno smartphone o un tablet, o entrambi. Tuttavia, è improbabile che tu abbia questi dispositivi dotati di tutte le diverse dimensioni dello schermo, processori e sistemi operativi che circolano oggi sul mercato. Fortunatamente, la brava gente di HubSpot ha creato uno strumento che ti consente di visualizzare il tuo sito Web su vari dispositivi senza doverlo testare su ciascun dispositivo. Il loro Device Lab è stato lanciato nel 2013 e ti consente di inserire semplicemente l'URL del tuo sito.

Il Device Lab non solo ti mostrerà come appare la tua pagina su diversi dispositivi e sistemi operativi, ma genererà rapporti rapidi sulla percentuale di visitatori mobili dalle varie piattaforme. Vedrai i rapporti per iPhone 4/4S, iPhone 5 e iPhone 6/6 Plus, nonché per i dispositivi Samsung Galaxy S3/S4/S5 e per i tablet più diffusi di oggi.

Come creare un sito ottimizzato per i dispositivi mobili

Device Lab ti aiuterà a visualizzare il tuo sito web su varie piattaforme. Vedrai se la tua pagina viene tagliata sui tablet o richiede troppe azioni di zoom e scorrimento da parte dei visitatori, ma non ti dirà come apportare le modifiche necessarie per sviluppare una piattaforma ottimizzata per i dispositivi mobili. Vuoi assicurarti che i tuoi consumatori trovino un sito Web accattivante e facile da usare, indipendentemente dal dispositivo su cui accedono al tuo sito.

Entrepreneur offre alcuni punti di partenza di base per i webmaster che desiderano creare un sito che abbia un bell'aspetto su qualsiasi dispositivo. Per cominciare, dovresti prenderti il ​​​​tempo per esaminare il tuo sito attuale e assicurarti che corrisponda all'utente web di oggi. Più di un miliardo di persone utilizza gli smartphone in tutto il mondo e molti li usano come punto di accesso principale per Internet.

Inizia semplificando il design generale del tuo sito. È necessario considerare design di pagina più semplici e dimensioni dei caratteri più grandi per tempi di caricamento più rapidi e una visualizzazione più semplice sui dispositivi mobili. Il vecchio termine di giornale "above the fold" è importante nel moderno web design. Se i tuoi spettatori devono scorrere la pagina in basso su un dispositivo mobile, rinunceranno rapidamente a favore di un sito ben progettato. Assicurati che le tue informazioni critiche siano above the fold (il che significa che non devi scorrere per trovarle) e usa pulsanti grandi e toccabili. La composizione di testa è un ricordo del passato, ma le dita grasse portano a pressioni accidentali di pulsanti sugli smartphone su base giornaliera.

Se non vuoi perdere tempo con l'adattamento del tuo sito web attuale, hai anche la possibilità di creare un sito mobile. Lo sviluppo di un sito mobile per la tua azienda crea un sito web parallelo che esiste separato ma connesso al tuo sito web tradizionale. I processori determinano se i visitatori provengono o meno da desktop/laptop o smartphone/tablet e li reindirizzano al tuo sito mobile immediatamente quando inseriscono il tuo URL.

Tuttavia, ci sono dei compromessi che derivano da un sito mobile. Costruendo un sito mobile che utilizza un secondo URL, in particolare il sottodominio .m, la tua visibilità nei motori di ricerca ne risentirà. Google e Bing non vengono trovati nel sottodominio .m e spingono i webmaster a utilizzare un URL per una maggiore visibilità e ottimizzazione dei motori di ricerca.

Detto questo, il tuo budget potrebbe costringerti a creare un sito mobile separato invece di ricostruire il tuo sito principale. Un sito mobile meno visibile è meglio che perdere del tutto il pubblico mobile. Assicurati solo di collegare il tuo sito mobile al tuo sito principale e sarai in grado di colmare parte del divario.

L'opzione migliore

Naturalmente, potresti sempre fare un investimento significativo nella tua attività e ricostruire un sito che funzionerà su qualsiasi dispositivo in qualsiasi momento. Attraverso un design adattivo e reattivo, puoi creare un sito Web che ha dimostrato di essere visualizzato correttamente ogni volta che i visitatori fanno clic sulla tua pagina, indipendentemente dal dispositivo che stanno utilizzando. Ecco una breve introduzione a entrambi i concetti:

• Design adattivo: le grandi aziende investono molto nel design adattivo. Un sito web adattivo rileva e identifica il dispositivo di ogni utente in pochi secondi e genera una pagina abbinata alle capacità di quel dispositivo specifico.
• Design reattivo: utilizzando la tecnologia CSS (Cascading Style Sheets), il design reattivo crea un'unica versione del tuo sito Web che si adatta automaticamente per essere visualizzata correttamente sulla maggior parte dei dispositivi, ad eccezione dei cellulari più vecchi. I design reattivi sono sufficientemente flessibili da garantire che il tuo sito abbia un bell'aspetto, indipendentemente dalle dimensioni del display o dalla velocità del processore su un dispositivo.

Ci sono degli svantaggi in questi approcci. Il design adattivo rappresenta oggi l'apice del design di siti Web, ma è incredibilmente costoso da implementare e supportare. Il design reattivo è più conveniente, ma non proprio al livello del design adattivo. Tuttavia, rispetto ad altre opzioni, il responsive è decisamente al di sopra della creazione di un semplice sito mobile.

Mentre consideri una riprogettazione del web, tieni a mente i fattori che abbiamo menzionato in questo post. Non importa quale sia il tuo budget, devi mettere da parte fondi per progettare un sito web che sia visibile e facile da usare su qualsiasi dispositivo. Oggi sono smartphone, tablet e un numero crescente di Smart TV. Domani, i consumatori potrebbero visualizzare la tua pagina in cucina sulle porte del frigorifero o in bagno sugli specchi. Prepara il tuo sito web oggi per le sfide.