Kā bez maksas pārbaudīt responsīvo dizainu. Adaptīvs izkārtojums, izmantojot JavaScript skriptu Adaptīvā dizaina testēšana
Sveiki, dārgie emuāra lasītāji. Nav pārsteidzoši, ka adaptīvais dizains kļūst arvien populārāks Krievijas internetā. Un, protams, maketētājiem tas ir jāizpēta. Tā kā responsīvais dizains drīzumā būs gandrīz visās mājaslapās, jo arvien vairāk cilvēku izmanto mobilās ierīces.
Un es gribētu teikt, ka vietnes ar to ir daudz ērtāk lasīt šādās ierīcēs nekā bez tā.
Šodien es vēlos jūs iepazīstināt ar 5 ļoti noderīgiem un foršiem pakalpojumiem, ar kuriem varat pārbaudīt savas vietnes pielāgojamību.
Un tā, iesim.
5 pakalpojumi, kuros varat pārbaudīt savas vietnes pielāgojamību. www.responsivedesigntest.netLabs pakalpojums vietņu pārbaudei. Ir daudz ekrāna izšķirtspējas gan planšetdatoriem, gan tālruņiem.
mattkersley.comVienkāršs pakalpojums Meta Kerslija vietnes pārbaudei. Ir pieejamas arī visas populārās mobilo ierīču izšķirtspējas.
Ļoti foršs pakalpojums, kas pārbaudīs jebkuru vietni. Man ļoti patika dizains, kā arī funkcionalitāte.
Ļoti skaists un funkcionāls serviss. Ir pat iespēja pārbaudīt, kā vietne izskatīsies televizorā :-)
No autora: “Pārtrauciet šīs pārlūkprogrammas izmēru maiņu, tā drīz tiks izdzēsta!” Cik bieži jūs to dzirdat? Labi, varbūt ne tik bieži, bet, ja izstrādājat adaptīvas vietnes, jūs zināt, par ko es runāju: katru reizi, kad rediģējat DOM vai CSS, jūs velciet pārlūkprogrammas malu uz priekšu un atpakaļ, pārbaudot izmaiņas. un meklē neprecizitātes.
Kopumā lielākā daļa no šiem centieniem ir mēģinājums atdarināt dažādu ierīču ekrāna izmērus.
Ja veicat uzņēmuma attīstību, iespējams, jums ir daudzas uzņēmuma nodrošinātas ierīces, ko pārbaudīt. Kur es strādāju, mums ir iPad, iPhone, vēl viens vai divi planšetdatori, klēpjdatori un galddatori. Ja jums nav šīs greznības, jums ir jāizmanto tas, kas jums ir pa rokai.
Mājās man ir divi dažādi portatīvie datori, divi dažādi Android ierīces: Kindle un Nexus 7. Es izmantoju šīs ierīces, lai pārbaudītu savas ārštata izstrādes, taču ir skaidrs, ka šī nav pilnīga izvēle. Nepavisam iOS ierīces, un, lai gan es tieku uzskatīts par agru lietotāju, es neplānoju iegādāties katru jaunu tālruni/planšetdatoru/planšetdatoru, tiklīdz tas tiks pārdots.
Tātad, kas izstrādātājam jādara? Par laimi, arvien vairāk parādās pārlūkprogrammu rīki, kas simulē dažādu ierīču ekrāna izmērus. Protams, dažādiem rīkiem ir dažādas funkciju kopas un dažādi efektivitātes līmeņi. Mēs apskatīsim dažus no tiem šeit.
Pārbaudes nolūkos es izmantoju pirmo patiesi atsaucīgo vietni, ko izveidoju, PajamasOnYourFeet.com. Tā ir balstīta uz Brownie HTML5 veidni, kas ļoti dāsni un brīvi tiek nodrošināta izstrādātāju kopienai pakalpojumā EGrappler.
Vai esmu atsaucīgs?Vai esmu atsaucīgs? – pilnīgi vienkāršs, tūlītējs jūsu vietnes priekšskatījums attiecībā uz to, kā tā parādīsies četrās dažādās ierīcēs. Visi četri ir iOS, un izstrādātājs paskaidro savu izvēli vietnē. Tas nepiedāvā nekādas vadīklas vai atlases, tikai ļoti vienkāršu un elegantu displeju. Skatīt loga izmērus:
Darbvirsma — 1600 x 992 pikseļi, samazinās pēc mēroga (0,3181)
Klēpjdators — 1280 x 802 pikseļi, samazinās mērogs (0,277)
Planšetdators — 768 x 1024 pikseļi, samazinās pēc mēroga (0,219)
Mobilās — 320 x 480 pikseļi, samazinās pēc mēroga (0,219)
Citējot izstrādātāju: “Šis nav testēšanas rīks, ir ļoti svarīgi to darīt reālās ierīcēs. Bet tas ir rīks, lai ātri uzņemtu ekrānuzņēmumus (man) un nodrošinātu vizuālu iespēju klientu sapulcēs “padziļināt” to, ko jūs domājāt.
deviceponsive ir līdzīga vietnei Am I Responsive? tāda, kurā jūsu vietne tiek rādīta vienkārši un glīti, taču tai nav vadības ierīču vai pieejamo opciju attiecībā uz ierīcēm. Tie visi tiek parādīti vienlaikus vienā garā lapā. Tam ir interesants īpašums - jūs varat modificēt galveni, rediģējot tās fona krāsu un ievietojot savu logotipu, un pēc tam to “izdrukāt”. Tādā veidā jūs varat izveidot savas vietnes zīmolu, rādot klientam ekrānuzņēmumus. Šajā vietnē simulētās ierīces un ekrāna izmēri:
Macbook — 1280 x 800
iPad (portrets) — 768 x 1024
iPad (ainava) — 1024 x 768
Kindle (portrets) — 600 x 1024
Kindle (ainava) — 1024 x 600
iPhone (portreta orientācija) — 320 x 480
iPhone (ainava) — 480 x 320
Galaktika (portrets) — 240 x 320
Galaktika (ainava) — 320 x 240
Tāpat kā lielākajā daļā līdzīgu rīku, ritjoslas parādās mazās ierīcēs. Tie neparādīsies reālā ierīcē, taču, lai varētu ritināt testa skatu ierīcē bez pieskāriena, jums ir jāpiekāpjas.
Tāpat kā responsive testēšana, jūsu vietne tiek rādīta vairākās ierīcēs, taču tā vietā, lai tās visas tiktu rādītas vienlaikus vienā lapā, jūs izvēlaties, kuru ierīci skatīt, izmantojot vienkāršu izvēlni lapas augšdaļā. Pārlūkojot šo vietni vidēja izmēra klēpjdatorā, es atklāju, ka lapas samazināšana darbojas lieliski, ļaujot pārbaudāmās ierīces logā redzēt visu vietni.
Šeit tiek piedāvāti trīspadsmit dažādi skatīšanās logi no liela monitora galddators uz tā saukto "Crappy Android" (ja godīgi, viņiem ir arī opcija ar nosaukumu " Android ir labāks"(Jaukāks Android).
Atkal šajā vietnē Firefox nedaudz paklupa. Ekrānuzņēmumā – starp zaļo galveni un satura apgabalu ar baltu fonu – ir tikai zila josla, kurā jāparādās attēla slīdnim.
Tas ir ļoti līdzīgs iepriekšējiem diviem, un vienīgais, kas nosaka responsive.is, ir vienmērīga displeja animācija no vienas ierīces uz otru, kā arī caurspīdīgs pārklājums, kurā redzams, ka vietnes nekustamais īpašums izkrīt no skata loga. .
Šeit vienīgās pieejamās ierīces opcijas ir automātiskās, kas aizpilda jūsu pārlūkprogrammas logu, parādot vietni tādu, kādu jūs to redzētu, ja to apmeklētu: Darbvirsma; Planšetdators (ainavas orientācija); Planšetdators (portreta orientācija); Viedtālrunis (ainavas orientācija) un viedtālrunis (portreta orientācija), pikseļu izmēri nav norādīti.
Vēlreiz vairākas dažādas funkcijas un opcijas atšķir Screenqueries no citām vietnēm. Ir 14 tālruņi un 12 planšetdatori ar atsevišķu elementu portreta un ainavas režīmu pārslēgšanai. Tie tiek parādīti numurētā pikseļu režģī, un izmēri ir parādīti testa displeja apakšējā labajā stūrī. Displeja malas ir velkamas, lai jūs varētu pārbaudīt pielāgotus izmērus. Velciet vai noklikšķiniet pāri testēšanas apgabalam, un fons kļūs pelēks ar mazāk pārblīvētu izskatu.
Interesanta iezīmešī vietne — vairākām ierīcēm ir opcija “True view”, kas parāda, ka jūsu vietne ir iesaiņota šai ierīcei piešķirtajā Chrome pārlūkprogrammā. Diemžēl, un es jau esmu pie tā pieradis, Firefox nevar parādīt testa vietnes attēla slīdni. Neuztraucieties, es patiešām dodu priekšroku Firefox, kad runa ir par pārlūkprogrammām, taču par laimi mums ir iespējas.
Screenfly patiešām palielina lietojamības koeficientu. Tas piedāvā deviņas ierīces, kas ir lielākas par planšetdatoriem, sākot no 10 collu klēpjdatora līdz 24 collu galddatoram, piecus planšetdatorus, deviņus viedtālruņus, trīs televizoru izmērus un pielāgota ekrāna izmēra opciju. Jebkuru atlasīto opciju var pagriezt portreta vai ainavas orientācijā, izmantojot atsevišķu vadīklu izvēlnē. Varat izvēlēties, vai atļaut ritināšanu vai nē, un ģenerēt koplietojamu saiti ar vienu pogas klikšķi.
Vietne ir proaktīvi noderīga, jo tā sniedz informāciju par pikseļu izmēru. Katrai ierīcei izvēlnē ir norādīts nosaukums un pikseļu izmēri, jūsu pārlūkprogrammas loga izmērs tiek parādīts loga augšējā labajā stūrī, un atlasītās opcijas izmēri tiek parādīti kājenē zem displeja kopā ar Pārbaudāmās vietnes URL. Šī mazā funkcija atvieglo ekrānuzņēmumu dokumentēšanu un informācijas kopīgošanu ar klientiem.
Viss iepriekš minētais jau būtu padarījis to par ideālu rīku, taču Screenfly izstrādātāji atrada iespēju izveidot to vienkārši augstākās klases un nodrošināja starpniekservera īpašumu. Citējot no viņu vietnes: “Screenfly var izmantot starpniekserveri, lai uzdotos par ierīcēm, kamēr skatāties viņu vietni. Starpniekserveris simulē jūsu atlasīto ierīču lietotāja aģenta virkni, bet ne šo ierīču darbību. Visi pārējie šeit apskatītie rīki attiecas tikai uz CSS. Screenfly ir vienīgais, kas ļauj veikt testēšanu, pamatojoties uz lietotāja aģenta virkni.
Tādā veidā pārbaudot vienu vietni, ko izveidoju ar esošo mobilā versija, varu teikt, ka rezultāti bija ļoti labi. Viss tika parādīts tieši tā, kā es gaidīju, un funkcijas bija pārbaudāmas. Jāteic, ka lietotāju aģentu virkņu testēšana ir kļuvusi par tradicionālu, taču šī vietne tika izveidota jau sen, un starpniekservera īpašums izrādījās tam patiešām ļoti noderīgs papildinājums.
Tātad, jūs varat redzēt, ka ir pieejams daudz resursu, lai pārbaudītu adaptīvās vietnes. Tie atšķiras ar unikālām īpašībām; izmantotās vietnes būs atkarīgas no jūsu personīgajām vēlmēm un prasībām, un es cenšos jūs mudināt tās izpētīt un eksperimentēt. Jo vairāk mums, izstrādātājiem, ir patiesi noderīgi instrumenti, jo labāk.
Interneta veikals ir jāoptimizē mobilajām ierīcēm. Šī problēma tiek atrisināta, izmantojot adaptīvo dizainu, kas ļauj pareizi parādīt vietni jebkurā platformā. Tomēr adaptīva dizaina ieviešanai ir standarta nepilnību kopums. Uzskaitīsim 8 visbiežāk sastopamās problēmas, kas raksturīgas tiešsaistes iepirkšanās vietnēm.
Apmeklētāju uzvedības analīzes ignorēšanaSteiga ienākt mobilo ierīču segmentā liek mazumtirgotājiem izveidot vietni, neveicot nopietnu apmeklētāju uzvedības analīzi. Apmeklētāju uzvedības analīze ir vissvarīgākais sagatavošanās posms, kas ļauj identificēt populārākās mobilās ierīces un vispirms tām optimizēt vietni. Analytics palīdz noteikt “populārāko” lietotāja darbību, piemēram, produkta attēla palielināšanu; parāda mobilo ierīču apmeklētāju reklāmguvumu līmeni utt. Šie dati sniegs ieskatu lietotāju uzvedības preferencēs un palīdzēs apmierināt mobilo ierīču auditorijas cerības. Analīze mobilā satiksme nepieciešams sistemātiski un konsekventi īstenot rezultātus, pabeidzot un optimizējot vietni, lai tā atbilstu klientu vajadzībām.
Galddatora veikala projektēšanaParasti tiešsaistes veikala darbvirsmas versija tiek pārveidota mobilo ierīču ekrāniem, lai gan loģiskāk ir ņemt mobilās ierīces mazo ekrānu un pēc tam mērogot to līdz galddatoram. Mazumtirgotāji bieži neapzinās tehniskās problēmas, kas saistītas ar vietnei, kas paredzēta galddatoram, līdz viedtālruņa izmēram. 
Sākuma dizains priekš mobilo ierīču ekrāni, jūs koncentrējaties uz mobilo ierīču lietotāju pieredzi. Tā rezultātā jums būs vieglāk izveidot dizainu abiem kanāliem: galddatoriem un mobilajiem.
Tiešsaistes veikala mobilā izkārtojuma pārbaude ir obligāts palaišanas posms, taču daudzi īpašnieki bieži to neievēro un palaiž bez pārbaudes. Tā rezultātā mobilajām ierīcēm paredzētajā vietnes tiešraides versijā kļūdas var parādīties pat pirkuma un pasūtījuma veikšanas procesā.
Adaptīvā dizaina nepilnības ir viegli identificējamas, iepriekš pārbaudot tiešsaistes veikalu, taču daudziem pārdevējiem tam nav resursu. Lai samazinātu naudas zaudēšanas risku, pārbaudiet galvenos lietotāju maršrutus pa vietni galvenajās pārlūkprogrammās — Chrome, IE, Firefox, Safari un operētājsistēmas- Populārajās operētājsistēmās Windows, Mac OS, Android, IOS mobilās ierīces. Pārbaudiet katru reizi, kad veicat izmaiņas; tādi pakalpojumi kā BrowserStack vai Viewport Resizer var palīdzēt samazināt testēšanas laiku līdz vairākām stundām.
Mazie elementi mobilajiem ekrāniemCenšoties viedtālruņa ekrānā ievietot vairāk vietas, tiešsaistes veikalu īpašnieki taupa savu “aicinājuma uz darbību” pogu lielumu. Nespiediet lietotājiem tuvināt, lai noklikšķinātu uz pogas Pirkt, un nenovietojiet mazus elementus pārāk tuvu viens otram, pretējā gadījumā lietotāji izvēlēsies doties uz ērtāku vietni. Dizaina saskarnes ar lieliem navigācijas elementiem un aicinājuma uz darbību pogu izmēriem.
Lēns lapas ielādes ātrumsMobilo ierīču lietotājiem patīk ātras vietnes un minimāls ielādes laiks. Novērtējiet savu mobilo lapu komponentus — attēlus, pogas, tekstu, skriptus — tiem jābūt optimizētiem mobilajām ierīcēm. Google savos SERP ņem vērā lapas ielādes laiku un ierindo mobilās vietnes un dod tām priekšroku pirmajā vietā, lai “vieglas” vietnes iegūtu papildu nopietnas priekšrocības.
Sadaliet saturu dažādās cilnēs, piemēram, produkta lapā var būt tikai pamata attēls, apraksts, cena un poga “Pirkt”. Klientu atsauksmes un video var ievietot atsevišķā cilnē un samazināt lapas galvenās daļas “svaru”. Papildus saturam optimizējiet citus elementus, kas ietekmē ielādes ātrumu - CSS failus, attēlus un skriptus, sūtiet tikai nepieciešamos datus. Rīki, kas samazina resursu failu lielumu un to ielādes laiku, jums palīdzēs: Uglify vai JSCompress.
Satura apgriešana mobilo sakaru lietotājiemBieži vien izstrādātāji slēpj daļu satura, lai ielāde mobilajās ierīcēs būtu ātrāka. Tomēr bieži vien lapas izmērs faktiski netiek samazināts un saturs vienkārši netiek parādīts lietotājam. Jūsu veikalam ir jāspēj dinamiski ģenerēt lapu, samazinot lapas svaru un ielādes laiku mobilo ierīču apmeklētājiem. Turklāt mazāk satura mobilajiem lietotājiem ir slikti un negatīvi ietekmē patērētāju pieredzi. Parasti pirkšanas procesa laikā viņi izmanto dažādas ierīces, to dara aptuveni 90% tiešsaistes pircēju. To ierobežošana ar atsaucīgām projektēšanas metodēm ir liela kļūda.
Atbalsta attēlus tikai vienā izšķirtspējāLaba vietne ar responsīvu dizainu automātiski maina attēlu izšķirtspēju atkarībā no ierīces veida; smagie attēli palielina ielādes laiku. Ir vairāki veidi, kā automātiski pielāgot attēla izmērus konkrēta ierīce. “Elastīgie” attēli (šķidri attēli) ir uz CSS balstīta metode, kas ļauj saspiest un izstiept attēlu atkarībā no to saturošā elementa platuma, vai HTML5 elements, kas ļauj katram ielādēt vajadzīgā izmēra attēlu. ierīces veids.
“Nereaģējoši” e-pasta ziņojumiGadās, ka ar pašu vietni viss ir kārtībā, responsīvs dizains labi darbojas gan galddatoros, gan mobilajās ierīcēs. Taču e-pasta ziņojumi nereaģē, un mobilo ierīču lietotājiem ir jācenšas pārbaudīt pasūtījuma informāciju vai ritināt nebeidzamu ieteicamo produktu sarakstu, lai nokļūtu līdz pabeigtajiem pirkumiem. 
E-pasti ir galvenais klientu saskarsmes punkts, tāpēc savā mobilajā stratēģijā integrējiet adaptīvu e-pasta dizainu. Izstrādājiet un pārbaudiet savas vēstules un biļetenus; vēstuļu veidnēm jābūt “vieglām” un tajās jāietver tikai svarīga informācija.
Attīstoties tīmekļa tehnoloģijām, pieaug arī prasības tīmekļa izstrādei. Vislielāko spiedienu izjūt tīmekļa izstrādātāji, izkārtojuma dizaineri vai, kā tos mūsdienās sauc, frontend izstrādātāji.
Šajā rakstā mēs nedaudz runāsim par adaptīvo izkārtojumu, jo šis “triks” tagad ir ļoti dārgs. Runājot par adaptīvo izkārtojumu, jebkura līmeņa maketētāji uz klientiem vai projektu vadītājiem raugās, maigi izsakoties, ar dusmām, jo saprot, cik tas ir grūti.
Daudzi cilvēki sāk jaukt adaptīvo izkārtojumu ar elastīgo izkārtojumu; tā ir ļoti izplatīta iesācēju izkārtojuma dizaineru kļūda. Kāda starpība, tu jautā?
Vispirms, lai jums būtu skaidrs un tā sakot, saliksim visus punktus un apskatīsim, kādi izkārtojuma veidi ir.
Ir 4 izkārtojuma veidi:
Apsvērsim visus veidus sīkāk.
1. Fiksēts izkārtojums
Bloki nemaina savu platumu. Zemas izšķirtspējas monitoros tiek parādīta horizontāla ritjosla.
#temnyi, #svetlyi (platums: 440px; )
2. Gumijas izkārtojums
Bloki maina platumu atkarībā no pārlūkprogrammas loga lieluma. Tam var būt maksimālās un minimālās vērtības (maksimālā platuma īpašība). Bet jūs nevarat palielināt 50% no 50% uz 100%, jo ekrāns kļūst mazāks.
#temnyi, #svetlyi (platums: 50%; )
3. Adaptīvs izkārtojums
Ieviests, izmantojot @media vai skriptus. Pielāgots konkrētām zināmām ierīcēm (320, 768, 1024 utt.). Jebkuras izmaiņas notiek rāvienos, sasniedzot kādu no norādītajiem līmeņiem. Noteikti piemērots
#temnyi, #svetlyi (platums: 430px; ) @media (maksimālais platums: 1220px) ( #temnyi, #svetlyi (platums: 380px; ) ) @media (maksimālais platums: 1120px) ( #temnyi, #svetlyi (platums) : 325 pikseļi; ) ) @media (maksimālais platums: 680 pikseļi) ( #temnyi, #svetlyi (platums: 200 pikseļi; ) )
4. Responsīvs izkārtojums
Šī ir plūstoša un adaptīva izkārtojuma kombinācija. Visgrūtāk īstenojams. Bet rezultāts ir vispieņemamākais. Var droši teikt, ka vietne tiks pielāgota jebkurai ierīcei.
#temnyi, #svetlyi (platums: 50%; ) @media (maksimālais platums: 1006px) ( #temnyi, #svetlyi (platums: 100%; ) )
Tāpēc mēs runājām par 4 vietnes izkārtojuma veidiem. Tagad ir pienācis laiks mūsu brīnumainā adaptīvā izkārtojuma skriptam. Es ceru, ka man nekas nav jāskaidro, skripts ir diezgan vienkāršs, mēs tikai sakām, ka mainot kādu bloku tiks kaut kur sajaukts un viss. Protams, tas ir iespējams arī, izmantojot CSS stilus, taču jums ir jāzina visas metodes; dažreiz dažās vietās dažas nedarbosies un dažas būs piemērotas.
Adaptīvā izkārtojuma skripts:
/* Izveidosim mainīgo, kurā var ievietot monogest klases, lai tās ērti izmantotu kodā. Tas ir, šeit tas tos nosaka vienu reizi, un tas arī viss, nevis pirms katra parauga! šī ir noderīga funkcija */ var my = ( logs: $(window) ); /*Patiesībā pati funkcija*/ $(window).resize(function () ( /*Mainīgais, kas nosaka loga platumu un ievieto to platuma mainīgajā*/ var width = my.window.width( ); /*loga transformācijas nosacījums, t.i., nosacījums, kas tiek izpildīts, kad loga platums sasniedz noteiktu izmēru */ 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") } });
Tas ir viss. Ja jums ir kādi jautājumi, rakstiet komentāros, dodieties uz
