Oggi, la maggior parte delle persone naviga online tramite gadget mobili: tablet, telefoni, a questo proposito, anche l'ottimizzazione del sito Web sta raggiungendo un nuovo livello. Se un utente entra e vede che il sito non è ottimizzato per dispositivi mobili: l'immagine non può essere visualizzata, i pulsanti sono stati spostati, i caratteri sono piccoli e illeggibili, il design è distorto - 99 su 100% che uscirà e inizia a cercarne un altro più conveniente. E il robot di ricerca selezionerà la casella che la risorsa è irrilevante, ovvero non corrisponde alla query di ricerca. Pertanto, il design della pagina deve essere adattato ai vari dispositivi mobili. Che cos'è una versione mobile del sito, come realizzarla e qual è il modo migliore per applicarla? Leggi di più in questo articolo.
Quindi ci sono quattro modi chiave per rendere il tuo sito mobile friendly.
Metodo Uno - Design reattivo
I modelli responsive cambiano l'immagine del sito in base alle dimensioni dello schermo. Di norma, sono impostati su standard 1600, 1500, 1280, 1100, 1024 e 980 pixel. Per l'implementazione vengono utilizzate le CSS3 Media Query. Il design del sito stesso non cambia.
I vantaggi di questo metodo includono:
- sviluppo conveniente,poiché la struttura stessa si adatta ai parametri dello schermo e qualsiasi aggiornamento non richiede uno sviluppo del design da zero, è sufficiente modificare CSS e HTML;
- one URL – l'utente non ha bisogno di ricordare più nomi, non c'è bisogno di un reindirizzamento (reindirizzamento da un indirizzo all' altro), che può complicare il lavoro di un webmaster, ed è più facile per una ricerca motore per ordinare e classificare una risorsa con un unico indirizzo.
Ovviamente, i modelli adattivi hanno i loro svantaggi, che, tra l' altro, sono più che vantaggi. Tuttavia, molti sviluppatori aderiscono a questo concetto, ad esempio Google Corporation, la cui versione mobile del sito ha un design adattivo. Quindi, svantaggi:
- Il design reattivo non supporta le stesse attività su dispositivi mobili come su PC. Se si tratta, ad esempio, di una versione mobile del sito Web di una banca, in cui è più probabile che le informazioni sul tasso di cambio o sugli sportelli automatici più vicini siano importanti per l'utente, allora questo design è abbastanza. Ma se si tratta di una risorsa strutturata complessa con molte sezioni e sottosezioni, i visitatori difficilmente apprezzeranno il layout adattivo.
- Il caricamento lento trasforma un sito preferito in uno odioso. Ciò è particolarmente vero per le risorse in cui abbondano animazioni, video, pop-up e altri elementi attivi. A causa del peso elevato, la pagina semplicemente "rallenta", l'utente si arrabbierà e se ne andrà e le posizioni di ricerca del sito cadranno.
- L'impossibilità di disattivare la versione mobile è un altro inconveniente significativo. Se qualche elemento è nascosto da un tale layout, tunon puoi fare nulla per aprirlo, a differenza dei siti in cui puoi disattivarlo e passare a un dominio normale.
Tuttavia, una tale versione mobile del sito in modo rapido, senza competenze e costi speciali, ti consente di adattare la risorsa a qualsiasi gadget. Ma, viste le carenze elencate, si adatterà a risorse piccole e semplici con un minimo di informazioni e multimediali, senza navigazione e animazione complesse. Per un sito complesso, sono adatti altri 2 metodi.
Secondo metodo: una versione separata del sito
Questo metodo è molto comune e spesso riesce a rendere il sito più leggibile su un dispositivo mobile. La sua essenza è creare una versione separata della pagina, disegnata per l'applicazione e situata su un URL o sottodominio separato, ad esempio m.vk.com. Allo stesso tempo, la funzionalità principale viene preservata, il design del sito sembra diverso. I vantaggi di questo metodo sono evidenti:
- interfaccia intuitiva;
- facile da modificare e modificare poiché la versione esiste separatamente dalla risorsa principale;
- a causa del peso ridotto, una versione separata del sito funziona molto più velocemente di un modello adattivo;
- molto spesso è possibile accedere alla versione principale della pagina dal cellulare.
Ma anche qui c'erano degli svantaggi:
- Indirizzi multipli - versione desktop e mobile del sito. Come far ricordare all'utente due opzioni? I webmaster spesso prescrivono un reindirizzamento (reindirizzamento) dalla versione desktop alla versione mobile, ma allo stesso tempo, se questa pagina è nel mobileversione non esiste, l'utente riceverà un errore. Qui sorgono difficoltà con i motori di ricerca, che hanno difficoltà a classificare 2 risorse identiche e ciò influisce direttamente sulla promozione.
- La versione mobile del sito da un computer, se l'utente la visita per errore, sembrerà ridicola, il che può anche influenzare il traffico.
- Questa versione è spesso fortemente ridotta, desktop, quindi l'utente avrà funzionalità molto limitate. Ma allo stesso tempo, se manca qualcosa, il visitatore può andare alla versione completa della pagina.
In generale, un sito mobile separato si giustifica ed è il modo più comune per adattare una risorsa ai dispositivi mobili. È popolare nei grandi negozi online come Amazon.
Terza via - Progettazione RESS
Il motore di ricerca Google supporta attivamente questa direzione del design mobile. Questo è il metodo più complesso, costoso, ma efficace per adattare il sito a un telefono o tablet. Si chiama RESS. Si tratta di indirizzare una risorsa in un'applicazione mobile che può essere scaricata per ciascun dispositivo separatamente. Per Android - con GooglePlay e per Apple - con iTunes.
Tali applicazioni sono veloci, gratuite, convenienti, hanno la capacità di ospitare vari tipi di informazioni, mentre la memoria del telefono e il traffico Internet non vengono consumati come quando si visita un sito tramite un browser. Sono di facile accesso, poiché il collegamento sarà sempre sullo schermo a portata di mano e non è necessario inserire un nome complesso nella barra degli indirizzi del browser.
Ci sono, ovviamente, qui ei suoi difetti, come la complessità nello sviluppo, l' alto costo del lavoro di un gran numero di programmatori, la necessità di creare diverse opzioni di layout. A volte il dispositivo mobile non viene riconosciuto dall'applicazione. È necessario un supporto tecnico regolare, la correzione delle carenze. Tuttavia, questa opzione è considerata la migliore delle tre proposte grazie al suo funzionamento produttivo e ininterrotto.
Il modo più economico per creare un sito web mobile
Tutti i metodi di cui sopra comportano, anche se non sempre lungo e difficile, ma comunque retribuito il lavoro di un webmaster. Se non vedi un bisogno urgente di tale sviluppo, una versione mobile semplice e gratuita del sito farà al caso tuo. Qual è il modo più semplice per farlo?
Scarica modelli speciali (plugin) per un design reattivo. Ad esempio, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile e altri. Aiuteranno a visualizzare il sito in modo più corretto sul telefono, mentre riceverai alcuni suggerimenti su cosa dovrebbe essere corretto per adattare meglio la pagina alla versione mobile.
Ovviamente, questo metodo non è adatto a risorse serie. Piuttosto, questa funzionalità gratuita è destinata a siti, blog, feed di notizie piccoli e semplici. Non dimenticare che il motore di ricerca di Google, così come Yandex, oggi richiede seri requisiti alle versioni mobili, quindi c'è un'enorme possibilità di abbassare le tue posizioni usando questo metodo.
Con questo metodo, molto probabilmente, annunci e pop-up verranno tagliatibanner, ma la pagina si caricherà velocemente e senza “lag”.
Principi per la creazione di versioni mobili
Non importa se la versione mobile del sito è stata creata gratuitamente o con l'aiuto di uno staff di webmaster, è stata realizzata sul sistema RESS o utilizzando un template adattivo. Soprattutto, per il suo funzionamento efficace, è necessario aderire a diversi principi estremamente importanti. Quindi, quale dovrebbe essere la versione mobile del sito? Come renderlo produttivo, efficiente e produttivo?
Rimuovi tutto ciò che non è necessario
Il minimalismo è ciò a cui dovrebbe aspirare lo sviluppatore della versione mobile del sito. Immagina quanto sia difficile percepire informazioni piene di colori, pulsanti, banner e che devi scorrere all'infinito alla ricerca del materiale giusto. Il design mobile dovrebbe essere semplice e pulito. Scegli 2-3 colori per dividere lo spazio (ad esempio, con marchio). Meglio se uno di loro è bianco. Dividi lo spazio di un piccolo schermo in zone comprensibili e leggibili. Le chiavi virtuali dovrebbero essere visibili in modo che l'utente sappia chiaramente dove premere e veda: ecco il prodotto, ecco il modulo per la compilazione dei dati, ecco le informazioni sulla consegna e sul pagamento.
Tutte le opzioni aggiuntive che sarebbero utili nella versione desktop e renderebbero la vita più facile per l'utente porteranno solo difficoltà qui. Lascia solo gli elementi più importanti. L'animazione, i banner pubblicitari, i contenuti multimediali, molto probabilmente, rallenteranno solo il lavoro del sito o dell'applicazione e li distrarrannoprincipale.
Allineamento
Il problema dell'allineamento non è meno acuto, perché se fatto in modo errato, l'utente otterrà solo i finali delle parole importanti. L'allineamento verticale e allineato a sinistra è generalmente accettato. Immagina di scorrere il feed delle notizie sul tuo telefono. Lo fai dall' alto verso il basso, non a sinistra oa destra.
Unificazione
Quando non c'è la possibilità di una lunga catena di transizioni, prova a combinare più passaggi in uno solo. Ad esempio, il sito richiede l'inserimento dei dati in più fasi: un nome, quindi un indirizzo, dove in ogni singola cella c'è una casa, una strada, un appartamento separato, ecc. Per non costringere l'utente a provare a colpire molte piccole celle, chiedigli di compilare solo 2 - nome e indirizzo.
E disconnessione
A volte, al contrario, è necessario separare troppe informazioni. Ad esempio, nel menu a tendina hai un elenco di più di 80 città in cui viene effettuata la consegna. Raggruppali per regione in modo che l'utente non debba scorrere questo enorme elenco. Quando passa il mouse sopra il centro regionale o la regione, un altro elenco di città verrà eliminato.
Annunci
A proposito, riguardo alle liste. Ce ne sono due: fissi in ordine alfabetico o altro e con sostituzione. La loro scelta dipende da cosa verrà elencato.
Risolto è utile se l'utente sa esattamente cosa sta cercando. Ad esempio, città, numero o data. La seconda opzione è adatta per nomi lunghi e complessi o per casi in cui esistono molte varianti dello stessolo stesso nome e ogni elenco a discesa avvicina l'utente all'obiettivo. L'opzione di sostituzione automatica viene utilizzata più spesso quando un visitatore ha bisogno di aiuto. Ad esempio, un sito di maglieria offre l'acquisto di ferri da maglia. L'utente immette la query di ricerca “Aghi da maglia in metallo” e nel tooltip vede “Aghi da maglia 5 mm”, “Aghi da maglia 4,5 mm”, ecc.
Riempimento automatico
Questo articolo è particolarmente rilevante per i siti che vendono qualcosa online e devi compilare moduli standard per il pagamento, la consegna, ecc. Se una persona effettua un acquisto da un telefono, molto probabilmente non ha tempo per raggiungere un computer, il che significa che il processo di acquisto dovrebbe essere il più rapido e conveniente possibile.
Per questo, i moduli possono contenere dati già compilati, puoi ricorrere alle risposte più popolari. Ad esempio, inserisci la data odierna, il metodo di pagamento in contanti, la città se lavori nella stessa regione. Possono essere modificati, ma se colpisci il bersaglio, il tempo dell'utente verrà risparmiato.
Tutto viene letto, tutto viene visualizzato
Quando progetti la versione mobile del sito, ricorda che i telefoni di tutti sono diversi, così come la loro vista. Forse il tuo sito verrà visualizzato da uno schermo piccolo, quindi i caratteri dovrebbero essere semplici e leggibili, i pulsanti dovrebbero essere abbastanza grandi da poter essere cliccati senza essere portati in un' altra pagina e le immagini dovrebbero aprirsi separatamente, grandi, soprattutto quando arriva su Internet. store.
Alcune statistiche
Parlando dell'adattamento del sito ai dispositivi mobili, non si può fare a meno di ricorrere alle statistiche per capire quanto sia importante questo processo perpromozione online.
I numeri sono i seguenti. Oggi i gadget sono utilizzati dall'87% della popolazione, a quanto pare, ad eccezione dei bambini più piccoli e di alcuni anziani. Gli economisti prevedono che il commercio mobile crescerà di 100 volte nei prossimi 5 anni. Allo stesso tempo, solo il 21% dei siti è adattato per funzionare con dispositivi mobili. Ciò significa che solo una piccola 5a parte del traffico Internet e del mercato dell'e-commerce è occupata.
Pensa a questi numeri. Ha senso adattare la tua risorsa? Certo che si. Inoltre, mentre c'è così tanto spazio in questo mercato, puoi ritagliarti il tuo segmento in esso.
Dove hai bisogno di una versione mobile
L'uso della versione mobile ha senso per qualsiasi piattaforma che mira a ottenere un posizionamento elevato. Dopotutto, si tratta di un impatto diretto sull'utente, che crea condizioni confortevoli per consentirgli di rimanere sul tuo sito.
Non può esistere senza la versione mobile:
- portali di notizie, perché la maggior parte di essi viene visualizzata dal telefono mentre si va al lavoro o a scuola;
- social network - per lo stesso motivo, in più c'è un fattore di comunicazione online, il che significa che per questo dovrebbe essere creata una chat comoda e comprensibile;
- riferimento, siti di navigazione, ecc., dove le persone vanno quando cercano qualcosa;
- negozi online: un'opportunità per attirare clienti che non perdono tempo a fare acquisti, ma acquistano tutto tramite Internet mobile.
Invece di una conclusione
Oggi le tecnologie mobili sono increscita e sviluppo attivi, quindi, puntando alla leadership nel mercato, qualsiasi azienda deve garantire che la propria risorsa Internet soddisfi i requisiti. A causa delle crescenti esigenze degli utenti, i siti devono essere costantemente aggiornati e adattati ai diversi dispositivi. È chiaro che se una persona è scomoda per essere su una determinata risorsa, non può ottenere informazioni su un prodotto o un prezzo lì, effettuare un ordine, scoprire la consegna, quindi troverà il sito in cui tutto ciò diventerà possibile. Pertanto, per vincere la competizione, è importante disporre di una risorsa flessibile, conveniente, funzionale e interessante.
La versione mobile del sito Web Android o Ios aiuterà a farlo. Per fare ciò, devi scegliere uno dei metodi di riprogettazione di cui sopra: un modello adattivo, la creazione di un nuovo sito su un sottodominio e il reindirizzamento ad esso, l'utilizzo di modelli gratuiti o la creazione di un'applicazione mobile che semplificherà l'accesso all'utente e sii sulla pagina.
Questo approccio non solo aiuterà a mantenere la fedeltà dei clienti esistenti, ma fornirà anche l'opportunità di attirare nuovi visitatori.
