Questa è un'ulteriore versione semplificata del sito, solitamente situata in un sottodominio con il prefisso "m" (ad esempio m.site).
Come potete vedere dall'immagine sui tablet, anche la versione per telefoni si apre e si allunga in larghezza, perché il tablet è quasi uno smartphone molto, molto largo 🙂
Esternamente e stilisticamente, ovviamente, può essere realizzato come il sito principale (in modo che non si abbia la sensazione di essere atterrati su qualche altra pagina): gli stessi colori, caratteri, elementi. Ma la struttura può essere radicalmente diversa, e molto spesso lo è. È improbabile che qualcuno scelga un appartamento o ritiri un'auto tramite telefono o chieda un prestito in banca. Dopotutto, questo è scomodo, lo schermo è piccolo (rispetto a un laptop o un computer). Ma trovare il bancomat più vicino o l’indirizzo di una pizzeria è il contrario. Pertanto, le versioni mobili sono molto semplificate, senza calcolatori complicati, enormi tabelle di confronto di due o più prodotti simili. Rimuovi tutto ciò che è più difficile e semplifica l'accesso ai contatti, alla modalità operativa e così via.
La quota degli utenti mobili cresce a un ritmo costante: alla fine del 2014 il loro numero sul Web ha superato per la prima volta quello degli utenti desktop. Più di 10 milioni di persone accedono a Internet SOLO da dispositivi mobili. E tutto questo sta accadendo in Russia proprio adesso.
Hai ancora dubbi sulla necessità di un sito mobile? Allora passiamo agli affari.
Lo scopo di questo articolo è introdurti alla terminologia di base nel campo dello sviluppo di siti Web reattivi e applicazioni mobili e aiutarti a capire quali metodi sono adatti a te.
Quindi, elenchiamo i modi principali per rendere i tuoi servizi più accessibili al pubblico mobile.
Sul tema delle differenze tra i concetti di "adattivo" e "reattivo", molte copie di Internet sono state rotte e su questo puoi scrivere più di un articolo, ma un'intera raccolta di saggi. In generale, l'essenza è questa: entrambi i concetti implicano la capacità del sito adattarsi agli schermi di vari dispositivi e vengono visualizzati altrettanto bene su monitor ampi, tablet o telefoni cellulari. Tuttavia il concetto di “responsive design” è un po’ più ampio e include il "design reattivo". Pertanto, nel seguito faremo riferimento a siti come adattivo.
L’adattabilità si ottiene utilizzando i seguenti strumenti:
Un esempio di adattabilità può essere trovato sul nostro sito web. Inizia a restringere la finestra del browser e vedrai come il menu in alto si restringe prima, adattandosi alle dimensioni della finestra, per poi nascondersi completamente nella cosiddetta icona dell'hamburger. Vedrai una visualizzazione simile se accedi al nostro sito web da un dispositivo mobile.
Quindi, utilizzando il design adattivo, otteniamo un sito Web altrettanto comodo da utilizzare da qualsiasi dispositivo. Naturalmente, questo è l'ideale, perché se il sito ha funzionalità complesse, è difficile inserirlo nella struttura di un piccolo schermo mobile.
Nonostante all'utente del dispositivo mobile possa essere visualizzata una versione troncata del sito principale, il browser caricherà la pagina completamente: tutti i testi, le immagini e gli script, quindi il tempo di caricamento può essere piuttosto lungo, il che è uno svantaggio di siti adattativi.
Invece di rendere il tuo sito responsive, puoi creare una versione separata progettata per i dispositivi mobili. Hai visto esempi di questo metodo decine di volte. Sembra così: sul sito principale c'è un collegamento "Vai alla versione mobile del sito".
Questo collegamento apre un sito separato con un URL diverso, ad esempio m.vk.com per Vkontakte. È anche comune che il sito principale sia configurato per reindirizzare automaticamente tutti gli utenti mobili al sito mobile.
La particolarità di un sito del genere è che è adattato al massimo per la comodità di lavorare su dispositivi mobili: il peso delle pagine viene compresso, tutti gli elementi non necessari vengono rimossi. Sarà molto più conveniente per i tuoi utenti mobili ottenere le informazioni necessarie su di te ed effettuare un ordine.
Tieni presente che non è necessario imparare a programmare per diversi mesi per creare un sito web mobile. Adesso ci sono tanti servizi che ti permettono di creare una versione mobile del sito in mezz'ora. Se, ad esempio, desideri rendere il tuo sito web per biglietti da visita ottimizzato per i dispositivi mobili, molto probabilmente un costruttore di siti Web mobile di questo tipo è tutto ciò di cui hai bisogno. Inoltre, il servizio della versione mobile del costruttore del sito è fornito da molti hoster, per informazioni dettagliate puoi contattare il supporto del tuo hosting.
Lo svantaggio di un sito mobile può essere che in realtà devi mantenere due siti e apportare tutte le modifiche importanti due volte. Tuttavia, puoi assicurarti che entrambi i siti siano collegati dallo stesso database e che tutte le trasformazioni di quello principale vengano eseguite in quello mobile, quindi quando si sviluppa una versione mobile o si acquista un costruttore, è meglio chiarire questo punto.
Un'applicazione mobile non è un sito Web, ma un programma installato sul dispositivo mobile dell'utente. Questo spiega i principali pro e contro di questo approccio.
Il programma viene installato direttamente sul telefono / tablet dell'utente, il che significa che potrà accedere all'applicazione anche senza accesso a Internet, nonché utilizzare l'interfaccia familiare e tutte le funzioni del suo dispositivo.
Allo stesso tempo, questo è un aspetto negativo, poiché non tutti gli utenti vorranno installare un'applicazione per eseguire un'azione minima. Oppure, subito dopo aver ricevuto le informazioni necessarie, il cliente può cancellarle.
Lo sviluppo di un'applicazione mobile è un processo molto dispendioso in termini di tempo e denaro. I siti web sono multipiattaforma e le applicazioni mobili dovranno essere create separatamente per ciascuna piattaforma (iOS, Android, Windows Phone).
Naturalmente, esistono strumenti speciali che semplificano la creazione di applicazioni e consentono di trasferirle su tutte le principali piattaforme contemporaneamente, ad esempio Phonegap, Ionic, jQuery Mobile. Ma in ogni caso dovrai contattare specialisti per lo sviluppo e l'aggiornamento dell'applicazione.
Quando hai bisogno di un'applicazione mobile? Molto probabilmente, quando puoi offrire all'utente qualcosa che gli sarà utile e lo interesserà per molto tempo. Ad esempio, se sei uno psicologo, potresti creare un'applicazione chiamata "Il tuo psicologo tascabile" che contiene articoli, test, risposte a domande e in cui l'utente trascorre del tempo produttivo.
La domanda è: quale risultato vuoi ottenere dall'applicazione. Nel caso di uno psicologo si tratterà piuttosto di un aumento della fidelizzazione dei clienti e di un più facile trasferimento dei potenziali acquirenti in acquirenti reali; se l'app gli piace, probabilmente avranno più fiducia nello psicologo e si rivolgeranno a lui per un consulto.
Se il progetto prevede la comunicazione dal vivo degli utenti, sia una versione mobile che un'applicazione mobile sarebbero una buona opzione, ma sarà un progetto difficile e finanziariamente costoso.
Se il progetto è informativo, ad esempio un blog o un portale di notizie, il solito layout adattivo è più adatto.
Per prendere una decisione informata se il tuo sito necessita di mobilità e quale opzione scegliere, dovresti almeno studiare i dati di analisi web e scoprire quale percentuale dei tuoi utenti in genere accede al tuo sito utilizzando dispositivi mobili.
Nel 95% dei casi è sufficiente l'adattabilità o una versione mobile del sito. Quando si crea un nuovo sito, vale la pena scegliere l'adattabilità; quando si mobilita uno esistente, spesso è più rapido e semplice sviluppare un'opzione mobile alternativa.
Un argomento così serio non può essere trattato in un articolo, ma abbiamo cercato di raccontare le informazioni di base. Sentiti libero di porre domande nei commenti, risponderemo in dettaglio.
Se hai già deciso che il tuo sito ha bisogno di essere "mobilitato", scrivi al nostro Servizio Assistenza e ti diremo qual è l'opzione migliore per te e quanto ti costerà.
PS Coloro che sono interessati al tema del lavoro con gli utenti mobili, il 16 luglio, vi invitiamo a una master class "
Il costo della promozione della ricerca e il suo risultato dipendono da come adattiamo il sito ai dispositivi mobili.
Ai segnalibri
Dmitry Mrachkovsky, ottimizzatore di Ashmanov & Partners, ha spiegato come scegliere tra un sito adattivo e uno mobile e quali problemi non ovvi dovrai affrontare.
È difficile rispondere inequivocabilmente alla domanda su quale tecnologia di adattamento per smartphone e tablet sia più efficace in termini di SEO. Anche tra i big non ho notato un vantaggio a favore di qualche decisione. M.Video, DNS, Wildberries, Aviasales utilizzano il layout adattivo e Lamoda, 220 Volt, Ulmart, Yandex.Market utilizzano siti mobili. Ma vediamo quali vantaggi ottengono il primo e il secondo.
Layout adattivo del sito "M.Video" e versione mobile del sito "220 Volt"
Il layout reattivo aiuta a fare a meno dello sviluppo di una versione mobile separata. Ciò presenta dei vantaggi:
La versione mobile è una soluzione più costosa e flessibile. Può essere modificato senza influenzare il sito principale. Ciò ti offre i seguenti vantaggi:
Voglio menzionare un'altra tecnologia: RESS. Mostra all'utente un modello desktop o mobile a seconda del dispositivo, ma l'URL della pagina non cambia. RESS combina i vantaggi delle versioni adattativa e mobile sopra descritte. Ma presenta anche due svantaggi: un’implementazione complessa e costosa ed errori nell’identificazione di modelli di telefoni rari e impopolari.
Responsive è una soluzione economica e conveniente, ma in termini di promozione della ricerca presenta diverse insidie.
Alcuni implementano il layout adattivo in modo errato e visualizzano contemporaneamente due modelli su una pagina nel codice: desktop e mobile. A seconda del dispositivo dell'utente, la parte desiderata del codice rimane visibile, mentre il resto viene nascosto utilizzando display: none . Ciò solleva tre problemi:
Tale implementazione rappresenta l’approccio sbagliato alla tecnologia RESS.
Per rendere più comoda l'interfaccia della versione adattiva, alcuni eliminano alcune funzionalità: blocchi che distraggono, testi di grandi dimensioni nelle categorie del catalogo e così via. Tutto il superfluo viene nascosto utilizzando display: none . Ma il problema è che tutto il codice serve per caricare la pagina e il sito è lento. Inoltre, come accennato in precedenza, i motori di ricerca hanno un atteggiamento controverso nei confronti di tali contenuti: c'è il rischio di incorrere in sanzioni.
Alcuni usano JS per evitare di visualizzare blocchi non necessari sui dispositivi mobili. Ma questo metodo non è migliore di display: none . Esiste il rischio che i motori di ricerca non indicizzino i contenuti a loro destinati anche nella versione desktop. Generalmente i motori di ricerca non sempre percepiscono correttamente i contenuti AJAX, soprattutto se non vengono soddisfatte una serie di condizioni per una corretta indicizzazione.
La scelta dell'adattivo è solitamente guidata da due vantaggi principali: lo sviluppo di una sola versione del sito e l'assenza di problemi con URL multipli.
È anche una soluzione conveniente per la promozione in diverse regioni. Concentriamo tutti i nostri sforzi su un dominio e otteniamo risultati nelle ricerche su desktop e dispositivi mobili. Per fare ciò, è necessario collegare le regioni di interesse al sito in Yandex.Directory.
E per Google, create una pagina con gli indirizzi delle filiali, così che il motore di ricerca capisca in quali regioni lavorate. Il layout adattivo con un singolo dominio è utilizzato con molto successo da M.Video. Il negozio occupa posizioni elevate nei risultati mobili e desktop per query su prodotti, categorie e informazioni.
Puoi andare dall'altra parte: utilizzare i sottodomini geografici per aumentare la pertinenza del testo delle pagine. In questo caso, ai sottodomini come spb.site.ru, samara.site.ru, kazan.site.ru vengono assegnate regioni tramite Yandex.Webmaster e quindi titoli e meta tag vengono assegnati con il toponimo. Un altro vantaggio è che è facile impostare analisi separate per sottodomini geografici per monitorare i risultati per regione. Questo metodo di promozione è praticato da MediaMarkt.
Il costo relativamente elevato di sviluppo non è l'unico svantaggio dei siti mobili. Ecco un elenco dei problemi meno evidenti che potresti incontrare quando scegli questa tecnologia.
Il sito mobile è ottimizzato e promosso separatamente dal sito principale e questo richiede più risorse rispetto al caso adattivo. È necessario iniziare a ottimizzare in modo che la versione mobile sia indicizzata correttamente e non entri in concorrenza con quella desktop. Per fare ciò, collegali in Yandex.Webmaster e Search Console, imposta gli attributi rel="alternate" corretti, imposta l'indicizzazione e la generazione di mappe XML.
I modelli desktop e mobili caricano i contenuti dallo stesso database nel 99% dei casi. Se utilizza link assoluti alla pagina interna del sito desktop, indicando protocollo e dominio, allora verranno visualizzati anche sulla pagina mobile. Quando si fa clic su un collegamento, si verificherà uno dei due scenari:
In questo caso, il peso del collegamento interno del sito potrebbe essere violato. Per evitare questo problema, utilizza i collegamenti relativi nei tuoi contenuti. Cioè, per l'attributo href, specifica /page/ invece di https://site.ru/page/ .
Il contenuto e la struttura dei siti desktop e mobili potrebbero differire. Pertanto, è logico indicizzare il contenuto di entrambi nella ricerca per evitare errori. Google consiglia sulla versione mobile di indicare che il contenuto del sito desktop è canonico. D'altra parte, il motore di ricerca afferma che il contenuto delle pagine non canoniche non viene preso in considerazione.
Con Yandex a questo proposito tutto è chiaro: indicizza separatamente il contenuto delle pagine mobili e desktop. Per fare ciò, basta impostare l'attributo rel="alternate" dalla versione principale a quella mobile, e puoi anche impostare reindirizzamenti 301 dalla versione desktop a quella mobile, tenendo conto dello user agent del dispositivo.
Per prepararsi al passaggio a un indice mobile-first, è logico scegliere la versione mobile del sito come pagina canonica. È vero, ci sono alcune ambiguità nelle raccomandazioni relative al mobile-first. Ad esempio, le linee guida di Google dicono che il contenuto delle versioni mobile e desktop dovrebbe essere simile, ma non rivela il grado di "somiglianza".
Ma cosa succede se il posizionamento nella ricerca desktop richiede un certo blocco di contenuti, che nella versione mobile saranno superflui, ma la priorità verrà data alla versione mobile?
Un estratto dalla guida di Google all'indicizzazione dei siti mobili
Estratto dal rapporto di Google sull'implementazione dell'indice mobile-first
Alcuni innovano i motori di ricerca indiscriminatamente, con l’aspettativa di influenzare le classifiche. Ad esempio, le pagine turbo Yandex, che non sostituiscono le pagine mobili a tutti gli effetti nella ricerca, includono una piccola parte delle funzionalità utente e generano meno conversioni. Se hai un sito commerciale e sei sicuro della qualità della versione mobile, non affrettarti a implementare il "turbo", anche per le pagine con articoli e recensioni.
I collegamenti sono ancora importanti per il posizionamento, soprattutto nella ricerca su Google. Quando abbiamo un sottodominio mobile, alcuni utenti iniziano a farne riferimento nei social network e nei forum. E l'altra parte utilizza collegamenti all'indirizzo del sito principale. Di conseguenza, i collegamenti hanno un rendimento inferiore nelle ricerche su dispositivi mobili e desktop rispetto a quando avessimo un solo dominio.
Sopra, abbiamo parlato di due modi per promuovere l'adattamento a livello regionale: utilizzando un singolo dominio e sottodomini geografici. Considera queste opzioni per le versioni mobili.
Nel primo caso, promuoviamo il dominio principale e il sottodominio mobile m.site.ru. Ognuno di loro deve impostare le regioni tramite Yandex.Directory. Il problema è che a volte è impossibile collegare da soli la versione mobile del sito alla filiale. Dovrai contattare il supporto tecnico, ma ciò non garantisce un risultato. Non è possibile creare un'organizzazione separata per la versione mobile del sito. Pertanto, se i rami sono numerosi, la rilegatura potrebbe richiedere molto tempo.
Generalmente escludiamo la possibilità di utilizzare sottodomini come m.spb.site.ru o spb.m.site.ru. Sebbene Kholodilnik.ru, ad esempio, lo usi. Ma in questo caso, è necessario impostare l'indirizzamento tra tutte le regioni delle versioni mobile e desktop, mantenerle aggiornate, tenere traccia delle modifiche e monitorare i servizi per i webmaster. Si tratta di un lavoro enorme che difficilmente verrà ripagato.
Se non invii una versione ottimizzata del tuo sito a Yandex.Webmaster per il test di ottimizzazione mobile, potrebbe non apparire nei risultati di ricerca mobile. Il problema riguarda anche l’adattamento. Questo non sempre accade, ma ti consiglio di seguire i messaggi presenti in Webmaster.
Un frammento di comunicazione con il supporto tecnico Yandex sull'assegnazione di una regione alla versione mobile del sito
I principali vantaggi delle versioni mobili sono, ovviamente, la possibilità di creare un modello separato e un'elevata velocità di download. Inoltre, è più semplice per i vecchi siti creare una versione mobile separata piuttosto che implementarne una adattiva.
Inoltre, molti specialisti SEO hanno notato un aumento del traffico di ricerca dopo l’introduzione di un sito mobile anziché adattivo. Anche se non escludo che il motivo della crescita sia stato che c'erano errori nel loro layout adattivo che hanno influito negativamente sulla classifica.
Se stai sviluppando un sito web da zero o hai un piccolo progetto, dai un'occhiata più da vicino al layout adattivo. Questa è una soluzione più economica e veloce. Ma è meglio pianificare subito la funzionalità in modo da non dover nascondere parte del sito per essere visualizzato sui dispositivi mobili in futuro.
ScrivereCon l’avvento del boom dei dispositivi mobili, gli sviluppatori si sono trovati di fronte a una scelta: mantenere le versioni mobili dei loro siti insieme a quelle “complete”, o i siti dovrebbero diventare reattivi e adattarsi alle diverse dimensioni dello schermo?
Al momento, quando si creano versioni mobili dei siti, ci sono 3 modi principali per crearli:
Schermo @media e (larghezza massima: 1600px) ( div.for-example (larghezza: 1500px;) ) Schermo @media e (larghezza massima: 1280px) ( div.for-example (larghezza: 1100px;) ) @media schermo e (larghezza massima: 1024px) (div.for-example (larghezza: 980px;))
In generale, la creazione di versioni mobili dei siti si giustifica abbastanza bene, in particolare per progetti di grandi dimensioni. Ad esempio, Amazon utilizza una versione mobile speciale del sito.
$DS = SEPARATORE_DIRECTORY; require_once(dirname(__FILE__) . $DS . "librerie" . $DS . "browser.php"); $dispositivo = BBrowser::detectDevice(); if($dispositivo == DEVICE_TYPE_MPHONE)( $tmpl = "template.m.php"; ) else if($device == DEVICE_TYPE_TABLET)( $tmpl = "template.t.php";) else( $tmpl = "template .php"; ) include(dirname(__FILE__) . $DS . "templates" . $DS . $tmpl);
In generale, RESS è la migliore delle tre opzioni proposte, tuttavia richiede uno sforzo molto maggiore durante lo sviluppo.
Oggi, la maggior parte delle persone va online tramite gadget mobili: tablet, telefoni, a questo proposito anche l'ottimizzazione del sito sta raggiungendo un nuovo livello. Se un utente entra e vede che il sito non è ottimizzato per i dispositivi mobili: l'immagine non si vede, i pulsanti si sono spostati, i caratteri sono piccoli e illeggibili, il design è distorto - 99 su 100% che uscirà e inizia a cercarne un altro più conveniente. A selezionerà la casella indicante che la risorsa è irrilevante, ovvero non corrisponde alla query di ricerca. Pertanto, il design della pagina deve essere adattato ai diversi dispositivi mobili. 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 adattare il sito alla versione mobile.
I modelli reattivi modificano l'immagine del sito in base alle dimensioni dello schermo. Di norma, sono impostati su 1600, 1500, 1280, 1100, 1024 e 980 pixel standard. Le query vengono utilizzate per l'implementazione. Non cambia se stesso.
I vantaggi di questo metodo includono:
Naturalmente, 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:
Tuttavia, una versione così mobile del sito consente rapidamente, senza competenze e costi particolari, di adattare la risorsa a qualsiasi gadget. Ma, date le carenze elencate, si adatterà a risorse piccole e semplici con un minimo di informazioni e contenuti multimediali, senza navigazione e animazione complesse. Per un sito complesso sono adatti altri 2 metodi.
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 semplicemente diverso. I vantaggi di questo metodo sono evidenti:
Ma anche qui non è stato privo di inconvenienti:
In generale, un sito mobile separato si giustifica ed è il modo più comune per adattare una risorsa ai dispositivi mobili. È popolare tra i grandi negozi online come Amazon.
Il motore di ricerca di 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 del targeting delle risorse in un'applicazione mobile che può essere scaricata separatamente per ciascun dispositivo. 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 facili da visitare, poiché il collegamento sarà sempre sullo schermo a portata di mano e non è necessario inserire un nome complesso nella barra degli indirizzi del browser.
Naturalmente, ci sono anche degli svantaggi, come la complessità dello sviluppo, gli elevati costi di manodopera per un gran numero di programmatori e la necessità di creare diverse opzioni di layout. A volte il dispositivo mobile non viene riconosciuto dall'applicazione. È necessario un supporto tecnico regolare e la correzione delle carenze. Tuttavia, questa opzione è considerata la migliore delle tre proposte grazie al suo funzionamento produttivo e ininterrotto.
Tutti i metodi di cui sopra implicano, anche se non sempre lunghi e complicati, ma comunque retribuiti il lavoro del webmaster. Se non vedi un bisogno urgente di tale sviluppo, una versione mobile semplice e gratuita del sito sarà adatta a te. Qual è il modo più semplice per realizzarlo?
Scarica modelli speciali (plugin) per un design reattivo. Ad esempio, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile e altri. Aiuteranno a visualizzare più correttamente il sito sul telefono, mentre riceverai alcuni consigli su cosa è necessario correggere per adattare meglio la pagina alla versione mobile.
Naturalmente, questo metodo difficilmente è adatto a risorse serie. Piuttosto, questa funzionalità gratuita è destinata a siti, blog e feed di notizie piccoli e semplici. Non dimenticare che il motore di ricerca Google, così come Yandex, oggi pone serie richieste alle versioni mobili, quindi c'è un'enorme possibilità di abbassare le tue posizioni utilizzando questo metodo.
Con questo metodo, molto probabilmente, gli annunci e i banner pop-up verranno tagliati, ma la pagina si caricherà velocemente e senza “ritardi”.
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. Ancora più importante, 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?
Il minimalismo è ciò a cui dovrebbe tendere 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, brandizzati). 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 l'inserimento dei dati, ecco le informazioni sulla consegna e sul pagamento.
Tutte le opzioni aggiuntive che sarebbero utili nella versione desktop e semplificherebbero la vita all'utente, qui porteranno solo difficoltà. Lascia solo gli elementi più importanti. Animazioni, banner pubblicitari, contenuti multimediali, molto probabilmente, non faranno altro che rallentare il lavoro del sito o dell'applicazione e distrarre dalla cosa principale.
Il problema dell'allineamento non è meno acuto, perché se fatto in modo errato, l'utente otterrà solo la desinenza delle parole importanti. L'allineamento a sinistra e verticale è generalmente accettato. Immagina di scorrere il feed delle notizie sul tuo telefono. Lo fai dall'alto verso il basso, ma non a sinistra o a destra.
Quando non è possibile una lunga catena di transizioni, provare a combinare più passaggi in uno solo. Ad esempio, il sito richiede l'immissione dei dati in più fasi: un nome, quindi un indirizzo, in cui ogni singola cella contiene una casa, una strada, un appartamento separati, ecc. Per non costringere l'utente a provare a colpire molte piccole celle, chiedere lui a compilare solo 2 - nome e indirizzo.
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 si passa sopra il centro regionale o la regione, verrà visualizzato un altro elenco di città.
A proposito, sulle liste. Ce ne sono due: fissati in ordine alfabetico o altro e con sostituzione. La loro scelta dipende da cosa verrà elencato.
Fixed è 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 i casi in cui esistono molte varianti dello stesso nome e ciascuna 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 inserisce la query di ricerca "Ferri da maglia in metallo" e nella descrizione comando vede "Ferri da maglia 5 mm", "Ferri da maglia 4,5 mm", ecc.
Questo punto è particolarmente vero per i siti in cui qualcosa viene venduto online e devi compilare forme standard di pagamento, consegna, ecc. Se una persona effettua un acquisto da un telefono, molto probabilmente non ha il tempo di raggiungere un computer, il che significa che il processo di acquisto dovrebbe essere effettuato nel modo più rapido e conveniente possibile.
Per fare ciò, i moduli possono contenere dati già compilati, puoi ricorrere alle risposte più popolari. Inserisci ad esempio la data odierna, la modalità di pagamento in contanti, la città se lavori nella stessa regione. Possono essere modificati, ma se colpisci il bersaglio, il tempo dell'utente verrà salvato.
Quando crei il design della versione mobile del sito, ricorda che i telefoni di ognuno sono diversi, così come lo è 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 su un'altra pagina e le immagini dovrebbero aprirsi separatamente, grandi, soprattutto quando si tratta di Internet.-shop.
Parlando di adattamento del sito ai dispositivi mobili, non si può fare a meno di ricorrere alle statistiche per capire quanto sia importante questo processo per la promozione 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 i dispositivi mobili. Ciò significa che il traffico Internet e il mercato dell'e-commerce sono occupati solo da una piccola quinta parte.
Pensa a questi numeri. Ha senso adattare la tua risorsa? Certo che si. Inoltre, sebbene ci sia così tanto spazio libero in questo mercato, puoi ritagliarti il tuo segmento.
L'utilizzo della versione mobile ha senso per qualsiasi piattaforma che mira a ottenere un posizionamento elevato. Dopotutto, questo ha un impatto diretto sull'utente, creando condizioni confortevoli affinché possa rimanere sul tuo sito.
Senza una versione mobile non può esistere:
Oggi, le tecnologie mobili sono in una fase di crescita e sviluppo attivi, pertanto, aspirando alla leadership di 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 è scomodo per una persona trovarsi su una particolare risorsa, non può ottenere informazioni su un prodotto o sul prezzo lì, effettuare un ordine, informarsi sulla consegna, quindi troverà il sito dove tutto ciò sarà possibile . Pertanto, per vincere la competizione, è importante disporre di una risorsa flessibile, conveniente, funzionale e interessante.
La versione mobile del sito Android o Ios aiuterà a farlo. Per fare ciò, devi scegliere uno dei metodi di riprogettazione sopra elencati: un modello adattivo, la creazione di un nuovo sito su un sottodominio e l'accesso ad esso tramite reindirizzamento, utilizzando modelli gratuiti o creando un'applicazione mobile con la quale l'utente può accedere ed essere sulla pagina più comodamente.
