Buon pomeriggio, oggi parleremo del layout adattivo del sito web. Perché è così necessario e deve essere presente su ogni sito, in cosa è diverso layout mobile da adattivo. Molte persone confondono ancora o non capiscono cosa sia questa opzione di layout e come differisca, ad esempio, dalla versione mobile del sito.

Qualche anno fa, o meglio prima del primo ingresso nel mondo di un touch phone da Mela, questa domanda non era così critica. Forse, ovviamente, mi sono sbagliato in anni, ma ho specificato l'ora approssimativa (a giudicare dalle repliche degli autori dei libri). Poi sono arrivati ​​i tablet, nuovi modelli toccare i telefoni e il numero di risoluzioni dello schermo ha iniziato ad aumentare notevolmente. Successivamente, i proprietari dei siti hanno avuto un nuovo problema.

Chi ancora non lo sapesse, a partire dal 21 aprile 2015 Google introduce nuovi metodi per il ranking dei siti, che si basa sul design adattivo del sito. Se il tuo sito non ha un design reattivo, la tua risorsa scenderà nei risultati di ricerca motore di ricerca. Qui è un miracolo dispositivi mobili.

Il tuo sito dovrebbe avere lo stesso aspetto su tutti i dispositivi. Completamente per tutti! dal cellulare al alta risoluzione tenere sotto controllo. Fondamentalmente non ci sono problemi con i monitor di grandi dimensioni, lì è tutto chiaro comunque, ma c'è un problema con tablet e telefoni cellulari. I siti non vengono visualizzati correttamente su schermi piccoli, il che causa molti disagi all'utente.

Sul monitor, la pagina del sito dovrebbe apparire in un formato, sul tablet in un altro e sul telefono nel terzo. Inoltre, non dovrebbe esserci alcuna barra di scorrimento orizzontale. Il sito stesso dovrebbe adattarsi allo schermo del dispositivo, questa è la bellezza del layout adattivo del sito.

Su cosa in generale in questione, layout adattivo che cos'è. Il tuo sito dovrebbe avere UN design reattivo utilizzando UN codice adattato per adattarsi allo schermo. Passa a versione mobile non funziona più, non va bene. può aprire guida da google e leggere le informazioni in modo più dettagliato.

L'utente che ha aperto il tuo sito non deve ingrandire o rimpicciolire. Tali casi di solito mettono a dura prova le persone, si sentono a disagio e vogliono chiudere rapidamente il tuo sito. Tali casi non saranno isolati, che possono essere visualizzati molto male fattori comportamentali blog o sito web. Lo stesso esempio si applica al testo che il visitatore leggerà. Il layout dovrebbe cambiare la sua scala in modo che quando si visualizza il testo non ci sia una linea di scorrimento orizzontale.

A mio parere personale, il responsive design è migliore di una versione mobile di un sito web. La seconda opzione, a proposito, ti costerà molto di più della prima. Grazie all'adattabilità, puoi decidere tu stesso cosa vedrà l'utente davanti ai suoi occhi utilizzando un tablet e quale versione del sito verrà visualizzata sui telefoni cellulari.

Cos'è il layout adattivo

Certo, non tutti abbiamo un monitor, un tablet e un telefono a portata di mano. Per controllare l'adattamento del tuo sito, non è necessario disporre di tutti i tipi di dispositivi. Se stai usando Navigatore Google Chrome, puoi installare tu stesso un'estensione chiamata Ridimensionamento finestre. Con esso, puoi testare rapidamente la maggior parte delle tue opzioni di design reattivo.

Un pulsante dovrebbe apparire nella parte superiore del browser, quando fai clic su di esso, tutto opzioni possibili visualizzazione dello schermo. Consiglio di esaminare tutti i punti. Scegli e poi controlla come appare tutto sul tuo sito.

Dirò ancora una volta, NON DOVREBBE esserci alcuna riga di scorrimento orizzontale. Tutto dovrebbe adattarsi a qualsiasi risoluzione dello schermo. Apri la pagina principale, i tuoi articoli e alcune altre pagine aggiuntive.

Come dimostra l'esperienza, puoi trovare difetti in quasi tutti i siti. Alcuni hanno un logo storto, altri hanno un campo molto ristretto con i commenti e così via. Particolarmente fastidiosi sono i siti sui quali semplicemente non è realistico lasciare un commento dal telefono. Mi fa venire voglia di chiuderlo e non riaprirlo mai più. E questo è meno un commento, e ci sono sicuramente più di una persona come me.

Questo è tutto per la normale visualizzazione di tutte le pagine e non solo per esse, il layout adattivo del tuo sito deve essere realizzato su tutti i dispositivi. Tutte le sezioni, tutti i blocchi con commenti, tutte le pagine, l'intestazione del sito, il piè di pagina del sito e Attenzione speciale deve essere lasciato per il tuo menu.

Esempi di layout

Darò un piccolo esempio di sito adattivo, ho trovato questa opzione spontaneamente con il metodo del poke scientifico attraverso la ricerca. Non ho guardato che tipo di modello fosse e dove l'avesse preso, ora la domanda è diversa. Mi piace molto questa opzione, tutti nel loro stile. Sul monitor, il sito appare in una forma, su iPhone sembra completamente diverso.

Certo, puoi acquistare un modello adatto per te stesso e questo ti farà risparmiare molti problemi aggiuntivi, ma devi controllare tutto. Se in futuro trovi un layout storto, dovrai apportare tu stesso le correzioni o utilizzare i servizi di un progettista di layout.

In questo esempio di sito responsive, ogni cosa è al suo posto, tutto è fluido e bello. In alto c'è un menu che si apre premendo il dito, poi c'è la descrizione del blog, la ricerca nel sito, le intestazioni e l'abbonamento agli aggiornamenti. Di seguito l'elenco delle novità. Bellezza ... davvero tutto è pensato.

Puoi trovare tu stesso esempi di siti adattivi. Apri qualsiasi blog e usa ulteriore estensione per il navigatore. Pertanto, puoi scegliere qualsiasi esempio che ti piace e rivolgerti al progettista del layout con esso. Eseguirà tutto il lavoro necessario e il tuo sito assumerà un nuovo volto.

Lezioni sulla reattività del sito web

Se non hai conoscenze particolari nel layout del sito web, ti dirò subito che non ci riuscirai. Esatto, senza conoscere la proprietà e i valori in CSS, non farai nulla da solo. Per prima cosa devi seguire alcune lezioni di base, apprendere le proprietà utilizzate durante la disposizione delle pagine.

C'è un'intera sezione del mio blog a cui ho dedicato. Ho appena iniziato a compilarlo da poco, in futuro ho intenzione di continuare a lavorarci anche io. Chi vuole ricevere nuove lezioni via mail, consiglio di iscriversi. Da loro puoi scoprire:

1. Come creare il tuo layout reattivo.
2. Cosa sono le media query.
3. Come utilizzare correttamente le media query.
4. Come creare un menu responsive.
5. Come creare una galleria reattiva.
6. E altro ancora.

Se hai deciso di approfondire questo argomento e vuoi provare a studiarlo, le lezioni del libro di Ben Frain, che si chiama Html5 e CSS3 Developing Websites for Any Browsers and Devices, sono abbastanza adatte per iniziare. In esso imparerai tutto sul design reattivo, grazie al quale i siti verranno visualizzati magnificamente su tutti i dispositivi. Molto buon libro, che descrive l'intero processo dalla A alla Z.

Che cos'è Media Queries?

Richieste multimediali- si tratta di media query utilizzate nel layout adattivo del sito. È su di loro che si parla del libro di Ben Frain. Se dici in parole povere, è il codice in cui vengono posizionati gli stili CSS per la risoluzione dello schermo data. Pertanto, tutte le possibili opzioni di progettazione vengono adattate.

Utilizzando le media query, puoi specificare la larghezza minima e massima della finestra del browser. Oltre a questo, puoi aggiungere tutto ciò che desideri per progettare la pagina o viceversa modificare. Ad esempio, invece di tre colonne, creane una, rimuovi i blocchi non necessari sulla pagina, accorcia il menu, modifica l'intestazione del sito, aggiungi ulteriori informazioni al piè di pagina del sito. La cosa più importante è che il tuo sito sia comodo e piacevole anche sugli schermi più piccoli.

Quante di queste possibili opzioni puoi fare dipende da te. Non dovresti prendere le parole così alla lettera e utilizzare le query multimediali per tutte le opzioni possibili. Scegli alcuni dei più usati.

@media (larghezza massima: 1010px) e (larghezza minima: 992px)

Esempio di layout reattivo

Ad esempio, abbiamo una determinata sezione della pagina che, una volta aperta su una piccola estensione dello schermo, dobbiamo ridurre e adattare lo schermo di un telefono o tablet. In questo caso, è necessario adattare tutti i blocchi, il testo e altri contenuti alle estensioni dello schermo specificate. Utilizzando il plug-in del browser, puoi osservare tutte le modifiche.

Crea un nuovo file con gli stili (collegalo a pagina iniziale) o aggiungere media query a un file esistente. @media (larghezza massima: 770px) - La larghezza massima dello schermo è 770px. E aggiungiamo a questo contenitore tutte le modifiche necessarie per una determinata larghezza dello schermo.

@media (max-width: 770px) ( body, html ( overflow-x:hidden; min-height: 960px; background-size: 100%; ) #mail_bg_horizontal div ( left: 274px; position: relative; top: 40px; width: 340px; ) #mail_bg_horizontal .module_subscribe figure ( padding-top: 46px; ) #footer_menu ( display: none; ) #header (background-size: 100%; padding-top: 48%;) #logo-site ( top : -60px; font-size: 7vw; width:100%; margin: 10px;) #logo-site span(display:inline-block; padding-left:10px;) #slogan( top: -77px; font-size : 3vw; margine: 10px;)

@media (larghezza massima: 770px) ( corpo, html ( overflow -x: nascosto; altezza minima: 960px; sfondo - dimensioni: 100%; #mail_bg_orizzontale div ( sinistra: 274px; posizione: relativa; in alto: 40px; larghezza: 340px #mail_bg_horizontal .module_subscribe figura ( padding-top: 46px; #footer_menu ( display : nessuno ; #header (background-size: 100%; padding-top: 48%;) #logo-site span(display:inline-block; padding-left:10px;)

Ora andiamo avanti, superato il massimo di 770 pixel, passiamo ad una larghezza minore. @media (max-width: 650px): aggiungiamo tutte le modifiche necessarie per espandere 650px. Tutto avviene allo stesso modo, solo per una larghezza massima di 650 pixel. Tutte le modifiche necessarie vengono aggiunte a un contenitore comune per questa media query.

@media (larghezza massima: 650px) ( #related_posts ( border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding-top: 20px; width: 545px; ) border: medium nessuno; height: 28px ; sinistra: 93px; posizione: relativa; superiore: -12px; larghezza: 159px; ) #header .wrapper ( larghezza: 100%;) #header .wrapper > nav ul > li ( float: none; larghezza: 100%; margine -left: 0; text-align: center; ))

@media (larghezza massima: 650px) ( #post_correlati ( padding-top: 20px; larghezza: 545px; Pulsante #mail_bg_horizontal .module_subscribe ( bordo : medio nessuno ; altezza: 28px; sinistra: 93px; posizione: relativa; in alto : - 12px ; larghezza: 159px #header .wrapper ( larghezza: 100%;) #header .wrapper > nav ul > li ( galleggiante: nessuno larghezza: 100% margine sinistro: 0; text-align: center;

Successivamente, la transizione alla larghezza successiva, ad esempio 500 pixel. Aggiungiamo a questo contenitore tutte le proprietà necessarie che dovrebbero stare sullo schermo con una larghezza massima di 500 pixel. @media (larghezza massima: 500px).

@media (larghezza massima: 500px) ( body > #content > .wrapper .navigation > .next ( background: rgba(0, 0, 0, 0) url("images/bow_right.png") no-repeat scroll 0 0; display: nessuno; float: sinistra; altezza: 30px; margin-left: 1px; margin-top: -4px; width: 34px; ) #mail_bg_horizontal .module_subscribe button ( bordo: medio nessuno; altezza: 28px; sinistra: 96px ; posizione: relativa; in alto: -12px; larghezza: 159px;))

@media (larghezza massima: 500px) ( corpo > #content > .wrapper .navigation > .next ( background : rgba (0 , 0 , 0 , 0 ) url ("images/bow_right.png" ) no - ripetizione scorrimento 0 0 ; display : nessuno ; float : sinistra ; altezza: 30px margine sinistro: 1px; margine superiore: -4px; larghezza: 34px Pulsante #mail_bg_horizontal .module_subscribe ( bordo : medio nessuno ; altezza: 28px; sinistra: 96px; posizione: relativa; in alto : - 12px ; larghezza: 159px ) )

Alla fine, riduciamo anche la larghezza nella media query a 400 pixel. In questo contenitore indichiamo tutte le modifiche necessarie per una data larghezza. @media (larghezza massima: 400px). Dopo ogni aggiunta, controlliamo cosa succede. In qualsiasi momento, puoi modificare e apportare le tue modifiche al file con gli stili.

@media (larghezza massima: 400px) ( #header ( padding-top: 61%;) #mail_bg_horizontal div ( top: 11px; left: 37px; width: 174px; font-size: 13px;) #mail_bg_horizontal . module_subscribe ( position :relative; top:-15px; left:-69px;) #mail_bg_horizontal .module_subscribe button ( top: -10px; left: 18px;) #mail_bg_horizontal ( height: 186px;) #related_posts ( border-bottom: 1px solid #ccc; border-top: 1px solido #ccc; padding-top: 1px; width: 255px; ))

@media (larghezza massima: 400px) ( #header (imbottitura superiore: 61%;) #mail_bg_horizontal div ( in alto: 11px; a sinistra: 37px; larghezza: 174px; font-size: 13px;) #mail_bg_horizontal .module_subscribe ( posizione:relativa; in alto:-15px; a sinistra:-69px;) Pulsante #mail_bg_horizontal .module_subscribe ( in alto: -10px; a sinistra: 18px;) #mail_bg_horizontal (altezza: 186px;) #post_correlati ( border - bottom : 1px solido #ccc; border - top : 1px solido #ccc; padding-top: 1px; larghezza: 255px

Anche se hai fatto tutto bene, assicurati di controllare i risultati servizio speciale, indipendentemente dal fatto che il tuo sito superi o meno la versione mobile. Verifica dell'usabilità su dispositivi mobili. Inserisci l'URL del tuo sito web e guarda a cosa risponde Google. Con un'alta probabilità, il servizio potrebbe scriverti che la tua risorsa non è stata verificata.

Dopo l'aggiornamento, Google consiglia di aprire l'accesso a file css, file plug-in, temi, script e immagini per il robot, solo dopo puoi superare con successo il test Per fare ciò, devi aprire tutti i percorsi ai file necessari in il file robots.txt in modo che il robot possa vederli . Ecco un esempio dal mio robots.txt:

/wp-content/temi/*. jpg

Consenti: /wp-content/temi/*. png

C'è stato un caso interessante in cui ho realizzato un layout adattivo del sito all'inizio del 2015. Il cliente ha preso molto sul serio tutte le parole e voleva un design adattivo per tutte le risoluzioni dello schermo che gli ho mostrato nel componente aggiuntivo di Chrome. Non ho discusso con il desiderio del cliente e l'ho adattato completamente a tutte le opzioni possibili. Il proprietario - Barin, ha pagato la verità il doppio.

File psd di progettazione reattiva

Se vuoi ordinare un nuovo design unico per te stesso, non è assolutamente necessario, ma è consigliabile avere con te un layout psd dei tuoi desideri. IN File PSD Ci sarà un design completamente pronto per dispositivi mobili e tablet. Il progettista del layout vedrà e capirà cosa vuoi da lui. Se non puoi disegnare tu stesso un layout psd. rivolgersi a professionisti o allo scambio freelance. In borsa ne troverai molti che vogliono fare questo tipo di lavoro e per un piccolo compenso. Non avrai bisogno di disegnare un layout già pronto completamente da zero, il design adattivo non richiederà molto sforzo.

Come verrà visualizzato il menu del sito, cosa lo seguirà e così via. A volte non è abbastanza facile realizzare l'implementazione di alcuni blocchi, sarebbe un peccato se il tuo lavoro andasse sprecato. Lascia che ti ricordi ancora una volta, contatta coloro che conoscono e comprendono il loro lavoro.

Requisiti di layout PSD

Prima di ordinare un layout da un designer, determina prima cosa vuoi vedere su di esso. Per non correggere il lavoro già svolto in futuro, decidi tu stesso cosa e dove si troverà. Dove avrai il menu del blog, dove si troverà la ricerca del sito (ne hai bisogno nella tua versione). Come puoi vedere dagli altri, molti sacrificano la loro barra laterale. Di conseguenza, sul telefono si apre un blocco con un menu, una ricerca e un elenco dei tuoi record. SU questo momento questa è l'opzione più utilizzata.

Certo, non capisci nulla di rientri, bordi... cosa e come dovrebbe essere secondo gli standard nel layout (non ne hai bisogno), ma assicurati di prestare attenzione ad alcune cose. Questo ti aiuterà a orientarti prima di redigere il TOR per il progettista.

1. Il layout deve essere nel formato PSD(da solo).
2. Ogni elemento del design dovrebbe trovarsi su un livello separato.
3. Non caricare troppe foto.
4. Non usare troppi caratteri.
5. Usa caratteri standard.
6. Tutto è solo l'essenziale.
7. Niente di più.
8. Crea il tuo menu a tendina.

Risoluzioni dello schermo più comuni

Come ho descritto in precedenza, non è necessario personalizzare completamente il sito per tutte le risoluzioni dello schermo. Basta scegliere quelli più frequenti che sono richiesti. Certo, tutto dipende dai tuoi desideri... fai quello che vuoi). Cercherò di fornire alcuni esempi che indicano le opzioni di visualizzazione più comuni (larghezza minima e larghezza massima). In effetti, è necessario tenere conto non solo delle opzioni indicate, ce ne sono un po 'di più.

• Smartphone verticale e orizzontale (minimo 320 px - massimo 480 px);
• Tablet verticale e orizzontale (minimo 768 px - massimo 1024 px);
• Computer e laptop (minimo 768 px - massimo 1024 px);
• Computer e laptop (minimo 1824 px);

Dopo tutto questo, l'output sarà un normale layout adattivo del sito. Le pagine avranno un bell'aspetto sugli schermi più piccoli. Tutte le pagine saranno scalabili e cross-browser, non appariranno storte su tablet e telefoni.

Grazie all'inserimento di alcune parti di codice, il layout verrà visualizzato normalmente su tutti i browser, compreso il sempre problematico IE. E non importa quale motore hai, joomla o wordpress. A proposito, è un piacere per me personalmente realizzare un layout di sito Web adattivo sul motore WordPress.

Saluti, visitatori occasionali e lettori abituali del sito del blog!

Durante l'esistenza di questo sito, ho cambiato più volte il modello e ne ho persino creato uno mio da zero.
Una delle attività principali quando si sceglie un nuovo modello è il layout adattivo del sito per tutte le risoluzioni dello schermo.

Breve riassunto dell'articolo:

In un precedente articolo, ho già scritto sul motivo per cui è necessario. Ma come ottenere questa adattabilità?

Per questo c'è diversi modi. Alcuni usano javascript, altri usano qualcos'altro. Ma penso che il più semplice e Il modo giustoè reattivo con i CSS.

Come creare un layout per un sito web responsive

In primo luogo, se ti sei impegnato a realizzare un design di sito Web adattivo, tra i tag incolla il seguente codice:

Che stupido sono stato a non averlo fatto subito quando ho provato a creare un layout adattivo del sito !!!
Il problema dei browser mobile è il loro ridimensionamento del layout del sito, anche adattivo.

Immagina, disegno un disegno, poi scrivo tutti gli stili e le richieste necessarie, controllo l'adattabilità del sito alle diverse risoluzioni. Tutto sembra andare bene! Ma quando apro il mio blog sul mio smartphone, vedo che il sito si è semplicemente rimpicciolito. Non si è adattato al dispositivo mobile, ma ha semplicemente ridotto la dimensione del carattere, delle immagini, ecc.

Come mai? Ho iniziato a ricontrollare tutti gli stili, se ho scritto correttamente le classi, di conseguenza, sono arrivato al punto in cui ho controllato la larghezza della finestra del browser in px tramite javascript. Ero scioccato. Quando l'ho controllato su un laptop, ho ottenuto un risultato di 1024px e ho ottenuto più o meno lo stesso risultato quando ho aperto il sito su uno smartphone!

Ma questo non può essere!

Si scopre, se non prescrivi il codice che ti ho indicato sopra, navigatore mobile non capisce che il sito è responsive e sta semplicemente cercando di ridurre la pagina del sito in modo che si adatti al piccolo schermo di un telefono cellulare.

A causa della mia stupidità e incompetenza, ho perso molto tempo. Ma ora ricordo per sempre))).

Media query CSS reattive

Per renderlo reattivo con i CSS, è necessario utilizzare le media query.

Com'è? Sì, molto semplice. Nel file CSS, devi scrivere query come:

@schermo multimediale e (larghezza minima: 1440px) e (larghezza massima: 1599px)( )

Questo codice significa che gli stili racchiusi tra "( ) " funzioneranno per schermi con una larghezza minima di 1440px e un massimo di 1599px.

Cioè, quegli stili di elementi del sito che dovrebbero essere adattati a seconda della risoluzione dello schermo dovrebbero essere scritti separatamente per ogni possibile larghezza dello schermo.

Le risoluzioni dello schermo più importanti per il layout reattivo

• 320 pixel- Dispositivi mobili (orientamento verticale);
• 480 pixel- Dispositivi mobili (orientamento orizzontale);
• 600 pixel- Piccole compresse;
• 768 pixel- Tablet (orientamento verticale);
• 1024 pixel- Tablet (orizzontale) / Netbook;
• 1280px o più- PC.

Sono queste autorizzazioni su cui devi concentrarti e prestare particolare attenzione nel layout adattivo. Questi sono i tipi più comuni di risoluzioni dello schermo.

design reattivo bootstrap

È molto comodo utilizzare bootstrap per creare un layout adattivo. La comodità è che tutti gli stili per adattare blocchi, pulsanti, tabelle, ecc. già registrato in bootstpap. Devi solo capire quale classe assegnare a quale elemento.

Per iniziare, scarica l'ultima versione di bootstrap e collegala al tuo sito. Tieni presente che il collegamento di stili e script a wordpress ha le sue caratteristiche.

Il layout su bootstrap differisce in quanto la larghezza del blocco o dello schermo è divisa in 12 parti uguali. E assegnando una determinata classe a un blocco, puoi impostare la larghezza del blocco sul numero desiderato di parti.

Ad esempio, questo design consentirà un blocco largo per il contenuto con una larghezza di 8 parti e uno stretto per una barra laterale con una larghezza di 4 parti dello schermo:

La larghezza dei blocchi verrà calcolata automaticamente in base alla larghezza dello schermo. E se visualizzati su un dispositivo mobile, questi blocchi si sposteranno l'uno sotto l'altro.

Puoi anche regolare la rientranza del blocco dal bordo, ancora una volta, in base al numero desiderato di parti. Ad esempio, questa costruzione:

Questo creerà un blocco largo 10 parti, rientrato da sinistra di 1 parte dello schermo.

Se lo capisci, lavorare con bootstrap rende il lavoro molto veloce. Inoltre, questi stili funzionano sicuramente correttamente e non ci sarà nulla di storto sul sito.

In futuro, ho intenzione di pubblicare alcuni tutorial su come lavorare con bootsrap. Pertanto, ti consiglio di non perdere questo momento.

Controllo della reattività del sito web

Ma sorge la domanda: come verificare l'adattabilità del sito? Qui hai scritto query multimediali in CSS, collegato bootstrap e utilizzato le classi necessarie. E come si verifica che il sito si adatti correttamente a tutte le risoluzioni dello schermo.

Molto preciso e importante servizio gratuito, che merita rispetto e gratitudine da webmaster e progettisti di layout impegnati nel layout adattivo dei siti.

Bene, come ti piace l'articolo? Tutto chiaro? In caso contrario, scrivi nei commenti, lo scopriremo insieme.

Sì, per realizzare un design di sito Web reattivo, devi lavorare sodo. Ma questi lavori saranno premiati con un atteggiamento favorevole nei confronti del tuo sito dei motori di ricerca e, soprattutto, dei visitatori del tuo sito.

Ci sono due idee sbagliate principali su cosa sia un sito web reattivo. Alcune persone pensano che questa sia solo una visualizzazione ridotta del sito, in cui gli elementi sono compressi. Altri insistono nell'equiparare il responsive design con una versione mobile del sito. In questo articolo, metteremo i puntini sulla i e ti diremo com'è realmente.

Cos'è il layout adattivo

Responsive è un tale layout, in cui il sito viene visualizzato correttamente vari dispositivi a causa del fatto che gli elementi si adattano dinamicamente a vari permessi schermo.

In poche parole, la reattività è l'impilamento dinamico di blocchi, non una versione più piccola del sito.

Non importa da quale dispositivo l'utente accede al sito: da un computer, tablet o telefono: sarà ugualmente comodo utilizzarlo e la funzionalità necessaria verrà preservata per intero.

Perché hai bisogno di un layout adattivo

Oggi non è più necessario cercare studi e statistiche per dimostrare quanto spesso accedono a Internet da tablet e cellulari. Questa realtà ci circonda ovunque: nei trasporti pubblici, nei caffè, in fila: le persone riempiono volentieri il loro tempo navigando in Internet e tu stesso sai quanto sia conveniente. Per scegliere e ordinare la pizza, nessuno andrà prima a casa per andare al computer, ma andrà velocemente sul sito dal telefono, facendo altre cose lungo il percorso. Quando si presenta l'idea di un acquisto, il modo più semplice è andare subito online, confrontare le offerte dei negozi concorrenti e, senza indugio, effettuare un ordine per la merce. E ci sono innumerevoli esempi del genere!

La reattività è una delle condizioni importanti e indispensabili per un sito web moderno.
Se il sito viene visualizzato correttamente solo da un computer, durante la visualizzazione da un tablet o telefono è difficile navigare, i blocchi non si ridimensionano, è difficile premere il collegamento desiderato con un dito - di conseguenza, l'utente è infastidito, non può eseguire l'azione di destinazione, perde tempo cercando di capire il display storto e lascia la risorsa. E poi non gli torna indietro. E va ai concorrenti.

Ecco perché la decisione di ordinare un sito Web adattivo non è un capriccio, ma una condizione che influisce direttamente sul livello delle vendite.

Come funziona un sito web responsive

Un sito che non risponde è facile da riconoscere: se visualizzato da un tablet o da un telefono, vedrai solo una parte dell'area, dovrai spostare l'area visibile a sinistra e a destra, ingrandire per rendere leggibile il carattere e rimpicciolire per trovare la sezione o il modulo di domanda desiderati.

Il sito Web responsive si adatta al dispositivo, a seconda della larghezza del suo schermo. Tutti gli elementi della pagina si adattano: le loro dimensioni cambiano, alcuni contenuti ausiliari ed elementi decorativi appaiono/scompaiono. Allo stesso tempo, i blocchi vengono riorganizzati in modo tale che sia conveniente per l'utente: l'accento viene posto su informazioni significative e i dati secondari vengono rimossi o compressi.

Di norma, minore è la larghezza dello schermo, più concentrata è la presentazione delle informazioni e minori sono i blocchi coinvolti. Allo stesso tempo, l'utente non ha bisogno di cambiare scala: tutto è semplice e comprensibile anche su un piccolo schermo.

Un'altra caratteristica dei siti responsive è l'ingrandimento di elementi significativi in ​​modo che l'utente possa facilmente premere un pulsante sullo schermo con il dito o seguire un link. La conversione del sito dipende direttamente da questo, quindi è importante rendere il design adattivo user friendly.

Fatti importanti da sapere sui siti Web reattivi

1. Il sito Web responsive e la versione mobile non sono la stessa cosa.

Quando parliamo di un sito reattivo, intendiamo che questo è un sito per diversi dispositivi. Questa è la differenza fondamentale rispetto alla versione mobile del sito. La versione mobile è un sito separato a tutti gli effetti, che ha le proprie funzionalità, il proprio layout e spesso i propri contenuti. La versione mobile è sviluppata tenendo conto della comodità degli utenti che accedono al sito da dispositivi mobili: ciò che è molto importante per loro dalla versione desktop, e ciò che è ridondante e può essere facilmente rimosso.

2. La funzionalità è la stessa su tutti i dispositivi.

Qui è tutto chiaro: poiché il sito è uno, le sue capacità sono le stesse, indipendentemente dal dispositivo da cui gli utenti accedono al sito.

3. Il responsive design ha dei limiti.

Sono collegati principalmente alla conservazione della struttura del contenuto originale quando le dimensioni dello schermo cambiano. Spesso nella versione adattiva rifiutiamo lo slider e il large immagini di sfondo, che si trovano nella versione desktop e non utilizzano Flash. Di solito consigliamo l'opzione migliore.

Ma capita anche che il design sia concordato nella versione su cui insiste il cliente, e il layout già pronto risulta scomodo. Quindi vengono apportate tutte le modifiche per tassa addizionale, poiché lavoriamo rigorosamente secondo il TOR.

4. L'adattabilità può essere totale o parziale..

Piena adattabilità - dai dispositivi mobili ai desktop, parziale - ad esempio, da un tablet o laptop a un desktop. Il design reattivo di solito si concentra su dispositivi specifici da cui il client genera la maggior parte del traffico.

5. Non tutti i siti Web beneficiano di un design completamente reattivo.

I siti con funzionalità e/o contenuti complessi che richiedono una quantità sufficiente di spazio sullo schermo per la percezione hanno maggiori probabilità di essere dannosi per la piena reattività. È meglio selezionare un elenco di dispositivi su cui la funzionalità sarà completa e creare una versione con adattabilità parziale per essi e, per il resto, creare una versione mobile con funzionalità ridotte e la possibilità di passare a una versione a schermo intero .

6. Per visualizzare l'identità in diversi browser soddisfa la compatibilità cross-browser.

Assicurati di specificare questo elemento nel TOR se per te è importante che il sito venga visualizzato allo stesso modo in browser diversi. In caso contrario, nelle versioni precedenti dei browser, il sito potrebbe essere visualizzato con errori e produrre caratteri illeggibili. E questo è un percorso diretto verso la perdita del pubblico di destinazione.

Cosa devi sapere se desideri ordinare un layout adattivo

La società "Tecnologie di successo" fornisce servizi per la creazione di un layout adattivo del sito. È meglio prevedere un design adattivo nella fase di sviluppo del sito principale e scriverlo nel TOR. Ma se vieni da noi con un design già pronto in formato .psd, possiamo anche aiutarti. Non ci occupiamo del layout dei layout realizzati in CorelDraw - in questo caso, offriamo ai nostri clienti di preparare prima il design e solo successivamente il layout.

Senza conoscere le caratteristiche del sito e le specifiche tecniche, è impossibile orientarsi in termini di layout.

In genere, il layout di un sito Web aziendale adattivo richiede in media 15 giorni, il termine per il layout di un negozio online adattivo dipende direttamente dalla complessità del sito.

Non passiamo mai il layout alla fase successiva - la programmazione - finché il cliente non ha verificato l'adattabilità del sito e il corretto funzionamento di tutti i suoi elementi secondo il TOR.

Le domande sono rimaste: o una versione mobile? Rivolgersi numero gratuito 8 800 775-17-11 o lascia il tuo numero e ti richiameremo e ti diremo tutto.