Ciao miei cari lettori del blog. Galiulin Ruslan è in contatto. Oggi parleremo delle versioni mobili dei siti che ogni sito o blog deve avere per poter avanzare al TOP dei motori di ricerca. Nell'articolo fornirò codici di stile ed esempi di layout di pagina già pronti che puoi scaricare sul tuo computer.

Se il tuo sito non è ancora mobile-friendly, ti consiglio di usare i miei consigli o di contattare professionisti - http://www.versione-mobile.ru che farà tutto secondo gli standard dei motori di ricerca. Puoi anche controllare la mobilità del tuo sito utilizzando lo stesso link.

NEL 2013 Anno di Google ha iniziato la pressione sui webmaster ( https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html), convincendo della necessità di creare modifiche leggere al sito web, e dal 2015 la mobilità è diventata uno degli aspetti del ranking ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html). Yandex non resta indietro, avendo creato uno speciale algoritmo Vladivostok che tiene conto dell'idoneità del sito per la visualizzazione dai telefoni.

Mobile Friendly oggi non è solo prendersi cura dei visitatori, ma una condizione indispensabile per la promozione.

Quando un sito viene creato da zero, viene applicato l'approccio Mobile First. Ma la maggior parte ha vecchi progetti di lavoro. La domanda principale che la versione mobile del sito pone in tali situazioni è come realizzarla senza rovinare il template esistente?

Ci sono tre approcci:

• Indirizzo e layout separati: inseriti in un sottodominio del modulo m.site.ru. Il reindirizzamento avviene tramite un reindirizzamento del server da parte dell'agente utente.
• Design reattivo: URL e html rimangono gli stessi del formato desktop, ma in CSS le query multimediali restituiscono regole per schermi diversi.
• RESS è un design reattivo, l'indirizzo rimane lo stesso, ma il server invia set di stili a seconda del tipo di hardware che richiede la pagina.

Per i proprietari di vecchi progetti scelta ottimale- uso del layout adattivo. Come farlo da soli e senza utilizzare plugin non sicuri, considereremo passo dopo passo.

Versione mobile del sito: come farlo bene

Ulteriori passaggi richiederanno una solida conoscenza di base di html e css o la capacità di cercare rapidamente su Google cose incomprensibili.

Informazioni per principianti: in CSS, le parole prima delle parentesi graffe indicano i pezzi specifici del file html che sono responsabili della visualizzazione. Scritto più spesso con un punto o un cancelletto - #place (proprietà: valore;).

Passaggio 1. Rimuovere le restrizioni.

I proprietari di layout fluido possono saltare questo passaggio. Il resto dovrà lavorare sodo.

Larghezza- cerchiamo grandi sezioni nel codice con una visualizzazione rigidamente definita. Se il parametro è specificato in pixel o punti, è necessario modificarne il valore in percentuali, ems e altre unità sensibili all'ambiente. Spesso il contenitore principale o l'area del contenuto ha una larghezza fissa: nella maggior parte dei casi, le restrizioni vengono rimosse sostituendolo con larghezza massima.

Immagini- invece di dimensioni chiare, prescriviamo proprietà per il tag img, che darà adattabilità alle immagini. Le foto cambieranno le proporzioni all'interno dei contenitori principali.

img(

Larghezza massima: 100%

altezza: auto;

tavoli- Non è possibile impostare la piena adattabilità, ma puoi creare pagine con esse adatte ai dispositivi mobili aggiungendo questo codice:

tavolo(

blocco di visualizzazione;

Larghezza: 100%;

overflow-x: scorrere;

overflow-y: nascosto;

stile ms-overflow: -ms-autohide-barra di scorrimento;

webkit-overflow-scorrimento: touch;

Avvolgimenti: vengono impostati dalla proprietà float. L'impostazione di questa opzione consentirà alle caselle di spostarsi in base alle impostazioni della finestra, adattandosi agli elementi con una posizione stabile o all'interno di contenitori principali. Gli elementi div standard vengono tradotti per impostazione predefinita ciascuno in nuova linea. Ad esempio, posizionando blocchi div da 200 px in un contenitore da 1000 px, puoi vedere questa immagine.

I blocchi sono impilati uno sopra l'altro. L'aggiunta di avvolgimento rimuove le nuove righe, mette gli elementi in una riga su tutto lo spazio disponibile.

Passaggio 2: pianificare la riorganizzazione dei contenuti.

Scopri quali dettagli del sito desktop dovrebbero essere visualizzati sui dispositivi mobili. Per fare ciò, rispondi alle seguenti domande:

• Quali blocchi svolgono solo funzioni decorative? - Più spesso si tratta di slider, decorazioni della barra laterale, questionari, foto casuali.
• Cosa stanno ignorando i visitatori? - Le mappe termiche di clic e percorsi aiuteranno a rispondere a questa domanda. Nascondiamo spietatamente gli elementi meno attivi.
• Cosa deve rimanere nella versione mobile? - Di solito questa è una pubblicità, un modulo feedback, abbonamento o pulsanti dei social media.
• Pensa a come dovrebbe apparire il sito su tablet, smartphone e piccoli vecchi telefoni: puoi impostare il tuo look per ogni dispositivo.

Passaggio 3. Convenienza.

Navigazione: gli schermi del telefono sono troppo piccoli, il solito menu del sito raramente si adatta a tali frame. È consuetudine impostare il menu a tendina sul pulsante.

Area dei contenuti: per i telefoni, di norma, imposta la larghezza del blocco principale in CSS al 100%, a seconda di spazio disponibile. Ciò significa che testo, moduli, annunci e contenuto della barra laterale verranno visualizzati su piccoli dispositivi in ​​una colonna.

Sensori: le dita non sono precise come un mouse, lasciano molto spazio per loro. Lo spazio intorno ai link e ad altri elementi attivi deve essere di almeno 28 x 28 pixel.

Aiuta i tuoi visitatori a definire lo spazio attivo - riempimento, evidenziazione, cambio colore e altre cose che possono essere impostate per i tocchi, prescrivi la pseudo-classe hover per link e pulsanti.

Implementazione di media query con esempi

Se hai mai creato tabelle CSS per la stampa, hai già un'idea delle possibilità di assegnare stili individuali a seconda delle condizioni.

Le media query sono espressioni logiche, l'accesso ad esse implica una risposta con un parametro true o false. Se il risultato della query è vero, ovvero le dimensioni dello user agent o del dispositivo corrispondono al tipo di supporto specificato, le regole di stile specificate all'interno del blocco multimediale vengono applicate automaticamente.

Le media query possono essere assegnate tramite parametri:

• larghezza e altezza della finestra del browser;
• larghezza e altezza del dispositivo;
• orientamento: modalità orizzontale o verticale;
• risoluzione dello schermo.

Un elenco aggiornato degli argomenti è disponibile all'indirizzo specifica ufficiale.

Passiamo agli esempi. C'è modello pronto, la dimensione della sua parte di contenuto è di 1000 pixel, tutti gli elementi interni e i dettagli sono configurati in relazione a questo parametro.

Se lo schermo dell'utente è più stretto della parte di contenuto specificata, verrà visualizzata una barra di scorrimento. Gli elementi di design fluttuanti possono comportarsi in modi imprevedibili: incontrarsi, allargarsi, restringersi troppo.

Per prima cosa rimuoviamo la misura fissa che crea la striscia in modo che non interferisca con la regolazione. Nel nostro modello, questo è il wrapper di navigazione. In un layout del lettore, questo può essere uno o più elementi. Se non sei in grado di definire la definizione, apri gli strumenti di sviluppo del browser: utilizzando la visualizzazione del modello a scatola, trova l'elemento che non si adatta alle dimensioni dello schermo.

Per risolverlo, rimuoviamo i frame fissi aggiungendo agli stili del modello:

Schermata solo multimediale e (larghezza massima: 1000 px) (

Navigazione (larghezza: 100%; )

Ora, se la larghezza dello schermo dell'utente è inferiore a 1000 px, la larghezza del menu sarà uguale al 100% delle sue dimensioni. La versione principale del modello ha lo stesso aspetto di prima. La sostituzione della proprietà ha rimosso la barra di scorrimento inferiore durante la riduzione dello schermo.

Ma i blocchi sembrano ancora dubbi: cambiamo la loro visualizzazione aumentando la larghezza in percentuale per adattarla alle dimensioni desiderate.

Aggiungiamo allo stesso mediaquery:

Blocco (larghezza: 35%;)

Come scoprire le dimensioni ottimali per i blocchi del tuo sito? Calcola manualmente o prendi come base qualsiasi griglia già pronta - griglia fluida. Puoi concentrarti sugli standard esistenti: nei layout a due colonne con una larghezza della finestra di 980-1050 px, il wrapper è considerato il 95%, il contenuto è il 60% e il 30% è rimasto per la barra laterale. Lo spazio rimanente va alla formazione dei bordi e del margine per la precisione.

Puoi comunque applicare il box-sizing al contenuto, in modo da non calcolare ogni volta i pixel, ma lavorare in base alle dimensioni complessive.

Passiamo all'impostazione della visualizzazione su schermi a risoluzione inferiore:

Schermata solo multimediale e (larghezza massima: 600 px) (

Blocca (

galleggiante:nessuno;

Larghezza: 85%;

Margine: 1em automatico;

Se lo schermo è inferiore a 600 px, i nostri blocchi dovrebbero adattarsi a una colonna: rimuoviamo l'avvolgimento, impostiamo nuovi rientri, centramo e cambiamo la larghezza. Più spesso, viene impostato il 100%, ma se per qualche motivo questo è scomodo, impostiamo la nostra dimensione.

Quindi puoi impostare non solo le dimensioni dei blocchi di contenuto, ma anche la loro visualizzazione. Ad esempio, vietare la visualizzazione di elementi di grandi dimensioni, sostituendoli con quelli convenienti.

Dimostriamo le possibilità usando l'esempio di cambiare colori e display.

Nella versione per smartphone il menu principale è nascosto e il colore del blocco è cambiato in blu, mentre lo schermo più grande mostra il design senza queste modifiche.

Nascondere la navigazione è richiesto nella maggior parte dei casi: è sostituito da un pulsante. È più appropriato farlo usando javascript, puoi usare soluzioni già pronte.

Le modifiche vengono apportate in modo puntuale, l'intervallo può essere limitato sia dall'alto che dal basso. È veloce e conveniente: una riga imposta un CSS separato per dispositivi diversi senza influire sulla visualizzazione principale del sito.

Puoi dichiarare le regole @media ovunque all'interno tabella esistente stili o crearne uno separato per queste dichiarazioni, quindi importarlo nel CSS principale usando la regola @import.

Versione mobile del sito: come fare e cosa cercare

Mediacware è compreso da tutti i browser moderni, ma non funzionerà in IE 8 e versioni precedenti. Il problema viene risolto facendo riferimento al vecchio IE tramite commenti condizionali. Devono essere scritti nel codice del modello, non nei CSS.

Lo script stesso è disponibile su github ( https://github.com/scottjehl/respond), aggiunge il supporto per le dimensioni minime e massime e le mediaquery agli IE precedenti.

Un altro problema è che il design reattivo implica l'uso di Html5, che ancora una volta è incomprensibile per i browser più vecchi. Trattata con un trucco:

Il codice è scritto in html, inoltre la visualizzazione a blocchi degli elementi creati è impostata in CSS:

header, nav, sezione, articolo, aside, footer (display:block;)

Affrontiamo immediatamente la domanda: come visualizzare alcuni script solo quando parametri dati schermo. Se jquery è installato, dovrai aggiungere un semplice script al codice del modello. I numeri vengono modificati in quelli necessari. Si legge così: se la larghezza della finestra supera i 980 pixel, lo script specificato nel percorso viene applicato alla pagina. Puoi specificarne diversi, la sintassi è scritta per analogia tramite un punto e virgola tra parentesi graffe.

Se ($(documento).larghezza() > 980) (

$.getScript("percorso dello script");

Un altro punto è come browser mobile L'iPhone deve elaborare il contenuto dato, se il suo aumento è consentito. Per fare ciò, la scala iniziale è scritta nella testa:

Resta solo da verificare la correttezza: per questo puoi utilizzare il tuo browser e telefono o contattare i servizi.

Se il sito viene convertito in server locale, la correttezza può essere determinata in ami.responsivedesign.is. Per una corretta visualizzazione, i proprietari di Denver dovranno modificare la codifica in utf-8 modificando il file httpd.conf del server.

Il servizio dimostrerà l'aspetto del progetto su diversi dispositivi.

Inoltre, il modello viene testato https://developers.google.com/speed/pagespeed/insights/ o in forma speciale https://www.google.com/webmasters/tools/mobile-friendly, così come nei webmaster.

In Yandex, questo sembra dettagliato e Google segnalerà semplicemente che non ci sono problemi.

Se tutto è fatto correttamente, non ci sarà lo scorrimento, nessun elemento non necessario. La versione mobile è pronta e ora hai imparato a realizzarla da solo. Se il materiale ti è stato utile, metti mi piace e iscriviti alla newsletter del blog. Ti auguro il meglio.

Di seguito cliccando su uno dei pulsanti puoi scaricare 2 esempi della pagina piegata in questa lezione ed è facile lavorarci pagine già pronte e copia il codice

Cordiali saluti, Galiulin Ruslan.

Oggi, la maggior parte delle persone va online tramite gadget mobili: tablet, telefoni, a questo proposito va anche l'ottimizzazione del sito nuovo livello. Se un utente entra e vede che il sito non è ottimizzato per dispositivi mobili: l'immagine non può essere visualizzata, i pulsanti sono stati spostati, i caratteri sono piccoli e illeggibili, il design è distorto - 99 su 100% che uscirà e inizia a cercarne un altro più conveniente. A selezionerà la casella che la risorsa è irrilevante, ovvero non corrisponde alla query di ricerca. Pertanto, il design della pagina deve essere adattato ai vari dispositivi mobili. Che cos'è una versione mobile del sito, come realizzarla e qual è il modo migliore per applicarla? Leggi di più in questo articolo.

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

Metodo uno: design reattivo

I modelli reattivi cambiano l'immagine del sito in base alle dimensioni dello schermo. Di norma, sono impostati su standard 1600, 1500, 1280, 1100, 1024 e 980 pixel. 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 del design da zero, è sufficiente modificare CSS e HTML;
• uno Indirizzo URL- l'utente non ha bisogno di ricordare più nomi, non è necessario un reindirizzamento (reindirizzamento da un indirizzo all'altro), che può complicare il lavoro di un webmaster, ed è più facile per un motore di ricerca ordinare e classificare una risorsa con un unico indirizzo.

Naturalmente, i modelli adattivi hanno i loro svantaggi, che, tra l'altro, sono più che vantaggi. Tuttavia, molti sviluppatori aderiscono a questo concetto, ad esempio Google Corporation, la cui versione mobile del sito ha un design adattivo. Quindi, svantaggi:

• Il design reattivo non supporta le stesse attività su dispositivi mobili come su desktop. Se si tratta, ad esempio, di una versione mobile del sito Web di una banca, in cui è più probabile che le informazioni sul tasso di cambio o sugli sportelli automatici più vicini siano importanti per l'utente, allora questo design è abbastanza. Ma se si tratta di una risorsa strutturata complessa con molte sezioni e sottosezioni, è improbabile che piaccia ai visitatori.
• Il caricamento lento trasforma un sito preferito in uno odioso. Ciò è particolarmente vero per le risorse in cui abbondano animazioni, video, pop-up e altri elementi attivi. A causa del grande peso, la pagina semplicemente "rallenta", l'utente si arrabbierà e se ne andrà, e posizioni di ricerca sito - autunno.
• L'impossibilità di disabilitare la versione mobile è un altro inconveniente significativo. Se un elemento è nascosto da un tale layout, non puoi fare nulla per aprirlo, a differenza dei siti in cui puoi disattivarlo e passare a un dominio normale.

Tuttavia, una tale versione mobile del sito in modo rapido, senza competenze e costi speciali, ti consente di adattare la risorsa a qualsiasi gadget. Ma, viste le carenze elencate, si adatterà a risorse piccole e semplici con un minimo di informazioni e multimediali, senza navigazione difficile e animazioni. Per un sito complesso, sono adatti altri 2 metodi.

Metodo due: una versione separata del sito

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

• interfaccia intuitiva;
• è facile cambiare e apportare modifiche, poiché la versione esiste separatamente dalla risorsa principale;
• a causa del peso ridotto, una versione separata del sito funziona molto più velocemente di modello reattivo;
• molto spesso è possibile accedere alla versione principale della pagina dal cellulare.

Ma anche qui non è stato privo di inconvenienti:

• Diversi indirizzi: versione desktop e mobile del sito. Come far ricordare all'utente due opzioni? I web master spesso prescrivono 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 ciò influisce direttamente sulla promozione.
• La versione mobile del sito da un computer, se l'utente lo visita per errore, sembrerà ridicola, il che può anche influire sul traffico.
• Questa versione è spesso fortemente ridotta, desktop, quindi l'utente riceverà funzionalità molto limitate. Ma allo stesso tempo, se manca qualcosa, il visitatore può recarsi versione completa pagine.

In generale, un sito mobile separato si giustifica ed è il modo più comune per adattare una risorsa ai dispositivi mobili. È popolare con i grandi negozi online come Amazon.

La terza via - RES-design

Il motore di ricerca di Google supporta attivamente questa direzione del design mobile. Questo è il metodo più complesso, costoso, ma efficace per adattare il sito a un telefono o tablet. Si chiama RESS. Questo è il targeting delle risorse in un'applicazione mobile che può essere scaricata separatamente per ciascun dispositivo. Per Android - con GooglePlay e per Apple - con iTunes.

Tali applicazioni sono veloci, gratuite, convenienti, hanno la capacità di ospitare vari tipi di informazioni, mentre la memoria del telefono e il traffico Internet non vengono consumati come quando si visita un sito tramite un browser. Sono di facile accesso, poiché il collegamento sarà sempre sullo schermo a portata di mano e non è necessario inserire un nome complesso in barra degli indirizzi browser.

Naturalmente, ci sono anche degli svantaggi qui, come la complessità nello sviluppo, gli alti 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. Regolare supporto tecnico, correzione delle carenze. Tuttavia, questa opzione è considerata la migliore delle tre proposte per il suo funzionamento produttivo e ininterrotto.

Il modo più economico per creare un sito web mobile

Tutti i metodi di cui sopra comportano, anche se non sempre lungo e complicato, ma comunque retribuito il lavoro di un webmaster. Se non vedi un bisogno urgente di tale sviluppo, una versione mobile semplice e gratuita del sito farà al caso tuo. Qual è il modo più semplice per farlo?

Scarica modelli speciali (plugin) per disegno adattivo. Ad esempio, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile e altri. Aiuteranno a visualizzare il sito in modo più corretto sul telefono, mentre riceverai alcuni suggerimenti su ciò che deve essere corretto per adattare al meglio la pagina alla versione mobile.

Naturalmente, questo metodo è difficilmente adatto a risorse serie. Piuttosto, esso opportunità gratuitaè destinato a siti, blog, feed di notizie piccoli e semplici. Non dimenticare che il motore di ricerca di Google, così come Yandex, oggi richiede seri requisiti alle versioni mobili, quindi c'è un'enorme possibilità di abbassare le tue posizioni usando questo metodo.

Con questo metodo, molto probabilmente, gli annunci e i banner pop-up verranno tagliati, ma la pagina si caricherà velocemente e senza “lag”.

Principi di creazione di versioni mobili

Non importa se la versione mobile del sito è stata realizzata gratuitamente o con l'aiuto di uno staff di webmaster, è stata realizzata sul sistema RESS o utilizzando un template adattivo. Soprattutto, per il suo funzionamento efficace, è necessario aderire a diversi principi estremamente importanti. Quindi, quale dovrebbe essere la versione mobile del sito? Come renderlo produttivo, efficiente e produttivo?

Rimuoviamo tutto ciò che non è necessario

Il minimalismo è ciò a cui dovrebbe aspirare lo sviluppatore della versione mobile del sito. Immagina quanto sia difficile percepire informazioni piene di colori, pulsanti, banner e che devi scorrere all'infinito alla ricerca del materiale giusto. Il design mobile dovrebbe essere semplice e pulito. Scegli 2-3 colori per dividere lo spazio (ad esempio, con marchio). Meglio se uno di loro è bianco. Dividi lo spazio di un piccolo schermo in zone comprensibili e leggibili. Le chiavi virtuali dovrebbero essere visibili in modo che l'utente sappia chiaramente dove premere e veda: ecco il prodotto, ecco il modulo per la compilazione dei dati, ecco le informazioni sulla consegna e sul pagamento.

Tutto opzioni aggiuntive, che sarebbe utile nella versione desktop e semplificherebbe la vita all'utente, porterà solo difficoltà qui. Lascia solo gli elementi più importanti. Animazione, banner pubblicitari, il multimediale, molto probabilmente, rallenterà solo il lavoro del sito o dell'applicazione e distrarrà dalla cosa principale.

allineamento

Il problema dell'allineamento non è meno acuto, perché se fatto in modo errato, l'utente otterrà solo i finali di parole importanti. L'allineamento verticale e allineato a sinistra è generalmente accettato. Immagina di scorrere il feed delle notizie sul tuo telefono. Lo fai dall'alto verso il basso, ma non a sinistra oa destra.

Un'associazione

Quando non c'è possibilità di una lunga catena di transizioni, prova a combinare più passaggi in uno solo. Ad esempio, il sito richiede l'inserimento dei dati in più fasi: un nome, quindi un indirizzo, in cui ogni singola cella contiene una casa, una strada, un appartamento separato, ecc. Per non costringere l'utente a provare a colpire molte piccole celle, chiedi lui da compilare solo 2 - nome e indirizzo.

E disconnessione

A volte, al contrario, è necessario anche disconnettersi un gran numero di informazione. 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 passa con il mouse sopra il centro regionale o la regione, un altro elenco di città verrà eliminato.

Elenchi

A proposito, sulle liste. Ce ne sono due: fissi in ordine alfabetico o altro e con sostituzione. La loro scelta dipende da cosa verrà elencato.

Risolto è utile se l'utente sa esattamente cosa sta cercando. Ad esempio, città, numero o data. La seconda opzione è adatta per nomi lunghi e complessi o per 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 di maglieria offre l'acquisto di ferri da maglia. L'utente entra query di ricerca"Aghi da maglia in metallo", ma nel tooltip vede "ferri da maglia da 5 mm", "ferri da maglia da 4,5 mm", ecc.

Completamento automatico

Questo punto è particolarmente vero per i siti in cui qualcosa viene venduto online e devi compilare forme standard pagamento, consegna, ecc. Se una persona effettua un acquisto da un telefono, molto probabilmente non ha il tempo di raggiungere il computer, il che significa che il processo di acquisto deve essere effettuato il più veloce e conveniente possibile.

Per fare ciò, i moduli possono contenere dati già compilati, puoi ricorrere alle risposte più popolari. Ad esempio, inserisci la data odierna, il metodo di pagamento in contanti, la città se lavori nella stessa regione. Possono essere modificati, ma se colpisci il bersaglio, il tempo dell'utente verrà risparmiato.

Tutto si legge, tutto si vede

Quando crei il design della versione mobile del sito, ricorda che i telefoni di tutti sono diversi, così come la loro vista. Forse il tuo sito verrà visualizzato da uno schermo piccolo, quindi i caratteri dovrebbero essere semplici e leggibili, i pulsanti dovrebbero essere abbastanza grandi da poter essere cliccati senza essere portati in un'altra pagina e le immagini dovrebbero aprirsi separatamente, grandi, soprattutto se noi stiamo parlando sul negozio online.

Alcune statistiche

Parlando dell'adattamento del sito ai dispositivi mobili, non si può fare a meno di ricorrere alle statistiche per capire quanto sia importante questo processo per la promozione online.

I numeri sono i seguenti. Oggi i gadget sono utilizzati dall'87% della popolazione, a quanto pare, ad eccezione dei bambini più piccoli e di alcuni anziani. Gli economisti prevedono la crescita commercio mobile 100 volte nei prossimi 5 anni. Allo stesso tempo, solo il 21% dei siti è adattato per funzionare con dispositivi mobili. Ciò significa che il traffico Internet e il mercato dell'e-commerce sono occupati solo da una piccola 5a parte.

Pensa a questi numeri. Ha senso adattare la tua risorsa? Certo che si. Inoltre, mentre ce ne sono così tanti spazio libero in questo mercato, puoi prendere il tuo segmento su di esso.

Dov'è necessaria la versione mobile?

L'uso della versione mobile ha senso per qualsiasi piattaforma che mira a ottenere un posizionamento elevato. Dopotutto, questo ha un impatto diretto sull'utente, creando condizioni confortevoli per fargli rimanere sul tuo sito.

Senza una versione mobile non può esistere:

• portali di notizie, poiché la maggior parte di essi viene visualizzata dal telefono mentre si va al lavoro o allo studio;
• social network - per lo stesso motivo, in più c'è un fattore di comunicazione online, il che significa che per questo dovrebbe essere creata una chat comoda e comprensibile;
• riferimento, siti con navigazione, ecc., dove si recano le persone quando cercano qualcosa;
• shopping online: un'opportunità per attirare clienti che non perdono tempo a fare acquisti, ma acquistano tutto tramite Internet mobile.

Invece di una conclusione

In data odierna tecnologie mobili sono in una fase di crescita e sviluppo attivi, pertanto, aspirando alla leadership nel mercato, qualsiasi azienda deve garantire che la propria risorsa Internet soddisfi i requisiti. A causa delle crescenti esigenze degli utenti, i siti devono essere costantemente aggiornati e adattati vari dispositivi. È chiaro che se una persona è scomoda a trovarsi su una determinata risorsa, non può ottenere informazioni su un prodotto o un prezzo lì, effettuare un ordine, scoprire la consegna, quindi troverà il sito in cui tutto ciò diventerà possibile. Pertanto, per vincere la competizione, è importante disporre di una risorsa flessibile, conveniente, funzionale e interessante.

La versione mobile del sito Android o Ios aiuterà a farlo. Per fare ciò, è necessario scegliere uno dei metodi di riprogettazione di cui sopra: un modello adattivo, creare un nuovo sito su un sottodominio e accedervi reindirizzando, utilizzare modelli gratuiti o creazione applicazione mobile, con cui l'utente può più comodamente entrare ed essere sulla pagina.

A mondo moderno a volte avere il proprio sito web è importante quanto avere un numero di telefono o un indirizzo E-mail. Sfortunatamente, non tutti possono creare da soli un bellissimo sito Web professionale e a volte anche una curva non funziona. Anche l'ordine dai programmatori non è una soluzione ideale, poiché non tutti possono permetterselo.

I modelli di siti Web HTML gratuiti ti aiuteranno a uscire da questa situazione. Un modello di sito HTML è un insieme di pagine statiche già pronte per un sito di un determinato argomento. Utilizzando questo modello, puoi creare un semplice sito Web in un paio d'ore, con conoscenze di base Marcatura HTML. Nella sezione HTML acquisirai queste conoscenze se trascorri un altro paio d'ore a studiare, e se non risparmi tempo nella sezione CSS, sarai in grado di controllare completamente il design dei modelli di sito HTML e personalizzarli completamente alle tue esigenze.

Un altro indiscutibile vantaggio dei modelli di siti Web è che nella maggior parte dei casi sono scritti da professionisti. Un modello di sito professionale significa non solo un bellissimo e design moderno, ma anche come viene scritto il codice. Motori di ricerca guardano come è scritto il tuo sito, se il codice è ottimizzato SEO o meno, e in base a ciò abbassano o aumentano le tue posizioni nei risultati di ricerca. Pertanto, un buon sito non dovrebbe essere solo bello e moderno, il che è importante, ma anche ben scritto in termini di codice.

Scarica modelli di siti Web HTML gratuiti e crea i tuoi progetti in pochissimo tempo.

Oggi molte aziende prestano molta più attenzione alla creazione di risorse mobili di alta qualità, perché secondo gli ultimi dati, l'80% degli utenti di Internet utilizza dispositivi portatili per trovare le informazioni di cui hai bisogno. Inoltre, gli esperti di marketing si stanno preparando per un grande cambiamento nell'algoritmo di Google entrato in vigore il 21 aprile 2015. Il blog ufficiale dell'azienda dice che ora la qualità ottimizzazione mobile risorsa determinerà in gran parte la sua posizione nei risultati di ricerca.

Il prossimo aggiornamento avrà un impatto molto maggiore sul sistema di classifica rispetto alla stessa Panda o , ed è per questo che il miglioramento esperienza mobile dovrebbe essere la tua priorità assoluta per il prossimo futuro. Secondo l'articolo di Search Engine Land su questo aggiornamento, tutti i siti saranno soggetti a un rigoroso controllo della risposta ai dispositivi mobili.

Affinché tu possa preparare completamente il tuo sito per un cambiamento così importante, abbiamo selezionato per te 15 esempi stimolanti di web design mobile.

Shutterfly è un servizio online che ti consente di creare album fotografici, biglietti di auguri, lettere di invito e altro ancora. Con più persone che accedono alle loro foto sui propri smartphone ogni giorno, Shutterfly si impegna a fornire un'esperienza mobile positiva ai propri clienti.

Il sito mobile dell'azienda continua ad avere successo per due ragioni principali: rende più facile per gli utenti trovare informazioni sulle offerte e le vende attraverso bellissime immagini.

Una volta sul sito, vedrai che le sezioni del menu qui sono presentate come grandi pulsanti nella parte inferiore dello schermo. Grazie a ciò, i visitatori possono decidere molto rapidamente sulla scelta dell'opzione a cui sono interessati e ottenere ulteriori informazioni.

Ho adattato questo modello per browser standard di piattaforme come IOS(3.1+), Android(2.1+), Blackberry(6.0+), Windows Phone 7, così come Opera mobile per Android, che sta guadagnando popolarità. Voglio notare che tutti i browser standard (ad eccezione di Windows Phone 7 che ha IE9) sono basati su webkit.

Qual è la differenza tra lo sviluppo di siti desktop e siti per dispositivi mobili? Successivamente, parlerò di alcuni trucchi che aiuteranno a aggirare molti problemi.

Quale risoluzione scegliere e il meta tag viewport

Sembrerebbe che dovremmo avere una domanda su quale permesso prendere come base del nostro sito? Dopotutto, ora i dispositivi con 230x340 (ad esempio, HTC Wildfire S) e circa 800x480.960x640 (HTC Incredible S, Iphone 4) e persino 1280x720 (HTC One X) sono rilevanti. Il meta tag viewport viene in soccorso, che risolverà il problema con la risoluzione e il ridimensionamento.

• width=device-width - il valore è impostato dal dispositivo stesso
• initial-scale=1 - la scala iniziale è impostata su 1 (cioè 1:1)
• maximum-scale=1.0, user-scalable=no - il ridimensionamento è disabilitato (voglio notare che anche con questi parametri, HTC si ridimensionerà ancora in modo ostinato e gli sviluppatori hanno affermato che questo non è un bug, ma una funzionalità)

Un po' di grafica

Anche con questa gamma di risoluzioni, dovrei notare che la maggior parte dei dispositivi mobili, avendo alta risoluzione lo usano non per espandere il loro spazio di lavoro, ma per aumentare la chiarezza (ulteriori informazioni su questo). In altre parole, la loro saturazione dei pixel (DPI) è molte volte superiore a risoluzioni inferiori. Da dove viene la conclusione che i dispositivi con un PDI elevato comprimono effettivamente il sito di 2 volte per ottenere le stesse dimensioni dei dispositivi con una risoluzione inferiore (ad esempio, in Dispositivi Apple i display retina hanno 4 volte più punti sulla stessa area dello schermo, il che aumenta la nitidezza). Possiamo vedere meglio il risultato nella foto qui sotto.

Ora che sappiamo come funzionano gli schermi con DPI elevati, vale la pena pensare alla corretta visualizzazione di tutti gli elementi del nostro sito Web.
Iniziamo con elementi come font, bordi e altri elementi simili. Tutti questi elementi sono essenzialmente oggetti vettoriali che il browser può ridimensionare senza problemi, quindi non ci soffermeremo su questo.
Un'altra cosa è con le immagini e immagini di sfondo. Dopotutto, se salviamo l'immagine di sfondo in base al fatto che abbiamo 320x480, i dispositivi con un DPI più denso non potranno apparire in tutto il loro splendore davanti a noi e tutti gli sforzi per trasmettere la chiarezza e la bellezza del l'immagine finirà nel nulla, dal momento che in realtà la aumenteranno di 2 volte (e non importa quanto bene il browser si ridimensioni - la qualità viene sempre persa quando il software aumenta le dimensioni). È qui che entra in gioco l'ingegno! Provo a spiegare con un esempio. Abbiamo un sito, nell'intestazione del quale c'è un certo sfondo che occupa 320px di larghezza.Quindi, affinché i nostri schermi super nitidi visualizzino questa immagine al 100%, l'immagine originale non dovrebbe essere 320x50 ma 640x100 (esattamente 2 volte più grande) e già utilizzando CSS set background-size: 320px 50px;. Facciamo sciamanesimo simile con immagini sotto forma di img.

Ottimizzazione delle query

Poiché Android, BlackBerry, IOS e Windows Phone 7 supportano completamente l'URL dei dati, possiamo ridurre significativamente il numero di richieste implementando tutti immagini di sfondo in css. Oltre all'ottimizzazione delle query, abbiamo un enorme vantaggio grazie alla memorizzazione nella cache CSS.

Problemi con sprite e immagini

A causa del fatto che il nostro browser comprime il contenuto e ridimensiona a una o un'altra dimensione, potrebbe arrotondare in modo errato le dimensioni durante i calcoli e quindi, quando gli sprite vengono incollati pixel per pixel, verrà fuori una striscia dell'elemento successivo. Per evitare ciò, vale la pena creare uno spazio vuoto quando si incollano un paio di pixel.

Piccolo problema con i formati di immagine

Ho riscontrato anche uno spiacevole problema su alcuni dispositivi relativi ai formati immagine. Ancora una volta, farò un esempio: ci sono 2 immagini salvate usando Salva per Web in Photoshop (una delle quali è un gradiente lineare che si estende lungo l'asse Y, e la seconda è una specie di immagine che viene ritagliata con un pezzo di il gradiente, e in effetti dovrebbe rientrare in un gradiente ripetuto) ma in formati diversi (png e jpg). Quindi su alcuni dispositivi, un'immagine è più chiara e la seconda è più scura. Quindi, per risolvere questo problema, ho dovuto salvare entrambe le immagini nello stesso formato.

Nascondere la barra degli URL

Dal momento che non abbiamo molto spazio sul nostro dispositivo, non ci farà male vincere un paio di dozzine di pixel in più. E possiamo trovarli nascondendo la nostra barra degli URL. Per questo abbiamo un semplice script:

AddEventListener("load", function() ( setTimeout(hideURLbar, 0); ), false); funzione hideURLbar() ( window.scrollTo(0, 1); )

Ma noto che questo script può interferire con noi se il nostro collegamento porta a una delle ancore nuova pagina(in questo caso, passeremo al nostro elemento, e dopo aver caricato la pagina tornerà in alto), ma questo può essere facilmente evitato facendo un ulteriore controllo del nostro URL.

Effetto visivo del clic su un elemento

Ad esempio, su IOS possiamo ottenere un effetto clic con la pseudo-classe :active. Ma funzionerà anche se il nostro elemento è a fuoco durante lo scorrimento della pagina, il che non è molto bello. Pertanto, ho deciso di scrivere un piccolo script che emulerà un clic e lo annullerà durante lo scorrimento della pagina.

var scroller=falso; $("a").live("touchstart",function(event)( var elem=$(this); clickable=setTimeout(function() ( elem.addClass("active");), 100); )) ; $("a").live("touchmove",function(event)( clearTimeout(cliccabile); scroller=true; )); $("a").live("touchend",function(event)( var elem=$(this); clearTimeout(cliccabile); if(!scroller) ( elem.addClass("active"); setTimeout(function ( ) ( elem.removeClass("attivo");), 50); ) else ( elem.removeClass("attivo"); ) ));

Rimozione di bordi ed evidenziazioni da collegamenti e pulsanti

Probabilmente ogni utente ha notato che quando si fa clic su un collegamento, questo viene inquadrato ed evidenziato. Un tale effetto può rovinare notevolmente l'idea del designer. Qui viene in soccorso una sorta di ripristino degli stili (testato in tutti i browser webkit, e questi sono browser nativi IOS, Android, BlackBerry)

*( -webkit-text-size-adjust: none; /*Correzione bug in IOS con ridimensionamento in orizzontale*/ contorno: none; /*Rimuovi bordo attorno a collegamenti e pulsanti*/ -webkit-touch-callout: none; /* se necessario, disabilita l'evidenziazione del testo*/ -webkit-tap-highlight-color:rgba(0,0,0,0); /*rimuove l'evidenziazione in background di link e pulsanti*/ )

supporto fisso

Visto che ormai le tecnologie mobile stanno avanzando molto velocemente, e nel momento in cui scrivo, la percentuale di browser che non supportano il fisso tende a zero, non approfondirò troppo la descrizione. Dirò solo che per questi browser dovremmo usare iscroll . Descriverò anche un piccolo accorgimento riguardante la connessione dinamica degli script (sarà necessario per non collegare un file extra per i normali browser)

//vecchia versione di IOS che rileva var OSName="Unknown OS"; if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; var bversion=parseInt(jQuery.browser.version,10); if((OSName=="MacOS")&&(bversion

A questo esempio Ho verificato che se è un Iphone e la versione del browser è inferiore a 534 (non supporta fisso). Includo dinamicamente lo script fixing.js

CSS3

Inoltre, non dimenticare che possiamo già utilizzare alcune proprietà css3 al massimo (non dimenticare i prefissi moz-, webkit-, o-). Per WP7, sentiti libero di includere pie.htc.

Collegamento desktop iOS

Probabilmente per gli utenti IOS non sarà un segreto che in Safari sia possibile inserire un link al sito sul desktop.
Ecco un esempio di tale collegamento a Forismatic.

Sotto Esempio HTML codice per l'icona (IOS stesso la ridimensionerà, aggiungerà l'arrotondamento degli angoli), un annuncio che questo collegamento dovrebbe essere aperto come applicazione (viene eseguito a schermo intero), nonché un codice che nasconde la barra degli URL. Se lo desideri, puoi persino mostrare una finestra iniziale.

- annuncia cosa si aprirebbe a schermo intero, nasconde la barra degli URL - cambia il colore della barra di stato in nero (i valori disponibili sono di default, nero, nero-traslucido). predefinito - collegamento all'icona che viene visualizzata sul desktop.

Possiamo vedere un esempio vivente di tutto quanto sopra.