Le tecnologie migliorano costantemente, gli smartphone e i tablet diventano sempre più interessanti e gli utenti diventano più mobili. Al momento, il numero di spettatori provenienti da dispositivi mobili ha superato gli utenti provenienti da personal computer. Non per niente questo ha portato a tutta una tendenza dei siti per dispositivi mobili.
Ad esempio, se apri un normale sito Web (senza layout adattivo e versione mobile) tramite uno smartphone, molto probabilmente si aprirà in una forma scomoda per l'utente. Quelli. il contenuto verrà visualizzato per intero, ma ci sarà lo scorrimento orizzontale, il che è negativo.
1. Layout del sito web adattivo: che cos'è?Il layout adattivo del sito web è un layout html in cui, a seconda delle dimensioni della finestra del browser, il sito viene “trasformato” in un modulo user-friendly
Differenze tra la versione mobile del sito e quella adattivaNon confondere la versione mobile del sito e il layout adattivo del sito. La versione mobile si trova su un sottodominio separato e duplica completamente il contenuto del sito. Un sito reattivo contiene gli stessi URL di pagina, ma carica stili CSS diversi a seconda del dispositivo, il che consente di visualizzare il sito in un modo più conveniente.
2. Ottimizzazione SEO e layout adattivoI motori di ricerca attualmente hanno due risultati diversi (sono molto simili). Uno per gli utenti PC, l'altro per i dispositivi mobili. Se il sito non è ottimizzato per i dispositivi mobili, questo è considerato un fattore negativo e la posizione del sito verrà abbassata di 2-3 (a volte di più). Allo stesso tempo, sarebbe logico se le posizioni solo della versione mobile venissero abbassate, ma la pratica dimostra anche che anche le posizioni della versione principale del sito si deteriorano.
Questa ingiustizia può essere spiegata dal fatto che i motori di ricerca hanno maggiori probabilità di aggregare fattori comportamentali provenienti da dispositivi desktop e mobili. Di conseguenza, naturalmente, se il sito non viene adattato, il suo PF sarà peggiore e questo trascinerà la versione principale del sito.
3. Come verificare la reattività di un sito webPuoi verificare la reattività di un sito solo aprendolo in browser diversi e modificando la larghezza dello schermo. Ma farlo da molti dispositivi diversi con risoluzioni diverse richiede molto tempo. È anche improbabile che tu abbia dozzine di smartphone e tablet.
Esiste una soluzione molto più semplice e veloce su Internet. Ad esempio, puoi installare uno speciale plug-in Window Resizer nel browser Google Chrome e utilizzarlo per aprire il sito nelle risoluzioni più popolari.
Puoi semplicemente ridimensionare manualmente la larghezza della finestra del browser e vedere il risultato. Firefox o Google Chrome hanno un design del browser reattivo premendo Ctrl+Shift+M.
La condizione più importante è garantire che non vi sia scorrimento orizzontale e plug-in flash nella pagina.
Google è stato il primo a introdurre il fattore adattabilità nel suo algoritmo di ricerca. Ha uno speciale servizio gratuito che analizza qualsiasi sito Web per l'ottimizzazione per i dispositivi mobili. Yandex ha introdotto questa funzionalità poco dopo.
Dopo il controllo, ci sono due opzioni. O il sito è ottimizzato oppure non lo è:
Ad esempio, il test di reattività di Google:
Verifica dell'adattabilità in Yandex:
Solo una persona che comprende CSS e HTML può creare un layout del sito Web adattivo. Considereremo i punti principali, poiché non esiste un'unica ricetta.
Per creare un layout adattivo, è necessario creare fogli di stile CSS nella terza versione. C'è una differenza tra 2 e 3, ma in questa materia è molto importante la mancanza di valori assoluti negli stili. In breve, tutti i valori delle dimensioni del blocco sono lunghezza, larghezza, dimensioni: tutto questo è specificato in percentuale.
Sintassi CSS @Media
@media device_type e|non|solo (media_features) ( ... Descrizione degli stili... )Ad esempio, scriviamo le condizioni in base alle quali gli stili funzioneranno per i dispositivi con una larghezza dello schermo inferiore a 800 px.
Schermo @media e (larghezza massima: 800px) (... stili...) NotaGli stili dovrebbero essere scritti in sequenza dall'alta risoluzione al piccolo, ovvero prima gli stili generali, quindi le dimensioni "ritagliate", ad esempio:
@media solo schermo e (larghezza massima: 1280px) (...) @media solo schermo e (larghezza massima: 1024px) (...) @media solo schermo e (larghezza massima: 800px) (... )Nei tag header è necessario scrivere la seguente riga:
Il meta tag viewport dice che la larghezza dello schermo è la larghezza del browser e ogni pixel corrisponde a un pixel sul dispositivo. Se ciò non viene specificato, l'adattabilità non verrà implementata.
5. Esempi pratici di layout adattivo del sito web 5.1. Adattare parole molto lungheAd esempio, ci sarà una parola molto lunga sulla pagina e quindi se la proprietà overflow non è impostata, ciò potrebbe portare alla comparsa di uno scorrimento orizzontale. Per evitare ciò, devi aggiungere le seguenti proprietà CSS al tuo contenuto:
.hphns ( overflow-wrap : break-word ; word-wrap : break-word ; -webkit-hyphens : auto ; -ms-hyphens : auto ; -moz-hyphens : auto ; hyphens : auto ; ) 5.2. Menu del sito Web adattivoLa barra laterale del sito occupa in genere una larghezza di circa 200-300 pixel, che occupa quasi l'intera larghezza del browser sui dispositivi mobili. Pertanto, i menu a discesa vengono spesso creati utilizzando un pulsante standard sotto forma di tre tratti (questo è già diventato un classico).
Puoi implementarlo sul sito, ma dovrai armeggiare un po' con gli stili. Diamo un'occhiata a tutto passo dopo passo.
La situazione in cui abbiamo un menu e il contenuto principale (non ho disegnato l'intestazione e il piè di pagina):
Il codice HTML per una tale struttura potrebbe essere qualcosa del genere:
corpo (margine sinistro: 10%; larghezza: 70%; bordo: 1px solido #eee;) #menu (larghezza: 20%; altezza: automatico; float: sinistra;) #contenuto (larghezza: 70%; altezza: automatico ; float: sinistra; bordo sinistro: 1px solido #000; imbottitura: 1%; Titolo della paginaContenuto della pagina
Contenuto della pagina
Contenuto della pagina
Contenuto della pagina
Converte nella pagina in
Lo svantaggio di questo metodo è che a risoluzioni basse il menu occuperà quasi l'intera larghezza dell'area, il che significa che apparirà lo scorrimento orizzontale o, peggio ancora, tutti i blocchi potrebbero fluttuare.
Modifichiamo il nostro esempio come segue. Se la risoluzione dello schermo è inferiore a 800 pixel, il menu scomparirà e apparirà uno speciale pulsante di apertura del menu.
Ecco il codice html per il layout adattivo con i commenti:
corpo (margine sinistro: 10%; larghezza: 70%; bordo: 1px solido #eee;) #menu (larghezza: 20%; altezza: automatico; float: sinistra; display: blocco;) #contenuto (larghezza: 70% ; altezza: auto; float: sinistra; bordo sinistro: 1px solido #000; imbottitura: 1%) #mob_menu (visualizzazione: none;) solo schermo @media e (larghezza massima: 800px) (#menu (visualizzazione: none) ; ) #mob_menu ( display: blocco ; ) #content ( cancella : entrambi ; ) ) funzione showmobmenu() ( if ( == "blocco ") ( document.getElementById("menu").style.display = "none ") else (document.getElementById("menu").style.display = "block")) Espandi il menu ↓Menu Titolo della paginaContenuto della pagina
Contenuto della pagina
Contenuto della pagina
Contenuto della pagina
Riduciamo la larghezza dello schermo a 700 pixel (ad esempio). Questo è quello che appare sulla pagina
Ciao, cari lettori del blog. Non sorprende che il design adattivo stia diventando sempre più popolare sull'Internet russo. E, naturalmente, i progettisti del layout devono studiarlo. Perché presto il responsive design sarà presente su quasi tutti i siti web, perché sempre più persone utilizzano dispositivi mobili.
E vorrei dire che i siti con esso sono molto più convenienti da leggere su tali dispositivi che senza di essi.
Oggi voglio presentarti 5 servizi molto utili e interessanti con cui puoi controllare l'adattabilità del tuo sito web.
E quindi, andiamo.
5 servizi in cui puoi verificare l'adattabilità del tuo sito web. www.responsivedesigntest.netUn buon servizio per controllare i siti. Esistono molte risoluzioni dello schermo sia per tablet che per telefoni.
mattkersley.comUn semplice servizio per controllare un sito web di Matt Kersley. Sono disponibili anche tutte le risoluzioni più diffuse per i dispositivi mobili.
Un servizio molto interessante che controllerà qualsiasi sito. Mi è piaciuto molto il design, così come la funzionalità.
Servizio molto bello e funzionale. È anche possibile controllare come apparirà il sito in TV :-)
Dall'autore: "Smetti di ridimensionare questo browser, verrà presto cancellato!" Quanto spesso lo senti? Beh, ok, forse non così spesso, ma se sviluppi siti web responsivi, sai di cosa parlo: ogni volta che modifichi il DOM o il CSS, trascini il bordo del browser avanti e indietro, testando le modifiche e alla ricerca di imprecisioni.
In generale, la maggior parte di questi sforzi sono un tentativo di imitare le dimensioni dello schermo di diversi dispositivi.
Se ti occupi di sviluppo aziendale, probabilmente hai molti dispositivi forniti dall'azienda da testare. Dove lavoro abbiamo iPad, iPhone, uno o due altri tablet, laptop e desktop. Se non hai questo lusso, devi usare quello che hai a portata di mano.
A casa ho due laptop diversi, due dispositivi Android diversi: un Kindle e un Nexus 7. Utilizzo questi dispositivi per testare i miei sviluppi freelance, ma è chiaro che questa non è una selezione esaustiva. Non esistono affatto dispositivi iOS e, anche se sono considerato uno dei primi ad adottarli, non ho intenzione di acquistare ogni nuovo telefono/tablet/tablet non appena sarà in vendita.
Quindi cosa dovrebbe fare uno sviluppatore? Fortunatamente, esiste un numero crescente di strumenti basati su browser che simulano le dimensioni dello schermo di una varietà di dispositivi. Strumenti diversi, ovviamente, sono dotati di diversi set di funzionalità e diversi livelli di efficienza. Ne vedremo alcuni qui.
A scopo di test, ho preso il primo sito web veramente reattivo che ho creato, PyjamasOnYourFeet.com. Si basa sul modello Brownie HTML5, fornito molto generosamente e gratuitamente alla comunità degli sviluppatori su EGrappler.
Sono reattivo?Sono reattivo? – un'anteprima istantanea e completamente semplice del tuo sito in termini di come apparirà su quattro diversi dispositivi. Tutti e quattro sono iOS e lo sviluppatore spiega la sua scelta sul sito. Non offre controlli o selezioni, solo un display molto semplice ed elegante. Visualizza le dimensioni della finestra:
Desktop: 1600 x 992 px, decrescente in base alla scala (0,3181)
Laptop: 1280 x 802 px, scala decrescente (0,277)
Tablet - 768 x 1024px, decrescente in base alla scala (0,219)
Mobile: 320 x 480 px, decrescente in base alla scala (0,219)
Per citare lo sviluppatore: “Questo non è uno strumento di test, è molto importante farlo su dispositivi reali. Ma è uno strumento per acquisire screenshot rapidi (per me) e fornire un'opportunità visiva per "approfondire" nelle riunioni con i clienti cosa intendevi."
deviceponsive è simile al sito Am I Responsive? uno che mostri il tuo sito in modo semplice e ordinato, ma non abbia controlli o opzioni disponibili quando si tratta di dispositivi. Tutti sono mostrati simultaneamente su una lunga pagina. Ha una caratteristica interessante: puoi modificare l'intestazione modificandone il colore di sfondo e inserendo il tuo logo, quindi "stamparlo". In questo modo, in un certo senso, puoi marchiare il tuo sito quando mostri gli screenshot al cliente. Dispositivi e dimensioni dello schermo simulati su questo sito:
MacBook: 1280 x 800
iPad (verticale) - 768 x 1024
iPad (orizzontale) - 1024 x 768
Kindle (verticale) - 600 x 1024
Kindle (orizzontale) - 1024 x 600
iPhone (orientamento verticale) - 320 x 480
iPhone (orizzontale) - 480 x 320
Galassia (ritratto) - 240 x 320
Galassia(orizzontale) - 320 x 240
Come con la maggior parte degli strumenti simili, sui dispositivi di piccole dimensioni vengono visualizzate le barre di scorrimento. Non verranno visualizzati su un dispositivo reale, ma per poter scorrere la visualizzazione di prova su un dispositivo non touch devi fare alcune concessioni.
Come il test sensibile al dispositivo, il test reattivo mostra il tuo sito su più dispositivi, ma invece di mostrarli tutti contemporaneamente su un'unica pagina, scegli quale dispositivo visualizzare da un semplice menu nella parte superiore della pagina. Navigando su questo sito su un laptop di medie dimensioni, ho scoperto che restringere la pagina funziona benissimo, permettendoti di vedere l'intero sito all'interno della finestra del dispositivo che sto testando.
Offre tredici diverse finestre di visualizzazione, da un grande monitor desktop a quello noto come Crappy Android (per essere onesti, hanno anche un'opzione chiamata Nicer Android).
Ancora una volta, Firefox inciampa un po' su questo sito. Nota nello screenshot, tra l'intestazione verde e l'area del contenuto con sfondo bianco, c'è solo una barra blu dove dovrebbe apparire il cursore dell'immagine.
È molto simile ai due precedenti e l'unica cosa che distingue responsive.is da essi è l'animazione fluida del display da un dispositivo all'altro, nonché una sovrapposizione traslucida che mostra gli spazi del sito che cadono fuori dal viewport .
Le uniche opzioni del dispositivo disponibili qui sono quelle automatiche, che riempiono la finestra del browser, mostrando il sito come lo vedresti se ci cliccassi sopra: Desktop; Tablet (orientamento orizzontale); Tablet (orientamento verticale); Smartphone (orientamento orizzontale) e Smartphone (orientamento verticale), le dimensioni in pixel non sono fornite.
Ancora una volta, diverse funzionalità e opzioni distinguono Screenqueries dagli altri siti. Sono disponibili 14 telefoni e 12 tablet con un elemento separato per passare dalla modalità verticale a quella orizzontale. Questi vengono visualizzati su una griglia di pixel numerati, con le dimensioni mostrate in basso a destra del display di prova. I bordi del display sono trascinabili in modo da poter testare dimensioni personalizzate. Trascina o fai clic sull'area di test e lo sfondo diventerà grigio, con un aspetto meno disordinato.
Una caratteristica interessante di questo sito è che per diversi dispositivi è disponibile l'opzione “True view”, che mostra il tuo sito racchiuso nel browser Chrome assegnato a quel dispositivo. Sfortunatamente, e ci sono già abituato, Firefox non è in grado di visualizzare lo slider dell'immagine del sito di prova. Non preoccuparti, preferisco davvero Firefox per quanto riguarda i browser, ma per fortuna abbiamo delle opzioni.
Screenfly aumenta davvero il fattore di usabilità. Offre nove dispositivi più grandi dei tablet, da un laptop da 10 pollici a un desktop da 24 pollici, cinque tablet, nove smartphone, tre dimensioni TV e un'opzione di dimensione dello schermo personalizzata. Qualsiasi opzione selezionata può essere ruotata in orientamento verticale o orizzontale utilizzando un controllo separato nel menu. Puoi scegliere se consentire o meno lo scorrimento e generare un collegamento condivisibile con un clic di un pulsante.
Il sito è utile in modo proattivo nel modo in cui presenta le informazioni sulla dimensione dei pixel. Ogni dispositivo nel menu viene mostrato con un nome e dimensioni in pixel, la dimensione della finestra del browser viene mostrata vicino all'angolo in alto a destra della finestra e le dimensioni dell'opzione selezionata vengono mostrate nel piè di pagina sotto il display insieme al URL del sito in fase di test. Questa piccola funzionalità semplifica la documentazione degli screenshot e la condivisione delle informazioni con i clienti.
Tutto quanto sopra lo avrebbe già reso uno strumento ideale, ma gli sviluppatori di Screenfly hanno trovato l'opportunità di renderlo semplicemente di prima classe e hanno fornito una proprietà di server proxy. Citando dal loro sito web: “Screenfly può utilizzare un server proxy per impersonare i dispositivi mentre visualizzi il loro sito web. Il proxy simula la stringa dell'agente utente dei dispositivi selezionati, ma non il comportamento di tali dispositivi." Tutti gli altri strumenti qui trattati riguardano esclusivamente i CSS. Screenfly è l'unico che consente test in base alla stringa dello user agent.
Avendo testato in questo modo un sito che ho creato con una versione mobile esistente, posso dire che i risultati sono stati molto buoni. Tutto è stato visualizzato esattamente come mi aspettavo e le funzionalità erano testabili. Va detto che testare le stringhe dell'agente utente è diventato tradizionale, ma questo sito è stato creato molto tempo fa e la proprietà proxy si è rivelata un'aggiunta davvero molto utile.
Quindi, puoi vedere che ci sono molte risorse disponibili per testare siti Web reattivi. Differiscono in proprietà uniche; quali siti utilizzerai dipenderanno dalle tue preferenze e requisiti personali e cerco di incoraggiarti a esplorarli e sperimentarli. Più noi sviluppatori disponiamo di strumenti veramente utili, meglio è.
Framework, come o, che facilitano e velocizzano notevolmente il layout della pagina.
implica un'eccellente visualizzazione di una pagina web su tutti i dispositivi e le estensioni del monitor. Probabilmente non tutti i progettisti di layout dispongono di un set completo di dispositivi con tutte le possibili estensioni di visualizzazione per testare il proprio layout. Ciò non sorprende, perché al giorno d’oggi la tecnologia non è economica.
COSÌ. Acquistare montagne di telefoni cellulari e tablet non è un'opzione: andremo in rovina. Cosa fare? Per questi compiti sono stati sviluppati servizi per testare siti web adattivi. Il principio del loro funzionamento è molto semplice. Molto spesso c'è una cornice di una certa dimensione in cui si apre la pagina. L'effetto è più o meno lo stesso di quando viene visualizzato su un dispositivo mobile. Vorrei sottolineare che il servizio non mostrerà sempre accuratamente la visualizzazione della pagina su un telefono o tablet. Durante la codifica, dovresti testare l'utilizzo dei servizi, ma dopo il completamento, se possibile, testare sui dispositivi più comuni.
COSÌ. Ecco gli strumenti migliori per testare siti Web reattivi.
Uno strumento per testare i siti Web reattivi di Adobe. Per usarlo è necessario installarlo sul tuo computer.
Il programma ti consente di sincronizzare i tuoi dispositivi tramite WIFI e visualizzare il sito così come verrà visualizzato sul tuo dispositivo. Dispositivi attualmente supportati con i seguenti sistemi operativi: iOS, Android, Kindle Fire.
Non è mai stato così importante garantire che il tuo progetto sia pronto per ogni tipo di utente e dispositivo prima del lancio. Sebbene possa essere fisicamente difficile testare un progetto su ogni dispositivo, esistono alcuni strumenti e app che possono aiutarti a simulare diversi scenari reattivi.
Con così tanti strumenti gratuiti e premium disponibili, non c'è motivo di non testare il tuo responsive design prima di pubblicarlo online. Assicurati solo di utilizzare queste informazioni per molte delle modifiche di progettazione necessarie! Oggi vi proponiamo un set di strumenti per testare il responsive design.
1. Test di ottimizzazione mobile di GoogleGoogle Mobile-Friendly Test è uno di quegli strumenti che in qualche modo vengono trascurati. Hai bisogno che il design del tuo sito soddisfi gli standard di Google per favorire la visibilità della ricerca, ed è così semplice.
Lo strumento è facile da usare, basta inserire un URL e vedere come si posizionano le tue pagine sui dispositivi mobili. La parte migliore di questo strumento è che identifica i punti in cui il tuo sito potrebbe essere lento o visualizzato male sui dispositivi mobili in modo da poter correggere gli errori.