Kako brezplačno preizkusiti odzivni dizajn. Odzivna postavitev z uporabo skripta JavaScript Testiranje odzivnega dizajna
Pozdravljeni, dragi bralci bloga. Ni presenetljivo, da je prilagodljivo oblikovanje vse bolj priljubljeno na ruskem internetu. In seveda, oblikovalci postavitev ga morajo preučiti. Odzivni dizajn bo kmalu na skoraj vseh spletnih mestih, saj vse več ljudi uporablja mobilne naprave.
In rad bi rekel, da so spletna mesta z njim veliko bolj priročna za branje na takih napravah kot brez njega.
Danes vam želim predstaviti 5 zelo uporabnih in kul storitev, s katerimi lahko preverite prilagodljivost svojega spletnega mesta.
In tako, gremo.
5 storitev, s katerimi lahko preverite, ali je vaša spletna stran prilagodljiva. www.responsivedesigntest.netDobra storitev za preverjanje spletnih mest. Obstaja veliko ločljivosti zaslona za tablice in telefone.
mattkersley.comPreprosta storitev za preverjanje spletne strani Matta Kersleyja. Na voljo so tudi vse priljubljene ločljivosti mobilnih naprav.
Zelo kul storitev, ki bo preverila katero koli spletno mesto. Dizajn mi je bil zelo všeč, prav tako funkcionalnost.
Zelo lep in funkcionalen servis. Možno je celo preveriti, kako bo stran videti na televiziji :-)
Od avtorja: "Nehajte spreminjati velikost tega brskalnika, kmalu bo izbrisan!" Kako pogosto slišiš to? No, v redu, morda ne tako pogosto, toda če razvijate odzivna spletna mesta, veste, o čem govorim: vsakič, ko urejate DOM ali CSS, vlečete rob brskalnika naprej in nazaj in preizkušate spremembe in iskanje netočnosti.
Na splošno je večina teh prizadevanj poskus posnemanja velikosti zaslona različnih naprav.
Če se ukvarjate z razvojem podjetja, imate verjetno veliko naprav, ki jih ponuja podjetje, za testiranje. Kjer delam, imamo iPade, iPhonee, eno ali dve drugi tablici, prenosnike in namizne računalnike. Če tega razkošja nimate, morate uporabiti tisto, kar imate pri roki.
Doma imam dva različna prenosnika, dva različna naprave Android: Kindle in Nexus 7. Te naprave uporabljam za preizkušanje svojega samostojnega razvoja, vendar je jasno, da to ni izčrpen izbor. Sploh ne naprave iOS, in čeprav veljam za zgodnjega uporabnika, ne nameravam kupiti vsakega novega telefona/tablice/tablice takoj, ko bo naprodaj.
Kaj naj torej stori razvijalec? Na srečo obstaja vse več orodij, ki temeljijo na brskalnikih in simulirajo velikosti zaslona različnih naprav. Različna orodja imajo seveda različne nabore funkcij in različne ravni učinkovitosti. Nekaj si jih bomo ogledali tukaj.
Za namene testiranja sem vzel prvo resnično odzivno spletno mesto, ki sem ga ustvaril, PyjamasOnYourFeet.com. Temelji na predlogi Brownie HTML5, ki je zelo velikodušno in brezplačno na voljo skupnosti razvijalcev na EGrapplerju.
Ali sem odziven?Ali sem odziven? – popolnoma enostaven, takojšen predogled vašega spletnega mesta v smislu, kako bo videti na štirih različnih napravah. Vsi štirje so iOS, razvijalec pa svojo izbiro razloži na spletni strani. Ne ponuja nobenih kontrolnikov ali izbir, le zelo preprost in eleganten zaslon. Ogled dimenzij okna:
Namizje - 1600 x 992 slikovnih pik, padajoče po merilu (0,3181)
Prenosni računalnik - 1280 x 802 slikovnih pik, padajoče merilo (0,277)
Tablični računalnik - 768 x 1024 slikovnih pik, padajoče po merilu (0,219)
Mobilno - 320 x 480 slikovnih pik, padajoče po merilu (0,219)
Če citiram razvijalca: »To ni orodje za testiranje, zelo pomembno je, da to počnete na resničnih napravah. Je pa orodje za hitre posnetke zaslona (zame) in zagotavljanje vizualne priložnosti, da na sestankih s strankami »poglobim«, kaj ste mislili.«
deviceponsive je podoben spletnemu mestu Ali sem odziven? takšno, ki vaše spletno mesto prikaže preprosto in lepo, vendar nima kontrolnikov ali razpoložljivih možnosti, ko gre za naprave. Vsi so prikazani hkrati na eni dolgi strani. Ima zanimivo lastnost - glavo lahko spremenite tako, da uredite njeno barvo ozadja in vstavite svoj logotip, nato pa jo "natisnete". Na ta način lahko na nek način označite svoje spletno mesto, ko odjemalcu prikazujete posnetke zaslona. Naprave in velikosti zaslona, simulirane na tem mestu:
Macbook - 1280 x 800
iPad (pokončno) - 768 x 1024
iPad (ležeče) - 1024 x 768
Kindle (pokončno) - 600 x 1024
Kindle (ležeče) - 1024 x 600
iPhone (pokončna usmerjenost) - 320 x 480
iPhone (ležeče) - 480 x 320
Galaxy (portret) - 240 x 320
Galaksija (ležeče) - 320 x 240
Kot pri večini podobnih orodij se drsni trakovi pojavljajo na majhnih napravah. Na pravi napravi se ne bodo prikazali, a da bi se lahko pomikali po preskusnem pogledu na napravi brez dotika, morate nekaj popustiti.
Tako kot deviceponsive tudi odzivni test prikaže vaše spletno mesto na več napravah, vendar namesto da bi jih prikazali vse hkrati na eni strani, izberete, katero napravo si želite ogledati v preprostem meniju na vrhu strani. Med brskanjem po tem spletnem mestu na srednje velikem prenosnem računalniku sem ugotovil, da krčenje strani deluje odlično, kar vam omogoča, da vidite celotno spletno mesto znotraj okna naprave, ki jo testiram.
Tukaj je na voljo trinajst različnih oken za gledanje z velikega monitorja namizni računalnik na tako imenovani »Crappy Android« (če smo iskreni, imajo tudi možnost, imenovano » Android je boljši«(Lepši Android).
Ponovno se Firefox na tem mestu malce spotika. Upoštevajte, da je na posnetku zaslona – med zeleno glavo in področjem vsebine z belim ozadjem – tam, kjer bi se moral prikazati drsnik slike, samo modra vrstica.
Zelo je podoben prejšnjima dvema in edina stvar, po kateri se responsive.is razlikuje od njiju, je gladka animacija prikaza iz ene naprave v drugo ter prosojen prekrivek, ki prikazuje, da nepremičnine spletnega mesta padajo iz vidnega polja. .
Edine razpoložljive možnosti naprave tukaj so samodejne, ki zapolnijo okno vašega brskalnika in prikažejo spletno mesto, kot bi ga videli, če bi ga obiskali: Namizje; Tablični računalnik (ležeča orientacija); Tablični računalnik (pokončna usmerjenost); Pametni telefon (ležeča usmerjenost) in pametni telefon (pokončna usmerjenost), dimenzije slikovnih pik niso navedene.
Še enkrat več različnih funkcij in možnosti ločuje Screenqueries od drugih spletnih mest. Na voljo je 14 telefonov in 12 tablic z ločenim elementom za preklop pokončnega in ležečega načina. Ti so prikazani na oštevilčeni mreži slikovnih pik, z dimenzijami, prikazanimi v spodnjem desnem kotu testnega zaslona. Robovi zaslona so povlečeni, tako da lahko preizkusite velikosti po meri. Povlecite ali kliknite na območje testiranja in ozadje bo postalo sivo, z manj natrpanim videzom.
Zanimiva funkcija to spletno mesto - za več naprav je na voljo možnost »Pravi pogled«, ki prikazuje vaše spletno mesto ovito v brskalniku chrome, ki je dodeljen tej napravi. Na žalost, in tega sem že vajen, Firefox ne more prikazati slikovnega drsnika testnega mesta. Ne skrbite, res imam raje Firefox, ko gre za brskalnike, a na srečo imamo možnosti.
Screenfly resnično poveča faktor uporabnosti. Ponuja devet naprav, ki so večje od tablic, od 10-palčnega prenosnika do 24-palčnega namizja, pet tablic, devet pametnih telefonov, tri velikosti televizorjev in možnost velikosti zaslona po meri. Vsako možnost, ki jo izberete, lahko zavrtite v pokončno ali ležečo usmerjenost z uporabo ločenega kontrolnika v meniju. Izberete lahko, ali želite dovoliti drsenje ali ne, in ustvarite povezavo za skupno rabo z enim klikom gumba.
Spletno mesto je proaktivno uporabno na način, kako predstavlja informacije o velikosti slikovnih pik. Vsaka naprava v meniju je prikazana z imenom in dimenzijami slikovnih pik, velikost okna vašega brskalnika je prikazana v zgornjem desnem kotu okna, dimenzije izbrane možnosti pa so prikazane v nogi pod zaslonom skupaj z URL spletnega mesta, ki se testira. Ta majhna funkcija olajša dokumentiranje posnetkov zaslona in deljenje informacij s strankami.
Vse zgoraj našteto bi ga že naredilo za idealno orodje, vendar so razvijalci Screenfly našli priložnost, da ga naredijo preprosto vrhunskega in so zagotovili lastnost proxy strežnika. Citiram z njihovega spletnega mesta: »Screenfly lahko uporablja proxy strežnik za lažno predstavljanje naprav, medtem ko si ogledujete njihovo spletno mesto. Proxy simulira niz uporabniškega agenta naprav, ki jih izberete, ne pa tudi obnašanja teh naprav." Vsa ostala orodja, ki so tukaj obravnavana, se ukvarjajo izključno s CSS. Screenfly je edini, ki omogoča testiranje na podlagi niza uporabniškega agenta.
Na ta način sem preizkusil eno stran, ki sem jo ustvaril z obstoječo mobilna različica, lahko rečem, da so bili rezultati zelo dobri. Vse je bilo prikazano natanko tako, kot sem pričakoval, in funkcije je bilo mogoče preizkusiti. Treba je povedati, da je testiranje nizov uporabniškega agenta postalo tradicionalno, toda to spletno mesto je bilo narejeno že dolgo nazaj in lastnost proxy se je izkazala za zelo uporaben dodatek.
Torej lahko vidite, da je na voljo veliko virov za testiranje odzivnih spletnih mest. Razlikujejo se po edinstvenih lastnostih; katera spletna mesta boste uporabljali, bo odvisno od vaših osebnih preferenc in zahtev, zato vas poskušam spodbuditi, da jih raziskujete in eksperimentirate z njimi. Več imamo razvijalci resnično uporabna orodja, toliko bolje.
Spletna trgovina mora biti optimizirana za mobilne naprave. Ta problem je rešen s prilagodljivim dizajnom, ki omogoča pravilen prikaz strani na kateri koli platformi. Vendar pa uvedba odzivnega dizajna prinaša standarden nabor pasti. Naštejmo 8 najpogostejših težav, značilnih za spletna nakupovalna mesta.
Zanemarjanje analitike vedenja obiskovalcevNaglica po vstopu v mobilni segment sili trgovce, da oblikujejo spletno stran brez izvajanja resne analize vedenja obiskovalcev. Analiza vedenja obiskovalcev je najpomembnejša faza priprave, ki vam omogoča, da prepoznate najbolj priljubljene mobilne naprave in zanje najprej optimizirate spletno mesto. Analitika pomaga določiti najbolj »popularno« uporabniško dejanje, na primer povečavo slike izdelka; prikazuje stopnjo konverzije mobilnih obiskovalcev itd. Ti podatki bodo zagotovili vpogled v nastavitve vedenja uporabnikov in pomagali izpolniti pričakovanja mobilnega občinstva. Analiza mobilni promet potrebno je izvajati sistematično in dosledno uveljavljati rezultate, dodelati in optimizirati stran za potrebe kupcev.
Oblikovanje trgovine za namizne računalnikeObičajno je namizna različica spletne trgovine preoblikovana za mobilne zaslone, čeprav je bolj logično vzeti majhen zaslon mobilne naprave in ga nato prilagoditi namizju. Trgovci na drobno se pogosto ne zavedajo tehničnih težav pri prilagajanju spletne strani, zasnovane za namizne računalnike, velikosti pametnega telefona. 
Začetek oblikovanja za mobilni zasloni, se osredotočate na mobilno uporabniško izkušnjo. Posledično vam bo lažje oblikovati oba kanala: namizni in mobilni.
Testiranje mobilne postavitve spletne trgovine je obvezna faza zagona, vendar jo mnogi lastniki pogosto zanemarijo in zaženejo brez testiranja. Zaradi tega se na live različici strani za mobilne naprave lahko pojavijo napake že med postopkom nakupa in oddaje naročila.
Pomanjkljivosti prilagodljivega dizajna je mogoče zlahka prepoznati s predhodnim testiranjem spletne trgovine, vendar mnogi prodajalci za to nimajo sredstev. Da zmanjšate tveganje izgube denarja, preizkusite ključne uporabniške poti po spletnem mestu v glavnih brskalnikih – Chrome, IE, Firefox, Safari in operacijski sistemi– Windows, Mac OS, Android, IOS na priljubljenih mobilne naprave. Preizkusite vsakič, ko naredite spremembe; storitve, kot sta BrowserStack ali Viewport Resizer, lahko pomagajo skrajšati čas testiranja na nekaj ur.
Majhni elementi za mobilne zasloneLastniki spletnih trgovin varčujejo z velikostjo svojih gumbov za »poziv k dejanju«, da bi na zaslon pametnega telefona namestili več prostora. Uporabnikov ne silite v povečavo, da bi kliknili gumb Nakup, in majhnih elementov ne postavljajte preblizu skupaj, sicer se bodo vaši uporabniki odločili za bolj priročno spletno mesto. Oblikujte vmesnike z velikimi navigacijskimi elementi in velikostmi gumbov za poziv k dejanju.
Počasna hitrost nalaganja straniMobilno občinstvo obožuje hitra spletna mesta in minimalen čas nalaganja. Ocenite sestavne dele svojega mobilne strani– slike, gumbi, besedilo, skripte – morajo biti optimizirani za mobilne naprave. Google v svojih SERP-jih upošteva čas nalaganja strani in razvrsti mobilna spletna mesta ter jim daje prednost na vrhu, tako da "lahka" spletna mesta dobijo dodatno resno prednost.
Ločite vsebino v različne zavihke, na primer stran izdelka lahko vsebuje samo osnovno sliko, opis, ceno in gumb »Kupi«. Mnenja strank in video posnetke lahko postavite na ločen zavihek in zmanjšate "težo" glavnega dela strani. Poleg vsebine optimizirajte tudi druge elemente, ki vplivajo na hitrost nalaganja - datoteke CSS, slike in skripte, pošiljajte samo potrebne podatke. Pri tem vam bodo pomagala orodja, ki zmanjšajo velikost datotek virov in čas njihovega nalaganja: Uglify ali JSCompress.
Obrezovanje vsebine za mobilne uporabnikePogosto razvijalci skrijejo del vsebine, da je nalaganje na mobilnih napravah hitrejše. Vendar se pogosto velikost strani dejansko ne zmanjša in vsebina preprosto ni prikazana uporabniku. Vaša trgovina bi morala imeti možnost dinamičnega ustvarjanja strani, s čimer bi zmanjšali težo strani in čas nalaganja za mobilne obiskovalce. Poleg tega je dajanje manj vsebine mobilnim uporabnikom slabo in negativno vpliva na potrošniško izkušnjo. Običajno med nakupovalnim procesom uporabljajo različne naprave, to počne približno 90 % spletnih nakupovalcev. Njihovo omejevanje na metode odzivnega oblikovanja je velika napaka.
Podpira slike samo v eni ločljivostiDobra spletna stran z odzivnim dizajnom samodejno spreminja ločljivost slik glede na vrsto naprave, težke slike pa podaljšajo čas nalaganja. Obstaja več načinov za samodejno prilagajanje velikosti slike, da se prilega določeno napravo. »Prilagodljive« slike (fluidne slike) so metoda, ki temelji na CSS, ki vam omogoča stiskanje in raztezanje slike glede na širino elementa, ki jo vsebuje, ali element HTML5, ki vam omogoča, da naložite sliko zahtevane velikosti za vsak vrsto naprave.
»Neodzivna« e-poštna sporočilaZgodi se, da je s samim mestom vse v redu, odziven dizajn dobro deluje na namiznih in mobilnih napravah. Vendar se e-poštna sporočila ne odzivajo in mobilni uporabniki se morajo truditi preveriti podrobnosti naročila ali se pomikati po neskončnem seznamu priporočenih izdelkov, da pridejo do opravljenih nakupov. 
E-poštna sporočila so ključna stična točka za stranke, zato vključite odzivno zasnovo e-pošte v svojo mobilno strategijo. Oblikujte in preizkusite svoja pisma in glasila; predloge pisem naj bodo »lahke« in vsebujejo le pomembne informacije.
Z razvojem spletnih tehnologij se povečujejo tudi zahteve po spletnem razvoju. Največji pritisk čutijo spletni razvijalci, oblikovalci postavitev ali kot jih danes imenujemo frontend razvijalci.
V tem članku bomo govorili malo o prilagodljivi postavitvi, saj je ta "trik" zdaj zelo drag. Ko gre za prilagodljivo postavitev, oblikovalci postavitev katere koli ravni gledajo na stranke ali vodje projektov, milo rečeno, z jezo, ker razumejo, kako težko je.
Mnogi ljudje začnejo zamenjevati prilagodljivo postavitev s prilagodljivo postavitvijo; to je zelo pogosta napaka začetnikov oblikovalcev postavitev. Kakšna je razlika, vprašate?
Najprej, da vam bo jasno in tako rekoč, postavimo vse pike in poglejmo, kakšne vrste postavitev obstajajo.
Obstajajo 4 vrste postavitve:
Razmislimo o vseh vrstah podrobneje.
1. Fiksna postavitev
Bloki ne spreminjajo svoje širine. Na monitorjih z nizko ločljivostjo se prikaže vodoravni drsni trak.
#temnyi, #svetlyi ( širina: 440px; )
2. Gumijasta postavitev
Bloki spreminjajo svojo širino glede na velikost okna brskalnika. Lahko sprejme največje in najmanjše vrednosti (lastnost največje širine). Vendar ne morete povečati 50 % s 50 % na 100 %, saj se zaslon zmanjšuje.
#temnyi, #svetlyi ( širina: 50%; )
3. Prilagodljiva postavitev
Implementirano z @media ali skripti. Prilagojeno za določene znane naprave (320, 768, 1024 itd.). Vsaka sprememba se pojavi v sunkih, potem ko doseže eno od določenih stopenj. Vsekakor primeren za
#temnyi, #svetlyi ( širina: 430px; ) @media (max-width: 1220px) ( #temnyi, #svetlyi ( width: 380px; ) ) @media (max-width: 1120px) ( #temnyi, #svetlyi ( širina : 325px; ) ) @media (max-width: 680px) ( #temnyi, #svetlyi (širina: 200px; ) )
4. Odzivna postavitev
To je kombinacija tekoče in prilagodljive postavitve. Najtežji za izvedbo. Toda rezultat je najbolj sprejemljiv. Lahko rečemo, da se bo spletno mesto prilagodilo vsaki napravi.
#temnyi, #svetlyi (širina: 50%; ) @media (max-width: 1006px) ( #temnyi, #svetlyi (širina: 100%; ) )
Tako smo govorili o 4 vrstah postavitve spletne strani. Zdaj je prišel čas za naš čudežni skript za prilagodljivo postavitev. Upam, da mi ni treba nič razlagati, scenarij je čisto preprost, samo povemo, da ko spremeniš kakšen blok se bo nekam pomešal in to je to. Seveda je to mogoče tudi s stili CSS, vendar morate poznati vse metode; včasih na nekaterih mestih nekatere ne bodo delovale, nekatere pa bodo ravno pravšnje.
Prilagodljiv skript postavitve:
/* Ustvarimo spremenljivko, v katero lahko vstavite razrede monogest, za njihovo priročno uporabo v kodi. Se pravi, tukaj jih zazna enkrat in to je to, in ne pred vsakim vzorcem! to je uporabna funkcija */ var my = ( window: $(window) ); /*Pravzaprav sama funkcija*/ $(window).resize(function () ( /*Spremenljivka, ki določa širino okna in jo postavi v spremenljivko širine*/ var width = my.window.width( ); /*pogoj transformacije okna, tj. pogoj, ki se izvede, ko širina okna doseže določeno velikost */ 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") } });
To je vse. Če imate kakršna koli vprašanja, jih napišite v komentarje, pojdite na
