Condividere utenti mobili sta crescendo a un ritmo costante: alla fine del 2014, il loro numero sul Web ha superato per la prima volta il numero di utenti desktop. Più di 10 milioni di persone vanno online SOLO con dispositivi mobili. E tutto questo sta accadendo in Russia proprio ora.

Hai ancora dubbi sulla necessità di un sito mobile? Allora mettiamoci al lavoro.

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 pubblico mobile.

Design adattivo (reattivo) (Ing. Adattivo / Reattivo)

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 l'abilità del sito adattarsi agli schermi di vari dispositivi e visualizzare ugualmente bene su monitor ampi così come su tablet o telefoni cellulari. Tuttavia il concetto di "design reattivo" è in qualche modo più ampio e include "design reattivo". Pertanto, in quanto segue faremo riferimento a tali 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 prima si restringe, adattandosi alle dimensioni della finestra, e poi si nasconde completamente nella cosiddetta icona dell'hamburger. Vedrai un display simile se accedi al nostro sito Web da un dispositivo mobile.

Quindi, utilizzando il design adattivo, otteniamo un sito Web ugualmente comodo da utilizzare da qualsiasi dispositivo. Ovviamente questo è l'ideale, perché se il sito ha funzionalità complesse, è difficile inserirlo nella struttura di un piccolo schermo mobile.

Nonostante all'utente di un dispositivo mobile possa essere visualizzata una versione troncata del sito principale, il browser caricherà completamente la pagina: tutti i testi, le immagini e gli script, quindi il tempo di caricamento può essere piuttosto lungo, il che è uno svantaggio di siti adattivi.

Sito mobile separato

Invece di rendere il tuo sito responsive, puoi creare una versione separata progettata per i dispositivi mobili. Hai visto esempi di questo metodo dozzine di volte. Sembra così: sul sito principale c'è un link "Vai a versione mobile luogo".

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 è 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. Ora ci sono molti servizi che ti permettono di creare una versione mobile del sito in mezz'ora. Se, ad esempio, desideri rendere il sito Web del tuo biglietto da visita ottimizzato per i dispositivi mobili, molto probabilmente un tale costruttore di siti Web per dispositivi mobili è tutto ciò di cui hai bisogno. Inoltre, il servizio del progettista della versione mobile del sito è fornito da molti hoster, per informazioni dettagliate puoi contattare il tuo supporto di hosting.

Lo svantaggio di un sito mobile può essere che devi effettivamente 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.

Applicazione mobile

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 del tuo 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 lungo e finanziariamente costoso. I siti Web sono multipiattaforma e le applicazioni mobili dovranno essere create separatamente per ciascuna piattaforma (iOS, Android, Windows Phone).

Naturalmente, ci sono strumenti speciali che semplificano la creazione di applicazioni e ti consentono di portarlo 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 "Your Pocket Psychologist" 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, sarà piuttosto un aumento della fidelizzazione dei clienti e un più facile trasferimento di potenziali acquirenti in quelli reali; se a loro piace l'app, è probabile che abbiano più fiducia nello psicologo e vengano da 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 questo 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 sul fatto che il tuo sito necessiti 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 l'adattabilità è sufficiente o versione mobile luogo. Quando si crea un nuovo sito, vale la pena scegliere l'adattabilità; quando si mobilita uno esistente, spesso è più veloce e più facile 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 "mobilizzato", scrivi al nostro Servizio di Assistenza e ti diremo qual è l'opzione migliore per te e quanto ti costerà.

P.S. Coloro che sono interessati al tema del lavoro con gli utenti mobili, il 16 luglio, ti invitiamo a una master class "

L'era della mobilitazione globale. Gli smartphone hanno reso possibile l'accesso a Internet sempre e ovunque. A volte è ancora più conveniente navigare su siti web, social network, cercare informazioni o un luogo su una mappa da un telefono piuttosto che da un computer. Computer Sistemi operativi cercando di avvicinarsi all'interfaccia mobile. Il confine tra computer e piattaforme mobili si assottiglia: i dispositivi mobili vengono resi potenti e praticamente funzionali computer a tutti gli effetti, e le interfacce dei computer vengono avvicinate a quelle mobili utilizzando, ad esempio, icone comuni, disposizione simile degli elementi, gesti simili.

Questa tendenza non può che influenzare la creazione di siti. I gestori raccomandano siti "mobili", i clienti vogliono, i designer disegnano, i progettisti di layout, stranamente, impaginano e i programmatori escogitano soluzioni.

È più facile, ovviamente, subito durante la creazione di un sito, determinare come si comporterà su un dispositivo mobile, ma ci sono vecchi client e i loro vecchi e non molto siti per i quali tale soluzione non è stata fornita. Anche se qualcuno pensa che i siti "mobili" non debbano essere fatti.

Capire che la quantità traffico mobile sta crescendo a passi da gigante, porta alla necessità di trovare soluzioni per la corretta visualizzazione e facilità di fruizione del sito su smartphone e tablet. ne vedo due soluzioni reali, indicato, appunto, nel titolo dell'articolo. Esiste una terza opzione: un'applicazione mobile, ma rifiutiamo questa opzione. Come mai? Ebbene, ad esempio, se devo effettuare un acquisto una tantum o poco frequente, non installerò un'applicazione sul mio smartphone, è più facile trovare un altro sito. La creazione di un'applicazione ha senso per un progetto di grandi dimensioni o per un progetto utilizzato frequentemente dai clienti, che sarà più conveniente da aprire tramite applicazione separata che attraverso navigatore mobile. Ora, chiunque tu prenda, ognuno ha la propria applicazione, ma, in realtà, la maggior parte di loro semplicemente non ne ha bisogno.

Sono rimaste due opzioni: layout adattivo o versione mobile. Innanzitutto, definiamo la differenza tra questi due metodi.

Layout adattivo.

Il sito non cambia contenuto. Si adatta alla larghezza e all'altezza dello schermo. Parti separate del contenuto possono essere allungate o ridotte, allineate in modo diverso (c'erano 3 colonne - sono diventate una), ridimensionate, nascoste (ma non scomparse) sotto il pulsante (la cosa più comune nascosta sotto il pulsante è il menu ).

Versione mobile.

Fatto su un sottodominio. Le opzioni più comuni sono m..website, pda..ru/mobile/.

Viene determinato che l'utente proviene da un dispositivo mobile e viene reindirizzato alla versione mobile con la possibilità di passare a versione completa. Tuttavia, il contenuto del sito aspetto esteriore e la funzionalità può essere drasticamente diversa. Di norma, questa differenza consiste nel semplificare, abbattere il sito, prima di tutto per il caricamento veloce sui dispositivi mobili.

Qual è la versione mobile migliore o il layout adattivo?

Per comprendere questo problema, considera i pro e i contro di ciascuna opzione.

Ci sono vantaggi generali:

corretta visualizzazione sui dispositivi mobili;

su misura per i dispositivi mobili.

Versione mobile:

la capacità di "eliminare" le funzionalità non necessarie

Ridisegna il sito in modo che la madre nativa del designer non riconosca. Questo è essenziale se gli elementi si trovano in posizioni completamente diverse nella versione mobile rispetto alla versione completa.

Lato server, utilizzare una logica diversa o leggermente modificata, che consente di gestire in modo flessibile le funzionalità della versione mobile e aumentarne la velocità di download

Un dominio separato, a causa del quale i SEO piangeranno, perché per i motori di ricerca saranno due siti diversi.

La necessità in tal caso di passare alla versione completa. Ad esempio, per ottenere la piena funzionalità. Inoltre, se, ad esempio, è presente un collegamento alla versione mobile su un altro sito, coloro che hanno effettuato l'accesso da un computer dovranno eseguire un'azione aggiuntiva (fare clic su "versione completa") o utilizzare una versione scomoda per un computer.

Layout adattivo:

Il sito si adegua sempre alla risoluzione corrente. Quando la finestra del browser viene ridotta su un computer o quando l'orientamento viene modificato su un dispositivo mobile.

Di norma, con questo metodo, tutti gli elementi si trovano negli stessi posti della versione completa e per un utente che conosce la versione completa non sarà difficile gestire quella mobile.

Stesso dominio, stessi indirizzi. Nessun reindirizzamento, nessun problema con sitemap e robot. I SEO sorridono.

Un progetto complesso e ad alto carico richiederà molto tempo per essere aperto su un dispositivo mobile. Almeno 4G, almeno 24G, Internet mobileè l'internet mobile.

Mancanza di flessibilità nella scelta della funzionalità. Tutto ciò che era sul computer sarà sul cellulare. Tutti gli elementi si trovano negli stessi (o quasi negli stessi) posti, il che non è sempre positivo. Per rimuovere qualcosa, devi nasconderlo in css, che rimuove le funzionalità non necessarie, ma non aumenta la velocità di caricamento. E se, al contrario, qualcosa dovrebbe essere solo su un telefono cellulare, sarà anche sempre caricato e nascosto solo ad alte risoluzioni.

La piccola risoluzione non è sempre dispositivi mobili. Forse è solo una finestra del browser che non è a schermo intero. A prima vista, "e allora?". Ma ci sono cose che devono essere visualizzate solo sui dispositivi mobili, nel qual caso appariranno sul computer.

Cosa scegliere layout adattivo o versione mobile?

Come possiamo vedere, nonostante si tratti di concetti piuttosto vicini, ci sono delle differenze.

A favore di cosa fare una scelta.

Se si tratta di un negozio online molto carico o di una sorta di progetto di grandi dimensioni, ovviamente, per prestazioni elevate, è necessario creare una versione mobile.

Se il sito non è molto "pesante" o addirittura semplice, allora il layout adattivo sarà la soluzione migliore, elegante e bella.

Io voto per la terza opzione. Questo è ancora un layout adattivo, ma inizialmente ottimizzato, ovvero caricamento inizialmente veloce. Questo è utile non solo per gli utenti che hanno effettuato l'accesso da dispositivi mobili, ma anche per gli utenti da un computer.

Un sito veloce è un buon sito.

È necessario determinare come apparirà il sito su piccoli schermi anche nella fase di sviluppo dei termini di riferimento e del design. Ed essere anche pronti a rinunciare ad alcune delle funzionalità non necessarie per motivi di velocità e versatilità. E gli sviluppatori che creano il sito dovrebbero porsi la questione dell'ottimizzazione delle query sul database e, di conseguenza, ridurne il numero, ottimizzando il codice sulle parti server e client.

Il layout reattivo è l'opzione migliore. Ed è meglio pensarci nella fase di formazione dei termini di riferimento. Rimandato per dopo questo tipo di problema può tornare a perseguitare:

• Ottimizzatori SEO con una diminuzione dei risultati di ricerca mobile e, di conseguenza, una diminuzione del numero di visite da dispositivi mobili (e questo è un enorme numero di persone in costante aumento);
• i programmatori hanno dedicato del tempo a far apparire il sito "almeno in qualche modo" sugli smartphone e successivamente al re-layout adattivo o alla creazione di una versione mobile
• proprietari del sito clienti persi, chi andrà dai concorrenti il ​​​​cui sito Web sul telefono svolge le sue funzioni e sembra corretto.

Con 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" oppure i siti dovrebbero diventare responsive e adattarsi alle diverse dimensioni dello schermo?

Al momento, quando si creano versioni mobili dei siti, ci sono 3 modi principali per crearli:

• Design adattivo;
• Versione mobile separata del sito;
• RESS (design reattivo + lato server).

Ciascuno dei metodi ha i suoi pro e contro, che cercherò di descrivere in dettaglio.

Design adattivo

Le media query CSS3 sono comunemente utilizzate per implementare il responsive design. A seconda delle dimensioni dello schermo, l'utente vedrà un'immagine diversa:

@media screen e (max-width: 1600px) ( div.for-example (width: 1500px;) ) @media screen and (max-width: 1280px) ( div.for-example (width: 1100px;) ) @media schermo e (larghezza massima: 1024px) ( div.for-example (larghezza: 980px;) )

Vantaggi del design reattivo

• Facilità di sviluppo - con il layout adattivo, l'intera struttura del sito si adatta automaticamente alle diverse larghezze dello schermo. Per ottenere un prodotto funzionante, non è necessario scrivere tutto da zero: basta modificare CSS e HTML ... Data la disponibilità di framework come Bootstrap, tale sviluppo non è molto difficile con un'implementazione standard. Inoltre, supportare un prodotto del genere sarebbe un compito relativamente semplice.
• Un URL - ci salva da reindirizzamenti non necessari e dalla necessità per l'utente di ricordare l'indirizzo della versione mobile (anche se è solo il prefisso m.). Inoltre, la presenza di un unico indirizzo influirà positivamente sulla promozione del sito, poiché sarà "più conveniente" per il funzionamento dei motori di ricerca.

Svantaggi del design reattivo

• Compiti vari - i compiti tipici degli utenti "mobili" di siti di grandi dimensioni differiscono solitamente da quelli degli utenti di PC. Se sei un cliente di una banca, molto probabilmente nella versione mobile del sito sarai interessato a una gamma molto limitata di informazioni: indirizzi delle filiali più vicine, bancomat, ecc.
  In generale, con il layout adattivo, l'approccio più comune è creare una copia di un sito normale, implementare le esigenze di tutti i gruppi nel layout per i telefoni pubblico di destinazione. Ma poi puoi dimenticare l'usabilità. Le sezioni secondarie necessarie per il cinque per cento dei visitatori creeranno disagi per la maggior parte dei clienti.
Il "peso" dei siti rimane un serio ostacolo per gli utenti cellulari. Ciò significa che alcuni degli elementi attivi tipici dei siti desktop, tra cui mappe incorporate, video, calcolatori di prestito e menu animati sui siti mobili, dovrebbero essere sostituiti con alternative più leggere. Il responsive design può darci questa capacità? In un'implementazione popolare, un utente con uno schermo piccolo deve caricare l'intera pagina per vederne solo una parte. Ad esempio, se la versione desktop del layout principale pesa 200 Kb e la versione mobile pesa altri 50 Kb, dovrai scaricare 250 Kb per visualizzarla. Naturalmente, puoi utilizzare la compressione del codice della pagina, ma le richieste extra al server andranno comunque.
• Senza speranza - Uno dei vantaggi indiscutibili della versione mobile: se non ti piace, puoi disattivarla e passare a un dominio normale. I siti Web di design reattivo non forniscono questa scelta semplice ma importante. Se il layout personalizzato è scomodo, difettoso o se nasconde un importante elemento di navigazione, lascialo stare: non puoi fare nulla per rivederlo. Dovrai correre a cercare un desktop o il sito web di un concorrente. Puoi inventare "stampelle" per aggirare questa limitazione (usa i cookie e includi diversi fogli di stile). Ma questo approccio complica lo sviluppo.

In generale, l'idea di sviluppare una versione mobile in design adattivo è piuttosto popolare, nonostante gli svantaggi di cui sopra. In particolare, questo concetto è pienamente supportato da giganti come, ad esempio, Google.

Versione mobile separata del sito

Per rendere il sito conveniente per gli utenti mobili, spesso creano anche versioni separate dei siti, appositamente orientate all'utente con uno smartphone / tablet. La pratica più comune è reindirizzare gli utenti mobili a un sottodominio speciale (m.example.com, mobile.example.com, ecc.). Probabilmente, nel 99% dei casi, la versione mobile è una versione principale ridotta, solo con le funzionalità che, secondo gli sviluppatori, saranno necessarie e utili per gli utenti di dispositivi mobili e tablet.

Vantaggi della versione mobile

• Facilità di cambiamento poiché il sito esiste, di fatto, separatamente dalla versione principale, è molto più semplice apportarvi modifiche relative solo alla versione mobile, poiché la versione mobile il più delle volte non fornisce funzionalità ridondanti e non necessarie.
• Facilità d 'uso - la versione mobile è solitamente notevolmente semplificata rispetto alla versione desktop, quindi l'utente non dovrà andare lontano per le informazioni di cui ha bisogno.
• Velocità - grazie alla stessa semplificazione del sito, la versione mobile si carica più velocemente. Questo è essenziale per gli utenti che utilizzano ancora GPRS o 3G debole.
• Scelta- molto spesso, nella versione mobile è possibile passare alla versione principale del sito.

Svantaggi della versione mobile

• Indirizzi multipli -
• Disagio per l'utente - indirizzi diversi per le versioni desktop e mobile. Per alcuni questo può rivelarsi un vantaggio, per altri può essere un fattore estremamente fastidioso quando, per visualizzare comodamente il sito, è necessario ricordare un indirizzo in più. Ci sono anche problemi con i motori di ricerca: per evitare contenuti duplicati, i SEO devono utilizzare i meta tag rel="alternative" e rel="canonical". Inoltre, quando un utente mobile ricerca Google fa clic sul collegamento nei risultati, verrà indirizzato alla versione desktop o reindirizzato alla versione mobile. Ma se la versione mobile di questa pagina non esiste, verrà visualizzato un errore.
• Limitazione - creare un sito mobile separato significa eliminare parte del contenuto e delle funzionalità. Inoltre, potresti avere due diversi set di contenuti che possono influire negativamente sul quadro informativo complessivo.

In generale, la creazione di versioni mobili dei siti si giustifica abbastanza bene, in particolare per i grandi progetti. Ad esempio, Amazon utilizza una versione mobile speciale del sito.

RES

La stessa Google, sebbene supporti l'utilizzo del responsive design da parte dei webmaster, utilizza un sistema diverso nei suoi prodotti. Se visiti, ad esempio, pagina iniziale sotto diversi User-Agent, puoi vedere codice HTML diverso per dispositivi diversi. RESS - Design reattivo + lato server. Esempio di implementazione, abbozzato "sul ginocchio":

$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "librerie" . $DS . "browser.php"); $dispositivo = BBrowser::detectDevice(); if($device == 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 . "modelli" . $DS . $tmpl);

Vantaggi di RES

In effetti, il metodo può includere i vantaggi di una versione mobile e reattiva separata dei siti, a seconda dell'implementazione. Da ciò che sarà nuovo:

• Minimizzazione del traffico - Il codice JavaScript non necessario può essere rimosso dall'HTML, liberando CPU, memoria e cache sul dispositivo mobile. Può anche essere ottimizzato in modo speciale html e css.
• È possibile utilizzare il targeting - ad esempio, per i dispositivi Android, offri di scaricare l'applicazione da GooglePlay e per Apple da iTunes. Per ogni dispositivo, puoi creare il tuo layout.

Contro

• Difficoltà di sviluppo tale metodo richiederà un'appropriata configurazione del server e il lavoro di più programmatori. Sarà anche necessario farne diversi varie opzioni disposizione.
• Meccanismo di rilevamento del dispositivo - Sfortunatamente, anche ai nostri tempi non è stato ancora portato alla perfezione. Storie su come il raro telefono di qualcuno non sia definito come un dispositivo mobile compaiono abbastanza spesso.

In generale, RESS è la migliore delle tre opzioni proposte, tuttavia richiede molto più impegno durante lo sviluppo.

Riepilogo

A mio parere personale, non esiste un'opzione ideale che tutti dovrebbero usare. L'opzione migliore per me è RESS. Tuttavia, questa è una delle rare opzioni perché richiede molto impegno per l'implementazione. In generale, tutte e 3 le opzioni hanno i loro pro e contro, a seconda dell'essenza e della direzione del sito.

Per determinare quale sia il migliore: design adattivo o versione mobile del sito, devi prima capire a cosa serve tutto questo.

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

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

Di conseguenza, sono stati sviluppati nuovi algoritmi per motori di ricerca, e ha anche introdotto ulteriori fattori di ranking: now in risultati di ricerca viene presa in considerazione la misura in cui il sito è ottimizzato per i dispositivi mobili (facile da visualizzare sui dispositivi mobili). In Google, l'algoritmo Mobile friendly è stato lanciato il 21 aprile 2015, in Yandex - Vladivostok il 2 febbraio 2016.

Versione desktop del sito e versione adattata per dispositivi mobili

In che modo i motori di ricerca determinano se una pagina web è ottimizzata per i dispositivi mobili:

• le pagine devono contenere contenuti che non richiedono lo scorrimento orizzontale o lo zoom per essere visualizzati;
• il sito non deve contenere 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 dovrebbero essere abbastanza distanti da essere facilmente cliccabili.

Ancora più importante, i motori di ricerca valutano i siti Web in modo inequivocabile, ottimizzati per i dispositivi mobili o meno.

Utilizzando lo strumento Google PageSpeed ​​​​Insights (https://developers.google.com/speed/pagespeed/), puoi determinare la velocità di caricamento delle pagine del tuo sito, nonché la loro usabilità. Il punteggio PageSpeed ​​​​può variare da 0 a 100 per la velocità di caricamento della pagina e l'esperienza utente, ad esempio:

I punteggi di 85 e superiori sono considerati buoni.

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

Questo servizio può essere utilizzato per la diagnosi iniziale e la risoluzione dei problemi del sito web.

In quali casi è 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 statistiche di Google) dal traffico nell'ambito dei dispositivi dai quali gli utenti accedono al sito. Se più del 15% del pubblico utilizza smartphone o tablet, si consiglia di sviluppare un layout adattivo o una versione mobile. È importante tenere conto del traffico del sito. Ad esempio, per i siti con un numero elevato di visitatori (da 1.000.000 e oltre), questa barra viene abbassata, poiché un segmento così ampio di traffico del sito non può essere trascurato.

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.

"Segno speciale" della versione mobile: quando si passa ad esso in barra degli indirizzi browser, l'URL cambia: viene aggiunto il prefisso "m.", ad esempio: m.example.ru.

Visualizza sul monitor di un computer e su un dispositivo mobile: la versione mobile è diversa 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, elevata velocità di caricamento. Questo è essenziale per gli utenti che hanno una bassa velocità di accesso a Internet (GPRS o 3G debole).
• Consentire all'utente di scegliere quale versione visualizzare (mobile o base).
• Conformità ai requisiti dei motori di ricerca per la comodità di visualizzazione del sito su dispositivi mobili.

Svantaggi della versione mobile

• Se è necessario apportare modifiche al sito, dovranno essere apportate sia sulla versione normale del sito che su quella mobile, ovvero la quantità di lavoro aumenta di 2 volte.
• Quando lo si sviluppa, è spesso necessario abbandonare parte del contenuto.
• Poiché le versioni mobile e desktop del sito si trovano su domini diversi, non migliora fattori comportamentali il dominio principale, ad es. sarà un aspetto negativo per l'ottimizzazione SEO.

Si tratta di un design speciale delle pagine Web, in cui gli elementi del sito cambiano dimensione e posizione a diverse risoluzioni di visualizzazione. Il sito si adatta automaticamente alle dimensioni del dispositivo su cui viene aperto, sia esso un monitor di PC, smartphone o tablet. Grazie a questo tipo di layout, il sito verrà visualizzato in modo comodo e chiaro vari dispositivi. Con l'uso di 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 è diversa da quella principale

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

Vantaggi del design reattivo per dispositivi mobili

• Un URL per tutti i contenuti.
• Interfaccia flessibile: puoi impostare una comoda visualizzazione del sito per qualsiasi larghezza dello schermo.
• Il responsive design 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 responsive design per dispositivi mobili

• La necessità di creare layout di pagina del sito separati per ogni risoluzione dello schermo.
• La versione adattiva, a differenza della versione mobile, non può essere convertita modalità normale. Cioè, l'utente non ha la possibilità di visualizzare il sito. Lo svantaggio è rilevante se ci sono errori nella versione adattiva, ad esempio gli elementi vengono visualizzati in modo errato.
• La complessità dell'aggiunta di un nuovo modello di pagina, perché dovranno essere configurati per essere visualizzati correttamente nella versione adattiva. Se aggiungi informazioni ai modelli di pagina esistenti, non ci saranno problemi di visualizzazione.

Cos'è meglio: layout adattivo per dispositivi mobili o una versione mobile del sito?

La soluzione migliore per il sito è utilizzare il layout adattivo per i dispositivi mobili. Nonostante una serie di carenze, un sito con un layout adattivo è più funzionale. Inoltre, la presenza di modelli di pagina implica la facilità 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.

Lì abbiamo analizzato perché è necessario un design adattivo, quali sono i vantaggi di esso. Come risulta dall'articolo, è necessario un design adattivo e tutti ne hanno bisogno. Oggi considereremo cosa è meglio per il sito: design adattivo o una versione mobile separata.

versione mobile

La versione mobile del sito è una versione separata del sito progettata per smartphone e tablet. Di solito ha un design ottimizzato per dispositivi mobili in modo che il contenuto sia presentato in una forma leggibile dall'uomo e il caricamento avvenga quasi istantaneamente. Solitamente inserito in un sottodominio sotto forma di m.site.ru o mobile.site.ru.

Vantaggi

Convenienza

Gli utenti non devono scorrere avanti e indietro e in diagonale alla ricerca del contenuto giusto, aumenta-diminuisci per leggere il testo desiderato. L'intero sito è servito in una colonna, che devi scorrere dall'alto verso il basso. Tutti i contenuti sono generalmente strutturati e suddivisi in blocchi logici.

Velocità di download

Di norma, il design della versione mobile è molto semplificato e il codice e gli script sono ridotti al minimo, il che si traduce in un caricamento molto rapido del sito sui dispositivi mobili.

Modifiche al sito

La versione mobile è infatti un sito separato, il che significa che non è difficile apportare modifiche. Non c'è bisogno di preoccuparsi e preoccuparsi di come assicurarsi che le modifiche riguardino solo la versione mobile e non influenzino la versione desktop.

Passaggio alla versione principale

Nella maggior parte dei casi, l'utente potrà passare alla versione principale del sito senza problemi se ha bisogno di utilizzare la funzionalità che non è disponibile nella versione mobile.

Screpolatura

duplicazione

Il contenuto duplicato su diversi sottodomini ha un impatto negativo sulla promozione nei motori di ricerca. Di norma, i programmatori sono impegnati nella creazione di una versione mobile e gli specialisti SEO sono impegnati nella promozione. E anche se tutti i desideri degli specialisti SEO vengono presi in considerazione nella versione di prova, non è un dato di fatto che migreranno alla versione da combattimento nella loro forma originale. Spesso, durante il trasferimento, qualcosa cambia, qualcosa si aggiunge. Di conseguenza, possiamo avere problemi di posizionamento a causa di duplicati nella versione mobile.

Aggiornare

Tutti i contenuti aggiunti al sito principale dovranno essere duplicati nella versione mobile. E se il sito, ad esempio, lo è portale di notizie e aggiornato quotidianamente, questo può essere un processo piuttosto costoso.

Limitazione funzionale

Nella versione mobile, le decisioni sulle funzionalità pesanti spesso non vengono trasferite. Solitamente, prima di creare un sito mobile, vengono analizzate le richieste e il comportamento degli utenti da dispositivi mobili e, sulla base di questi dati, viene fornito solo ciò che è veramente importante per i visitatori mobili.

La versione mobile si è dimostrata valida ed è ancora spesso utilizzata dai webmaster. Lo stesso può essere attribuito alle applicazioni mobili. Ma questo è già molto costoso e il sito medio non può permettersi lo sviluppo di applicazioni mobili.

Layout adattivo

Un sito Web progettato in modo adattivo viene visualizzato in modo altrettanto conveniente sia su desktop che su dispositivi mobili.

Vantaggi

Facilità di implementazione

Di norma, con il layout adattivo, la larghezza dello schermo viene adattata alla dimensione del display desiderata. Tutto questo può essere fatto con HTML e CSS. E i moderni CMS e framework ti consentono di farlo in un paio di clic. Sì, e i modelli moderni forniscono immediatamente un design adattivo. Resta solo da installarlo? e in un paio di minuti hai un design adattivo conveniente per qualsiasi pubblico.

SEO

Se nella versione mobile ci troviamo di fronte alla duplicazione di contenuti su diversi sottodomini, qui non c'è questo problema. La pagina avrà un indirizzo (URL)? e quando si cambia la risoluzione dello schermo o il dispositivo, non romperemo il design o non verremo reindirizzati alla versione mobile. Questa opzione risolve il problema dei contenuti duplicati meglio degli attributi rel="canonical" o dei divieti in robots.txt nella versione mobile.

Screpolatura

pesantezza

Di solito, con l'adattabilità, viene lasciata tutta la funzionalità, a disposizione degli utenti. Ciò significa che i visitatori mobili potrebbero trovarsi di fronte a una pila di script e molte informazioni che sarà difficile coprire immediatamente su un piccolo display di smartphone. Mentre è normale che il desktop abbia una dimensione di 200-250 KB, il mobile di solito richiede meno di 50 KB.

Scopo della visita

Spesso gli utenti si recano sul sito per conoscere recapiti, indicazioni stradali, disponibilità delle filiali, ecc. E su alcuni siti dovranno passare attraverso diverse pagine pesanti per raggiungere il loro obiettivo.

Nessuna scelta

Sulla versione mobile, se il programmatore ha storto composto il blocco e nascosto i telefoni dietro il logo, puoi sempre passare alla versione desktop e almeno con ridimensionamento, ma vedi i dettagli di contatto. Se il programmatore fa un pasticcio con il layout adattivo, dovrai provare a scoprire cosa vuoi e non tutti possono farlo. Pertanto, il design adattivo deve essere inizialmente composto molto bene e con competenza, e quindi testato con altrettanta competenza.

In conclusione: layout adattivo o versione mobile?

Non esiste un'unica risposta corretta qui. Per ogni compito è selezionato migliore opzione. E il responsive design, che è l'ideale per un sito, causerà solo problemi di usabilità in un altro caso. Potrebbe essere più facile per i giocatori di grandi dimensioni e per i siti ingombranti creare un'applicazione mobile che abbia solo le funzionalità di cui gli utenti hanno bisogno.

La nostra opinione è che se hai solo un sito di informazioni, il design adattivo è perfetto. Poiché comprimere testo e immagini è molto più semplice che decidere come invertire un'enorme calcolatrice su un sito senza perdere l'usabilità.

Ma se hai sul sito Area personale con enormi funzionalità o il suo sito sarà difficile da trasferire al design adattivo, è più facile realizzare una versione mobile, dove è conveniente posizionare tutti gli strumenti per gli utenti.

Bene, se non hai ancora un sito web e stai solo pensando di crearlo, allora è meglio mettere subito in fase di sviluppo il responsive design.