Il tema di questo mese è la reattività del sito web, quindi abbiamo deciso di parlare più in dettaglio di cos'è il responsive web design, perché è necessario e quali sono i principi di base del responsive web design.
Il web design adattivo è una direzione abbastanza nuova nella progettazione delle risorse web, ma ora è uno dei principali indicatori della qualità di un sito web. In questo articolo parleremo di cos'è il responsive web design e cosa può essere.
Cos'è il web design reattivo
Il web design adattivo (in inglese “responsive web design”) è la progettazione di pagine web che forniscono un'eccellente esperienza di visualizzazione su vari dispositivi connessi a Internet.
Ciò significa che lo stesso sito può essere visualizzato su una varietà di dispositivi, indipendentemente dalla risoluzione e dal formato dello schermo: smartphone, tablet, laptop, ecc. Allo stesso tempo, la visualizzazione sarà ugualmente conveniente per tutti i formati: gli utenti di dispositivi mobili, ad esempio, non avranno bisogno di espandere le singole aree del sito per non perdere il collegamento desiderato.
Il responsive design mira a rendere le pagine web e la visualizzazione dei loro contenuti adeguati al dispositivo su cui vengono visualizzati.
Perché hai bisogno di un web design reattivo?
1) Un'ampia varietà di dispositivi da cui è possibile accedere a Internet. Attualmente, ci sono molti dispositivi che le persone utilizzano, anche per accedere a Internet. Tutti questi dispositivi variano in termini di dimensioni dello schermo, risoluzione e quindi di come un sito Web può essere visualizzato su di essi. Pertanto, è importante che il tuo sito abbia un bell'aspetto e venga visualizzato correttamente per qualsiasi utente, indipendentemente dal dispositivo che sta utilizzando.
2) La popolarità dei dispositivi mobili con accesso a Internet e l'aumento del traffico Internet mobile. Con la crescente popolarità dei dispositivi mobili, il numero di utenti che accedono ai siti Web da essi è aumentato notevolmente, quindi non puoi più semplicemente ignorarli: non si tratta di una o due persone ogni sei mesi, questa è una parte significativa del tuo pubblico, e dovrebbero sentirsi a proprio agio nell'usare il tuo sito web (altrimenti non lo faranno).
3) Informazioni urgenti. Se la tua risorsa contiene notizie/informazioni urgenti e c'è un'alta probabilità che l'utente abbia bisogno di leggere queste informazioni dal telefono (perché non ha altri dispositivi a portata di mano) in un dato momento, devi assicurarti che abbia l'opportunità di farlo.
La differenza tra un sito web responsivo e una versione mobile (applicazione) di un sito web
Anche le versioni mobili di siti Web e applicazioni mobili, progettate appositamente per vari dispositivi mobili, risolvono il problema della facilità di visualizzazione del sito Web, ma presentano alcuni svantaggi.
1) Ogni tipo di sistema operativo richiede la propria versione dell'applicazione/sito web. Ciò richiede risorse aggiuntive, sia in termini di tempo che di denaro.
2) La necessità di scaricare l'applicazione. Per utilizzare la tua app, gli utenti devono scaricarla. Ciò richiede uno sforzo aggiuntivo da parte degli utenti e molti non lo faranno a meno che non siano assolutamente sicuri di aver davvero bisogno dell'applicazione e non intendano utilizzarla regolarmente.
3) Separazione del traffico. Dal punto di vista della promozione del sito web, un'applicazione mobile non è conveniente perché divide tutto il traffico delle risorse in traffico del sito web e traffico dell'applicazione, che sembrerà meno traffico del sito web.
4) La necessità di integrare i materiali del sito. Nel caso di un'applicazione mobile, è necessario sincronizzare il sito con l'applicazione (risorse aggiuntive) oppure fare un doppio lavoro per riempire il sito e l'applicazione con i materiali.
A differenza delle applicazioni mobili, il responsive design è costituito da un indirizzo del sito, un design, un sistema di gestione e un contenuto del sito.
Naturalmente, la progettazione adattiva ha anche i suoi svantaggi, il principale dei quali è la relativa novità della tecnologia e, di conseguenza, la mancanza di buoni specialisti e conoscenze sulla progettazione di siti web adattivi.
Principi del responsive design
La progettazione inizia con una versione reattiva del sito Web per dispositivi mobili. In questa fase, i progettisti si sforzano di trasmettere correttamente il significato e le idee principali utilizzando un piccolo schermo e una sola colonna. Se necessario, il contenuto viene ridotto, rimuovendo i blocchi di informazioni non importanti e lasciando quelli più importanti.
- Progettare per dispositivi mobili fin dalle prime fasi (“mobile first”);
- Utilizzando un layout flessibile e basato su griglia;
- Utilizzo di immagini flessibili;
- Lavorare con le media query;
- Applicazione del miglioramento incrementale.
Tipi di layout reattivi
Questo articolo su Habrahabr presenta i principali tipi di layout adattivi attualmente esistenti.
1) Gomma
Facile da implementare e ovvio per l'utente tipo di presentazione del sito. I blocchi principali sono compressi alla larghezza dello schermo del dispositivo mobile, dove ciò è impossibile: vengono riorganizzati in un lungo nastro.
2) Trasferimento di blocchi
Un modo ovvio per un sito a più colonne: quando la larghezza dello schermo viene ridotta, i blocchi aggiuntivi (barre laterali) vengono spostati nella parte inferiore del layout.
3) Cambia layout
Questo metodo è più conveniente quando si legge un sito da dispositivi diversi: viene sviluppato un layout separato per ciascuna risoluzione dello schermo. Il metodo è ad alta intensità di manodopera, quindi meno popolare dei due precedenti.
Cambiare layout. Frammento del sito web LukeW Ideation + Design
4) Adattabilità “con poco sangue”
Un metodo molto semplice adatto a siti semplici. Ottenuto semplicemente ridimensionando le immagini e la tipografia. Non molto popolare, perché... manca di flessibilità.
Adattabilità con poco sangue. Frammento del sito web LukeW Ideation + Design
5) Pannelli
Un metodo che deriva dalle applicazioni mobili, in cui è possibile visualizzare un menu aggiuntivo con un tocco orizzontale o verticale. Lo svantaggio principale è che le azioni non sono ovvie per l'utente: è molto raro vedere la navigazione mobile su un sito web. Ma col tempo, il metodo potrebbe diventare piuttosto popolare.
Va ricordato che i layout sopra presentati non sono soluzioni universali: per ogni progetto è necessario scegliere il metodo più adatto alle esigenze e alle capacità.
La presenza del design adattivo è una necessità: la vita lo ha dimostrato con il suo rake, nessun Joomla mobile dà un effetto simile all'adattamento diretto del sito web. Oggi ti dirò come realizzare un design responsivo modificando gli stili CSS usando la testa e le dita. Non sarà possibile spiegare tutto nei dettagli, poiché ogni modello ha le sue sfumature, ma darò uno slancio per iniziare ad adattarmi.
Adattamento per desktop
Per prima cosa lo adattiamo al desktop. Questa è la fase fondamentale da cui inizia la danza con il tamburello. Molte persone percepiscono erroneamente il mondo, pensando di non avere problemi con la visualizzazione del sito su computer normali, dal momento che qualcuno ha creato il modello e sembra fluido con una risoluzione normale. Con la risoluzione del tuo monitor, sì, ma su uno schermo più grande, come ti comporti in termini assoluti e pixel su uno schermo con una risoluzione di 1920x1080? Lo scopo dell'adattamento del design è visualizzare normalmente il sito sui dispositivi mobili ed evitare eventuali problemi su schermi di grandi dimensioni.
Che cosa stiamo facendo? La cosa principale è convertire tutti i valori di grandi dimensioni nel modello CSS da pixel (px) a percentuali (%). Ci sono diverse regole qui:
- - Modifichiamo px del% solo per valori grandi, non è necessario modificare 5 px dell'1% (ad esempio),
- - Esegui tutto il lavoro tramite Firebug, quindi trasferisci i valori nella vita reale.
Un po' per una comprensione generale. Hai un sito web in cui la larghezza della pagina è di 1000 px, ha tre blocchi: uno centrale da 800 px e due barre laterali da 100 px. Ciò significa che dopo la sostituzione con le percentuali, la dimensione della pagina diventerà del 100%, il contenitore centrale sarà dell'80% e i blocchi laterali saranno del 10%. Ruvido, ma comprensibile. Ora un po' più nello specifico.
Prima dell'adattamento (ho salvato il vecchio file CSS per la cronologia), il contenitore principale era scritto in stili come questo:
#container(margine:0 auto;larghezza:1100px; …
Dopo l'adattamento è diventato così:
#container(margine:0 auto;larghezza:77%;overflow: nascosto!importante; …
Il menu principale è cambiato da:
Menu principale>ul>li ul(larghezza:155px; …
Menu principale>ul>li ul(larghezza:90%; …
E l'offset del blocco di contenuto è implementato con:
#contenuto(margine:0 220px; …
#contenuto(margine:0 20% …
Attenzione al codice:
overflow: nascosto! importante;
Lo usiamo per disabilitare lo scorrimento orizzontale, questo è utile per l'adattamento mobile a volte ha senso indicare solo il divieto di scorrimento orizzontale utilizzando:
overflow-x: nascosto! importante;
Esegui tutto il lavoro tramite Firebug o l'ispettore Google, controlla con i tuoi occhi: il sito dovrebbe apparire lo stesso dopo aver convertito px in%. Non è ancora necessario rimpicciolire lo schermo; non siamo ancora arrivati all’adattamento mobile, ma abbiamo svolto il lavoro di base per gli schermi di grandi dimensioni.
CSS per dispositivi mobili
Il database è stato creato, tra l'altro questa è la fase più difficile ora bisogna garantire che il sito venga visualizzato correttamente su tutti i dispositivi mobili; Ci sono poche manipolazioni precedenti, poiché non sarà possibile comprimere tutto in percentuale per un piccolo schermo. D'accordo, è impossibile vedere una barra del sito larga il 10% su uno smartphone con una risoluzione di 320 px.
Dovremo utilizzare la schermata @media e che apporta modifiche di stile per i dispositivi con una risoluzione specifica. Per prima cosa ho determinato riducendo lo schermo del browser a quale risoluzione stavo riscontrando problemi di visualizzazione. Restringendo lo schermo, ho trovato il mio punto di "curvatura", inizia con una larghezza di 1000px, il che significa che da qui devi scrivere i principali stili mobili - tutto ciò che verrà visualizzato più negli stili di un normale desktop, e meno in stili separati.
Esempio di schermata @media e
Ho scritto CSS per dispositivi mobili su un modello Joomla 1.5 come questo:
@media screen e (max-width:500px)(body, tbody(-moz-hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;)
@schermo multimediale e (larghezza massima: 400px)(td(word-break:break-all;)
Schermata @media e (larghezza massima: 1000px)(td(word-break:break-all;).numeri-pagina, #footer, #navigazione, #header,.logo,.nav-box (visualizzazione: nessuna !importante ;) #content (posizione: auto; larghezza: 80%;margine inferiore: 0;margine sinistro: 10%;margine destro: 20%;) #contenitore (larghezza: 90% !importante;).content-box (larghezza: 110%).content-box h1 (dimensione carattere: 130%;).content-box h2 (dimensione carattere: 110%;).content-box h3 (dimensione carattere: 120%;).content -box h4 (dimensione carattere: 100%;) .top-menu>div (padding-destra: 0px !importante;) img(larghezza massima:96% !importante;altezza:auto !importante;)
Alcune specifiche sul codice.
Quando la larghezza dello schermo è inferiore a 1000 px, le barre laterali del sito, l'intestazione, l'impaginazione e il piè di pagina smettono di essere visualizzati. Secondo me non sono necessari nella versione mobile. Questo è ciò che fa il codice:
Numeri di pagina, #footer, #navigazione, #header,.logo,.nav-box (display: none !important;).
Per impostazione predefinita, in Joomla 3 mobile e versioni successive, i blocchi laterali si abbassano, allungando la pagina fino al punto di disgrazia, quindi anche sui nuovi motori puoi modificare alcune cose manualmente.
Altri valori sono indicati anche per i blocchi del contenitore principale e della finestra del contenuto, e l'output di H1-H4 viene convertito in percentuali (i pixel sono adatti per il desktop). Sono state apportate correzioni anche all'output del menu in alto (per fortuna va minimizzato, ma questo non è fondamentale e lo farò più tardi) ed è stata modificata la visualizzazione delle immagini:
img(larghezza massima:96% !importante; altezza:auto !importante;).
Per loro, è indicato che la dimensione massima dell'immagine in larghezza è del 96% (con rientri meravigliosi) e l'altezza viene impostata automaticamente.
Le specifiche sono finite, ancora una volta nel senso generale di adattamento di un sito web (design) tramite CSS.
- - Cambia i valori px di grandi dimensioni in%,
- - Registriamo separatamente @media screen e per dispositivi mobili.
Tramite la schermata @media assicurati di chiudere i blocchi di visualizzazione non necessari per i dispositivi mobili, ma converti in % quei valori che vengono visualizzati in modo errato, poiché erano lasciati in pixel nella versione desktop di CSS.
Di conseguenza, l'esperienza dell'utente quando si lavora con Joomla Mobile è stata del 65-70%, con il design reattivo che utilizza CSS è diventata del 99%. Le conclusioni sono ovvie: Yandex e Goole non sono stati testati per l'adattabilità, ma ora stanno passando alla grande.
Traduzione dell'articolo estremamente prezioso "Tecniche, strumenti e strategie di design responsivo del web" dalla popolare pubblicazione online per sviluppatori Smashing Magazine.
A gennaio abbiamo pubblicato un articolo sul responsive design, “Responsive Web Design: cos’è e come usarlo”. Il web design reattivo continua a ricevere molta attenzione, ma data la sua differenza rispetto ai tradizionali metodi di sviluppo di siti Web, può sembrare proibitivamente complesso per quei designer e sviluppatori che non l'hanno provato.
Per questo motivo, abbiamo compilato una panoramica delle risorse utili durante la creazione di siti Web reattivi. La recensione include guide dettagliate, approcci, strumenti e articoli contenenti consigli pratici necessari per creare il tuo sito web reattivo.
Tecniche di progettazione web reattiva
1. Transizioni CSS e query multimedialiTransizioni CSS e query multimediali
Elliot Jay Stocks entra nei dettagli sul metodo di combinazione delle query multimediali CSS e delle transizioni CSS. L'idea di base è questa: quando progetti un sito responsivo utilizzando Media Queries, modifichi costantemente la larghezza del browser per vedere come si comporta il sito. Ma ogni volta che una delle tue Media Queries viene elaborata, è visibile una rigida transizione tra gli stili (il primo, ad esempio, per i desktop, il secondo per i tablet). Perché non utilizzare le transizioni CSS per appianare quelle transizioni difficili con l'animazione?
Immagini e video reattivi
5. Immagini fluideImmagini in gomma (ridimensionamento del browser)
Le immagini in gomma sono uno dei temi centrali del responsive web design. L'articolo di Ethan Marcotte fornisce una panoramica dettagliata su come crearli utilizzando un classico snippet di codice img (larghezza massima: 100%; ), così come tutte le parti necessarie per iniziare.
E-mail reattive
14. Ottimizzazione della tua posta elettronica per dispositivi mobili con Media QueryOttimizza la posta elettronica per i dispositivi mobili con Media Queries
Le e-mail di grandi dimensioni spesso richiedono lo scorrimento orizzontale per essere visualizzate, soprattutto quando all'e-mail è allegata un'immagine di grandi dimensioni. In questo studio, Campaign Monitor spiega come è possibile ottimizzare le e-mail per l'utilizzo su dispositivi mobili Domande multimediali e ha suggerito diversi metodi utili e frammenti di codice per un uso pratico.
Strumenti per il web design reattivo
Puoi progettare progettazione adattiva da zero oppure utilizza gli strumenti elencati di seguito per accelerare e semplificare il processo di creazione di uno.Si tratta di un Polyfill veloce e leggero (una parte di codice che aggiunge funzionalità non supportate dal browser) creato da Scott Jehl per supportare le proprietà di larghezza minima e larghezza massima delle query multimediali CSS3 in IE6-IE8 e versioni successive.
Utilizza le informazioni di questo piccolo strumento per creare un sito Web reattivo.
Uno strumento per la prototipazione rapida del responsive design. Puoi progettare CSS per una varietà di dimensioni dello schermo, orientamenti e browser più diffusi, siano essi telefoni (BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid), tablet (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), monitor o TV (720p, 1080p).
Puoi visualizzare i risultati della progettazione direttamente nel tuo browser e utilizzare i tuoi strumenti di sviluppo preferiti, come Firebug. Prova anche lo strumento alternativo ScreenFly.
Lo strumento 320 e Up si basa su questo principio prima il cellulare(mobile first), in cui il design viene creato prima per gli schermi dei dispositivi mobili e poi ampliato per tablet, PC desktop e schermi più grandi. Funziona bene sia come aggiunta al boilerplate HTML5 che da solo.
Si tratta di modelli personalizzabili per la creazione di applicazioni Web mobili ricche di funzionalità e ad alte prestazioni. Otterrai la compatibilità multibrowser per gli smartphone di Classe A e un buon supporto per i vecchi BlackBerry, Symbian e IE Mobile. Oltre a un gran numero di diverse ottimizzazioni per i browser mobili.
Framework per il responsive design
33. Griglia CSS 11401140 CSS Grid è ottimizzato per funzionare su schermi che vanno dalle dimensioni dei dispositivi mobili ai monitor larghi 1280px. È una griglia semplice e flessibile che utilizza Domande multimediali.
Questo framework CSS è una buona base per lo sviluppo su schermi piccoli (come i telefoni) e schermi piccoli (come i tablet) immediatamente e con il minimo sforzo. Inoltre, c'è un generatore per creare tu stesso un framework CSS flessibile.
Flurid è una rete in gomma con 6, 7, 8, 9, 10, 12 e 16 colonne.
FluidGrids è un generatore di griglie modulari che crea layout a 6, 7, 8, 9, 10, 12 o 16 colonne.
Framework CSS per la creazione di layout reattivi. Contiene 4 layout di base e tre set tipografici.
Una struttura fluida con un focus sulla tipografia.
Tiny Fluid Grid ti aiuterà a creare la tua griglia fluida di 12, 16 o 24 colonne, impostarne la larghezza massima e minima e la percentuale di riempimento.
Strategie di progettazione reattiva
40. Il flusso di lavoro del responsive designerFlusso di lavoro dello sviluppatore di web design reattivo
Luke Wroblewski ha preso appunti sulla presentazione di Ethan Marcotte sull'applicazione dei principi del responsive web design per modernizzare il sito web di uno dei principali giornali. Tra le altre cose, Ethan spiega come si avvicina alla metodologia di progettazione del responsive web design e in cosa consiste il processo di prototipazione nel contesto del responsive web design.
Luke Wroblewski ha preso appunti alla Breaking Development Conference durante il discorso di Stephen Hay sulle realtà della progettazione per diversi dispositivi.
Discussioni e diversi punti di vista sul responsive web design
Questi articoli, pur non essendo tutorial, possono fornirti informazioni preziose sul motivo per cui dovresti utilizzare tecniche di responsive web design (e quando non farlo).Un'eccellente introduzione al responsive design come modo di pensare piuttosto che come strumento o tecnica. Jeremy Keith sostiene che il web design reattivo non può essere semplicemente aggiunto come passaggio a un flusso di lavoro esistente. Invece di aspirare alla perfezione dei pixel, dovremmo aspirare alla perfezione proporzionale.
La pubblicazione è una combinazione di filosofia e strategia per accumulare le migliori pratiche nel campo del responsive design.
Una raccolta regolarmente aggiornata di siti Web che utilizzano Media Queries.
Nell'episodio 9 di The Big Web Show, Jeffrey Zeldman e Dan Benjamin hanno invitato Ethan Marcotte a discutere del responsive design.
Un'ottima aggiunta all'articolo sarebbe un blog sul responsive design, in cui gli sviluppatori condividono le loro esperienze e scrivono recensioni sugli strumenti reattivi.
Oggi, la maggior parte delle persone accede a Internet tramite gadget mobili: tablet, telefoni e, a questo proposito, anche l'ottimizzazione del sito web raggiunge un nuovo livello. Se un utente entra e vede che il sito non è ottimizzato per i dispositivi mobili: l'immagine non si vede, i pulsanti si sono spostati, i caratteri sono piccoli e illeggibili, il design è distorto - 99 su 100% che se ne andrà e inizia a cercarne un altro più conveniente. E selezionerà la casella indicante che la risorsa è irrilevante, ovvero non corrisponde alla query di ricerca. Pertanto, il design della pagina deve essere adattato ai diversi dispositivi mobili. Cos'è una versione mobile di un sito web, come realizzarla e qual è il metodo migliore da utilizzare? Leggi di più in questo articolo.
Quindi, ci sono quattro modi chiave per adattare il tuo sito alla versione mobile.
Metodo uno: design reattivo
I modelli adattivi comportano la modifica dell'immagine del sito Web in base alle dimensioni dello schermo. Di norma, sono impostati su 1600, 1500, 1280, 1100, 1024 e 980 pixel standard. Le query vengono utilizzate per l'implementazione. Non cambia se stesso.
I vantaggi di questo metodo includono:
- sviluppo conveniente, poiché la struttura stessa si adatta ai parametri dello schermo e qualsiasi aggiornamento non richiede lo sviluppo di un design da zero, è sufficiente correggere CSS e HTML;
- un indirizzo URL: l'utente non ha bisogno di ricordare più nomi, non è necessario un reindirizzamento (reindirizzamento da un indirizzo a un altro), che può complicare il lavoro del webmaster ed è più facile per un motore di ricerca ordinare e classificare una risorsa con un singolo indirizzo.
Naturalmente, i modelli adattivi hanno anche i loro svantaggi, che, tra l’altro, superano i vantaggi. Tuttavia, molti sviluppatori aderiscono a questo particolare concetto, ad esempio Google Corporation, la cui versione mobile del sito ha un design reattivo. Quindi, gli svantaggi:
- Il responsive design non supporta le stesse attività su un dispositivo mobile e su un desktop. Se si tratta, ad esempio, della versione mobile del sito web di una banca, dove molto probabilmente l'utente avrà bisogno di informazioni sui tassi di cambio o sugli sportelli bancomat nelle vicinanze, allora questo design è abbastanza sufficiente. Ma se si tratta di una risorsa strutturata complessa con molte sezioni e sottosezioni, è improbabile che attiri i visitatori.
- Il caricamento lento trasforma il tuo sito preferito in uno odiato. Ciò è particolarmente vero per le risorse in cui sono presenti animazioni, video, popup e altri elementi attivi in abbondanza. 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'impossibilità di disabilitare la versione mobile è un altro svantaggio significativo. Se un elemento è nascosto da un layout di questo tipo, non puoi fare nulla per aprirlo, a differenza dei siti in cui puoi disabilitarlo e passare a un dominio normale.
Tuttavia, una versione così mobile del sito consente rapidamente, senza competenze e costi particolari, di adattare la risorsa a qualsiasi gadget. Ma, viste le carenze elencate, è adatto a risorse piccole e semplici con un minimo di informazioni e contenuti multimediali, senza navigazione e animazione complesse. Per un sito complesso sono adatti altri 2 metodi.
Metodo due: una versione separata del sito
Questo metodo è molto comune e spesso rende con successo un sito più user-friendly su un dispositivo mobile. La sua essenza è creare una versione separata della pagina, progettata per l'applicazione e situata su un URL o sottodominio separato, ad esempio m.vk.com. Allo stesso tempo, la funzionalità principale viene preservata, il design del sito sembra semplicemente diverso. I vantaggi di questo metodo sono evidenti:
- comoda interfaccia utente;
- è facile cambiare e apportare modifiche, poiché la versione esiste separatamente dalla risorsa principale;
- grazie al suo peso ridotto, una versione separata del sito funziona molto più velocemente di un modello adattivo;
- Molto spesso è possibile passare alla versione principale della pagina da quella mobile.
Ma questo non è privo di inconvenienti:
- Diversi indirizzi: versioni desktop e mobili del sito. Come fare in modo che l'utente ricordi due opzioni? I web master spesso trasferiscono dalla versione 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 hanno difficoltà a classificare 2 risorse identiche, e questo influisce direttamente sulla promozione.
- La versione mobile del sito da un computer, se un utente vi accede per errore, sembrerà ridicola, il che può anche influire sul traffico.
- Questa versione è spesso molto ridotta, desktop, quindi l'utente riceverà funzionalità molto limitate. Ma allo stesso tempo, se manca qualcosa, il visitatore può andare alla versione completa della pagina.
In generale, un sito mobile separato si giustifica ed è il modo più comune per adattare una risorsa ai dispositivi mobili. È popolare tra i grandi negozi online come Amazon.
La terza via è la progettazione RESS
Il motore di ricerca di Google supporta attivamente questa direzione del design mobile. Questo è il metodo più difficile, costoso ma efficace per adattare un sito Web a un telefono o tablet. Si chiama RESS. Si tratta di indirizzare una risorsa in un'applicazione mobile che può essere scaricata separatamente per ciascun dispositivo. Per Android - da GooglePlay e per Apple - da iTunes.
Tali applicazioni sono veloci, gratuite, convenienti e hanno la capacità di ospitare vari tipi di informazioni, mentre la memoria del telefono e il traffico Internet non vengono consumati tanto quanto quando si visita un sito tramite un browser. Sono di facile accesso, poiché il collegamento sarà sempre sullo schermo a portata di mano e non è necessario inserire un nome complesso nella barra degli indirizzi del browser.
Naturalmente, ci sono anche degli svantaggi, come la complessità dello sviluppo, gli elevati costi di manodopera per un gran numero di programmatori e la necessità di creare diverse opzioni di layout. A volte il dispositivo mobile non viene riconosciuto dall'applicazione. Sono necessari supporto tecnico regolare e correzioni di bug. Tuttavia, questa opzione è considerata la migliore delle tre proposte grazie al suo funzionamento produttivo e ininterrotto.
Il modo più economico per creare un sito web mobile
Tutti i metodi di cui sopra richiedono, anche se non sempre lungo e complesso, ma comunque retribuito per il webmaster. Se non vedi un bisogno urgente di tale sviluppo, una versione mobile semplice e gratuita del sito sarà adatta a te. Qual è il modo più semplice per farlo?
Scarica modelli speciali (plugin) per un design reattivo. Ad esempio, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile e altri. Ti aiuteranno a visualizzare il sito in modo più corretto sul tuo cellulare e riceverai diversi consigli su cosa correggere per adattare meglio la pagina alla versione mobile.
Naturalmente, è improbabile che questo metodo sia adatto a risorse serie. Piuttosto, questa funzionalità gratuita è destinata a siti, blog e feed di notizie piccoli e semplici. Non dovremmo inoltre dimenticare che il motore di ricerca Google, come Yandex, oggi pone seri requisiti alle versioni mobili, quindi c'è un'enorme possibilità di abbassare il tuo posizionamento utilizzando questo metodo.
Con questo metodo, molto probabilmente, i banner pubblicitari e pop-up verranno tagliati, ma la pagina verrà caricata rapidamente e senza ritardi.
Principi per creare versioni mobili
Non importa se la versione mobile del sito è stata creata gratuitamente o con l’aiuto di uno staff di webmaster, se è stata realizzata utilizzando il sistema RESS o utilizzando un template adattivo. La cosa più importante è che affinché funzioni in modo efficace è necessario aderire a diversi principi estremamente importanti. Quindi, come dovrebbe essere la versione mobile del sito? Come renderlo produttivo, efficiente e produttivo?
Rimuoviamo tutto ciò che non è necessario
Il minimalismo è ciò a cui dovrebbe aspirare uno sviluppatore di una versione mobile di un sito Web. Immagina quanto sia difficile percepire informazioni piene di colori, pulsanti, banner e che devi scorrere all'infinito alla ricerca del materiale giusto. Il design mobile dovrebbe essere semplice e pulito. Scegli 2-3 colori per dividere lo spazio (ad esempio quelli firmati). È meglio se uno di loro è bianco. Dividere lo spazio piccolo dello schermo in aree chiare e leggibili. Le chiavi virtuali devono essere visibili in modo che l'utente sappia chiaramente dove premere e veda: 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 semplificherebbero la vita all'utente, qui porteranno solo complicazioni. Lascia solo gli elementi più importanti. Animazioni, banner pubblicitari e contenuti multimediali molto probabilmente non faranno altro che rallentare il funzionamento di un sito Web o di un'applicazione e distrarre dall'attività principale.
Allineamento
La questione dell'allineamento non è meno urgente, poiché se eseguita in modo errato, l'utente riceverà solo la desinenza delle parole importanti. È generalmente accettato l'allineamento a sinistra e in verticale. Immagina di scorrere il feed delle notizie sul tuo telefono. Lo fai dall'alto verso il basso, ma non a sinistra o a destra.
Un'associazione
Quando non è possibile realizzare una lunga catena di transizioni, provare a combinare più passaggi in uno solo. Ad esempio, un sito richiede l'inserimento dei dati in più fasi: un nome, quindi un indirizzo, dove in ogni singola cella c'è una casa, una strada, un appartamento separati, ecc. Per non costringere l'utente a cercare di entrare in tanti piccoli celle, chiedigli di inserire solo 2: nome e indirizzo.
E disconnessione
A volte, al contrario, è necessario separare troppe informazioni. Ad esempio, nel menu a tendina hai un elenco di più di 80 città in cui viene effettuata la consegna. Raggruppali per regione in modo che l'utente non debba scorrere questo enorme elenco. Quando si sposta il cursore su un centro regionale o una regione, apparirà un altro elenco di città.
Elenchi
A proposito, riguardo alle liste. Ce ne sono due: fissati in ordine alfabetico o altro e con sostituzione. La loro scelta dipende da cosa verrà elencato.
Fisso è conveniente se l'utente sa esattamente cosa sta cercando. Ad esempio, città, numero o data. La seconda opzione è adatta per nomi lunghi e complessi o per i casi in cui esistono molte varianti dello stesso nome e ognuna avvicina l'utente all'obiettivo. L'opzione di sostituzione automatica viene utilizzata più spesso quando un visitatore ha bisogno di aiuto. Ad esempio, un sito web di maglieria offre l'acquisto di ferri da maglia. L'utente inserisce la query di ricerca "Ferri da maglia in metallo" e nel suggerimento vede "Ferri da maglia 5 mm", "Ferri da maglia 4,5 mm", ecc.
Compilazione automatica
Questo punto vale soprattutto per i siti in cui vendono qualcosa online e devi compilare moduli standard per il pagamento, la consegna, ecc. Se una persona effettua un acquisto dal suo telefono, molto probabilmente non ha il tempo di accedere al computer , il che significa che il processo di acquisto deve essere effettuato nel modo più rapido e conveniente possibile.
Per fare ciò i moduli possono contenere dati già compilati si può ricorrere alle risposte più diffuse; Inserisci ad esempio la data odierna, la modalità di pagamento in contanti, la città, se lavori nella stessa regione. Possono essere modificati, ma se colpisci il bersaglio, il tempo dell'utente verrà salvato.
Tutto si legge, tutto si vede
Quando crei il design della versione mobile del sito, ricorda che il telefono di ognuno è diverso, così come la loro visione. Il tuo sito può essere visualizzato su uno schermo piccolo, quindi i caratteri dovrebbero essere semplici e leggibili, i pulsanti dovrebbero essere abbastanza grandi da poter essere cliccati senza essere indirizzati a un'altra pagina e le immagini dovrebbero aprirsi separatamente e grandi, soprattutto quando si tratta di Internet -. negozio.
Alcune statistiche
Quando si parla di adattamento di un sito web ai dispositivi mobili non si può fare a meno di ricorrere alle statistiche per capire quanto sia importante questo processo per la promozione online.
I numeri sono i seguenti. Oggi l'87% della popolazione utilizza gadget, ad eccezione, pare, dei bambini più piccoli e di alcuni anziani. Gli economisti prevedono che il commercio mobile crescerà di 100 volte nei prossimi 5 anni. Tuttavia, solo il 21% dei siti è adattato per funzionare con i dispositivi mobili. Ciò significa che il traffico Internet e il mercato dell'e-commerce sono occupati solo da una piccola quinta parte.
Pensa a questi numeri. Ha senso adattare la tua risorsa? Certo che si. Inoltre, sebbene ci sia così tanto spazio libero in questo mercato, puoi ritagliarti il tuo segmento.
Dove è necessaria la versione mobile?
L'utilizzo della versione mobile è consigliabile per qualsiasi piattaforma che cerchi di ottenere un punteggio elevato. Dopotutto, questo ha un impatto diretto sull'utente, creando condizioni confortevoli affinché possa rimanere sul tuo sito.
Quanto segue non può esistere senza una versione mobile:
- portali di notizie, poiché sono ciò che la maggior parte delle persone vede dai propri telefoni mentre va al lavoro o a scuola;
- social network - per lo stesso motivo, in più c'è il fattore della comunicazione online, il che significa che per questo è necessario creare una chat comoda e comprensibile;
- libri di consultazione, siti con navigazione, ecc., a cui le persone si rivolgono quando cercano qualcosa;
- i negozi online sono un'opportunità per attirare clienti che non perdono tempo a fare acquisti, ma acquistano tutto tramite Internet mobile.
Invece di una conclusione
Oggi, le tecnologie mobili sono in una fase di crescita e sviluppo attivi, pertanto, aspirando alla leadership di mercato, qualsiasi azienda deve garantire che la propria risorsa Internet soddisfi i requisiti. A causa delle crescenti richieste degli utenti, i siti devono essere costantemente modernizzati e adattati ai diversi dispositivi. È chiaro che se una persona è scomoda nel trovarsi su una particolare risorsa, non può ottenere informazioni su un prodotto o sul prezzo lì, effettuare un ordine, informarsi sulla consegna, quindi troverà il sito dove tutto ciò sarà possibile. Pertanto, per vincere la competizione, è importante disporre di una risorsa flessibile, conveniente, funzionale e interessante.
La versione mobile del sito Android o iOS ti aiuterà a farlo. Per fare ciò, devi scegliere uno dei metodi di riprogettazione di cui sopra: un modello adattivo, creando un nuovo sito su un sottodominio e spostandoti su di esso reindirizzando, utilizzando modelli gratuiti o creando un'applicazione mobile con cui l'utente può accedere più comodamente e rimani sulla pagina.
Ciao a tutti! Di recente, dopo aver esaminato le statistiche di uno dei miei progetti, mi sono reso conto che era giunto il momento di imparare come creare un design di sito Web reattivo, ovvero un design che avrà un bell'aspetto sia su computer desktop e laptop, sia su dispositivi mobili. Dai un'occhiata tu stesso, suggerisce Metrica.
Ti piace questa foto? Forse in alcuni argomenti la percentuale di traffico mobile sarà inferiore, in altri sarà più alta, ma in ogni caso non potrete più ignorare i visitatori che vi leggono da smartphone o tablet.
Sai come vedono il tuo sito web gli utenti di dispositivi mobili? Fortunatamente, esiste un eccellente servizio di controllo: responsinator.com
Qui tutto è incredibilmente semplice: inserisci l'indirizzo del sito e vedi come appare sui dispositivi mobili. Facciamo un esempio di un blog che probabilmente tutti conoscono.
Alexander Borisov ha un bellissimo template, è subito evidente che sono stati investiti molti soldi nel design e nel layout. Tuttavia, leggere un blog da un telefono è molto scomodo e non mi sorprenderei se il tasso di fallimento tra gli utenti di dispositivi mobili fosse molto più alto rispetto a chi accede al sito da un computer.
Cosa fare? Ci sono due vie d'uscita: lascia tutto così com'è e guarda come altri progetti bypassano il tuo nei risultati dei motori di ricerca, oppure rendi adattivo il design del tuo sito web.
Cos'è il responsive design
All’inizio non vedevo la differenza tra layout adattivo e “fluido”, quando le dimensioni dei blocchi cambiano a seconda della larghezza dello schermo. Tuttavia, c’è una differenza.
Il design reattivo non si limita ad allungarsi o restringersi in larghezza, ma si adatta alle dimensioni dello schermo, a volte cambiando completamente lo stile dei blocchi.
L'esempio più semplice: l'area del contenuto viene allungata su tutta la larghezza dello schermo e la barra laterale viene spostata verso il basso o scompare completamente dalla pagina. Oppure il menu si trasforma da normale orizzontale in un elenco a discesa.
Come realizzare un design responsivo per il tuo sito web
A seconda del budget e della conoscenza di CSS/HTML, potrebbero esserci diverse opzioni.
Ordina il layout adattivo da un libero professionista
L'opzione più corretta, secondo me, è anche la più impopolare. Perché il piacere non è economico. Eppure, se i fondi lo consentono e non c'è voglia di comprendere le complessità del layout, è meglio trovare uno studio o un libero professionista che adatterà il tuo modello per i dispositivi mobili o ne creerà uno nuovo. E sai già come verificarne il funzionamento su dispositivi con risoluzioni diverse: responsinator.com può aiutarti.
Trova un design già pronto
Recentemente, quasi tutti i designer stanno cercando di adattare i propri modelli ai dispositivi mobili. Puoi cercare un design già pronto, ad esempio, qui:
- www.templatemonster.com è una delle raccolte più popolari di modelli a pagamento per vari CMS e solo siti HTML.
- www.templatemo.com: molte opzioni di design moderno gratuite.
Questa opzione è adatta a coloro che non inseguono un design esclusivo o sono in grado di apportare modifiche al codice per rendere il modello unico.
Usa i framework
Struttura: si potrebbe dire la struttura del modello, i suoi file principali e una griglia di blocchi. I designer li adorano per la loro facilità d'uso e il risparmio di tempo, perché un modello "pesce" già pronto ti consente di non perdere tempo nella routine. Se sai come lavorare con i framework, usarli per creare un design reattivo è un'ottima soluzione.
Troverai un vasto elenco di framework adattivi per tutti i gusti su Habré. Ma la maggior parte di essi sono piuttosto difficili da usare e pesanti in termini di volume. Pertanto, per coloro che amano il minimalismo, consiglio un altro elenco di framework adattivi leggeri da Beloweb.ru. Allo stesso tempo, dai un'occhiata più da vicino al blog, ci sono molte "chicche" utili per designer e progettisti di layout.
Realizza tu stesso il layout
Questo metodo è per coloro che non cercano modi semplici e vogliono capire tutto da soli. Essenzialmente, per rendere il tuo modello responsivo, devi utilizzare due cose:
Meta tag dell'area di visualizzazione
Che determina il tipo di dispositivo da cui il visitatore ha effettuato l'accesso al sito e imposta la corretta larghezza dello schermo. Basta copiare questo codice nella testata del tuo sito.
@regola dei media
Grazie al quale possiamo scrivere stili diversi per gli stessi blocchi nel nostro file css. Sembra qualcosa del genere:
#left( larghezza: 600px; float: sinistra; margine destro: 10px; ) #right( larghezza: 400px; float: destra; ) Schermo solo @media e (larghezza massima: 1010px)( #left, #right( larghezza : 98%; float: nessuno; margine: 10px automatico;
In questo esempio il blocco #Sinistra ha una larghezza di 600 pixel e si troverà a sinistra del blocco #Giusto 400 pixel di larghezza. Ma se la risoluzione del monitor è inferiore a 1010 pixel, rimuoviamo l'avvolgimento da entrambi i blocchi e li allunghiamo al 98% della larghezza dello schermo.
Ed è così che devi scrivere le regole per le seguenti dimensioni dello schermo:
- 320px per iPhone 3-5 in posizione verticale
- 480px per iPhone 3-4 in posizione orizzontale
- 568px per iPhone 5 in orizzontale
- 384px per smartphone in posizione verticale
- 600px per smartphone in posizione orizzontale
- 768px per iPad in posizione orizzontale
- 1024px per iPad in posizione verticale
Un elenco completo delle risoluzioni è disponibile su responsinator.com o nel rapporto Yandex.Metrica relativo al tuo sito (sezione Tecnologie/Risoluzioni display). In una parola, non sarà difficile per coloro che hanno familiarità con il layout del sito Web comprendere questo problema.
Sapete, raramente fornisco link a corsi a pagamento (perché non consiglio mai qualcosa che non ho mai usato personalmente), ma questo è davvero il miglior materiale formativo sul layout che abbia mai visto. È grazie a Mikhail che il modello del mio blog ora non solo è adattato alle diverse risoluzioni dello schermo, ma è diventato più leggero rispetto alla versione precedente ed è meglio ottimizzato per i motori di ricerca.
A proposito, se stai leggendo l'articolo da un telefono cellulare, scrivi se è tutto a posto, è tutto conveniente? È tutto per oggi. Se avete domande o integrazioni, benvenuti come sempre nei commenti, sono aperti a tutti;
