Generatore di vendite

Momento della lettura: 18 minuti

Ti invieremo il materiale:

Se il tuo sito non è stato adattato per dispositivi mobili, non c'è nulla di cui preoccuparsi, tuttavia, Yandex classifica quei siti che hanno tale adattamento più in alto nella ricerca.

Da questo articolo imparerai:

1. Qual è l'adattamento del sito per dispositivi mobili
2. Come controllarlo
3. Adattamento del sito per Google
4. Autoadattamento del sito
5. Il plugin migliore e gratuito per Wordpress
6. 6 migliori servizi per l'adattamento di siti Web per dispositivi mobili online

Perché è necessario l'adattamento mobile

Sono condizionatamente divisi in esterni e interni. In altre parole, i PF esterni sono, ad esempio, un clic su un collegamento a un sito dai risultati della ricerca, mentre il numero di pagine visualizzate, il tempo totale trascorso sul sito, sono interni.

Tieni presente che Google utilizza un sistema simile. Ma questo motore di ricerca è andato anche oltre, affermando che le risorse che hanno superato l'adattamento del sito per dispositivi mobili appariranno più in alto nei risultati di ricerca.

Successivamente, parleremo di PF interni. Pensa tu stesso, se è conveniente per un visitatore lavorare con il sito, trovare e ordinare prodotti su di esso, la probabilità che si sposti nella categoria di clienti è maggiore.

Lo stesso principio funziona per motori di ricerca: più ospiti lasciano la risorsa nei primi secondi di permanenza su di essa, minore è l'indicatore della sua conformità ai requisiti delle persone. Il rapporto tra le sessioni utente inferiori a 10 secondi e il numero totale di visite al sito è chiamato frequenza di rimbalzo.

Ad esempio, prendiamo questo indicatore di uno dei siti russi:

Guarda, se il sito non è stato adattato per dispositivi mobili, ovvero il sito viene visualizzato in modo errato su di essi, la frequenza di rimbalzo da smartphone e tablet è 2-2,5 volte superiore rispetto a un PC.

Queste cifre non solo hanno un impatto negativo sul livello di PF, ma indicano la perdita di potenziali clienti che potrebbero effettivamente pagare per servizi o beni.

D'accordo, l'aumento della frequenza di utilizzo di Internet mobile è davvero impressionante. Google Analytics ti consentirà di scoprire facilmente la percentuale di ospiti su qualsiasi risorsa utilizzando i dispositivi mobili. Per visualizzare questo indicatore, è necessario eseguire i seguenti passaggi:

Non è un segreto che i motori di ricerca si preoccupano sempre della comodità degli utenti di tablet e altri dispositivi, il che significa che rischi di rimanere senza traffico se rifiuti di adattare il sito ai dispositivi mobili.

Ricorda, a causa di questo errore, molti utenti ti lasceranno per sempre, come dimostra uno studio di Equation Research. I suoi esperti hanno scoperto che il 46% delle persone non visita più il sito in cui non era soddisfatto del livello di lavoro con i gadget mobili.

Come hai capito, di conseguenza, ti attendono tristi conseguenze: il livello di produttività della risorsa stessa diminuirà continuamente, poiché il pubblico già accumulato, accedendo da smartphone o tablet, non sarà in grado di comunicare, effettuare ordini, ricevere newsletter , eccetera.

Se non sei soddisfatto di questo sviluppo di eventi, ti consigliamo di adattare il sito ai dispositivi mobili.

Che è meglio: design reattivo o versione mobile

Per prima cosa capiamo la differenza tra questi due concetti.

Il responsive design viene utilizzato solo per conferire al sito un aspetto tale da essere adeguatamente visualizzato dal dispositivo richiesto dall'utente.

Considerando che la versione mobile è fondamentalmente nuova versione, studiati appositamente per soddisfare le esigenze degli utenti del sito che lo utilizzano da dispositivi portatili. Ora parliamo di più di entrambi i tipi.

Design adattivo

Questa opzione consente, investendo una piccola somma di denaro, di rendere il sito amichevole per l'ospite che lo utilizza dal gadget.

Infatti, quando si adatta un sito per dispositivi mobili, c'è una semplice combinazione di dimensioni della pagina, elementi del sito con le dimensioni di un determinato dispositivo. Di conseguenza, tali siti sono facili da usare, anche se è necessario essere consapevoli delle loro carenze.

Prima di tutto, è la dimensione della pagina caricata. Sebbene venga visualizzato su un dispositivo mobile, il suo peso rimarrà lo stesso. Per questo motivo, il caricamento della pagina richiederà molto tempo, poiché la velocità di Internet mobile è inferiore a quella di quella cablata e l'utente si stancherà di aspettare e chiudere la scheda.

versione mobile

La versione mobile si trova solitamente su un sottodominio di quello principale: m.site.ru, mobile.site.ru. Questa caratteristica è difficile da attribuire al positivo, se parliamo dal punto di vista della SEO, poiché in questo caso vengono utilizzati molti reindirizzamenti condizionali dalla versione principale alla versione mobile. Dopotutto, site.ru/page e m.site.ru/page dal punto di vista dei motori di ricerca rimangono pagine diverse.

Vale la pena dire che la versione mobile pesa meno, si carica più velocemente rispetto al layout adattivo, poiché qui vengono rimosse le funzioni non necessarie e il design individuale facilita l'interazione con il sito.

Ovviamente questa versione costerà di più della precedente. Per facilitare la scelta a quale delle opzioni dare la preferenza, ne evidenziamo le caratteristiche:

• Non ha senso adattare un piccolo sito per dispositivi mobili, se, ad esempio, stiamo parlando di un sito per un salone di bellezza, per questo è sufficiente un normale adattamento.
• Una versione mobile avrà bisogno di un sito potente con molte pagine caricabili. Questa opzione sarà rilevante per i media online con un pubblico di diverse migliaia di persone al giorno.

In altre parole, la scelta deve tener conto delle possibilità e delle esigenze. Sottolineiamo inoltre che entrambe queste opzioni, indipendentemente dal prezzo, risultano essere molto più redditizie per la conversione rispetto alla loro totale assenza.

Cosa ti darà l'adattamento del sito per dispositivi mobili?

, a causa dell'assenza di foto "pesanti", flash, elementi di design aggiuntivi.

Navigazione chiara e facile. Usato su dispositivi mobili le risorse sono caratterizzate da scorrimento verticale, un comodo modulo di ricerca, menu di navigazione Home, Su, Indietro. Inoltre, viene utilizzata la funzione di chiamata o il numero di telefono del contatto viene visualizzato davanti all'utente nell'intestazione del sito.

Menu convenienti, moduli. È importante che una persona possa attivare facilmente il collegamento cliccando con il dito su altri elementi del sito.

contenuto leggibile.È importante che l'ospite della risorsa non incontri difficoltà se si desidera leggere il testo.

Possibilità di trasferirsi versione completa posto. Non è possibile che il portale indirizzi automaticamente i visitatori alla pagina principale versione mobile quando provano a vedere la versione completa dallo schermo del gadget.

Funzionalità, possibilità di azioni di conversione. Non è accettabile che l'utente incontri difficoltà durante l'ordine, l'iscrizione alla newsletter, il download di documenti quando utilizza un dispositivo mobile.

Invia la tua candidatura

Come controllare la reattività del sito Web per dispositivi mobili

Verifica dell'adattamento del sito per dispositivi mobili, che consiste nel fatto che lo vedrai acceso dispositivi diversi, può essere fatto come segue:

• Quirktools.

Qui puoi vedere come apparirà il sito sugli schermi di diversi gadget. Per iniziare a utilizzare il portale è sufficiente inserire l'URL del portale nella barra degli indirizzi, selezionare il dispositivo desiderato nel menu orizzontale.

• ipadpeek.

Consente di controllare l'aspetto del sito su iPad, iPhone.

• F12.

Sempre il massimo opzione semplice rimarrà la ricezione standard: premere F12, quindi cliccare sull'icona del telefono.

Adattamento del sito web per dispositivi mobili per Google

Se vuoi adattare il tuo sito ai dispositivi mobili su Google, avrai bisogno di uno strumento gratuito sviluppatori.Google:

Qui è necessario inserire l'indirizzo della risorsa e fare clic sul pulsante "Analizza". Nel nostro esempio, il punteggio di usabilità mobile è del 49% su 100%.

Fornisce inoltre consigli su cosa è necessario modificare per adattare il sito a un dispositivo mobile, link utili in questa materia. Grazie a questi consigli, puoi facilmente ottenere un punteggio del 90%, che è il minimo per Google.

Cose che puoi fare per rendere il tuo sito mobile friendly

Imposta gli attributi del campo modulo corretti

Se il tuo sito utilizza i campi di input per nome utente/indirizzo, deseleziona la correzione automatica, abilita la capitalizzazione automatica:

Il tuo nome:

Grazie a questa tecnica, quando si adatta un sito ai dispositivi mobili, si impedirà al sistema di inserimento automatico T9 di sostituire i nomi, ad esempio " Erwan" sul " Yerevan».

Impostando l'uso automatico delle prime lettere maiuscole nei tipi di parole, salverai gli ospiti della risorsa dalla necessità di attivare costantemente la maiuscola, in altre parole verrà inserita una lettera maiuscola all'inizio di ogni parola (ad esempio " Ken brucia" si trasformerà in Ken Burns"):

Utilizza il campo e-mail se il tuo sito richiede all'utente un'e-mail in modo che non debbano digitare il simbolo @ sulla tastiera di un dispositivo mobile:

La tua email:

Impostare una larghezza adatta per i dispositivi mobili

Per fare ciò, apri il sito nel browser del tuo computer, riduci la larghezza della finestra del programma fino a quando il testo non è più leggibile. Questo ti darà la larghezza minima consentita. Imposta questo valore corrente sulla proprietà @viewport impostando il meta tag nell'intestazione della pagina:

Se accedi nuovamente al sito da dispositivo mobile, la larghezza che hai specificato verrà selezionata automaticamente, ovvero l'ospite della risorsa non sarà costretto a utilizzare lo zoom.

Nell'illustrazione seguente, viene lasciato spazio extra sul bordo destro:

E qui il valore della larghezza è scelto correttamente:

Il tuo compito diventa molto più semplice se il sito è costruito sul layout fluido ed è compatibile con tutte le dimensioni dello schermo. Ti consigliamo di sperimentare la larghezza adattando il sito ai dispositivi mobili, in modo da consentire alla tua risorsa di avere un bell'aspetto e rimanere leggibile. Valore selezionato e impostato nel meta tag.

Imposta la larghezza dell'immagine al 100%

Tieni presente che alcune delle immagini saranno eccessivamente larghe dopo aver regolato il tuo sito alla larghezza selezionata. In precedenza, non dovevo affrontare un problema del genere, poiché i monitor desktop hanno una risoluzione abbastanza ampia, molte immagini si adattano alla larghezza:

Puoi evitare questo problema impostando una larghezza massima del 100% per le tue immagini. Grazie a ciò, se le immagini sono troppo grandi per lo schermo del gadget, verranno ridimensionate automaticamente. Non dimenticare di includere il codice qui sotto nel CSS del tuo sito:

img (larghezza massima: 100%)

Se hai impostato la tua immagine di sfondo su un'immagine diversa dal tag img, devi solo impostare proprietà CSS dimensione dello sfondo da contenere. Quindi la dimensione dello sfondo cambierà se la risoluzione dello schermo non è sufficiente per il rendering con una scala del 100%:

.header ( background: url(header.png) 50% no-repeat; background-size: contiene)

Non preoccuparti che l'immagine perderà nitidezza: i moderni dispositivi mobili non lo consentiranno. Il fatto è che quando un visitatore del sito utilizza lo zoom, il browser aumenta la nitidezza dell'immagine. Tuttavia, dovresti assicurarti che il tuo portale non abbia la proprietà user-scalable=no nel meta tag, poiché non consente lo zoom:

Imposta la larghezza dei campi di input su 100%

Dopo aver impostato la larghezza dell'immagine con la proprietà max-width, fai lo stesso per i campi di input. Per fare ciò, aggiungi semplicemente al file CSS - il file del tuo sito:

input, area di testo (larghezza massima: 100%)

Ora i campi di input non scompariranno dallo schermo quando si utilizza il sito da un dispositivo mobile.

Prestare attenzione quando si utilizza Disabilita per i pulsanti di conferma dell'invio del modulo

Se l'invio smette di essere attivo dopo il primo clic sul pulsante, non ci saranno più clic sul pulsante di invio del modulo.

Ma ricorda che rispetto ai PC desktop, i dispositivi mobili spesso perdono la connessione a Internet.

Pertanto, quando si rende inattivo un pulsante, si impedisce all'utente di fare nuovamente clic su di esso e il problema potrebbe non essere solo una perdita di rete. Quindi, il browser di un tale dispositivo si chiuderà quando chiamata in arrivo, e apparirà il problema di un pulsante bloccato, perché non ti permetterà di inviare il modulo dopo averlo compilato.

Se decidi di disattivare il pulsante di invio, fallo per alcuni secondi durante l'adattamento del sito ai dispositivi mobili.

Per le file lunghe, usa il ritorno a capo automatico

A volte è necessario utilizzare lunghe file: questo include esempi di codice, collegamenti, numeri di conto bancario. Se il portale non è abbastanza largo per l'intera linea, potrebbe finire fuori dalla schermata del gadget:

Gestisci questo word-wrap, con il quale la linea andrà a capo quando raggiunge il bordo dello schermo. Quindi l'ospite del sito potrà vedere tutte le informazioni in una volta senza ricorrere allo scrolling:

Qui avrai bisogno di una password:

435143a1b5fc8bb70a3aa9b10f6673a8

Attenzione agli spazi

Siamo tutti abituati al fatto che ogni cinque caratteri sono separati da spazi se costituiscono una lunga stringa. Dopotutto, sarà più facile per una persona ricordarli per ulteriori input in un'altra applicazione.

Ma notiamo che è improbabile che un utente intelligente accetti di inserire i caratteri da solo: conosce gli appunti. È vero, gli spazi posizionati da te, dovrà eliminarli manualmente. Considera se è conveniente pulirli su un cellulare o un tablet?

Per semplificare la vita agli utenti, quando adatti il ​​sito ai dispositivi mobili, sostituisci gli spazi con i rientri:

Il tuoil codice: 435143a1b5fc8bb

Come puoi vedere, rimangono degli spazi tra i personaggi, ma non è necessario affrontarli durante la copia. E fa risparmiare tempo!

Vantaggi delle query sui media

Puoi creare stili personalizzati per un sito quando viene visualizzato su dispositivi mobili (o in una piccola finestra del browser), mentre su un PC desktop rimane l'aspetto familiare di una pagina web. Ciò richiede stili di destinazione nelle query multimediali, ecco un esempio:

Evitare il posizionamento fisso

Se l'intestazione o la barra laterale sono posizionate in modo fisso e la proprietà CSS posizione è impostata su fissa, ti consigliamo di fare attenzione.

In questo caso, durante la creazione del markup, la dimensione del tuo titolo aumenterà in proporzione alla pagina, ovvero potrebbe occupare anche l'intero schermo:

Il modo più semplice per adattare il sito ai dispositivi mobili è rifiutare posizioni fisse quando visualizzate su dispositivi mobili.

Un esempio mostra come funziona in pratica:

Usa caratteri standard

Grazie ai caratteri personalizzati, il sito sembra costoso e professionale. Ma allo stesso tempo, gli ospiti devono caricare file con caratteri: questa operazione viene eseguita prima che l'utente possa vedere il sito.

In genere, tali file sono caratterizzati da un volume elevato, ovvero su un dispositivo mobile impiegheranno molto tempo per il download. E cosa vedrà l'ospite del portale? Spazio vuoto:

Adattando il sito ai dispositivi mobili con Google Font Loader, durante il caricamento della versione personalizzata verrà visualizzato del testo con un font standard. Successivamente, rigenera la pagina e l'ospite vede il carattere originariamente selezionato.

Ma dovrai scrivere due versioni delle regole CSS: una per il carattere predefinito e una per quello scaricato.

Credimi, una soluzione del genere sarà ottimale: una persona leggerà tutto ciò di cui ha bisogno durante il download dei caratteri e quindi sarà in grado di vedere il design. Usa il seguente codice:

Sottolineiamo: il selettore di classe .wf-opensans-n4-active viene aggiunto dinamicamente al codice del sito dal Font Loader, ma solo quando il font viene caricato.

Offri agli utenti contenuti leggibili

In genere, gli utenti di dispositivi mobili utilizzano Internet per uno scopo specifico. Ad esempio, se desideri confrontare il costo delle merci in diversi negozi, trova i contatti del salone, le istruzioni per l'uso del farmaco.

Pertanto, appariranno sul tuo sito quando saranno attratti dal titolo. Successivamente, è importante che scoprano contenuti preparati per la lettura da un piccolo schermo.

Per descrivere questa regola in inglese c'è una parola piuttosto capiente "snackable" (dall'inglese "snack" - snack). Quindi, il contenuto per tali utenti dovrebbe essere esattamente spuntino, cioè comodo per una lettura veloce, scrematura in movimento.

Descriviamo le caratteristiche principali che devi considerare quando adatti un sito per dispositivi mobili per lettori di schermo:

1. Inizia con un titolo breve, conciso e accattivante. Ti consigliamo di comporlo entro 10 parole e di utilizzare un carattere grande.
2. Suddividi il testo in blocchi, ognuno di essi deve iniziare con un breve sottotitolo informativo che si distingua dal contesto generale.
3. Inserire elenchi numerati/puntati nel testo, per consentire ai tuoi utenti di dispositivi mobili di trovare rapidamente ciò di cui hanno bisogno.
4. Applicare inserti visivi strutturare ulteriormente le informazioni e semplificare la percezione.

Personalizza le email per la lettura su piccolo schermo

I seguenti strumenti di mailing ti aiuteranno ad adattare la posta elettronica alla lettura dagli schermi dei dispositivi mobili:

• MailChimp.
• Weber.
• Contatto costante.

Sostituisci i link con i pulsanti "tappabili".

Non appena gli utenti passano da dispositivi mobili a siti che non sono adatti a loro, si diagnosticano la "sindrome del dito grasso". Non può essere trovato nella terminologia medica; questo è gergo per specialisti in questo campo, che descrive errori quando si cerca di colpire un elemento specifico con un dito.

Quale dimensione sarà ottimale per un pulsante, un elemento di navigazione, in modo che una persona non abbia problemi con esso? Ecco alcuni suggerimenti su come adattare il tuo sito ai dispositivi mobili:

• Apple ritiene che la dimensione ottimale per i pulsanti, gli elementi di navigazione inizi a 44 per 44 pixel.
• Nokia consiglia una dimensione minima di 48 x 48 pixel o 0,7 x 0,7 cm durante la creazione di questi elementi.
• Microsoft consiglia pulsanti 34 per 34 pixel.

Ricorda, sarà difficile per gli utenti mobili utilizzare il sito se il tuo testo è saturo di link vicini tra loro.

Nell'esempio da noi mostrato, il menu della versione completa del sito è realizzato sotto forma di link. Qui sarà estremamente difficile arrivare immediatamente alla sezione desiderata su un tablet da dieci pollici.

Per ottenere i cosiddetti pulsanti ottimizzati per dispositivi mobili, elementi di navigazione, puoi scegliere due modi: ordinarli con un design individuale o utilizzare gli strumenti dei modelli. Se hai scelto WordPress, ti consigliamo di utilizzare i seguenti plugin:

• Scatole e pulsanti colorati straordinari. Con esso, puoi creare comodi pulsanti di diverse dimensioni, colori e menù contestuale adattato per utenti mobili.
• Menu reattivo. Questo plugin ti permetterà di creare menù conveniente"Hamburger".

Il miglior plugin gratuito per l'adattamento mobile del sito per Wordpress

jetpack

Parliamo innanzitutto del metodo più semplice per adattare un sito per dispositivi mobili su WordPress stesso, pur avendo il massimo alto livello efficienza. Il toolkit JetPack eseguirà questo compito con il minimo sforzo da parte tua: basta premere un pulsante.

E molto probabilmente è già installato tra i tuoi plugin di base. In tal caso, fai clic sul collegamento "JetPack" nel menu di amministrazione del sito, vai alla pagina dei moduli. Qui devi solo attivare "Tema mobile".

MobilePress

È uno dei plugin più comuni ma semplici. Viene fornito con due temi ed è utile per la creazione di ulteriori temi da parte di sviluppatori mobili.

wptouch

Questa opzione è considerata la successiva nell'elenco degli strumenti gratuiti di adattamento di siti Web per dispositivi mobili in termini di efficienza. Secondo le statistiche, è stato scaricato oltre 4,3 milioni di volte.

Il suo vantaggio è che in un paio di minuti puoi creare un sito mobile bello e veloce senza nemmeno scrivere una riga di codice. Nella versione a pagamento, chiamata WPtouch Pro, otterrai un pannello di amministrazione separato, supporto nel sistema di ticket.

Plugin per dispositivi mobili Wapple Architect

Questo plug-in è scritto nel linguaggio di markup WAPL, creato appositamente per la personalizzazione, il rendering e la distribuzione di contenuti Web su vari dispositivi e piattaforme.

Utilizza la propria API per ogni gadget e questa opzione è molto migliore del metodo di sniffing, poiché non tocca la struttura degli indirizzi del sito desktop. Si scopre che questo plugin è facile da usare e una soluzione abbastanza semplice.

Rilevatore mobile

Questa opzione di adattamento del sito per dispositivi mobili è dotata del riconoscimento automatico di telefoni cellulari convenzionali, smartphone, grazie al quale il sito viene caricato in una versione compatibile specificamente con il dispositivo dell'utente, ovvero risoluzione dello schermo, diagonale, ecc. .

Ci sono sette opzioni di temi mobili preinstallate in totale. Inoltre, Mobile Detector modifica in modo indipendente le dimensioni e la risoluzione delle immagini in base alle impostazioni di visualizzazione. Offre anche i propri widget, la raccolta di statistiche.

Vantaggi chiave:

1. Riconoscimento automatico dei gadget utilizzando un database di oltre 5.000 gadget.
2. La capacità di distinguere i telefoni standard dai dispositivi avanzati.
3. Preparazione di statistiche sugli utenti mobili, che includono indicatori come il numero di visite uniche, il traffico di ricerca, ecc.

WP Mobile Edition

In effetti, questa è una copia della versione presentata prima: ha gli stessi vantaggi, opzioni, ma, tra le altre cose, supporta il sistema di commenti di Disqus, carta mobile XML con il proprio generatore per i siti.

Quest'ultimo può essere utile nell'ottimizzazione dei motori di ricerca. Si noti che questo plug-in, progettato per adattare il sito ai dispositivi mobili, genera una versione mobile su un sottodominio del tipo m.facebook.com, che ottiene la memorizzazione nella cache accelerata e il supporto per i cookie mobili.

Pacchetto per dispositivi mobili WordPress

Questa opzione di adattamento del sito ai dispositivi mobili supporta la mappatura dei domini, agenti di ricerca che consentono di identificare i dispositivi mobili più diffusi, consentendo di visualizzare i contenuti con la risoluzione e la qualità di cui hanno bisogno. Vengono inoltre fornite combinazioni di colori personalizzabili per un singolo tema.

Adeguamento delle tabelle del sito per dispositivi mobili

Non è un segreto che la cosa più difficile quando si adatta un sito per dispositivi mobili, ovvero per risoluzioni diverse, è lavorare con le tabelle. Inoltre, questo è più rilevante per le tabelle con una grande quantità di informazioni.

Parliamo di due opzioni di layout per una tabella adattiva.

Prima di tutto, diamo un'occhiata all'aspetto della tabella:

Layout della tabella responsivo Bootstrap

Ad essere onesti, è difficile definire un tavolo del genere davvero adattivo. Sembra organico su un dispositivo mobile e il layout del sito non "scorre". Questa opzione è adatta se non hai molte tabelle sul sito, quindi collegare il plugin, scrivere stili aggiuntivi sarà una perdita di tempo. Questo è il modo in cui Bootstrap lo usa.

Per mettere in pratica ciò, la tabella è racchiusa in un div con una larghezza massima del 100%, overflow: auto.

Inoltre, quando si adatta il sito ai dispositivi mobili, è possibile scegliere l'altezza massima, correggere l'intestazione della tabella se è lunga.

Layout di un tavolo veramente reattivo

Ora discutiamo della situazione in cui il tuo sito è davvero pieno di tabelle: qui vale la pena ricorrere al plug-in Footable.

Innanzitutto è necessario collegare il plugin (scaricare su GitHub / connettersi da CDN), inizializzarlo:

Ma c'è una sottigliezza nell'adattare il sito ai dispositivi mobili: lo script considera la larghezza della tabella e non la larghezza del viewport. Poiché dobbiamo correggere questo errore, è importante "modernizzare" un po' lo script:

Per fare ciò, nell'inizializzazione, specifichiamo la classe table o solo il tag table, se vogliamo che tutte le tabelle del sito siano adattive.

Cosa intendiamo? Sui tablet, le colonne "RAM", "Diagonal", "PPI", "Batteria" saranno nascoste. Se utilizzato su uno schermo del telefono ancora più piccolo, anche "Prezzo" si nasconderà.

I punti di interruzione possono essere impostati durante l'inizializzazione:

Si scopre che nell'intervallo 0-720, il cellulare obbedisce alla regola, 720-1024 - tablet e sopra 1024 - desktop. È possibile creare più regole se necessario.

Hai anche la possibilità di espandere una colonna specifica per impostazione predefinita. In questo caso, specifica l'attributo data data-expanded="true":

Non abbiamo parlato di tutte le funzionalità del plugin, ma basterà questo blocco per creare tabelle adattive.

Adattamento sito web per dispositivi mobili online: 6 migliori servizi

1. mobiSite Galore

Questo servizio di adattamento del sito ai dispositivi mobili è giustamente considerato l'editor di siti web mobile più semplice da gestire. Secondo i suoi creatori, ci vorranno solo 54 minuti per sviluppare una versione mobile completamente funzionale del sito web.

Si noti che la maggior parte dei servizi esistenti sono finalizzati al funzionamento con gli smartphone, mentre mobiSiteGalore consente di preparare siti per telefoni meno recenti.

1. MobStac

Con MobStac ottieni un sito web mobile preparato con HTML5. Inoltre, hai la possibilità di apportare modifiche alle impostazioni o scegliere un modello specifico per modificare il design, il che non sarà difficile.

Sottolineiamo che MobStac è l'unico servizio esistente che offre un piano di monetizzazione del sito Web mobile integrato. Il suo aspetto negativo sta nel fatto che il servizio è ancora in versione beta, ma puoi ricevere un invito e quindi registrarti.

1. Mofuse

Qui sarà possibile sviluppare una versione mobile del sito Web utilizzando due approcci: fai tutto da solo con l'aiuto di mofuse o adatta il sito ai dispositivi mobili ordinandolo da un team di specialisti.

Nel primo caso hai maggiori opportunità nel campo del design, mentre devi pagare mensilmente solo per l'operatività del servizio. Se assumi specialisti, tutto il lavoro ricadrà sulle loro spalle.

1. App per dispositivi mobili America

Questa opzione fornisce un aspetto SEO migliorato al tuo sito web. Grazie alle sue capacità, sarai un passo avanti rispetto ai concorrenti i cui portali non hanno ancora nemmeno una versione mobile. Durante la preparazione di questo testo, l'applicazione supportava dispositivi iPhone, Blackberry e Android.

1. bMobilitato

Egli consentirà breve termine preparare una versione mobile del sito web. L'applicazione è caratterizzata da una rapida conversione con impostazioni avanzate, che, tra l'altro, consentono di modificare il design.

Secondo gli sviluppatori, il database bMobilized supporta oltre 13.000 modelli di dispositivi mobili, inclusi i marchi attualmente popolari.

Ma se sei preoccupato per il costo dell'adattamento di un sito per dispositivi mobili, questo servizio fa per te, perché più siti web ospiti attraverso di esso, più sconti ottieni. In altre parole, bMobilized sarà quasi l'ideale per i proprietari di una rete di siti che devono essere adattati ai dispositivi mobili.

1. Mobilitare

Mobify riconosciuto il miglior servizio per chi è legato all'e-commerce. Offre funzionalità HTML5 ai proprietari e il suo team di sviluppo, in base ai tuoi desideri, crea il tuo sito Web mobile.

Come dimostra la pratica, non ci vogliono più di tre settimane per creare un negozio di elettronica completamente funzionante dalla fase dell'idea. Inoltre, hai l'opportunità di immergerti nel suo sviluppo.

Se sei riuscito a provare tutti i metodi sopra descritti, ma non sei ancora soddisfatto del risultato, è tempo di ricorrere all'aiuto di professionisti.

Array ( => 21 [~ID] => 21 => 28/09/2019 13:01:03 [~TIMESTAMP_X] => 28/09/2019 13:01:03 => 1 [~MODIFIED_BY] => 1 => 21/09/2019 10:35:17 [~DATE_CREATE] => 21/09/2019 10:35:17 => 1 [~CREATED_BY] => 1 => 6 [~IBLOCK_ID] => 6 => [~IBLOCK_SECTION_ID] => => Y [~ACTIVE] => Y => Y [~GLOBAL_ACTIVE] => Y => 500 [~SORT] => 500 => Articoli di Dmitry Svistunov [~NAME] => Articoli di Dmitry Svistunov => 11076 [~IMMAGINE] = > 11076 => 7 [~LEFT_MARGIN] => 7 => 8 [~RIGHT_MARGIN] => 8 => 1 [~DEPTH_LEVEL] => 1 => Dmitry Svistunov [~DESCRIPTION] => Dmitry Svistunov => text [~DESCRIPTION_TYPE ] => text => Articoli di Dmitry Svistunov Dmitry Svistunov [~SEARCHABLE_CONTENT] => Articoli di Dmitry Svistunov Dmitry Svistunov => statyi-dmitriya-svistunova [~CODE] => statyi-dmitriya -svistunova => [~XML_ID] => => [~TMP_ID] => => [~DETAIL_PICTURE] => => [~SOCNET_GROUP_ID] => => /blog/index.php?ID=6 [~LIST_PAGE_URL] => /blog/index.php?ID=6 => /blog/list.php? SECTION_ID=21 [~SECTION_PAGE_URL] => /blog/list.php?SECTION_ID=21 => blog [~IBLOCK_TYPE_ID] => blog => blog [~IBLOCK_CODE] => blog => [~IBLOCK_EXTERNAL_ID] => => [ ~ID_ESTERNO] =>)

Responsive è un sito che viene visualizzato correttamente su qualsiasi dispositivo adattandosi dinamicamente alle diverse dimensioni della finestra nel browser.

Il compito dell'adattabilità è la visualizzazione universale del sito su dispositivi di ogni tipo e formato, senza creare versioni separate del sito per ogni gadget.

Secondo uno studio di StatCounter, nel 2016 il 51,3% degli utenti accedeva quotidianamente al web utilizzando i gadget mobili: le uscite da smartphone sono state il doppio rispetto ai tablet. Le statistiche di MobilizeToday.ru hanno mostrato che il 46% degli utenti non ha reinserito una risorsa con una navigazione non intuitiva, il 23% degli utenti di solito ha lasciato un sito del genere nel primo minuto e solo il 31% ha continuato a lavorarci.

Questi dati dimostrano che i gadget e Internet mobile sono diventati parte integrante del tempo libero e del lavoro dell'utente. Se hai la tua risorsa web con analisi, potresti vedere che il traffico da qualsiasi dispositivo mobile raggiunge in media fino al 45% del traffico totale.

Una delle opzioni per rendere più efficiente il lavoro con la tua risorsa è prevedere il lancio della sua versione adattiva. Il significato del design adattivo è la corretta visualizzazione della risorsa per tutti gli utenti mobili. Il termine "design di siti Web reattivi" è stato utilizzato per la prima volta nel 2010 in un articolo dello sviluppatore Ethan Marcott e, alcuni anni dopo, il layout reattivo è stato introdotto nei siti Web di numerose aziende innovative.

Come si forma il prezzo per la creazione di un adattivo?

1. La versione responsive fornisce 3 modi chiave per posizionare gli elementi: smartphone, tablet e desktop. Per loro vengono anche pensate le regole per cambiare il sito per altri formati di gadget, orientamenti orizzontali e verticali.
2. Il costo della raffinazione dell'adattabilità dipende dalla progettazione esistente e dal livello di layout della risorsa. Esistono tipi di design che si adattano facilmente ai dispositivi mobili, ma capita che per adattarsi sia necessario creare un sito quasi nuovo.
3. Non esiste un valore esatto per l'adattativo. Il prezzo per la creazione di una versione adattiva con un elenco base di opere è indicato nella pagina della nostra azienda.

Sito responsive e versione mobile: differenze principali

1. Il sito mobile deve essere lanciato singole applicazioni per ogni tipo sistema operativo. Pertanto, il prezzo per lo sviluppo di una versione mobile è superiore a quello adattivo.
2. Per utilizzare l'app, è necessario scaricarla. Il layout reattivo non richiede alcuno sforzo aggiuntivo da parte dell'utente.
3. divide il traffico in: traffico del sito Web più traffico dell'applicazione, che riduce le metriche del traffico del sito Web. L'adattivo ha lo scopo di risparmiare l'intero volume di traffico.
4. La versione mobile implica la necessità di sincronizzare il contenuto del sito principale con il contenuto dell'applicazione. E questo richiede più tempo e risorse tecniche.
5. Design mobile- minimizzazione degli elementi grafici per aumentare la velocità di download (è maggiore rispetto alla versione adattiva).

La creazione di un sito adattivo consente di rendere la risorsa flessibile per l'utente ed elimina la necessità di personalizzare il sito per ogni singolo gadget. L'adattabilità del sito consente di adattarlo automaticamente alle dimensioni del browser, ovvero di renderlo universale. Navigare sul web da qualsiasi dispositivo, sia esso smartphone, tablet o TV, diventa quasi identico.

I vantaggi della creazione di un sito Web reattivo non finiscono qui. Elenchiamo i principali.

• Redditività: l'adattamento del sito Web avrà un costo inferiore rispetto alla creazione di un'applicazione mobile.
• Praticità: lo sviluppo di siti adattivi presuppone che tutte le pagine del sito siano disponibili allo stesso URL. E questo, a sua volta, ti salverà dai problemi in materia di promozione SEO.
• Integrità: creare un sito web responsive significa mantenerne la struttura e il design riconoscibile per l'utente di qualsiasi dispositivo.
• Redditività - ci sono sempre più utenti Internet ogni anno, il che significa che la presenza della risorsa aumenterà in futuro, aumentando il reddito dell'azienda.
• Lealtà: un utente moderno, scegliendo i siti in una direzione, si fermerà a un'opzione più conveniente, ovvero con la possibilità di adattarsi al suo gadget.
• Classificabilità: creare un sito Web reattivo significa aumentare le sue possibilità di entrare nei primi risultati di ricerca. A proposito, dal 2015, i sistemi di Google hanno privilegiato le risorse degli adattamenti. Per aumentare il ranking di un progetto web, puoi ordinare un perfezionamento di adattabilità.

Come creare e perfezionare l'adattabilità - 5 passaggi fondamentali

1. Regolazione della risoluzione dello schermo. La progettazione di un sito Web per ogni dispositivo è piuttosto problematica e richiede tempo. È qui che il perfezionamento adattivo del sito, vale a dire il layout flessibile, può venire in soccorso. Queste informazioni sono dettagliate in "Flexible Web Design: Creazione di layout liquidi con CSS" di Zoe Mikli Gyllenwater.
2. Flessibilità dell'immagine—- un modo per rendere reattivo un sito web. Il layout reattivo implica l'utilizzo di attributi e altre funzionalità CSS per ridimensionare le immagini.
3. Immagini reattive. Per fare ciò, puoi usare la tecnica Filament Group, che comprime le immagini per .

1. Visualizzazione del contenuto opzionale a, o compressione e riposizionamento di elementi. La funzione li rende compatti per piccoli schermi, semplifica la navigazione, sostituisce gli elenchi con colonne per una migliore presentazione dei contenuti.
2. Impaginazione personalizzata- viene implementata la possibilità di creare un sito adattivo modificando la disposizione degli elementi della pagina file di sistema con stili.
3. Implementazione di media query o @media. Consente, a condizione che la dimensione dello schermo sia inferiore a quella specificata, di applicare la regola CSS annidata nel codice.

Caratteristiche dello sviluppo del design adattivo in KOLORO

L'agenzia KOLORO offre i servizi di creazione di un sito adattivo per dispositivi mobili, oltre a perfezionare il sito per aumentare l'adattabilità.

I programmatori, insieme ai marketer dell'azienda, progetteranno un sito web adattivo che farà risparmiare denaro nella fase di sviluppo del progetto e aumenterà la conversione della tua risorsa.

In KOLORO, puoi non solo ordinare la creazione di un sito web adattivo chiavi in ​​mano, ma anche modificare una risorsa esistente, tenendo conto dei tuoi desideri e modifiche.

Avete domande? Raccontaci il tuo progetto e ricevi subito una consulenza gratuita!

Come viene visualizzata la tua pagina sul cellulare?

Vai all'editor di pagina e fai clic su "Impostazioni adattive" nella barra in alto. In questa finestra attiviamo e disattiviamo la visualizzazione della pagina per i dispositivi selezionati.
Cambiamo le modalità di adattabilità e vediamo come apparirà la pagina nell'editor e in modalità anteprima.

Nell'editor:

In anteprima:

Come impostare la reattività di un singolo widget?

L'adattabilità di alcuni widget può essere configurata separatamente. Configuriamo la visualizzazione dei widget "Colonne", "Immagine", "Pulsante" e "Testo" sui dispositivi mobili.

Widget Colonne

Nella sezione impostazioni, abilita e disabilita la visualizzazione delle colonne in verticale per dispositivi mobili. Su altri dispositivi, gli altoparlanti verranno impostati automaticamente in orizzontale.

Widget immagine

Imposta una dimensione dell'immagine personalizzata per i dispositivi mobili. Per fare ciò, vai alle impostazioni del widget e abilita "Dimensioni personalizzate per telefoni".

Pulsante Widget

Specificando "Posizione speciale per telefoni", cambiamo l'allineamento del pulsante sul telefono: sinistra, centro, destra o allungato in larghezza.

Widget di testo

Il testo si allunga automaticamente all'interno del suo widget. Per impostazione predefinita, l'allineamento sul dispositivo mobile è impostato su centrato: questa impostazione può essere disattivata e attivata.
Puoi anche impostare la dimensione del carattere per diversi tipi di dispositivi.
E imposta i rientri.

Come nascondere un widget o una sezione?

Widget e sezioni su cui non devono essere visualizzati determinati dispositivi, può essere nascosto.

Importante: se la funzione “nascondi widget” è attiva, deve essere abilitata nell'adattabilità per dispositivi mobili. In caso contrario, verrà visualizzata la versione reattiva alla larghezza più vicina.

Se nascondi la sezione mobile e dimentichi di abilitare la reattività, quando accedi alla pagina, verrà visualizzata la versione tablet.

Nascondi il widget

Nascondi il widget "Immagine" e il widget "Testo" per gli schermi larghi. I widget verranno mostrati solo su dispositivi mobili, tablet e laptop, per i dispositivi widescreen i widget saranno nascosti anche nell'editor.

Nascondere una sezione

Ad esempio, nascondiamo la prima sezione per gli schermi larghi.

Menù mobile

Utilizziamo il widget “Menu mobile” per una facile navigazione sui dispositivi mobili. Sugli schermi larghi, il menu apparirà come normale.

Come installare il menu sul cellulare?

Aggiungiamo un menu mobile alla sezione, rimuoviamo il menu integrato da esso e spostiamo il nostro menu sul widget Menu mobile. Resta da configurare la visualizzazione del menu sulla versione mobile e la posizione dei pulsanti. Invece di un'iscrizione, abbiamo posizionato un logo.

Possibili errori: parallasse - modifica della posizione visibile dell'oggetto rispetto allo sfondo distante a seconda della posizione dell'osservatore, non destinato ai dispositivi mobili.

La pagina dei contatti è di grande importanza, quindi il suo design dovrebbe ricevere un'attenzione particolare. Più comoda è la pagina dei contatti, più opportunità si aprono per il proprietario del sito. La pagina dei contatti, se opportunamente progettata, può influenzare molto bene il tasso di conversione: se l'utente può contattare facilmente il gestore o l'amministratore del sito, allora avrà un'esperienza di interazione positiva. Più semplice è il processo, meno l'utente deve compilare campi o moduli, migliore è la conversione.

Una buona pagina di contatto può migliorare un sito perché crea le condizioni per un buon rapporto tra i visitatori e il proprietario del sito. Non importa che tipo di sito sarà, può essere un negozio online, un portale di notizie o un servizio web: il feedback è estremamente importante.

Nonostante ciò, molti designer sottovalutano il valore di una pagina di contatto ben progettata concentrandosi sul design delle pagine di contenuto principali.

Succede che l'utente debba contattare rapidamente il proprietario del sito o contattare l'assistenza clienti. Tuttavia, non succede nulla, anche se utilizzi la ricerca sul sito. A volte le informazioni necessarie sono presenti sul sito, ma sono “nascoste”, perché il designer non ha curato la corretta navigazione e l'utente semplicemente non vede il link desiderato. L'utente disperato è già pronto per fare una telefonata, ma non riesce nemmeno a trovarla.

Le aziende e i servizi web che pongono molta enfasi sulla progettazione delle pagine dei contatti sono molto attenti. Semplicemente perché questa pagina non contiene solo informazioni di contatto: contiene informazioni di cui l'utente ha bisogno ed è interattiva. E, soprattutto, una buona pagina di contatto incoraggia l'utente a interagire con il sito ancora e ancora.

La pagina dei contatti è una sorta di piattaforma di comunicazione. Se il proprietario del sito consente ai clienti di esprimere la propria opinione, questo è già un invito al dialogo. Gli sviluppatori Web e gli utenti possono trarre vantaggio da questa collaborazione ed è per questo motivo che deve essere progettata correttamente.

Come sapete, la funzionalità nel design è uno dei fattori chiave. La pagina dei contatti contiene informazioni importanti, ma non ce ne sono troppe, il che a volte può portare a una valutazione errata della funzionalità. Il proprietario del sito pensa che se ha inserito l'indirizzo nella pagina E-mail e un telefono, basta. A volte ha ragione.

Tuttavia, il doppio controllo della funzionalità può fare più bene che male. I collegamenti interrotti o le pagine sovraccariche di informazioni sono tutti dannosi per il coinvolgimento. Il proprietario del sito potrebbe non ricevere un messaggio importante, ma il peggio accadrà se fornisce informazioni obsolete o imprecise. Quando si progetta una pagina di contatto, prima di tutto, è necessario pensare agli utenti, perché dopotutto questa pagina è creata appositamente per loro.

Posizione

È fondamentale assicurarsi che la pagina dei contatti sia sempre disponibile per gli utenti. Aspetto esteriore un sito, anche con un design esclusivo, non significa nulla se gli utenti non riescono a trovare la pagina dei contatti. A volte devi progettare moduli di contatto piuttosto complessi, quindi devi prenderti cura delle istruzioni in anticipo. Sarà più facile per gli utenti contattare il proprietario del sito se dispongono di una guida passo passo.

Per un designer che progetta un sito web, è importante ricordare due punti:

• La navigazione principale dovrebbe sempre includere una pagina di contatto
• Gli utenti dovrebbero trovare la pagina dei contatti dalla prima visita al sito, indipendentemente dalle pagine interne su cui atterrano

Sulla base dell'esperienza che i designer hanno avuto, gli utenti tendono a cercare le informazioni di contatto sul lato destro della pagina, quindi ha senso mettere lì il link "Contattaci". Allo stesso tempo, è necessario ricordare che queste informazioni sono di secondaria importanza per l'utente, quindi non dovresti rendere questa sezione del sito troppo evidente o invadente. Il collegamento alla pagina dei contatti, che si trova nell'angolo in alto a destra della pagina, funziona meglio. E, peggio di tutto, il collegamento nel menu a discesa, poiché gli utenti potrebbero semplicemente non notarlo.

Semplici moduli di contatto

Per i siti commerciali, la pagina dei contatti è molto importante, come accennato in precedenza. Anche se potrebbe non essere bello come le altre pagine del sito, dovrebbe essere semplice, intuitivo e comprensibile. Se le informazioni non sono strutturate correttamente, funzionano male o sono fuorvianti, è improbabile che il proprietario del sito sia in grado di costruire relazioni a lungo termine con i propri clienti.

Capita spesso che un utente che vuole lasciare un messaggio lasci il sito perché non può compilare il form di contatto. O non vuole se è troppo lungo o complicato. Oggi gli utenti non vogliono perdere tempo a compilare moduli dettagliati, quindi vale la pena considerare di semplificarli. Più semplice è il modulo, meglio è, anche per l'esperienza dell'utente, quindi è necessario concentrarsi sulla raccolta delle informazioni di base.

Formulazione esatta

Se parliamo di siti ufficiali, allora su tutte le pagine, compresa la pagina dei contatti, è necessario attenersi a dichiarazioni chiare e precise sui vantaggi che l'utente riceverà diventando cliente dell'azienda. Cosa serve? Eliminare tutte le informazioni non necessarie è il modo più efficace per attirare e mantenere l'attenzione. I dati ben riepilogati dovrebbero essere concisi in modo che le persone possano trovare facilmente ciò di cui hanno bisogno.

Inoltre, non dimenticare la componente visiva. E non si tratta solo di design attraenti dei moduli di contatto. Se l'azienda ha un indirizzo fisico, puoi aiutare gli utenti posizionando una mappa nella pagina dei contatti. Per le aziende con sede a grandi città, è molto importante spiegare agli utenti come sarà più comodo per loro raggiungere il proprio ufficio, negozio o magazzino.

Reattività delle pagine di contatto

Per qualsiasi attività online, la reattività è tutto. Questa è una regola dura e veloce, senza eccezioni. Poiché Internet si sviluppa a un ritmo rapido e sempre più nuovi dispositivi appaiono sul mercato, ciò significa che le informazioni di contatto dovrebbero essere disponibili indipendentemente dal browser o dal dispositivo utilizzato da una persona. Oggi è molto facile perdere la concorrenza: basta non ottimizzare la pagina dei contatti per la visualizzazione sui dispositivi mobili.

Componenti integrali

Cosa c'è di meglio: un indirizzo email o un modulo di contatto? Gli utenti hanno bisogno modi semplici collegamenti con i fornitori dei servizi di cui hanno bisogno, quindi è necessario incontrarli a metà strada. Puoi concentrarti sulla comunicazione via e-mail o pubblicare un modulo di contatto: ogni metodo ha i suoi pro e contro.

Moduli di contatto

• Il modulo di contatto non dovrebbe costringere gli utenti a passare a un'altra pagina
• Il modulo di contatto non è destinato a essere creato account oppure accedi tramite e-mail
• Il modulo dovrebbe avere una funzione di completamento automatico, se possibile.
• Il modulo di contatto dovrebbe avere funzionalità per l'invio di messaggi e notifiche

E-mail

• La comunicazione e-mail deve essere sicura per l'utente
• Tutti i dati inviati dovrebbero essere salvati per un uso futuro.
• Il lavoro con i messaggi ricevuti dovrebbe essere svolto sistematicamente, anche tu devi occupartene backup dati

Modulo di convalida

I moduli di pagamento sono utili quando hai bisogno di saperne di più sugli utenti del sito. Inoltre, il processo di convalida in qualche modo indirizza l'utente nella giusta direzione, poiché può attirare la sua attenzione su dati inseriti erroneamente o campi vuoti. Pertanto, il modulo di verifica fa risparmiare tempo ai clienti, poiché al termine del processo di compilazione, la persona sarà fermamente convinta che il suo messaggio andrà all'indirizzo corretto.

Numeri di telefono

Molte aziende non indicano nella pagina dei contatti numeri di telefono, perché temono che le chiamate continue interferiscano con il processo di lavoro. Tuttavia, come nel caso della carta, i numeri di telefono nella pagina dei contatti aumentano la fiducia dell'utente nel marchio, i clienti si sentono al sicuro, credendo che in una situazione difficile potranno contattare un dipendente dell'azienda e discutere del problema. Il numero di telefono accorcia la distanza tra il titolare del sito e l'utente, questo vale sia per le aziende tradizionali che per i servizi online che non hanno un indirizzo fisico.

Profili sui social

I pulsanti dei social media si trovano sempre più spesso nelle pagine dei contatti. Questo approccio può migliorare significativamente le capacità del sito, soprattutto se l'assistenza clienti è fornita 24 ore su 24, 7 giorni su 7. È più conveniente per molti entrare in contatto con l'azienda attraverso rete sociale, quindi vale la pena pensare a questo modo di interagire con l'utente.

Progettazione della pagina dei contatti

Pagine di contatto davvero buone testimoniano l'elevata abilità dei designer che le hanno progettate. E la parte più importante del design è lo stile visivo della pagina dei contatti. Nel caso dei moduli di contatto, ciò significa campi grandi che facilitano l'invio dei dati. Se il modulo ha un bell'aspetto, funziona meglio.

Prima di procedere con la progettazione, il progettista dovrebbe condurre uno studio dettagliato di tutte le informazioni di contatto fornite dal cliente. Tutti gli elementi dovrebbero essere ben organizzati, inoltre, dovrebbero essere combinati armoniosamente. Dovresti anche ricordare che la pagina dei contatti deve corrispondere alla combinazione di colori del sito in modo che l'utente identifichi in modo univoco sia il sito che il marchio.

Produzione

La pagina dei contatti dovrebbe essere sempre visibile. Questo vale non solo pagina iniziale, ma anche tutte le altre pagine del sito. Durante la progettazione della pagina dei contatti, tieni presente che gli utenti potranno contattare il proprietario del sito o il team di supporto solo nel modo in cui vedono nella scheda "Contatti". In questo caso, la chiave del successo è la comodità e la semplicità. Devi dare agli utenti ciò che vogliono. Se l'utente deve inserire i propri dati personali sul sito, è meglio porre domande di base: nome, cognome, indirizzo email. Il modulo di contatto non deve contenere campi aggiuntivi. Devi anche occuparti dell'adattabilità della pagina dei contatti: dovrebbero essere visualizzati in qualsiasi browser e su qualsiasi dispositivo. Se la pagina dei contatti è progettata correttamente, le possibilità di successo del sito con gli utenti aumentano notevolmente.