Oggi, la maggior parte delle persone passa onlinegadget mobili - tablet, telefoni, in connessione con questo, l'ottimizzazione del sito raggiunge anche un nuovo livello. Se l'utente entra e vede che il sito non è ottimizzato per i dispositivi mobili: l'immagine non può essere visualizzata, i pulsanti vengono spostati, i caratteri sono piccoli e illeggibili, il design è distorto - 99% su 100%, che verrà fuori e inizierà a cercarne un altro più conveniente. Un robot di ricerca segnalerà che la risorsa è irrilevante, cioè non corrisponde alla query di ricerca. Pertanto, il design della pagina deve essere necessariamente adattato a vari dispositivi mobili. Che cos'è una versione mobile del sito, come farlo e qual è il modo migliore per applicarlo? Leggi di più in questo articolo.

Quindi, ci sono quattro modi principali per adattare il sito a una versione mobile.

versione mobile del sito come fare

Il primo modo: design adattivo

I modelli adattivi suggeriscono un cambiamentoimmagini del sito a seconda delle dimensioni dello schermo. Di norma, sono impostati su standard 1600, 1500, 1280, 1100, 1024 e 980 pixel. Per l'implementazione, utilizzare le query multimediali CSS3. Il design del sito non cambia allo stesso tempo.

I vantaggi di questo metodo sono:

  • design conveniente, poiché la struttura stessa si adatta ai parametri dello schermo e qualsiasi aggiornamento non richiede lo sviluppo del design da zero, basta correggere CSS e HTML;
  • un URL - l'utente non ha bisogno di ricordarediversi nomi, non è necessario un reindirizzamento (reindirizzamento da un indirizzo a un altro), che può complicare il lavoro del webmaster, e il motore di ricerca è più facile da ordinare e classificare la risorsa con un unico indirizzo.

Naturalmente, i modelli adattivi hanno il lorosvantaggi, che, a proposito, sono più che meriti. Tuttavia, molti sviluppatori aderiscono a questo concetto, ad esempio, la società Google, la cui versione mobile del sito ha un design adattivo. Quindi, gli svantaggi sono:

  • La progettazione adattiva non supporta gli stessi compiti perdispositivo mobile, come sul PC. Ad esempio, se si tratta di una versione mobile del sito Web della banca, in cui è più probabile che l'utente abbia informazioni sul tasso di cambio o sugli ATM più vicini, questo modello è sufficiente. Ma se si tratta di una risorsa strutturata complessa con molte sezioni e sottosezioni, è improbabile che il layout adattivo faccia appello ai visitatori.
  • Un download lento trasforma il tuo sito preferito in aodiato. Questo è particolarmente vero per le risorse, dove l'animazione, i video clip, i pop-up e altri elementi attivi sono abbondanti. A causa del peso elevato, la pagina semplicemente "rallenta", l'utente si arrabbierà e andrà via, e le posizioni di ricerca del sito cadrà.
  • Impossibilità di disabilitare la versione mobile - altrouno svantaggio significativo. Se alcuni elementi sono nascosti da un tale layout, non puoi fare nulla per aprirlo, a differenza dei siti dove può essere disattivato e passare a un dominio normale.

Tuttavia, una tale versione mobile del sito è veloce,senza competenze e costi speciali ti consente di adattare la risorsa a qualsiasi gadget. Ma è adatto, in considerazione delle carenze elencate, a risorse piccole e semplici con un minimo di informazioni e multimediali, senza complicate operazioni di navigazione e animazione. Per un sito complesso, sono adatti altri due metodi.

progettazione di siti Web

Il secondo metodo è una versione separata del sito

Questo metodo è molto comune e spesso con successorende il sito sul dispositivo mobile più conveniente per la percezione. 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, il principale funzionale è preservato, il design del sito appare semplicemente diverso. I vantaggi di questo metodo sono ovvi:

  • interfaccia user friendly;
  • è facile cambiare e apportare modifiche, perché la versione esiste separatamente dalla risorsa principale;
  • a causa del basso peso di una versione separata del sito è molto più veloce del modello adattivo;
  • più spesso c'è l'opportunità di andare alla versione principale della pagina con un cellulare.

Ma anche qui c'erano dei difetti:

  • Più indirizzi: versione desktop e mobilesito. Come faccio a ricordare all'utente due opzioni? I webmaster spesso prescrivono il reindirizzamento (reindirizzamento) dalla versione dextup al mobile, ma allo stesso tempo, se questa pagina non esiste nella versione mobile, l'utente riceverà un errore. Qui ci sono difficoltà con i motori di ricerca, che sono difficili da classificare 2 risorse identiche, e questo influenza direttamente i progressi.
  • La versione mobile del sito dal computer, se l'utente erroneamente si rivolge a esso, sembrerà ridicola, il che può anche influire sulla presenza.
  • Questa versione è spesso molto 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 da soloed è il modo più comune per adattare la risorsa ai dispositivi mobili. È popolare con i grandi negozi online, ad esempio Amazon.

modelli adattivi

Il terzo modo è RESS-design

Il motore di ricerca di Google supporta attivamente questodirezione 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 un targeting per risorsa in un'applicazione mobile, che può essere scaricato separatamente per ciascun dispositivo. Per l'androide - con GooglePlay e per Apple - con iTunes.

Tali applicazioni sono veloci, gratuite, convenienti,avere 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 il browser. Sono facili da inserire, perché il link sarà sempre a portata di mano sullo schermo e non è necessario inserire un nome complesso nella barra degli indirizzi del browser.

Ci sono, naturalmente, qui e le loro carenze, come ad esempiola complessità nello sviluppo, l'alto costo del lavoro di un gran numero di programmatori, la necessità di fare diverse varianti di layout. A volte un dispositivo mobile non viene riconosciuto dall'applicazione. Supporto tecnico regolare, correzione delle carenze è necessario. Tuttavia, questa opzione è considerata la migliore delle tre offerte a causa del suo funzionamento produttivo e regolare.

google versione del sito mobile

Il modo più economico per creare un sito mobile

Tutti i metodi sopra riportati presuppongonoe non sempre un lavoro lungo e complesso, ma ancora pagato dal webmaster. Se non vedi l'urgente necessità di tale sviluppo, puoi utilizzare una versione mobile semplice e gratuita del sito. Come renderlo più facile?

Scarica modelli speciali (plugin) perdesign adattivo. Ad esempio, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile e altri. Aiuteranno a visualizzare correttamente il sito nel telefono, allo stesso tempo riceverete diversi suggerimenti che dovrebbero essere corretti per un migliore adattamento della pagina alla versione mobile.

Naturalmente, questo metodo non è adatto perrisorse serie. Piuttosto, questa opportunità gratuita è destinata a siti piccoli e semplici, blog, feed di notizie. Non dimenticare che il motore di ricerca di Google, come Yandex, oggi fa serie richieste per le versioni mobili, quindi c'è una grande possibilità di abbassare le tue posizioni usando questo metodo.

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

versione mobile del sito web di Android

Principi di creazione di versioni mobili

Non importa, una versione mobile del sito è stata creata gratuitamenteo con l'aiuto del personale del webmaster, è fatto sul sistema RESS o usando un modello adattivo. La cosa più importante è che per il suo lavoro efficace è necessario aderire a diversi principi molto importanti. Quindi, quale dovrebbe essere la versione mobile del sito? Come renderlo produttivo, efficiente e produttivo?

versione mobile del sito dal computer

Rimuoviamo tutto inutile

Il minimalismo è qualcosa che dovrebbe sforzarsisviluppatore della versione mobile del sito. Immagina quanto sia difficile percepire le informazioni piene di colori, pulsanti, banner e che devi scorrere all'infinito alla ricerca del materiale giusto. La progettazione mobile dovrebbe essere semplice e pulita. Seleziona 2-3 colori per separare lo spazio (ad esempio, con marchio). È meglio se uno di loro è bianco. Dividere lo spazio di un piccolo schermo in zone chiare e leggibili. Le chiavi virtuali dovrebbero essere visibili in modo che l'utente sappia chiaramente dove fare clic, e ha visto - questa è la merce, ecco il modulo per la compilazione dei dati, ecco le informazioni sulla consegna e il pagamento.

Eventuali opzioni aggiuntive che sarebbero utilinella versione desktop e renderebbero la vita più semplice per l'utente, porteranno solo complicazioni. Lascia solo gli elementi più importanti. Animazione, banner pubblicitari, multimedia, molto probabilmente, rallentano solo il sito o l'applicazione e distraggono dalla cosa principale.

allineamento

La questione della perequazione non è meno acuta,poiché se lo fai in modo errato, l'utente riceverà solo terminazioni di parole importanti. L'allineamento a sinistra e verticalmente è considerato comune. Immagina come sfogliare la notizia nel tuo telefono. Lo fai dall'alto verso il basso, ma non verso sinistra o destra.

unione

Quando non c'è possibilità di una lunga catena di transizioni,Prova a combinare più passaggi in uno. Ad esempio, un sito richiede l'immissione di dati in più fasi: un nome, quindi un indirizzo in cui ogni casa contiene una casa, una strada, un appartamento, ecc. Per non forzare l'utente a cercare di ottenere un sacco di piccole celle, chiedigli di riempire solo 2 - nome e indirizzo

E disimpegno

A volte, al contrario, è necessario disconnettere anchemolte informazioni Ad esempio, nel menu a discesa è presente un elenco di oltre 80 città in cui avviene la consegna. Raggruppali per regione in modo che l'utente non debba scorrere questa lista enorme. Quando punta al centro o all'area regionale, un altro elenco di città abbandonerà.

liste

A proposito, riguardo alle liste. I due sono fissati in ordine alfabetico o altro e con sostituzione. La scelta di loro dipende da cosa verrà elencato.

Risolto è conveniente nel caso in cuil'utente sa esattamente cosa sta cercando. Ad esempio, una città, un numero o una data. La seconda opzione è adatta per nomi complessi lunghi o per i casi in cui esistono molte varianti con lo stesso nome e ciascun elenco a discesa avvicina l'utente all'obiettivo. Una variante con sostituzione automatica è più spesso utilizzata quando un visitatore ha bisogno di aiuto. Ad esempio, un sito per le offerte di maglieria per comprare ferri da maglia. L'utente inserisce la query di ricerca "Ferri da calza metallici" e nella descrizione comandi vede "Raggi 5 mm", "Raggi 4,5 mm", ecc.

Completamento automatico

Questo paragrafo è particolarmente rilevante per i siti in cui qualcosavendere online, e si deve compilare il modulo standard pagamento, consegna e così via. n. Se una persona fa un acquisto dal telefono, quindi molto probabilmente, non ha tempo per arrivare a un computer, il che significa che il processo di acquisto è necessario per rendere più rapido e conveniente.

Per questo, i moduli possono contenere già riempitidati, puoi ricorrere alle risposte più popolari. Ad esempio, inserisci la data di oggi, il metodo di pagamento in contanti, la città, se lavori in una regione. Possono essere modificati, ma se colpisci il bersaglio, il tempo dell'utente verrà salvato.

Tutto è letto, tutto è visibile

Quando crei una versione mobile di un sito web, ricordache tutti i telefoni sono diversi e anche la vista. Forse il tuo sito sarà visibile con un piccolo schermo, in modo che il carattere deve essere semplice e leggibile, un pulsante - abbastanza grande da poter toccare e non arrivare alla pagina successiva, e le immagini devono essere aperti a parte, di grandi dimensioni, soprattutto quando si tratta di internet al negozio.

Alcune statistiche

Parlando dell'adattamento del sito ai dispositivi mobili, non è possibile ricorrere alle statistiche per capire quanto sia importante questo processo per promuovere la rete.

Le figure sono come segue. Oggigiorno i gadget sono usati dall'87% della popolazione, a parte i bambini più piccoli e alcuni anziani. Gli economisti prevedono la crescita del commercio mobile 100 volte per i prossimi 5 anni. Allo stesso tempo, solo il 21% dei siti è adattato per funzionare con i dispositivi mobili. Quindi, il traffico Internet e il mercato dell'e-commerce sono occupati solo da una piccola parte 5-th.

Pensa a queste cifre. Ha senso adattare la tua risorsa? Certo, sì. Inoltre, finché c'è così tanto spazio libero in questo mercato, puoi prendere il tuo segmento su di esso.

versione mobile del sito gratuitamente

Dov'è la versione mobile necessaria?

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

Senza una versione mobile, non può esistere:

  • portali di notizie, dato che è la maggior parte di quelli che guardano al telefono mentre vanno al lavoro o studiano;
  • i social network - per lo stesso motivo, in più c'è un fattore di comunicazione on-line, il che significa che per questo dovrebbe essere creata una chat comoda e comprensibile;
  • siti di riferimento, siti con navigazione, ecc., dove le persone si girano quando sono alla ricerca di qualcosa;
  • negozi online: un'opportunità per attirare gli acquirenti che non trascorrono molto tempo a fare shopping, ma acquistano tutto tramite Internet mobile.

Invece di concludere

Oggi, le tecnologie mobili sono nelcrescita attiva e lo sviluppo, di conseguenza, cercando di essere un leader nel mercato, ogni azienda deve assicurare che la sua risorsa online soddisfa i requisiti. A causa delle crescenti richieste degli utenti, i siti devono essere costantemente aggiornati e adattati a dispositivi diversi. E 'chiaro che se una persona è a disagio di essere su una particolare risorsa, non può essere lì per ottenere informazioni su un prodotto o di prezzo, effettuare un ordine, informarsi circa la consegna, troverà il luogo, dove tutto questo sarà possibile. Pertanto, per vincere la competizione, è importante disporre di una risorsa flessibile, comoda, funzionale e interessante.

Crea questa versione mobile del sitoAndroid o Ios. Per fare ciò, devi selezionare uno dei metodi di riprogettazione sopra elencati - un modello adattivo, creare un nuovo sito su un sottodominio e andare a esso tramite reindirizzamento, utilizzare modelli gratuiti o creare un'applicazione mobile, attraverso il quale l'utente può andare più comodamente sulla pagina.

Un simile approccio aiuterà non solo a mantenere la fedeltà dei clienti esistenti, ma offrirà anche l'opportunità di attirare nuovi visitatori.

</ p>