Come testare gratuitamente il responsive design. Layout reattivo utilizzando script JavaScript Test del design reattivo
Ciao, cari lettori del blog. Non sorprende che il design adattivo stia diventando sempre più popolare nell’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 portatili diversi, due diversi Dispositivi Android: Kindle e Nexus 7. Utilizzo questi dispositivi per testare i miei sviluppi freelance, ma è chiaro che questa non è una selezione esaustiva. Affatto Dispositivi iOS e, anche se sono considerato uno dei primi ad adottarlo, 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 proprietà 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 questo sito su un portatile di medie dimensioni, ho scoperto che restringere la pagina funziona benissimo, permettendoti di vedere l'intero sito all'interno della finestra del dispositivo in prova.
Qui vengono offerte tredici diverse finestre di visualizzazione, da un grande monitor computer desktop al cosiddetto “Crappy Android” (a dire il vero hanno anche un’opzione chiamata “ Android è migliore"(Android più bello).
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 andassi: 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.
Caratteristica interessante questo sito: per diversi dispositivi è disponibile l'opzione "Vista reale", che mostra il tuo sito racchiuso nel browser Chrome assegnato a questo 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.
Dopo aver testato in questo modo un sito che ho creato con quello esistente versione mobile, 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 abbiamo davvero strumenti utili, tutto il meglio.
Un negozio online deve essere ottimizzato per i dispositivi mobili. Questo problema viene risolto utilizzando il design adattivo, che consente al sito di essere visualizzato correttamente su qualsiasi piattaforma. Tuttavia, l’implementazione del responsive design comporta una serie di insidie standard. Elenchiamo gli 8 problemi più comuni tipici dei siti di shopping online.
Trascurare l’analisi del comportamento dei visitatoriLa fretta di entrare nel segmento mobile costringe i rivenditori a progettare un sito web senza condurre un’analisi seria del comportamento dei visitatori. L'analisi del comportamento dei visitatori è la fase di preparazione più importante, che consente di identificare i dispositivi mobili più popolari e di ottimizzare prima il sito per loro. Analytics aiuta a determinare l'azione più "popolare" dell'utente, ad esempio l'ingrandimento dell'immagine di un prodotto; mostra il tasso di conversione dei visitatori mobili, ecc. Questi dati forniranno informazioni dettagliate sulle preferenze di comportamento degli utenti e aiuteranno a soddisfare le aspettative del pubblico mobile. Analisi traffico mobileè necessario effettuare in modo sistematico e coerente l'implementazione dei risultati, finalizzando e ottimizzando il sito per soddisfare le esigenze dei clienti.
Progettare un negozio desktopIn genere, la versione desktop di un negozio online viene riprogettata per gli schermi mobili, anche se è più logico prendere il piccolo schermo di un dispositivo mobile e poi ridimensionarlo sul desktop. I rivenditori spesso non si rendono conto dei problemi tecnici che comporta portare un sito web progettato per un desktop alle dimensioni di uno smartphone. 
Inizio progettazione per schermi mobili, ti concentri sull'esperienza utente mobile. Di conseguenza, sarà più semplice per te progettare per entrambi i canali: desktop e mobile.
Testare il layout mobile di un negozio online è una fase obbligatoria del lancio, ma molti proprietari spesso la trascurano e lo lanciano senza testarlo. Di conseguenza, nella versione live del sito per dispositivi mobili, possono comparire errori anche durante il processo di acquisto e di effettuazione dell'ordine.
Le carenze del design adattivo possono essere facilmente identificate dai test preliminari di un negozio online, ma molti venditori non dispongono delle risorse per farlo. Per ridurre il rischio di perdere denaro, testa i percorsi chiave degli utenti all'interno del sito nei principali browser: Chrome, IE, Firefox, Safari e sistemi operativi– Windows, Mac OS, Android, IOS popolari dispositivi mobili. Testalo ogni volta che apporti modifiche; servizi come BrowserStack o Viewport Resizer possono aiutarti a ridurre i tempi di test a diverse ore.
Piccoli elementi per schermi mobiliNel tentativo di occupare più spazio sullo schermo dello smartphone, i proprietari di negozi online lesinano sulle dimensioni dei pulsanti “call to action”. Non forzare gli utenti a eseguire lo zoom per fare clic sul pulsante Acquista e non posizionare piccoli elementi troppo vicini tra loro, altrimenti i tuoi utenti sceglieranno di andare su un sito più conveniente. Progetta interfacce con elementi di navigazione di grandi dimensioni e dimensioni dei pulsanti di invito all'azione.
Velocità di caricamento della pagina lentaIl pubblico mobile ama i siti veloci e i tempi di caricamento minimi. Valuta i componenti del tuo pagine mobili– immagini, pulsanti, testo, script – devono essere ottimizzati per i dispositivi mobili. Google tiene conto del tempo di caricamento della pagina nella sua SERP e classifica i siti mobili e dà loro la preferenza tra i primi, in modo che i siti "leggeri" ottengano un ulteriore vantaggio significativo.
Separare i contenuti in diverse schede, ad esempio una pagina di prodotto può contenere solo un'immagine di base, una descrizione, un prezzo e un pulsante "Acquista". Le recensioni e i video dei clienti possono essere inseriti in una scheda separata e ridurre il “peso” della parte principale della pagina. Oltre al contenuto, ottimizza altri elementi che influiscono sulla velocità di caricamento: file CSS, immagini e script, invia solo i dati necessari. Strumenti che riducono la dimensione dei file di risorse e il loro tempo di caricamento ti aiuteranno in questo: Uglify o JSCompress.
Taglio dei contenuti per gli utenti mobiliSpesso gli sviluppatori nascondono parte del contenuto in modo che il caricamento sui dispositivi mobili sia più veloce. Tuttavia, spesso la dimensione della pagina non viene effettivamente ridotta e il contenuto semplicemente non viene visualizzato all'utente. Il tuo negozio dovrebbe essere in grado di generare dinamicamente una pagina, riducendo il peso della pagina e i tempi di caricamento per i visitatori mobili. Inoltre, offrire agli utenti mobili meno contenuti è negativo e ha un impatto negativo sull'esperienza del consumatore. In genere, durante il processo di acquisto utilizzano diversi dispositivi, circa il 90% degli acquirenti online lo fa. Limitarli a metodi di progettazione reattiva è un grosso errore.
Supporta immagini in una sola risoluzioneUn buon sito web dal design responsive cambia automaticamente la risoluzione delle immagini a seconda del tipo di dispositivo; le immagini pesanti aumentano i tempi di caricamento. Esistono diversi modi per regolare automaticamente le dimensioni dell'immagine per adattarla dispositivo specifico. Le immagini “flessibili” (immagini fluide) sono un metodo basato su CSS che consente di comprimere e allungare un'immagine a seconda della larghezza dell'elemento che la contiene, oppure un elemento HTML5 che consente di caricare un'immagine della dimensione richiesta per ciascuna tipo di dispositivo.
E-mail "non reattive".Succede che tutto va bene con il sito stesso; il design reattivo funziona bene su desktop e dispositivi mobili. Ma le e-mail non rispondono e gli utenti mobili devono faticare per controllare i dettagli dell'ordine o scorrere un elenco infinito di prodotti consigliati per arrivare agli acquisti completati. 
Le e-mail sono un punto di contatto chiave con i clienti, quindi integra il design responsivo delle e-mail nella tua strategia mobile. Progetta e testa le tue lettere e newsletter; i modelli di lettera dovrebbero essere “leggeri” e contenere solo informazioni importanti.
Con lo sviluppo delle tecnologie web aumentano anche i requisiti per lo sviluppo web. Gli sviluppatori web, i progettisti di layout o, come vengono chiamati oggi, gli sviluppatori frontend, sentono la pressione maggiore.
In questo articolo parleremo un po’ del layout adattivo, visto che questo “trucchetto” è ormai molto costoso. Quando si tratta di layout adattivo, i progettisti di layout di qualsiasi livello guardano i clienti o i project manager, per usare un eufemismo, con rabbia, perché capiscono quanto sia difficile.
Molte persone iniziano a confondere il layout adattivo con il layout flessibile; questo è un errore molto comune tra i progettisti di layout alle prime armi. Qual è la differenza che chiedi?
Per prima cosa, in modo che ti sia chiaro e per così dire, mettiamo tutti i punti e guardiamo quali tipi di layout ci sono.
Esistono 4 tipi di layout:
Consideriamo tutti i tipi in modo più dettagliato.
1. Disposizione fissa
I blocchi non cambiano la loro larghezza. Sui monitor a bassa risoluzione viene visualizzata una barra di scorrimento orizzontale.
#temnyi, #svetlyi (larghezza: 440px;)
2. Disposizione della gomma
I blocchi cambiano la loro larghezza a seconda della dimensione della finestra del browser. Può assumere valori massimi e minimi (proprietà max-width). Ma non puoi passare dal 50% al 100% dal 50% man mano che lo schermo diventa più piccolo.
#temnyi, #svetlyi ( larghezza: 50%; )
3. Disposizione adattiva
Implementato utilizzando @media o script. Personalizzato per specifici dispositivi noti (320, 768, 1024, ecc.). Qualsiasi cambiamento avviene a scatti, dopo aver raggiunto uno dei livelli specificati. Sicuramente adatto a
#temnyi, #svetlyi ( larghezza: 430px; ) @media (larghezza massima: 1220px) ( #temnyi, #svetlyi ( larghezza: 380px; ) ) @media (larghezza massima: 1120px) ( #temnyi, #svetlyi ( larghezza : 325px; ) ) @media (larghezza massima: 680px) ( #temnyi, #svetlyi ( larghezza: 200px; ) )
4. Layout reattivo
Questa è una combinazione di layout fluido e adattivo. Il più difficile da implementare. Ma il risultato è il più accettabile. Si può dire con certezza che il sito si adatterà a qualsiasi dispositivo.
#temnyi, #svetlyi ( larghezza: 50%; ) @media (larghezza massima: 1006px) ( #temnyi, #svetlyi ( larghezza: 100%; ) )
Quindi abbiamo parlato di 4 tipi di layout del sito web. Ora è giunto il momento per il nostro miracoloso script di layout adattivo. Spero di non aver bisogno di spiegare nulla, lo script è abbastanza semplice, diciamo solo che quando cambi qualche blocco verrà mixato da qualche parte e basta. Naturalmente questo è possibile anche attraverso gli stili CSS, ma è necessario conoscere tutti i metodi; a volte in alcuni punti alcuni non funzioneranno e altri andranno bene.
Script di layout adattivo:
/* Creiamo una variabile in cui puoi inserire classi monogest, per usarle comodamente nel codice. Cioè qui li rileva una volta e basta, e non prima di ogni campione! questa è una funzionalità utile */ var my = ( window: $(window) ); /*In realtà la funzione stessa*/ $(window).resize(function () ( /*Una variabile che determina la larghezza della finestra e la inserisce nella variabile width*/ var width = my.window.width( ); /*condizione di trasformazione della finestra cioè una condizione che viene eseguita quando la larghezza della finestra raggiunge una certa dimensione */ if(my.window.width()< 640) { $(".right-content").css("float:none; clear:both"); $(".header-menu").css("float","left"); if(width < 480) { /*какое нибудь условие*/ if(width < 320) { /*какое нибудь условие*/ } } } /*Возвращает все стили на свои места т.е при расширении он примет первоначальный вид*/ else { $(".right-content").css("float:left; clear:none"); $(".header-menu").css("float:none") } });
È tutto. Se hai domande, scrivi nei commenti, vai a
