Cum să testați designul responsive gratuit. Aspect receptiv folosind script JavaScript Testarea designului responsive
Bună ziua, dragi cititori ai blogului. Nu este surprinzător că designul adaptiv devine din ce în ce mai popular pe internetul rusesc. Și, desigur, designerii de layout trebuie să-l studieze. Deoarece designul responsive va fi în curând pe aproape toate site-urile web, deoarece tot mai mulți oameni folosesc dispozitive mobile.
Și aș dori să spun că site-urile cu el sunt mult mai convenabile de citit pe astfel de dispozitive decât fără el.
Astăzi vreau să vă prezint 5 servicii foarte utile și cool cu care vă puteți verifica site-ul pentru adaptabilitate.
Și așa, hai să mergem.
5 servicii în care vă puteți verifica site-ul pentru adaptabilitate. www.responsivedesigntest.netUn serviciu bun pentru verificarea site-urilor. Există multe rezoluții de ecran atât pentru tablete, cât și pentru telefoane.
mattkersley.comUn serviciu simplu pentru verificarea unui site web de la Matt Kersley. Toate rezoluțiile populare ale dispozitivelor mobile sunt, de asemenea, disponibile.
Un serviciu foarte tare care va verifica orice site. Mi-a plăcut foarte mult atât designul, cât și funcționalitatea.
Serviciu foarte frumos si functional. Este chiar posibil să verifici cum va arăta site-ul la televizor :-)
De la autor: „Nu mai redimensionați acest browser, va fi șters în curând!” Cât de des auzi asta? Ei bine, poate nu atât de des, dar dacă dezvoltați site-uri web responsive, știți despre ce vorbesc: de fiecare dată când editați DOM sau CSS, trageți marginea browserului înainte și înapoi, testând modificările. și căutând inexactități.
În general, majoritatea acestor eforturi sunt o încercare de a imita dimensiunile ecranului diferitelor dispozitive.
Dacă faci dezvoltare pentru întreprinderi, probabil că ai de testat o mulțime de dispozitive furnizate de companie. Unde lucrez, avem iPad-uri, iPhone-uri, alte una sau două tablete, laptopuri și desktop-uri. Dacă nu ai acest lux, trebuie să folosești ceea ce ai la îndemână.
Acasa am doua laptopuri diferite, doua diferite dispozitive Android: Kindle și Nexus 7. Folosesc aceste dispozitive pentru a-mi testa evoluțiile freelance, dar este clar că aceasta nu este o selecție exhaustivă. Deloc dispozitive iOSși, deși sunt considerat unul dintre cei care adoptă timpurie, nu intenționez să cumpăr fiecare telefon/tabletă/tabletă nouă de îndată ce va fi pusă în vânzare.
Deci, ce ar trebui să facă un dezvoltator? Din fericire, există un număr tot mai mare de instrumente bazate pe browser care simulează dimensiunile ecranului unei varietăți de dispozitive. Instrumente diferite, desigur, vin cu seturi diferite de caracteristici și niveluri diferite de eficiență. Ne vom uita la unele dintre ele aici.
În scopuri de testare, am luat primul site web cu adevărat receptiv pe care l-am creat, PajamasOnYourFeet.com. Se bazează pe șablonul Brownie HTML5, oferit foarte generos și gratuit comunității de dezvoltatori pe EGrappler.
Sunt receptiv?Sunt receptiv? – o previzualizare complet ușoară, instantanee a site-ului dvs. în ceea ce privește modul în care va apărea pe patru dispozitive diferite. Toate patru sunt iOS, iar dezvoltatorul își explică alegerea pe site. Nu oferă comenzi sau selecții, doar un afișaj foarte simplu și elegant. Vizualizați dimensiunile ferestrei:
Desktop - 1600 x 992 px, în scădere la scară (0,3181)
Laptop - 1280 x 802 px, în scădere (0,277)
Tabletă - 768 x 1024px, în scădere la scară (0,219)
Mobil - 320 x 480 px, în scădere la scară (0,219)
Pentru a cita dezvoltatorul: „Acesta nu este un instrument de testare, este foarte important să faceți acest lucru pe dispozitive reale. Dar este un instrument pentru a face capturi de ecran rapide (pentru mine) și pentru a oferi o oportunitate vizuală de a „detalia” în întâlnirile cu clienții ceea ce ai vrut să spui.”
deviceponsive este similar cu site-ul Am I Responsive? unul care vă afișează site-ul simplu și ordonat, dar nu are controale sau opțiuni disponibile când vine vorba de dispozitive. Toate sunt afișate simultan pe o pagină lungă. Are o proprietate interesantă - puteți modifica antetul editând culoarea de fundal și inserând propriul logo, apoi „printați-l”. În acest fel, într-un fel, vă puteți marca site-ul atunci când afișați capturi de ecran clientului. Dispozitive și dimensiuni de ecran simulate pe acest site:
Macbook - 1280 x 800
iPad (portret) - 768 x 1024
iPad (peisaj) - 1024 x 768
Kindle (portret) - 600 x 1024
Kindle (peisaj) - 1024 x 600
iPhone (orientare portret) - 320 x 480
iPhone (peisaj) - 480 x 320
Galaxy (portret) - 240 x 320
Galaxy (peisaj) - 320 x 240
Ca și în cazul majorității instrumentelor similare, barele de defilare apar pe dispozitivele mici. Ele nu vor apărea pe un dispozitiv real, dar pentru a putea derula vizualizarea de testare pe un dispozitiv non-touch trebuie să faci câteva concesii.
La fel ca testul deviceponsive, responsive afișează site-ul dvs. pe mai multe dispozitive, dar în loc să le afișați pe toate odată pe o singură pagină, alegeți ce dispozitiv să vizualizați dintr-un meniu simplu din partea de sus a paginii. Răsfoind acest site pe un laptop de dimensiuni medii, am constatat că micșorarea paginii funcționează grozav, permițându-vă să vedeți întregul site în fereastra dispozitivului testat.
Aici sunt oferite treisprezece ferestre diferite de vizualizare, de pe un monitor mare calculator desktop la așa-numitul „Crappy Android” (ca să fiu sincer, au și o opțiune numită „ Android este mai bun„(Android mai frumos).
Încă o dată, Firefox se împiedică puțin pe acest site. Observați în captură de ecran - între antetul verde și zona de conținut cu fundal alb - există doar o bară albastră unde ar trebui să apară glisorul pentru imagine.
Este foarte asemănător cu cele două anterioare și singurul lucru care stabilește responsive.is în afară de ele este animația lină a afișajului de la un dispozitiv la altul, precum și o suprapunere translucidă care arată imobilul site-ului care cade din fereastra de vizualizare. .
Singurele opțiuni de dispozitiv disponibile aici sunt cele automate, care umplu fereastra browserului, arătând site-ul așa cum l-ați vedea dacă ați merge la el: Desktop; Tabletă (orientare peisaj); Tabletă (orientare portret); Smartphone (orientare peisaj) și Smartphone (orientare portret), dimensiunile pixelilor nu sunt date.
Încă o dată, mai multe caracteristici și opțiuni diferite deosebesc Screenqueries de alte site-uri. Există 14 dispozitive de telefon și 12 tablete cu un element separat pentru comutarea modurilor portret și peisaj. Acestea sunt afișate pe o grilă numerotată de pixeli, cu dimensiunile afișate în colțul din dreapta jos al afișajului de testare. Marginile afișajului pot fi glisate, astfel încât să puteți testa dimensiuni personalizate. Trageți sau faceți clic pe zona de testare și fundalul va deveni gri, cu un aspect mai puțin aglomerat.
Caracteristică interesantă acest site - pentru mai multe dispozitive există o opțiune „True View”, care arată site-ul dvs. împachetat în browserul Chrome alocat acestui dispozitiv. Din păcate, și m-am obișnuit deja cu asta, Firefox nu poate afișa glisorul de imagine al site-ului de testare. Nu vă faceți griji, prefer Firefox când vine vorba de browsere, dar din fericire avem opțiuni.
Screenfly crește cu adevărat factorul de utilizare. Oferă nouă dispozitive mai mari decât tabletele, de la un laptop de 10 inchi la un desktop de 24 de inchi, cinci tablete, nouă smartphone-uri, trei dimensiuni de televizor și o opțiune de dimensiune personalizată a ecranului. Orice opțiune pe care o selectați poate fi rotită în orientare portret sau peisaj folosind un control separat din meniu. Puteți alege dacă permiteți sau nu defilarea și puteți genera un link care poate fi partajat cu un singur clic pe un buton.
Site-ul este util în mod proactiv în modul în care prezintă informații despre dimensiunea pixelilor. Fiecare dispozitiv din meniu este afișat cu un nume și dimensiuni în pixeli, dimensiunea propriei ferestre de browser este afișată în colțul din dreapta sus al ferestrei, iar dimensiunile opțiunii selectate sunt afișate în subsolul de sub afișaj împreună cu URL-ul site-ului testat. Această funcție mică facilitează documentarea capturilor de ecran și partajarea informațiilor cu clienții.
Toate cele de mai sus l-ar fi făcut deja un instrument ideal, dar dezvoltatorii Screenfly au găsit o oportunitate de a-l face pur și simplu de top și au oferit o proprietate de server proxy. Citând din site-ul lor: „Screenfly poate folosi un server proxy pentru a uzurpa identitatea dispozitivelor în timp ce le vizualizați site-ul. Proxy-ul simulează șirul de agent de utilizator al dispozitivelor pe care le selectați, dar nu și comportamentul acelor dispozitive.” Toate celelalte instrumente abordate aici se ocupă exclusiv de CSS. Screenfly este singurul care permite testarea bazată pe șirul user agent.
După ce am testat în acest fel un site pe care l-am creat cu cel existent versiune mobila, pot spune că rezultatele au fost foarte bune. Totul a fost afișat exact așa cum mă așteptam, iar caracteristicile au fost testabile. Trebuie spus că testarea șirurilor de user agent a devenit tradițională, dar acest site a fost făcut cu mult timp în urmă, iar proprietatea proxy s-a dovedit a fi într-adevăr o completare foarte utilă.
Deci, puteți vedea că există o mulțime de resurse disponibile pentru testarea site-urilor web responsive. Ele diferă în proprietăți unice; site-urile pe care le utilizați vor depinde de preferințele și cerințele dvs. personale și încerc să vă încurajez să le explorați și să le experimentați. Cu cât noi dezvoltatorii avem cu adevărat instrumente utile, cu atât mai bine.
Un magazin online trebuie optimizat pentru dispozitive mobile. Această problemă este rezolvată folosind un design adaptiv, care permite afișarea corectă a site-ului pe orice platformă. Cu toate acestea, implementarea designului receptiv vine cu un set standard de capcane. Să enumerăm cele mai frecvente 8 probleme tipice site-urilor de cumpărături online.
Neglijarea analizei comportamentului vizitatorilorGraba de a intra în segmentul mobil îi obligă pe retaileri să proiecteze un site web fără a efectua analize serioase ale comportamentului vizitatorilor. Analiza comportamentului vizitatorilor este cea mai importantă etapă de pregătire, care vă permite să identificați cele mai populare dispozitive mobile și să optimizați mai întâi site-ul pentru acestea. Analytics ajută la determinarea celei mai „populare” acțiuni ale utilizatorului, de exemplu, mărirea imaginii unui produs; arată rata de conversie a vizitatorilor de pe dispozitive mobile etc. Aceste date vor oferi o perspectivă asupra preferințelor de comportament ale utilizatorilor și vor ajuta la îndeplinirea așteptărilor publicului mobil. Analiză traficul mobil este necesar să se realizeze sistematic și consecvent implementarea rezultatelor, finalizarea și optimizarea site-ului pentru a răspunde nevoilor clienților.
Proiectarea unui magazin de desktopDe obicei, versiunea desktop a unui magazin online este reproiectată pentru ecranele mobile, deși este mai logic să luați ecranul mic al unui dispozitiv mobil și apoi să-l scalați la desktop. Comercianții cu amănuntul nu realizează adesea problemele tehnice de a aduce un site web conceput pentru un desktop la dimensiunea unui smartphone. 
Începe designul pentru ecrane mobile, vă concentrați pe experiența utilizatorului mobil. Ca rezultat, vă va fi mai ușor să proiectați pentru ambele canale: desktop și mobil.
Testarea aspectului mobil al unui magazin online este o etapă obligatorie a lansării, dar mulți proprietari îl neglijează adesea și se lansează fără testare. Ca urmare, pe versiunea live a site-ului pentru dispozitive mobile pot apărea erori chiar și în timpul procesului de efectuare a unei achiziții și de plasare a unei comenzi.
Deficiențele designului adaptiv sunt ușor de identificat prin testarea preliminară a unui magazin online, dar mulți vânzători nu au resursele pentru aceasta. Pentru a reduce riscul de a pierde bani, testați rutele utilizatorilor cheie în jurul site-ului în browserele principale - Chrome, IE, Firefox, Safari și sisteme de operare– Windows, Mac OS, Android, IOS pe populare dispozitive mobile. Testați de fiecare dată când faceți modificări; servicii precum BrowserStack sau Viewport Resizer pot ajuta la reducerea timpului de testare la câteva ore.
Elemente mici pentru ecrane mobileÎn efortul de a încadra mai mult spațiu pe ecranul unui smartphone, proprietarii de magazine online se zgârcesc cu dimensiunea butoanelor lor de „îndemn la acțiune”. Nu forțați utilizatorii să mărească pentru a face clic pe butonul Cumpărați și nu așezați elementele mici prea aproape unul de altul, altfel utilizatorii dvs. vor alege să meargă pe un site mai convenabil. Proiectați interfețe cu elemente mari de navigare și dimensiuni de butoane pentru îndemnuri.
Viteză lentă de încărcare a paginiiPublicul mobil adoră site-urile rapide și timpii minimi de încărcare. Evaluați componentele dvs pagini mobile– imagini, butoane, text, scripturi – acestea trebuie optimizate pentru dispozitivele mobile. Google ia în considerare timpul de încărcare a paginii în SERP-urile sale și clasifică site-urile mobile și le oferă preferință în top, astfel încât site-urile „ușoare” să obțină un avantaj serios suplimentar.
Separați conținutul în diferite file, de exemplu, o pagină de produs poate conține doar o imagine de bază, descriere, preț și un buton „Cumpărați”. Recenziile și videoclipurile clienților pot fi plasate într-o filă separată și pot reduce „greutatea” părții principale a paginii. Pe lângă conținut, optimizați alte elemente care afectează viteza de încărcare - fișiere CSS, imagini și scripturi, trimiteți doar datele necesare. Instrumentele care reduc dimensiunea fișierelor de resurse și timpul de încărcare a acestora vă vor ajuta în acest sens: Uglify sau JSCompress.
Decuparea conținutului pentru utilizatorii de telefonie mobilăAdesea, dezvoltatorii ascund o parte din conținut, astfel încât încărcarea pe dispozitivele mobile să fie mai rapidă. Cu toate acestea, adesea dimensiunea paginii nu este redusă de fapt și conținutul pur și simplu nu este afișat utilizatorului. Magazinul dvs. ar trebui să poată genera dinamic o pagină, reducând greutatea paginii și timpii de încărcare pentru vizitatorii de pe mobil. În plus, a oferi utilizatorilor de dispozitive mobile mai puțin conținut este rău și are un impact negativ asupra experienței consumatorului. De obicei, în timpul procesului de cumpărare pe care le folosesc diferite dispozitive, aproximativ 90% dintre cumpărătorii online fac acest lucru. Limitarea acestora la metode de design receptiv este o mare greșeală.
Suportă imagini într-o singură rezoluțieUn site web bun cu un design responsive modifică automat rezoluția imaginilor în funcție de tipul de dispozitiv; imaginile grele măresc timpul de încărcare. Există mai multe moduri de a ajusta automat dimensiunile imaginii pentru a se potrivi dispozitiv specific. Imaginile „flexibile” (imagini fluide) sunt o metodă bazată pe CSS care vă permite să comprimați și să întindeți o imagine în funcție de lățimea elementului care o conține, sau un element HTML5 care vă permite să încărcați o imagine de dimensiunea necesară pentru fiecare tip de dispozitiv.
E-mailuri „neresponsive”.Se întâmplă că totul este în regulă cu site-ul în sine; designul responsive funcționează bine pe desktop-uri și dispozitive mobile. Dar e-mailurile nu răspund, iar utilizatorii de telefonie mobilă trebuie să se chinuie să verifice detaliile comenzii sau să parcurgă o listă nesfârșită de produse recomandate pentru a ajunge la achizițiile finalizate. 
E-mailurile sunt un punct de contact cheie pentru clienți, așa că integrați designul de e-mail receptiv în strategia dvs. pentru mobil. Proiectați și testați-vă scrisorile și buletinele informative; șabloanele de scrisori ar trebui să fie „ușoare” și să conțină doar informații importante.
Odată cu dezvoltarea tehnologiilor web cresc și cerințele pentru dezvoltarea web. Dezvoltatorii web, designerii de layout sau cum sunt numiți astăzi dezvoltatorii frontend, simt cea mai mare presiune.
În acest articol vom vorbi puțin despre aspectul adaptiv, deoarece acest „truc” este acum foarte scump. Când vine vorba de layout adaptiv, designerii de layout de orice nivel se uită la clienți sau la managerii de proiect, ca să spunem ușor, cu furie, pentru că înțeleg cât de dificil este.
Mulți oameni încep să confunde aspectul adaptiv cu aspectul flexibil; aceasta este o greșeală foarte comună a designerilor de layout începători. Care este diferența întrebați?
Să punem mai întâi, ca să vă fie clar și ca să spunem așa, să punem toate punctele și să ne uităm la ce tipuri de aspect există.
Există 4 tipuri de layout:
Să luăm în considerare toate tipurile mai detaliat.
1. Aspect fix
Blocurile nu își schimbă lățimea. Pe monitoarele cu rezoluție scăzută, apare o bară de defilare orizontală.
#temnyi, #svetlyi ( lățime: 440px; )
2. Dispunerea cauciucului
Blocurile își schimbă lățimea în funcție de dimensiunea ferestrei browserului. Poate lua valori maxime și minime (proprietatea max-width). Dar nu puteți face 50% de la 50% la 100% pe măsură ce ecranul devine mai mic.
#temnyi, #svetlyi ( lățime: 50%; )
3. Aspect adaptiv
Implementat folosind @media sau scripturi. Personalizat pentru anumite dispozitive cunoscute (320, 768, 1024 etc.). Orice schimbare se produce în smucituri, după atingerea unuia dintre nivelurile specificate. Cu siguranta potrivit pentru
#temnyi, #svetlyi ( lățime: 430px; ) @media (lățime maximă: 1220px) ( #temnyi, #svetlyi ( lățime: 380px; ) ) @media (lățime maximă: 1120px) ( #temnyi, #svetlyi ( lățime) : 325px; ) ) @media (lățime maximă: 680px) ( #temnyi, #svetlyi ( lățime: 200px; ) )
4. Aspect receptiv
Aceasta este o combinație de aspect fluid și adaptiv. Cel mai greu de implementat. Dar rezultatul este cel mai acceptabil. Este sigur să spunem că site-ul se va adapta oricărui dispozitiv.
#temnyi, #svetlyi ( lățime: 50%; ) @media (lățime maximă: 1006px) ( #temnyi, #svetlyi ( lățime: 100%; ) )
Așa că am vorbit despre 4 tipuri de aspect al site-ului. Acum a sosit momentul pentru scriptul nostru de aspect adaptabil miraculos. Sper că nu am nevoie să explic nimic, scriptul este destul de simplu, spunem doar că atunci când schimbi un bloc va fi amestecat undeva și atât. Desigur, acest lucru este posibil și prin stilurile CSS, dar trebuie să cunoașteți toate metodele; uneori, în unele locuri, unele nu vor funcționa, iar altele vor fi potrivite.
Script de aspect adaptiv:
/* Să creăm o variabilă în care puteți pune clase monogest, pentru o utilizare convenabilă a acestora în cod. Adică, aici le detectează o dată și gata, și nu înainte de fiecare probă! aceasta este o caracteristică utilă */ var my = ( fereastra: $(fereastra) ); /*De fapt, funcția în sine*/ $(window).resize(function () ( /*O variabilă care determină lățimea ferestrei și o pune în variabila width*/ var width = my.window.width( ); /*condiție de transformare a ferestrei, adică o condiție care este executată atunci când lățimea ferestrei atinge o anumită dimensiune */ 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") } });
Asta e tot. Dacă aveți întrebări, scrieți în comentarii, accesați
