Versione adattiva o mobile. Versione adattiva o mobile. Tutto è letto, tutto è visto

Questa è una versione semplificata aggiuntiva del sito, solitamente situata in un sottodominio con il prefisso "m" (ad esempio, m.site).

Come puoi vedere dall'immagine sui tablet, anche la versione per telefoni si apre e la estende in larghezza, perché il tablet è quasi uno smartphone molto, molto ampio 🙂

Esternamente e stilisticamente, ovviamente, può essere realizzato come sito principale (in modo che non si senta che si trovi su un'altra pagina): gli stessi colori, caratteri, elementi. Ma la struttura può differire radicalmente, e molto spesso lo è. È improbabile che qualcuno scelga un appartamento o prenda una macchina al telefono o organizzi un prestito in banca. Dopotutto, questo è scomodo, lo schermo è piccolo (rispetto a un laptop o un computer). Ma trovare gli sportelli bancomat più vicini o l'indirizzo di una pizzeria è l'opposto. Pertanto, le versioni mobili sono notevolmente semplificate, senza calcolatori complessi, enormi tabelle comparative di due o più prodotti simili. Rimuovono tutti i più complessi e semplificano l'accesso ai contatti, la modalità di funzionamento e così via.

I benefici

• Poiché si tratta di una versione aggiuntiva del sito, viene caricata separatamente (ovvero il sito principale non viene caricato). E ripeto ancora: di regola, è molto semplificato. Pertanto, si carica rapidamente rispetto all'adattivo.
• Mantenere la versione mobile è abbastanza semplice: le modifiche e i miglioramenti non influiscono sui computer.

carenze

• Come designer, esprimerò immediatamente la mia "fata" per quanto riguarda i tablet: la versione per smartphone che è allungata in larghezza sembra orribile su di loro. No, certo, puoi usarlo. Ma l'adattamento in questo senso è andato molto bene.
• Tutto ciò è estremamente scomodo per il SEO. Due indirizzi, il sito principale e la versione mobile, indicano che il contenuto verrà duplicato.

Vi do il benvenuto, cari lettori, in questo articolo, voglio parlarvi della versione mobile del sito. O meglio, se hai bisogno di una versione mobile e quali potrebbero essere i suoi vantaggi.

Perché ho deciso di iniziare l'argomento delle versioni mobili dei siti? È tutto molto semplice! Se confrontiamo il traffico del sito Web ora e diciamo anche 2-3 anni fa, ci sono molti utenti che utilizzano smartphone e tablet. E questi utenti non sono pochi! Pertanto, dovresti rendere la loro vita più comoda, vedi, la versione completa del sito, per leggere su uno smartphone, non è molto amichevole. Ne parleremo, ma prima voglio spiegare cos'è una versione mobile del sito.

Versione mobile del sito  - Questa è una versione separata del sito che duplica quella principale, ma è troncata, relativamente desktop e di norma la versione mobile è realizzata in una colonna, per un comodo utilizzo su smartphone senza l'uso del ridimensionamento. Nella versione mobile, rimane solo la funzionalità di base del sito e tutte le secondarie vengono rimosse. Pertanto, l'utente può navigare comodamente nel sito, leggere le informazioni su di esso e ricevere una risposta completa alla sua domanda.

Come puoi vedere, tutto è abbastanza semplice, la versione mobile del sito è un layout speciale che sarà comodamente visualizzato su smartphone e tablet. Ma queste sono solo cose comuni, poiché le versioni mobili del sito possono ancora essere suddivise in varie opzioni per la loro implementazione, in sostanza ci sono 3 diversi tipi di layout mobile del sito: design reattivo, versione mobile separata, RESS  (Responsive Design + Server Side). Diamo un'occhiata a ciascuna opzione di implementazione separatamente.

Design reattivo

Il responsive design, al momento, è il più popolare. Ci sono molte ragioni per questo, che discuteremo un po 'più avanti, e ora ti dirò cos'è il design reattivo e quali sono le sue caratteristiche distintive.

Design reattivo  - Questa è una delle opzioni per implementare la versione mobile del sito. La caratteristica principale del design adattivo è la mancanza di una versione separata del sito, ovvero il design stesso è adattato all'utente, data la sua risoluzione dello schermo. Il layout del design adattivo viene realizzato grazie a CSS3, con l'aiuto di media query - Media query. Ancora più importante, il design reattivo viene eseguito da solo per tutti i dispositivi, sia per computer che per telefoni e tablet, ovvero non è un sito separato.

Grazie alle query multimediali, è possibile risolvere vari problemi, dall'impostazione della larghezza della pagina o dell'elemento alla disabilitazione di elementi meno importanti in modo che non interferiscano con la lettura dei contenuti su smartphone e tablet. Inoltre, per telefoni e tablet, è possibile creare versioni diverse, ovvero per tablet, rimuovere alcuni dei blocchi non necessari, lasciando quelli più importanti e ridurli al minimo al telefono in modo che non interferiscano con la percezione dei contenuti.

Per mostrare più chiaramente come viene fatto il layout adattivo, ti darò un piccolo pezzo di codice e spiegherò il suo effetto.

   Schermo @media e (larghezza min: 360px) (div (display: nessuno;)) Schermo @media e (larghezza min: 720px) (div (display: blocco;))

Questo codice dice che se la risoluzione del dispositivo è di 360 px o più, il blocco div non verrà visualizzato, se la risoluzione è di 720 px o più, il div verrà mostrato come un elemento di blocco. E in questo modo, è possibile registrare qualsiasi proprietà per tutti gli elementi con risoluzioni diverse. Cioè, può essere larghezza, altezza, visibilità e un'opzione di posizionamento, ma generalmente qualsiasi cosa, anche un carattere diverso. Ma soprattutto, quando si utilizzano Media Query, il design reattivo dovrebbe avere layout di gomma. Vediamo ora quali sono i pro e i contro del layout adattivo del sito.

Vantaggi del layout adattivo durante l'implementazione di una versione mobile del sito:

- Convenienza e facilità di creazione. Il responsive design è abbastanza semplice da sviluppare, poiché diverse versioni del sito (desktop (computer), tablet (opzionale) e mobile) vengono immediatamente imposte in un colpo solo. Avendo un layout pronto della pagina principale in HTML, è necessario iniziare a scrivere Media Query per risoluzioni inferiori, ovvero per tablet e telefoni cellulari.

- Un indirizzo web. Con un layout adattivo, la versione mobile del tuo sito avrà lo stesso indirizzo della versione completa del sito, che in linea di principio è molto buona. Non è necessario configurare i reindirizzamenti tra versioni diverse e l'utente deve ricordare un indirizzo Web diverso, anche se viene aggiunto solo m.

Gli svantaggi del layout adattivo, quando si implementa una versione mobile del sito:

  . Il lungo download è dovuto al fatto che il sito è realizzato per dispositivi mobili, ma il design si adatta al dispositivo, ovvero lo smartphone deve scaricare tutti i file HTML e CSS. Cioè, nonostante il design massimamente semplificato della versione mobile, che pesa pochi kilobyte, è necessario caricare tutto, ovvero il peso totale della pagina sarà versione completa + cellulare. E se il segnale della rete mobile è cattivo, un sito del genere può caricarsi per un tempo molto lungo, vedi, non è bene costringere l'utente ad aspettare molto a lungo.

- Difficoltà di modifica. La difficoltà è che tutte le versioni del tuo sito sono in un unico documento, ovvero desktop, tablet e dispositivo mobile. Naturalmente, se sei esperto nella composizione, non avrai problemi particolari, ma questa è ancora una maggiore complessità, rispetto a una versione mobile separata.

- Mancanza di selezione della versione del sito. Il problema principale con il layout adattivo è che non è possibile scegliere la transizione alla versione desktop. E si scopre che se si interrompe la funzionalità necessaria del sito, l'utente mobile non sarà in grado di utilizzarlo in alcun modo solo se non inizia a eseguire la scansione del codice sorgente della pagina. Ma nessuno lo farà, ma semplicemente andrà dal concorrente.

Di conseguenza, nonostante tutti gli svantaggi della progettazione adattiva, è un concetto molto popolare per l'implementazione di una versione mobile del sito, poiché anche il suo potenziale non è abbastanza grave e con un approccio competente, alcuni problemi possono essere evitati.

Separare la versione mobile del sito

Una versione mobile separata del sito, forse questa è l'implementazione più antica di comodo accesso al sito, i proprietari di smartphone. Ora ti dirò di più sulla versione mobile del sito.

Una versione mobile separata del sito è la versione del sito in cui gli utenti di smartphone e tablet passano a quello principale. Ha un indirizzo separato, di norma è un prefisso al dominio principale m. o mobile. Una versione mobile separata è un sito separato che utilizza il database principale per visualizzare lo stesso contenuto, ma un layout completamente diverso ottimizzato per i dispositivi mobili. Di norma, le funzioni più importanti del sito sono incluse nella versione mobile, quelle che non sono necessarie agli utenti dei dispositivi mobili vengono eliminate.

Se prendiamo un design adattivo, ci viene in mente con nuove funzionalità CSS3, e una versione separata del sito esisteva molto prima dell'avvento del layout adattivo. Nonostante il fatto che questa soluzione sia la più antica, non perde la sua popolarità. Anche molte risorse popolari utilizzano una versione mobile separata del sito, perché presenta una serie di vantaggi che il layout adattivo non ha. Le versioni mobili possono essere visualizzate su siti come: m.yandex.ru; m.vk.com; m.ok.ru e molti altri. Cioè, puoi vedere che Yandex e grandi social network. le reti in RuNet utilizzano versioni mobili e non passano al design reattivo.

I vantaggi di una versione mobile separata del sito:

- Alta velocità di lavoro. La velocità è spiegata dal fatto che il modello è ottimizzato per i dispositivi mobili e in una versione separata non è necessario caricare vari "rifiuti". Quando si utilizza una versione separata del sito, è possibile ottenere download rapidi, anche in condizioni di scarsa connessione o rete 2g. Questo è solo un grande vantaggio per gli utenti che vengono da te da dispositivi mobili.

- Facilità d'uso. Una versione separata del sito è pensata molto bene per raggiungere un alto livello di usabilità. Non ha "funzioni spazzatura" che l'utente di smartphone semplicemente non ha bisogno e tutte le informazioni necessarie sono raggiungibili a piedi, il che è molto buono.

- Facile modifica. Durante la modifica del codice, non è necessario cercare qualcosa nel codice, vedrai il codice della versione specificamente mobile davanti ai tuoi occhi e stai lavorando specificamente con esso, senza interrompere la versione desktop.

- Possibilità di passare alla versione desktop. Una cosa molto importante, se diciamo che l'utente ha bisogno della piena funzionalità del tuo sito, può passare alla versione desktop senza problemi e trarre vantaggio da tutto ciò di cui ha bisogno lì.

Svantaggi di una versione mobile separata del sito:

- Lavoro extra in SEO. Il fatto è che il sito si trova su un sottodominio e i motori di ricerca lo trovano come una copia di quello principale. Per risolvere questo problema, è necessario utilizzare i meta tag rel \u003d "alternative" e rel \u003d "canonical". Quindi il robot di ricerca vedrà che questo è un indirizzo alternativo per l'accesso al tuo sito e non applicherà alcuna sanzione per la duplicazione dei contenuti.

— Possibili discrepanze. Se utilizzi due database diversi, i tuoi siti potrebbero non duplicarsi completamente l'uno con l'altro, il che influirà negativamente sulla SEO. Inoltre, se si dimentica di aggiungere una nuova pagina alla versione mobile, verrà visualizzata sul sito principale, ma non sulla versione mobile. Ma questo problema è facilmente risolto da un database comune.

Come puoi vedere, questo metodo di implementazione della versione mobile ha vantaggi e svantaggi completamente diversi, quindi entrambi i metodi trovano applicazione.

RESS  (Responsive Design + Server Side)

Questo è forse il mio tipo preferito di implementazione della versione mobile del sito. In una certa misura, combina design reattivo e una versione mobile del sito. Ma questo metodo è più difficile da implementare, poiché richiede conoscenze di programmazione più elevate e non tutti possono implementarlo. Ora ti dirò di cosa si tratta.

RESS (Responsive Design + Server Side) è l'implementazione della versione mobile sul sito, identificando il dispositivo a cui l'utente ha effettuato l'accesso e in base al tipo di dispositivo, avviando il modello necessario corrispondente al dispositivo. In genere, ciò avviene tramite un controllo utente-agente dell'utente.

Come hai già capito, in questo metodo viene determinato il dispositivo e successivamente viene caricato il modello necessario. Ora proverò a utilizzare un esempio di codice per mostrare come viene eseguita l'implementazione di RESS.

   $ user \u003d BBrowser :: detectDevice () if ($ device \u003d\u003d DEVICE_TYPE_MPHONE) ($ shablon \u003d \\ "mobile.php \\";) altrimenti if ($ device \u003d\u003d DEVICE_TYPE_TABLET) ($ shablon \u003d \\ "tablet.php \\" ;) else ($ shablon \u003d \\ "desktop.php \\";) include ($ shablon);

Qui nella versione più semplice, l'implementazione di Responsive Design + Server Side è simile a questa. Cioè, prima rileviamo il dispositivo da cui hanno visitato il nostro sito, e poi attraverso le condizioni se e altrimenti ordiniamo attraverso le possibili opzioni, se dal telefono, quindi visualizziamo mobile.php, se da un tablet, quindi tablet.php, se no altro quindi output desktop.php. Come puoi vedere, tutto è semplice, il sito semplicemente compensa diverse opzioni per il modello per vari dispositivi e quindi visualizza quello desiderato.

Vantaggi di Responsive Design + Server Side (RESS):

— Significativo risparmio di traffico. Come nella versione mobile, il design è stato creato appositamente per un tipo specifico di dispositivo e non contiene codice aggiuntivo che spende il traffico e rallenta il caricamento. È possibile ottenere una grammatura della pagina molto piccola.

— Indirizzo unico. Convenientemente, l'utente non ha bisogno di passare a sottodomini e utilizza il sito sul dominio principale, come nella progettazione reattiva. Ma allo stesso tempo, gli aspetti negativi del design adattivo sono esclusi qui.

— Possibilità di passare da una versione all'altra. Quando si utilizza Responsive Design + Server Side, è possibile passare da una versione all'altra senza problemi aggiungendo un pulsante di commutazione in una posizione di rilievo; è sempre possibile abilitare il layout desktop o mobile.

Svantaggi di Responsive Design + Server Side (RESS):

— Altissima complessità di implementazione. Quando è sufficiente scrivere solo query multimediali per la progettazione adattiva, non è così semplice, qui è necessario un intero algoritmo per identificare i dispositivi, emettere la composizione necessaria e passare da una composizione all'altra.

— Dispositivo non rilevato. Ci sono momenti in cui il telefono potrebbe semplicemente non essere determinato e verrà data una versione desktop, purtroppo, questo algoritmo non è stato ancora portato all'ideale.

Alla fine, voglio dire che questo è il mio metodo preferito per implementare la versione mobile del sito, ma è molto complesso e richiede molto tempo, ma se lo fai, ne varrà la pena. Ma non dovresti porre fine ad altre opzioni per l'implementazione, poiché se ti avvicini al problema del prezzo dell'implementazione (se non conosci la programmazione), il layout adattivo sarà il più economico e svolgerà perfettamente le sue funzioni e la maggior parte delle persone tenderà ad esso. Quale metodo di implementazione della versione mobile del sito scegliere dipende da te. Questa è puramente una questione di gusti. E ora ti dirò finalmente perché hai bisogno di una versione mobile del sito.

Perché ho bisogno di una versione mobile del sito?

Questa domanda sorge per molti webmaster, perché creare una versione mobile del sito? E tutto è davvero molto semplice, questo è fatto per raggiungere il pubblico nel suo segmento il più possibile. Per i negozi online e varie aziende, generalmente lo penso versione mobile richiesta!  Per vari blog e forum - desiderabile.

Ma se si tiene conto delle ultime notizie: Yandex ora verrà visualizzato nei risultati mobili sopra quei siti che sono adattati per dispositivi mobili. Affinché una pagina sia considerata mobile, deve: non avere lo scorrimento orizzontale e non dovrebbero esserci componenti java e flash sulla pagina, poiché i dispositivi mobili non possono riprodurli. Ecco un esempio di Yandex come dovrebbe apparire una pagina ottimizzata per dispositivi mobili.

Come puoi vedere, il contenuto dovrebbe andare in una colonna, dovrebbe essere facile da leggere e tutti gli elementi dovrebbero essere abbastanza grandi da poter essere cliccati con il dito. Di conseguenza, ora, non avendo una versione mobile, puoi dimenticare una parte significativa del traffico sul tuo sito, perché Yandex ti sottovaluterà (ma specificamente per i dispositivi mobili), per i dispositivi desktop la classifica rimarrà la stessa.

Ma in generale, se hai una versione mobile del sito, non importa se è un layout adattivo, o una versione mobile separata, o in generale Responsive Design + Server Side, questo sarà un vantaggio enorme, perché non importa quale sia la tua implementazione, la cosa principale: c'è Versione mobile del sito. Da ciò solidi vantaggi: buono per gli utenti, più traffico, un vantaggio dal motore di ricerca, più entrate pubblicitarie. Sulla base delle ultime notizie, la mia opinione è: è richiesta la creazione di una versione mobile!

Questo è tutto per me, spero di non averti stancato molto con il mio lungo post, ti auguro successo nella tua promozione.

Oggi, la maggior parte delle persone accede alla rete tramite gadget mobili: tablet, telefoni e, a questo proposito, anche l'ottimizzazione del sito passa a un nuovo livello. Se un utente entra e vede che il sito non è ottimizzato per i dispositivi mobili: l'immagine non può essere visualizzata, i pulsanti si sono spostati, i caratteri sono piccoli e illeggibili, il design è inclinato - 99 su 100%, che verrà fuori e inizierà a cercare un altro più conveniente. Un segno di spunta che la risorsa è irrilevante, ovvero non corrisponde alla query di ricerca. Pertanto, il design della pagina deve essere adattato a vari dispositivi mobili. Che cos'è una versione mobile di un sito, come realizzarlo e qual è il modo migliore per applicarlo? Maggiori dettagli in questo articolo.

Quindi, ci sono quattro modi chiave per adattare il sito alla versione mobile.

Metodo 1 - Progettazione reattiva

I modelli reattivi comportano la modifica dell'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 applicare query. Di per sé non cambia.

I vantaggi di questo metodo includono:

• sviluppo conveniente, poiché la struttura stessa si adatta alle impostazioni dello schermo e qualsiasi aggiornamento non richiede uno sviluppo del progetto da zero, basta modificare CSS e HTML;
• un indirizzo URL: l'utente non deve ricordare più nomi, non è necessario un reindirizzamento (reindirizzamento da un indirizzo a un altro), il che può complicare il lavoro del webmaster ed è più facile per il motore di ricerca ordinare e classificare la risorsa con un singolo indirizzo.

Naturalmente, anche i modelli adattivi hanno i loro svantaggi, che, a proposito, 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, gli svantaggi sono:

• Il responsive design non supporta le stesse attività su un dispositivo mobile come su un PC. Se questa, ad esempio, è una versione mobile del sito Web della banca, in cui le informazioni sul tasso di cambio o sui bancomat più vicini sono più probabili essere importanti per l'utente, tale design è abbastanza. Ma se si tratta di una risorsa strutturata complessa con molte sezioni e sottosezioni, è improbabile che piaccia ai visitatori.
• Il caricamento lento trasforma il tuo sito preferito in uno odioso. Ciò è particolarmente vero per le risorse in cui vi sono abbondanti animazioni, video, pop-up e altri elementi attivi. A causa del peso elevato, la pagina semplicemente "rallenterà", l'utente si arrabbierà e se ne andrà e le posizioni di ricerca del sito cadranno.
• L'incapacità di disabilitare la versione mobile è un altro svantaggio significativo. Se qualche elemento è nascosto da un tale layout, non puoi fare nulla per aprirlo, a differenza dei siti in cui puoi disabilitarlo e passare a un dominio normale.

Tuttavia, una tale versione mobile del sito rapidamente, senza competenze e costi speciali ti consente di adattare la risorsa a qualsiasi gadget. Ma è adatto, a causa degli svantaggi di cui sopra, a risorse piccole e semplici con un minimo di informazioni e contenuti multimediali, senza navigazione e animazione complicate. Per un sito complesso, sono adatti altri 2 metodi.

Metodo due: una versione separata del sito

Questo metodo è molto comune e spesso semplifica la lettura di un sito su un dispositivo mobile. La sua essenza è creare una versione separata della pagina, disegnata per l'applicazione e posizionata su un URL o sottodominio separato, ad esempio m.vk.com. Allo stesso tempo, la funzionalità principale viene preservata, il design del sito sembra solo diverso. I vantaggi di questo metodo sono evidenti:

• comoda interfaccia utente;
• È facile cambiare e apportare modifiche, perché la versione esiste separatamente dalla risorsa principale;
• a causa del suo peso ridotto, una versione separata del sito funziona molto più velocemente di un modello adattivo;
• molto spesso c'è la possibilità di accedere alla versione principale della pagina con un dispositivo mobile.

Ma qui c'erano alcuni svantaggi:

• Diversi indirizzi: versione desktop e mobile del sito. Come far ricordare all'utente due opzioni? I webmaster sono spesso prescritti dal desktop alla versione mobile, ma se questa pagina non esiste nella versione mobile, l'utente riceverà un errore. Qui, sorgono difficoltà con i motori di ricerca, che sono difficili da classificare 2 risorse identiche e ciò influisce direttamente sulla promozione.
• Una versione mobile di un sito da un computer, se un utente accede erroneamente ad esso, sembra ridicola, il che può anche influenzare la partecipazione.
• Questa versione è spesso notevolmente ridotta, desktop, quindi l'utente avrà funzionalità molto limitate. Allo stesso tempo, se manca qualcosa, il visitatore può passare alla versione completa della pagina.

In generale, un sito mobile separato sta dando i suoi frutti ed è il modo più comune per adattare una risorsa ai dispositivi mobili. È popolare tra i principali negozi online, come Amazon.

Il terzo modo: design RESS

Il motore di ricerca di Google supporta attivamente questa direzione del design mobile. Questo è il metodo più difficile, costoso, ma efficace per adattare il sito al tuo telefono o tablet. Si chiama RESS. Questo è il targeting per risorsa 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 attraverso un browser. Sono di facile accesso, poiché il collegamento sarà sempre a portata di mano sullo schermo e non è necessario inserire un nome complesso nella barra degli indirizzi del browser.

Naturalmente, ci sono anche degli svantaggi, come la complessità nello sviluppo, gli alti costi di manodopera di un gran numero di programmatori e la necessità di fare diverse opzioni di layout. A volte un dispositivo mobile non viene riconosciuto dall'applicazione. È richiesto un supporto tecnico regolare, correzione delle carenze. Tuttavia, questa opzione è considerata la migliore delle tre proposte a causa del suo funzionamento produttivo e ininterrotto.

Il modo più economico per creare un sito mobile

Tutti i metodi sopra descritti implicano, anche se non sempre un lavoro lungo e complicato, ma comunque pagato dal webmaster. Se non vedi l'urgente necessità di tale sviluppo, una versione mobile semplice e gratuita del sito farà al caso tuo. Come renderlo il più semplice?

Scarica modelli speciali (plugin) per un design reattivo. Ad esempio, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile e altri. Aiuteranno a visualizzare correttamente il sito sul telefono, mentre otterrai alcuni suggerimenti su cosa dovrebbe essere risolto per adattare meglio la pagina alla versione mobile.

Naturalmente, questo metodo non è adatto a risorse serie. Piuttosto, questa funzione gratuita è destinata ai siti, blog, feed di notizie più piccoli e semplici. Non dimenticare che il motore di ricerca di Google, come Yandex, ha oggi seri requisiti per le versioni mobili, quindi c'è una grande possibilità di abbassare le proprie posizioni usando questo metodo.

Con questo metodo, molto probabilmente, gli annunci pubblicitari e i pop-up banner verranno tagliati, ma la pagina verrà caricata rapidamente e senza "ritardi".

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 modello adattivo. La cosa più importante è che per il suo efficace lavoro è necessario aderire a diversi principi estremamente importanti. Quindi quale dovrebbe essere la versione mobile del sito? Come renderlo produttivo, efficiente e produttivo?

Rimuoviamo tutto ciò che non è necessario

Il minimalismo è ciò per cui lo sviluppatore della versione mobile del sito dovrebbe lottare. Immagina quanto sia difficile percepire informazioni che sono 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 del piccolo schermo in aree chiare e leggibili. Le chiavi virtuali dovrebbero essere visibili in modo che l'utente sappia chiaramente dove premere e vedere: ecco il prodotto, ecco il modulo per compilare i dati, ecco le informazioni sulla consegna e sul pagamento.

Tutte le opzioni aggiuntive che sarebbero utili nella versione desktop e che semplificherebbero la vita per l'utente, porteranno solo complessità. Lascia solo gli elementi più importanti. Animazione, banner pubblicitari, multimedia, molto probabilmente, rallenteranno il sito o l'applicazione e distrarranno la cosa principale.

allineamento

Il problema dell'allineamento non è meno acuto, perché se lo fai in modo sbagliato, l'utente riceverà solo la fine di parole importanti. È generalmente accettato l'allineamento a sinistra e in verticale. Immagina come scorrere un feed di notizie sul tuo telefono. Lo fai dall'alto verso il basso, ma non sul lato sinistro o destro.

unione

Quando non c'è possibilità di una lunga catena di transizioni, prova a combinare più passaggi in uno. Ad esempio, il sito richiede l'inserimento di dati in più fasi: un nome, quindi un indirizzo, in cui in ogni cella separata c'è una casa, una strada, un appartamento, ecc. Separati. Per non forzare l'utente a provare a superare molte piccole celle, suggerisci di compilare solo 2 - nome e indirizzo.

E separazione

A volte, al contrario, è necessario disconnettere troppe informazioni. Ad esempio, nel menu a discesa è presente un elenco di oltre 80 città in cui viene effettuata la consegna. Raggruppali per regione in modo che l'utente non debba scorrere questo enorme elenco. Quando passa sopra un centro o una regione regionale, verrà abbandonato un altro elenco di città.

liste

A proposito, per quanto riguarda le liste. Ce ne sono due: risolti in ordine alfabetico o di altro tipo e con caratteri jolly. La loro scelta dipende da ciò che verrà elencato.

Risolto è conveniente se l'utente sa esattamente cosa sta cercando. Ad esempio, città, numero o data. La seconda opzione è adatta per nomi complessi lunghi o per casi in cui vi sono molte varianti con lo stesso nome e ciascuna porta l'utente un passo più vicino 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 di acquistare ferri da maglia. L'utente inserisce la query di ricerca "Ferri da maglia in metallo" e nel prompt vedrà "Ferri da maglia da 5 mm", "Ferri da maglia da 4,5 mm", ecc.

Completamento automatico

Questo articolo è particolarmente vero per i siti in cui vendono qualcosa online e devi compilare forme standard di pagamento, consegna, ecc. Se una persona effettua un acquisto da un telefono, molto probabilmente non ha tempo per arrivare al computer, il che significa che il processo gli acquisti devono essere effettuati il \u200b\u200bpiù rapidamente e conveniente possibile.

Per questo modulo può contenere dati già compilati, è possibile 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 cambiati, ma se colpisci il bersaglio, il tempo dell'utente verrà salvato.

Tutto è letto, tutto è visto

Quando si progetta la versione mobile del sito, ricordare che tutti i telefoni hanno telefoni diversi e anche la vista. Forse il tuo sito verrà visualizzato da un piccolo schermo, quindi i caratteri dovrebbero essere semplici e leggibili, i pulsanti dovrebbero essere abbastanza grandi da poter essere cliccati e non accedere a un'altra pagina e le immagini dovrebbero aprirsi separatamente, grandi, specialmente quando si tratta di Internet fare acquisti.

Alcune statistiche

Parlando dell'adattamento del sito ai dispositivi mobili, non si può non ricorrere alle statistiche per capire quanto sia importante questo processo per la promozione sulla rete.

I numeri sono i seguenti. Oggi, l'87% della popolazione usa gadget, apparentemente, fatta eccezione per i bambini più piccoli e alcuni anziani. Gli economisti prevedono un aumento di 100 volte del commercio mobile nei prossimi 5 anni. Allo stesso tempo, solo il 21% dei siti è adattato per lavorare con 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 si. Inoltre, finché c'è così tanto spazio libero in questo mercato, puoi prendere il tuo segmento in esso.

Dov'è necessaria la versione mobile?

Utilizzare la versione mobile è appropriato per qualsiasi piattaforma che cerca di ottenere un punteggio elevato. Dopotutto, questo ha un impatto diretto sull'utente, creando condizioni confortevoli per lui per rimanere sul tuo sito.

Senza la versione mobile non può esistere quanto segue:

• portali di notizie, poiché è proprio la loro maggioranza che viene vista dal telefono sulla strada per andare a lavoro o a scuola;
• social network - per lo stesso motivo, inoltre c'è un fattore di comunicazione online, il che significa che una chat conveniente e comprensibile dovrebbe essere creata per questo;
• siti di riferimento, siti con navigazione, ecc., a cui le persone si rivolgono quando cercano qualcosa;
• negozi online: un'opportunità per attirare acquirenti che non trascorrono il tempo a fare shopping, ma acquistano tutto tramite Internet mobile.

Invece di una conclusione

Oggi, le tecnologie mobili sono nella fase di crescita attiva e sviluppo, quindi, cercando di essere leader nel mercato, qualsiasi azienda dovrebbe garantire che la propria risorsa Internet soddisfi i requisiti. A causa delle crescenti richieste degli utenti, i siti devono costantemente aggiornarsi e adattarsi ai vari dispositivi. È chiaro che se una persona è inopportuna trovarsi su una particolare risorsa, non può ottenere informazioni sul prodotto o sul prezzo lì, effettuare un ordine, conoscere la consegna, troverà il sito dove tutto ciò sarà possibile. Pertanto, al fine di vincere la competizione, è importante disporre di una risorsa flessibile, conveniente, funzionale e interessante.

La versione mobile del sito Android o Ios ti aiuterà a farlo. Per fare ciò, è necessario scegliere uno dei metodi di riprogettazione sopra indicati: un modello adattivo, creare un nuovo sito su un sottodominio e passare ad esso attraverso un reindirizzamento, utilizzando modelli gratuiti o creando un'applicazione mobile con la quale l'utente può accedere più comodamente e rimanere nella pagina.

Abbiamo pubblicato un nuovo libro, "Content Marketing sui social media: come ottenere abbonati in testa e innamorarsi del loro marchio".

La versione mobile del sito è una versione duplicata del sito principale per cui viene utilizzato un layout speciale, il che rende conveniente visualizzare e navigare le pagine della risorsa da telefoni cellulari e tablet.

Altri video sul nostro canale - impara il marketing su Internet con SEMANTICA

Un telefono cellulare è diventato a lungo un migliore amico per la maggior parte degli abitanti del mondo. I moderni gadget mobili hanno quasi completamente assunto il ruolo dei computer fissi e hanno radicalmente cambiato il comportamento degli utenti su Internet. Sono sia una fonte di informazioni sia un mezzo per realizzare molte attività. Le dinamiche della vita richiedono l'uso più razionale del tempo, quindi da tempo studiamo, acquistiamo e prenotiamo in viaggio.

Ogni progetto su Internet ha il suo sito principale, ma la risoluzione dello schermo dei dispositivi mobili è diversa da computer e laptop. Di conseguenza, l'utilizzo del sito dal telefono è quasi impossibile, poiché il suo display è molto scomodo. Ecco perché era necessaria una versione ottimizzata del sito che sarà leggibile per i gadget portatili.

Perché ho bisogno di una versione mobile del sito?

L'abbondanza di risorse web identiche, sia informative che di vendita, crea una mancanza di lealtà da parte dei visitatori. Gli utenti di Internet hanno quindi la possibilità di scegliere, ad esempio, quando un visitatore si imbatte in una navigazione scomoda di una risorsa, preferendo non perdere tempo, ma lasciare il sito e rivolgersi a un concorrente. Questa situazione costringe gli amministratori a creare le condizioni più confortevoli al fine non solo di attrarre i visitatori, ma anche di motivarli a rimanere.

La massima copertura del pubblico di destinazione e la creazione di condizioni confortevoli per ciò che serve alla versione mobile del sito.

Una versione mobile separata del sito è l'implementazione di un comodo accesso al sito da dispositivi mobili, che è stato usato per un bel po 'di tempo. Negli smartphone, il sito viene visualizzato in una colonna, quindi, prima di creare una versione mobile del sito, lo sviluppatore deve riflettere attentamente sul design: posizionare tutto in modo da non ridurre il visitatore nella funzionalità e allo stesso tempo rendere l'interazione con la risorsa il più conveniente possibile.

Come funziona

Il principio secondo cui viene presa la versione da mostrare al visitatore è che quando l'utente visita il sito, lo schermo del dispositivo viene automaticamente rilevato. Se la larghezza dello schermo viene identificata come gadget mobile, reindirizza alla versione mobile della risorsa, che si trova su un sottodominio separato. Affinché in futuro i motori di ricerca non percepiscano questa versione come una risorsa separata, è meglio posizionare un sottodominio sullo stesso dominio del sito principale, altrimenti la promozione della versione mobile del sito sarà controproducente.

Come trasferire il sito alla versione mobile

Vi sono alcuni principi e la loro implementazione richiederà capacità di programmazione e layout.

Nella folla. versione, è necessario mantenere il concetto generale con la versione desktop, ma allo stesso tempo sviluppare soluzioni di progettazione separate, nonché l'interfaccia più intuitiva. Gli elementi delle risorse nella schermata dei visitatori devono essere opportunamente distanziati e visualizzati sufficientemente grandi da consentire un comodo tocco delle dita. Successivamente, sono in corso i test e il lancio finale.

Versione mobile vs layout adattivo

Parallelamente a una versione mobile separata del sito, esiste un'altra variante interpretata: il design adattivo.

Proviamo a capire come la versione mobile del sito differisce da quella adattiva.
Un sito reattivo non è una versione separata di una risorsa, questo è il sito principale e si adatta automaticamente alla risoluzione del dispositivo da cui accedi.

I vantaggi del layout adattivo includono il fatto che ha lo stesso indirizzo del sito principale, quindi non è necessario il reindirizzamento. E questo rafforza notevolmente la posizione del sito quando viene classificata dai motori di ricerca. Durante l'apertura, vengono visualizzati esattamente lo stesso contenuto del sito e la sua funzionalità, ma il suo aspetto viene adattato alle dimensioni della finestra. Inoltre, esiste la possibilità di ottimizzare la risorsa.

Ma lo sviluppo di una versione adattiva è un processo che richiede più tempo, rispettivamente, anche la parte costosa dell'evento sarà maggiore.

Il responsive design è rilevante per le risorse che non hanno un grande turnover di visitatori: negozi online, blog, biglietti da visita e siti, il loro compito principale è quello di fornire contenuti.

Pro e contro della versione mobile

La versione mobile ha velocità di download più elevate e facilità di navigazione. Dal momento che il visitatore vede un minimo di informazioni di distrazione, la probabilità di un'azione positiva da parte sua è maggiore. Inoltre, una versione mobile separata è completamente autonoma dal desktop. Ciò consente di lavorare con loro separatamente.

Gli svantaggi di questo concetto includono alcune difficoltà nel campo della promozione SEO. Poiché il posizionamento dello stesso contenuto è percepito come un doppio, ciò richiede misure separate per eliminare l'impatto negativo sul processo di promozione del sito. Dato che la versione mobile non è universale, richiede una voce di spesa separata oltre ai contenuti del sito principale.

Questa versione del sito è adatta a grandi progetti che hanno già un alto traffico verso il sito principale, ma vogliono aumentare la fedeltà ai dispositivi mobili senza riprogettazione. Nella maggior parte dei casi, una versione mobile separata è rilevante per le risorse in cui la velocità di download è importante: social network, servizi di posta elettronica, portali di notizie.

Riassumendo, possiamo solo dire che oggi, una necessità giustificata per qualsiasi progetto Internet è la capacità di visualizzare correttamente il sito su dispositivi mobili. Come implementarlo dipende dagli scopi e dagli obiettivi del sito, dal budget e dalle capacità.

Per determinare quale sia il migliore: un design adattivo o una versione mobile di un sito, devi prima capire perché tutto ciò è necessario.

Secondo comscore.com, la percentuale di utenti che navigano nei siti da dispositivi mobili cresce ogni anno:

Base di abbonati attivi per trasmissione dati mobile, mondo, milioni di persone, 2007-2015

A questo proposito, sono stati sviluppati nuovi algoritmi per i motori di ricerca e sono stati introdotti ulteriori fattori di classificazione: ora i risultati della ricerca tengono conto di quanto sia mobile il sito (conveniente per la visualizzazione su dispositivi mobili). Su Google, l'algoritmo mobile friendly è stato lanciato il 21 aprile 2015 a Yandex - Vladivostok il 2 febbraio 2016.

La versione desktop del sito e la versione adattata per dispositivi mobili

In che modo i motori di ricerca determinano se una pagina è comoda per la visualizzazione su dispositivi mobili:

• le pagine devono contenere contenuti che non richiedono scorrimento orizzontale o ridimensionamento per la visualizzazione;
• il sito non dovrebbe avere elementi che non funzionano su molti dispositivi mobili - Flash, applet Java e plug-in Silverlight;
• i testi sulle pagine dovrebbero essere leggibili senza ridimensionamento;
• i collegamenti devono trovarsi a una distanza sufficiente l'uno dall'altro in modo che possano essere facilmente cliccati.

Ancora più importante, i motori di ricerca valutano i siti Web in modo inequivocabile, sia mobile-friendly o meno.

Utilizzando lo strumento Google PageSpeed \u200b\u200bInsights (https://developers.google.com/speed/pagespeed/), puoi determinare la velocità di caricamento delle pagine del sito e la loro usabilità. La velocità della pagina può essere compresa tra 0 e 100 punti per gli indicatori "Velocità di caricamento della pagina" e "Convenienza per l'utente", ad esempio:

I risultati da 85 punti in poi sono considerati buoni.

Se la pagina del sito non soddisfa i requisiti del servizio, viene inviato un rapporto sotto forma di raccomandazioni per la risoluzione dei problemi, ad esempio:

Questo servizio può essere utilizzato per la diagnosi iniziale e l'identificazione dei problemi sul sito Web.

Quando è necessario sviluppare una versione mobile o adattiva per i siti?

Per capire se vale la pena adattare un sito per un pubblico "mobile", è necessario analizzarlo nei sistemi di analisi web (Yandex.Metrica o Google Analytics) in base al traffico in termini di dispositivi da cui gli utenti accedono al sito. Se oltre il 15% del pubblico utilizza smartphone o tablet, si consiglia di sviluppare un layout adattivo o una versione mobile. È importante considerare il traffico del sito. Ad esempio, per i siti con un numero elevato di visitatori (da 1.000.000 e oltre), questa barra è ridotta, poiché non è possibile trascurare un così ampio segmento di traffico del sito.

Versione mobile del sito

Versione mobile  - Una versione separata o un modello separato adattato per la visualizzazione su dispositivi mobili. Potrebbe non visualizzare tutti i blocchi presenti nella versione principale del sito.

"Funzionalità speciale" della versione mobile: quando vai nella barra degli indirizzi del browser, l'URL cambia - viene aggiunto il prefisso "m". Ad esempio: m.example.ru.

Visualizza sul monitor del computer e sul dispositivo mobile: la versione mobile differisce da quella principale

Un esempio di un sito con una versione mobile adattata: http://www.lamoda.ru/ (m.lamoda.ru).

I principali vantaggi della versione mobile del sito

• Leggero e, di conseguenza, alta velocità di download. Questo è essenziale per gli utenti che hanno accesso a Internet a bassa velocità (GPRS o 3G debole).
• L'utente ha la scelta della versione da visualizzare (mobile o primaria).
• Conformità ai requisiti dei motori di ricerca per comodità di visualizzazione del sito su dispositivi mobili.

Svantaggi della versione mobile

• Se è necessario apportare modifiche al sito, è necessario apportarle sia sulla versione normale del sito, sia sul dispositivo mobile, ovvero la quantità di lavoro aumenta di 2 volte.
• Durante lo sviluppo, spesso devi rinunciare a parte del contenuto.
• Dal momento che il cellulare e la versione principale del sito si trovano su domini diversi, non migliora i fattori comportamentali del dominio principale, vale a dire questo sarà un aspetto negativo per l'ottimizzazione SEO.

Questo è un design speciale di pagine Web, in cui elementi del sito cambiano dimensione e posizione a diverse risoluzioni di visualizzazione. Il sito si adatta automaticamente alle dimensioni del dispositivo su cui è aperto, che si tratti di un monitor per PC, smartphone o tablet. Grazie a questo tipo di layout, il sito sarà comodamente e chiaramente visualizzato su vari dispositivi. Utilizzando tecnologie di progettazione adattiva, la funzionalità del sito non ne risente affatto.

Visualizza sul monitor di un computer e su un dispositivo mobile: la versione adattiva differisce da quella principale

Un sito di esempio con una versione adattiva: http://www.mvideo.ru/.

Vantaggi della progettazione reattiva per i dispositivi mobili

• Un URL per tutto il contenuto.
• Interfaccia flessibile: puoi configurare una comoda visualizzazione del sito per qualsiasi larghezza dello schermo.
• Il design reattivo soddisfa i requisiti dei motori di ricerca per la comodità di visualizzare il sito su dispositivi mobili.
• Se il sito ha una versione adattiva, i fattori comportamentali migliorano sui dispositivi mobili e questo migliora le prestazioni complessive del sito. Per il posizionamento nei risultati di ricerca questo sarà un grande vantaggio.

Svantaggi del design reattivo per i dispositivi mobili

• La necessità di creare layout separati delle pagine del sito per ciascuna risoluzione di visualizzazione.
• La versione adattiva, a differenza della versione mobile, non può passare alla modalità normale. Cioè, l'utente non ha scelta di visualizzare il sito. Lo svantaggio è rilevante se la versione adattiva presenta errori, ad esempio gli elementi non vengono visualizzati correttamente.
• La difficoltà di aggiungere un nuovo modello di pagina, perché dovranno essere configurati per essere visualizzati correttamente sulla versione adattiva. Se aggiungi informazioni ai modelli di pagina esistenti, non ci saranno problemi con il display.

Cosa c'è di meglio: layout adattivo per dispositivi mobili o una versione mobile di un sito?

La migliore soluzione per il sito è l'uso del layout adattivo per i dispositivi mobili. Nonostante una serie di carenze, il sito Web con layout adattivo è più funzionale. Inoltre, la presenza di modelli di pagina implica la semplicità di aggiunta di contenuti al sito, a differenza della versione mobile, in cui il lavoro di aggiunta di contenuti è duplicato, poiché in realtà ci sono due siti diversi. Un grande vantaggio è il fatto che la versione adattiva migliora i fattori comportamentali del sito principale. Questo è utile in termini di promozione e usabilità. Sulla base di ciò, ti consigliamo di fare la tua scelta a favore del layout adattivo.