Come Costruire Un Sito web Mobile (In 4 semplici Passi)
Nell’ottobre del 2016, il numero di cellulare e tablet gli utenti di internet superato il numero di desktop gli utenti di computer per la prima volta in assoluto. Questo cambio di paradigma è servito da invito all’azione per gli sviluppatori per iniziare a ripensare l’intero settore. Da allora, l’utilizzo mobile ha continuato a crescere e diventare ancora più prevalente e ci sono molte soluzioni di sviluppo sito web eleganti impiegati oggi per servire questi utenti.
Queste soluzioni sono in grado di fornire agli utenti un’esperienza simile che otterrebbero su un desktop senza compromettere il contenuto o la funzione del tuo sito web. Mentre la costruzione di un sito che è in grado di creare questa esperienza può sembrare scoraggiante, è molto più facile di quanto si pensi.
E ‘ così semplice, infatti, che abbiamo compilato un facile da seguire 4 Guida passo per la creazione di un sito Web mobile per iniziare.
Scegli il tuo approccio Web Design
Ci sono diverse soluzioni che si possono impiegare per creare un sito web mobile-friendly. Mentre ogni approccio web design ha i suoi aderenti che vi dirà che è il migliore, si dovrebbe determinare quale si adatta alle vostre esigenze in base alla propria considerazione delle informazioni.
Responsive Web Design
Responsive web design (RWD) impiega layout adattabili che sono resi possibili attraverso l’uso di supporti basati sulle proporzioni, estensioni e griglie di back-end. Ciò significa che se una finestra del browser viene espansa o contratta, il contenuto lo seguirà e si adatterà a seconda dei casi. Il risultato è un sito web che sembra simile sia sul desktop e mobile.
Questa interfaccia utente in plastica viene spesso paragonata all’acqua. Puoi versare una tazza d’acqua in un bicchiere, una pentola o una brocca e il volume dell’acqua rimarrà lo stesso, nonostante il cambio di nave.
Adaptive Web Design
A differenza di RWD, adaptive web design (AWD) non si basa su un singolo layout di modifica. Invece, utilizza layout distinti per diversi dispositivi e dimensioni dello schermo. Ciò significa che quando si accede a un sito web, viene servita la pagina che meglio soddisfa le esigenze del dispositivo che si sta utilizzando.
Ad esempio, alcuni potrebbero scegliere di creare tre siti Web: uno per smartphone, uno per tablet e uno per desktop. Ciò richiederebbe tre diversi progetti, che rimarrebbero “in standby” fino a quando non saranno richiesti da ciascun visitatore. Invece di un sito web unico, un AWD funge da gateway personalizzato per tutti gli utenti.
L’approccio scelto per creare il tuo sito web mobile è solo l’inizio del processo di progettazione.
Usa un Website Builder o un CMS
Una volta determinato come vuoi che il tuo sito web funzioni su diversi dispositivi, sei pronto per iniziare a costruirlo! La piattaforma su cui crei il tuo sito è fondamentale per impiegare il tuo piano di progettazione mobile. Per gli utenti di base, ci sono due opzioni da considerare.
Website Builders
Website builders prendere tutte le congetture di web design e consentono di creare un sito web completamente personalizzabile e ricco di funzionalità in pochi minuti. Raggiungono questo permettendo agli utenti di scegliere un tema o un modello e semplicemente drag-and-drop caratteristiche che piace sulle loro pagine web e rimuovere facilmente quelli che non lo fanno.
La maggior parte dei costruttori di siti web, tra cui il gold standard Wix, consentono agli utenti di determinare semplicemente come i loro siti reagiranno sul cellulare. La piattaforma Wix si basa principalmente su siti Web adattivi, mentre altri servizi come Weebly si basano principalmente su responsive design. A seconda del tipo di approccio che hai immaginato per il tuo sito, puoi decidere di utilizzare un costruttore di siti Web in grado di soddisfare le tue esigenze.
Content Management Systems
Un content Management system (CMS) è la migliore alternativa a un costruttore di siti web dedicato. I CMS come WordPress si basano su un po ‘ più di computer e conoscenza di Internet, ma possono fornire più funzionalità rispetto ai costruttori di siti web. Inoltre, un CMS offre sia disegni RWD e AWD.
Simile ai costruttori di siti web, un CMS può sfruttare entrambi gli approcci di progettazione mobile integrandoli nella moltitudine di temi disponibili per gli utenti. Questi temi possono essere solo ricchi come quelli che si trovano sui costruttori di siti web, ma servono meglio a coloro a cui non importa sporcarsi le mani e imparare un po ‘ di web design.
Se decidi di utilizzare un CMS, puoi semplicemente scaricare un tema pronto per dispositivi mobili, gratuitamente o a pagamento, e usarlo per creare il tuo sito web. La maggior parte di questi temi sono dotati di pieno supporto e aggiornamenti regolari, in modo da non dovete preoccuparvi di mantenere e gestire il tuo sito web.
Progetta un sito Web mobile
Dopo aver determinato su quale piattaforma costruirai il tuo sito, sei pronto a progettare e creare il tuo sito web. Se si sta creando un blog, un portafoglio, un sito aziendale, o anche un negozio di e-commerce, si può andare su di esso utilizzando i principi standard necessari per qualsiasi design del sito. Una volta completato il tuo progetto, dovrai semplicemente testare il tuo sito per vedere se risponde correttamente (RWD) o creare un altro design for mobile (AWD).
Progettare un sito web mobile è quasi semplice come progettare un sito desktop, ma ci sono alcune cose che potresti voler tenere a mente.
a. Gli utenti mobili hanno generalmente larghezza di banda limitata
Si dovrebbe sempre tenere a mente che la maggior parte dei visitatori mobili fanno uso di reti mobili che limitano la loro larghezza di banda. Di conseguenza, è fondamentale mantenere il tuo sito mobile leggero e privo di troppi contenuti che possono distruggere quei byte cruciali.
b. Gli utenti mobili vogliono rapidamente informazioni pertinenti
Spesso gli utenti mobili visitano un sito per ottenere informazioni pertinenti sulle posizioni che stanno visitando, come gli orari dei negozi o i numeri di telefono. Se queste informazioni rilevanti non sono disponibili in modo rapido e chiaro, può comportare la perdita di un cliente. Assicurati che il tuo sito web mobile abbia collegamenti rapidi alle informazioni di contatto e ad altri dati rilevanti.
c. I dispositivi mobili sono meno potenti
I computer desktop e portatili sono costruiti con schede grafiche e processori in grado di gestire un carico pesante. Mentre i dispositivi mobili sono estremamente potenti, non sono costruiti allo stesso modo. Invece perdono la funzione per la forma e, di conseguenza, non possono gestire i contenuti pesanti del processore allo stesso modo in cui un computer può.
Se il vostro sito desktop richiede questo tipo di dedizione risorsa, si consiglia di pensare due volte prima di servire un pubblico mobile questo stesso tipo di sito.
Organizzare il contenuto
Quando si crea un sito mobile è importante assicurarsi che gli utenti siano in grado di accedere a tutto sul sito desktop pur mantenendo la possibilità di lavorare su uno schermo più piccolo. Ci sono diverse considerazioni che dovresti tenere a mente quando organizzi i tuoi contenuti.
a. Mobile First
Mobile First è uno dei movimenti più recenti nel mondo del design. Stabilisce che è necessario progettare prima il tuo sito mobile prima di espandersi in pagine per desktop e tablet. Il contenuto creato per il tuo sito mobile può essere caricato anche nella versione desktop.
Questo approccio, pertanto, è utile per i siti Web dinamici e reattivi in cui il contenuto della versione mobile è identico a quello del sito desktop.
b. Mobile Second
Se hai già un sito Web desktop, organizzare il contenuto potrebbe essere un po ‘ più difficile, anche se non del tutto impossibile. Innanzitutto, scopri gli elementi del tuo sito desktop che devi mostrare sulla versione mobile.
Raccogli i dati degli utenti attraverso gli strumenti di analisi standard che usi e scopri:
- Il contenuto più importante per i tuoi visitatori.Ciò che gli utenti mobili tendono a ignorare.Il percorso che i visitatori in genere prendono.
Utilizza le informazioni raccolte per sapere cosa dovrebbe e cosa non dovrebbe andare sul sito mobile. Questo ti aiuterà a pulire il tuo sito desktop. Quindi, mappa il percorso del contenuto che i tuoi visitatori prenderanno.
Dopo avere una buona idea circa il flusso visivo del tuo sito, si può facilmente tracciare il progetto iniziale per schermi mobili e andare a destra nello sviluppo del sito web mobile.
c. Navigazione
Gli schermi dei telefoni cellulari sono piccoli. Ciò significa che è necessario ridurre al minimo le opzioni di navigazione mobile. Considerare l’utilizzo di una lente di ingrandimento o il menu a tre linee (hamburger) navicon. Una volta che hai finito, prova il tuo sito web sui dispositivi popolari utilizzati da fino al 90% dei tuoi visitatori mobili.
d. Design for Touch
Poiché è impossibile fare clic con il tasto destro del mouse o passare il mouse con le dita su un dispositivo mobile, è necessario inserire i link sul sito Web mobile per garantire che gli utenti non facciano clic accidentalmente sui link errati. Fallo con:
- Dando un feedback ogni volta che lo schermo viene toccato.Utilizzo dei pulsanti per definire dove gli utenti possono e non possono fare clic.Riprogettare i menu a discesa.Ridurre al minimo l’input di testo.
E il gioco è fatto! Utilizzare queste informazioni la prossima volta che è necessario ridisegnare completamente il vostro sito web desktop per la visualizzazione su dispositivi mobili, o quando si sta creando un nuovo sito mobile da zero.