Ako otestujem responzívny web? Aké sú výzvy pri testovaní webových stránok na rôznych zariadeniach? V čom sa testovanie webu na stolnom monitore líši od testovania na vreckovom zariadení, akým je napríklad mobilný telefón? Aké nástroje môžeme použiť na testovanie responzívnych webových stránok? Náš
Čo je responzívny webový design?
Responsive Web Design (RWD) je definícia prístupu k webovému dizajnu, ktorého cieľom je vytvárať webové stránky pre optimálne prostredie - jednoduché čítanie a navigácia s minimálnou veľkosťou, posúvanie a posúvanie naprieč širokou škálou zariadení (od monitorov stolných počítačov po mobilné telefóny) ...
Stránka vytvorená s technológiou RWD prispôsobuje rozloženie zobrazovaciemu prostrediu pomocou plynulých, proporcionálnych mriežok, flexibilných obrázkov a dopytov médií CSS3 nasledujúcimi spôsobmi:
- Koncept tekutej mriežky vyžaduje, aby veľkosť prvku stránky bola v relatívnych jednotkách, ako sú percentá, a nie v absolútnych jednotkách, ako sú pixely alebo body.
- Flexibilné obrázky sú tiež hodnotené v relatívnych jednotkách, aby sa zabránilo ich zobrazeniu mimo obsahujúceho prvku.
- Mediálne dotazy umožňujú stránke používať rôzne pravidlá štýlu CSS na základe charakteristík zariadenia, na ktorom sa stránka zobrazuje, najčastejšie šírky prehliadača.
Výzvy testovania responzívneho webového dizajnu
Mnoho ľudí v dnešnej dobe používa na prístup na webové stránky svoje mobilné telefóny alebo tablety, takže testovanie responzívneho webového dizajnu je dôležité, pretože používateľské prostredie v mobilných telefónoch sa líši od počítačov.
Asi najťažšia časť testovania vhodnej webovej stránky je, že webová stránka funguje podľa očakávaní na viacerých zariadeniach a platformách, ale testovanie na všetkých mobilných zariadeniach na trhu je pre väčšinu z nás nepraktické.
Mnoho testerov, ktorí začnú testovať responzívne webové návrhy, zvyčajne začína zmenou veľkosti okna prehliadača tak, aby zodpovedala veľkosti výrezu. mobilný telefón, tablet a počítač. Táto metóda je zvyčajne vhodná na rýchlu vizuálnu kontrolu webových stránok na rôznych zobrazovacích portoch a pomáha nám identifikovať základné problémy so zobrazovaním pri zmenšovaní alebo zväčšovaní okna prehliadača.
Testovanie na skutočných mobilných zariadeniach je však úplne iný zážitok.
Použitie emulátorov
Mobilný emulátor je webová simulácia toho, ako sa webové stránky a aplikácie budú zobrazovať a fungovať v mobilnom prostredí.
Aj keď vám emulátory nemusia poskytnúť presné testovacie nástroje, ktoré potrebujete, stále sú nákladovo efektívnym riešením na testovanie funkčnosti webových stránok na vysokej úrovni.
Google DevTools
V DevTools Google chrome Existuje funkcia nazývaná režim zariadenia, ktorá je nabitá užitočnými nástrojmi na testovanie a ladenie responzívnych projektov.
Na rozdiel od väčšiny ostatných responzívnych nástrojov na testovanie dizajnu, ktoré jednoducho zmenia veľkosť obrazovky, tento nástroj v skutočnosti emuluje správanie mobilného zariadenia, najmä dotykové interakcie, ako je klepanie a posúvanie, priamo vo vašom webovom prehliadači.
Niektoré všeobecné pravidlá pre testovanie responzívneho webového dizajnu:
- Text, ovládacie prvky a obrázky sú zarovnané správne
- Vhodná zóna prekliknutia
- Farebnosť, tieňovanie a prechod
- Skontrolujte, či sú okraje správne vyplnené
- Text, obrázky, ovládacie prvky a orámovanie nepasujú na okraje obrazovky
- Veľkosť, štýl a farba písma sú vhodné pre každý typ textu
- Posúvaný text (zadávanie údajov) sa zobrazuje správne
Skontrolujte umiestnenie modulov pri ich zmenšovaní a rozťahovaní okna prehliadača alebo pri otáčaní mobilného zariadenia. Rôzne moduly môžu pri prechode z zmiznúť stolný počítač do mobilu, ale uistite sa, že presne viete, ktoré moduly by sa mali v ktorom zobrazení zobrazovať.
Konečne
Zistite, ako sa používa vaša webová aplikácia. Z tohto nástroja môžete získať množstvo informácií Analytika Google aby ste zistili, aké zariadenia používajú vaši zákazníci na prístup na váš web. Pomocou automatizovaných nástrojov a emulátorov vykonajte základné overenie a funkčné testovanie na vysokej úrovni a skombinujte to so skutočným manuálnym testovaním zariadenia.
Od autora:„Zastavte zmenu veľkosti tohto prehliadača, čoskoro bude vymazaný!“ Ako často to počuješ? Dobre, možno nie príliš často, ale ak vyvíjate responzívne webové stránky, viete, o čom hovorím: pri každej úprave DOM alebo CSS potiahnete okraj prehliadača tam a späť, testujete zmeny a hľadáte nepresnosti. .
Všeobecne platí, že veľká časť tohto úsilia je pokusom napodobniť veľkosti obrazovky rôznych zariadení.
Ak robíte podnikový vývoj, pravdepodobne máte na testovanie množstvo zariadení poskytovaných spoločnosťou. Kde pracujem, máme iPady, iPhony, jeden alebo dva ďalšie tablety, notebooky a stolné počítače. Ak nemáte tento luxus, musíte použiť to, čo je po ruke.
Doma mám dva rôzne notebooky, dva rôzne Zariadenia s Androidom: Kindle a Nexus 7. Tieto zariadenia používam na testovanie svojho vývoja na voľnej nohe, ale je zrejmé, že toto nie je vyčerpávajúci výber. Neexistujú žiadne zariadenia so systémom iOS a hoci som považovaný za jedného z prvých používateľov, nemám v pláne kúpiť každý nový telefón / tablet / tablet hneď, ako sa začne predávať.
Čo má teda vývojár urobiť? Našťastie rastie počet nástrojov založených na prehliadači, ktoré napodobňujú veľkosti obrazovky mnohých zariadení. Rôzne nástroje, samozrejme, prichádzajú s rôznymi súbormi charakteristík a rôznymi úrovňami výkonu. Tu zvážime niektoré z nich.
Na testovacie účely som vzal prvú skutočne responzívnu stránku, ktorú som vytvoril, PajamasOnYourFeet.com. Je založený na šablóne Brownie HTML5, veľmi láskavo a bezplatne poskytnutej vývojárskej komunite v EGrappler.
Reagujem?
Reagujem? - úplne ľahké a okamžité prezeranie vašich stránok z hľadiska toho, ako sa budú zobrazovať na štyroch rôznych zariadeniach. Všetky štyri sú zo systému iOS a vývojár na webe vysvetľuje svoju voľbu. Neponúka žiadne ovládacie prvky ani možnosti, iba veľmi jednoduchý a elegantný displej. Rozmery výrezu:
Desktop - 1600 x 992 pixelov, zmenšujúci sa rozsah (0,3181)
Notebook - 1 280 x 802 pixelov, zmenšujúci sa rozsah (0,277)
Tablet - 768 x 1024 pixelov, zmenšujúci sa rozsah (0,219)
Mobil - 320 x 480 pixelov zmenšujúci sa rozsah (0,219)
Citujem vývojára: „Toto nie je testovací nástroj, je veľmi dôležité to urobiť na skutočných zariadeniach. Je to však nástroj na vytváranie rýchlych snímok obrazovky (pre mňa) a poskytuje vizuálnu príležitosť „vysvetliť“ na stretnutiach s klientmi, čo máte na mysli. “
prístrojovo aktívny
je zariadenie podobné tomu, ako reagujem? pretože jednoducho a prehľadne zobrazuje, že váš web nemá žiadne ovládacie prvky ani možnosti, pokiaľ ide o zariadenia. Všetky sú zobrazené súčasne na jednej dlhej stránke. Má zaujímavú vlastnosť - upravením hlavičky môžete upravovať farba pozadia a vložením vlastného loga, a potom „obrazovky“. Týmto spôsobom môžete v určitom zmysle označiť svoju stránku pri zobrazovaní snímok obrazovky klientovi. Simulované zariadenia a veľkosti obrazovky na tomto webe:
Macbook - 1280 x 800
iPad (portrét) - 768 x 1024
iPad (na šírku) - 1024 x 768
Kindle (portrét) - 600 x 1024
Kindle (na šírku) - 1024 x 600
iPhone (na výšku) - 320 x 480
iPhone (na šírku) - 480 x 320
Galaxia (na výšku) - 240 x 320
Galaxia (na šírku) - 320 x 240
Ako u väčšiny podobných nástrojov, posuvné lišty sa zobrazujú na malých zariadeniach. Nebudú zobrazené na skutočnom zariadení, ale na to, aby ste mohli posúvať testovacie zobrazenie na nedotykovom zariadení, musíte urobiť určité ústupky.
responzívny test
Rovnako ako deviceponsive, responzívny test vykreslí váš web na viacerých zariadeniach, ale namiesto toho, aby ste ich zobrazili všetky naraz na jednej stránke, si v jednoduchej ponuke v hornej časti stránky vyberiete, ktoré zariadenie chcete sledovať. Pri prehliadaní týchto stránok na prenosnom počítači strednej veľkosti som zistil, že zmenšovanie stránky funguje skvele, takže vám umožňuje vidieť celý web v okne testovaného zariadenia.
Tu je ponúkaných trinásť rôznych výrezov, od veľkého monitora stolného počítača po takzvaný Crappy Android (aby som bol úprimný, majú aj možnosť s názvom „ Android je lepší“(Lepší Android).
Firefox sa opäť na tejto stránke trochu potáca. Všimnite si, že na snímke obrazovky - medzi zelenou hlavičkou a oblasťou obsahu na bielom pozadí - je iba modrý pruh, kde by sa mal zobrazovať posuvník obrázku.
responzívny.is
Je veľmi podobný predchádzajúcim dvom a jediná vec, ktorá ich odlišuje od responzívnej stránky. Je plynulá animácia displeja z jedného zariadenia na druhé, ako aj priesvitné prekrytie znázorňujúce vypadávanie „nehnuteľností“ stránok z výrez.
Jediné dostupné možnosti zariadenia sú automatické, ktoré vyplnia okno vášho prehliadača a zobrazia webovú stránku tak, ako by ste ju videli, keby ste na ňu išli: Pracovná plocha; Tablet (orientácia na šírku); Tablet (orientácia na výšku); Smartphone (na šírku) a Smartphone (na výšku), rozmery pixelov nie sú uvedené.
Screenqueries
Screenqueries sa od ostatných stránok odlišuje opäť niekoľkými rôznymi funkciami a možnosťami. Tu je 14 telefónnych a 12 tabletových zariadení s oddeleným prvkom na prepínanie medzi režimami na výšku a na šírku. Zobrazujú sa v očíslovanej mriežke pixelov s rozmermi uvedenými nižšie vpravo od testovacieho displeja. Okraje displeja sú výsuvné, takže je možné testovať vlastné rozmery. Prejdite prstom alebo kliknite na testovaciu oblasť a pozadie sa zmení na sivé, s menším preplneným vzhľadom.
Zaujímavá funkcia tohto webu - pre niekoľko zariadení existuje možnosť „Správne zobrazenie“ („Skutočné zobrazenie“), ktorá zobrazuje vašu stránku zabalenú v prehliadači Chrome, ktorý je pre toto zariadenie predpísaný. Bohužiaľ, a už som si na to zvykol, Firefox nemôže zobraziť posúvač obrázku testovacej stránky. Neprisahajte, naozaj preferujem Firefox z prehliadačov, ale našťastie máme možnosti.
Screenfly
Screenfly skutočne zvyšuje faktor použiteľnosti. Ponúka o deväť zariadení viac tabletov, od 10-palcového prenosného počítača po 24-palcový stolný počítač, päť tabletov, deväť smartfónov, tri veľkosti televízora a možnosť vlastnej veľkosti obrazovky. Akúkoľvek možnosť, ktorú vyberiete, je možné otáčať v orientácii na výšku alebo na šírku pomocou samostatného ovládacieho prvku v ponuke. Môžete sa rozhodnúť, či povolíte posúvanie alebo nie, a vygenerujete zdieľaný odkaz jediným kliknutím na tlačidlo.
Stránka proaktívne pomáha v spôsobe, akým poskytuje informácie o rozmeroch pixelov. Každé zariadenie v ponuke je zobrazené s názvom a rozmermi pixelov, veľkosť okna vášho vlastného prehliadača sa zobrazuje v pravom hornom rohu okna a veľkosť vybratej možnosti sa zobrazuje v päte pod displejom spolu s adresa URL testovaného webu. Táto malá funkcia uľahčuje dokumentáciu snímok obrazovky a zdieľanie informácií s klientmi.
Všetko vyššie uvedené by z neho už urobilo perfektný nástroj, ale vývojári Screenfly našli príležitosť urobiť z neho jednoducho špičkovú triedu a poskytli server proxy. Citácia z ich webových stránok: „Screenfly môže používať server proxy na simuláciu zariadení pri prehliadaní ich webových stránok. Proxy server simuluje reťazec používateľského agenta zariadení, ktoré vyberiete, ale nie správanie týchto zariadení. “ Všetky ostatné tu zverejnené nástroje sa zaoberajú výlučne CSS. Screenfly je jediný, ktorý umožňuje testovanie na základe reťazca user agent.
Po testovaní týmto spôsobom jednej stránky, ktorú som vytvoril s existujúcou mobilná verzia Môžem povedať, že výsledky boli veľmi dobré. Všetko sa zobrazovalo presne tak, ako som očakával, a funkcie boli testovateľné. Musím povedať, že testovanie reťazcov používateľských agentov sa stalo tradičným, ale táto stránka bola vytvorená už veľmi dávno a vlastnosť servera proxy sa ukázala byť skutočne veľmi užitočný doplnok jemu.
Záver
Môžete teda vidieť, že existuje dostatok zdrojov na testovanie responzívnych stránok. Líšia sa v jedinečných vlastnostiach; ktoré stránky použijete, bude závisieť od vašich osobných preferencií a požiadaviek a ja sa vás snažím dotlačiť k ich výskumu a experimentovaniu. Čím viac toho my, vývojári, skutočne dosiahneme užitočné nástroje, o to lepšie.
Internetový obchod je potrebné optimalizovať pre mobilné zariadenia. Táto úloha je vyriešená pomocou responzívneho dizajnu, ktorý vám umožňuje správne zobraziť web na akejkoľvek platforme. Implementácia responzívneho dizajnu však naráža na spoločnú sadu nástrah. Tu je 8 najčastejších problémov, s ktorými sa môžete stretnúť pri nákupe na internete.
Ignorovanie analytiky správania návštevníkov
Ponáhľanie sa vstúpiť do mobilného segmentu núti maloobchodníkov navrhnúť webovú stránku bez vykonávania serióznych analýz správania návštevníkov. Analýza správania návštevníkov je najdôležitejšou fázou prípravy, ktorá vám umožňuje v prvom rade identifikovať najobľúbenejšie mobilné zariadenia a optimalizovať pre nich web. Analytics pomáha určiť najpopulárnejšiu akciu používateľa, napríklad zväčšenie obrázku produktu; ukazuje konverzný pomer mobilných návštevníkov a podobne. Tieto údaje poskytnú prehľad o preferenciách správania používateľov a pomôžu splniť očakávania mobilného publika. Analýza mobilnej návštevnosti sa musí vykonávať systematicky a dôsledne implementovať výsledky, finalizovať a optimalizovať stránku pre potreby kupujúcich.
Navrhovanie obchodu s počítačmi
Desktopová verzia internetového obchodu bude spravidla prepracovaná pre mobilné obrazovky, aj keď je logickejšie ju použiť malá obrazovka mobilného zariadenia a potom sa zmení na stolný počítač. Maloobchodníci často nevedia o technických výzvach, ktoré prináša web pre stolné počítače na veľkosť smartfónu. 
Keď začínate s návrhom pre mobilné obrazovky, zameriavate sa na spotrebiteľské skúsenosti mobilných používateľov. Výsledkom bude to, že pre vás bude jednoduchšie navrhnúť oba kanály: stolný aj mobilný.
Testovanie responzívneho dizajnu
Testovanie rozloženia mobilného telefónu v internetovom obchode je povinnou fázou spustenia, mnohí majitelia ho však často zanedbávajú a spúšťajú bez testovania. Výsledkom je, že na prevádzkovej verzii stránok pre mobilné zariadenia sa môžu chyby objaviť aj počas procesu nákupu a zadávania objednávky.
Nevýhody responzívneho dizajnu možno ľahko identifikovať predbežným testovaním internetového obchodu, ale veľa predajcov na to nemá zdroje. Aby ste znížili riziko straty peňazí, vyskúšajte hlavné cesty používateľov cez web vo veľkých prehliadačoch - Chrome, IE, Firefox, Safari a operačné systémy- Windows, Mac OS, Android, IOS na obľúbených mobilných zariadeniach. Testujte každú zmenu, služby ako BrowserStack alebo Viewport Resizer môžu pomôcť skrátiť čas testovania na hodiny.
Malé prvky pre mobilné obrazovky
V snahe zmestiť sa viac na obrazovku smartfónu majitelia internetových obchodov šetria na veľkosti tlačidiel s výzvou na akciu. Nenúťte používateľov, aby si priblížili tlačidlo Kúpiť alebo neumiestňovali malé položky príliš blízko seba, pretože vaši používatelia budú radšej navštevovať používateľsky príjemnejšie stránky. Navrhujte rozhrania s veľkými navigačnými prvkami a veľkosťami tlačidiel s výzvou na akciu.
Pomalá rýchlosť načítania stránky
Mobilné publikum miluje rýchle webové stránky a rýchle načítanie. Posúďte komponenty svojho mobilné stránky- obrázky, tlačidlá, text, skripty - musia byť optimalizované pre mobilné zariadenia. Spoločnosť Google berie čas načítania stránky do svojich SERP a označuje mobilné weby a uprednostňuje ich v hornej časti, takže „svetlé“ stránky majú ďalšiu významnú výhodu.
Rozdeľte obsah na rôzne karty, napríklad stránka produktu môže obsahovať iba základný obrázok, popis, cenu a tlačidlo Kúpiť. Recenzie a videá zákazníkov je možné umiestniť na samostatnú kartu a znížiť „váhu“ hlavnej časti stránky. Okrem obsahu optimalizujte aj ďalšie prvky, ktoré ovplyvňujú rýchlosť načítania - súbory, obrázky a skripty CSS, odosielajte iba potrebné údaje. Pomôžu vám s tým nástroje, ktoré znižujú veľkosť súborov zdrojov a dobu ich sťahovania: Uglify alebo JSCompress.
Orezávanie obsahu pre mobilných používateľov
Kedy vývojári často skryjú časť obsahu, aby bolo sťahovanie na mobilných zariadeniach rýchlejšie. Veľkosť stránky sa však často v skutočnosti nezníži a obsah sa používateľovi jednoducho nezobrazí. Váš obchod by mal byť schopný dynamicky generovať stránku, aby sa znížila hmotnosť stránky a doba načítania pre mobilných návštevníkov. Poskytovanie menšieho obsahu mobilným používateľom je tiež zlé a má negatívny vplyv na skúsenosti spotrebiteľov. Pri nákupe zvyčajne používajú rôzne zariadenia, robí to asi 90% online nakupujúcich. Ich obmedzenie na responzívny dizajn je veľká chyba.
Podpora obrázkov iba v jednom rozlíšení
Dobrý web s responzívnym dizajnom automaticky mení rozlíšenie obrázkov v závislosti od typu zariadenia, ťažké obrázky predlžujú dobu načítania. Existuje niekoľko spôsobov, ako automaticky meniť veľkosť obrázkov tak, aby sa zmestili konkrétne zariadenie... „Tekuté“ obrázky (tekuté obrázky) - metóda založená na CSS, ktorá vám umožňuje zmenšiť a roztiahnuť obrázok na základe šírky prvku, ktorý obsahuje, alebo prvku HTML5.
E-maily „nereagujúce“
Stáva sa, že samotný web je v poriadku, responzívny dizajn funguje dobre na stolných počítačoch a mobilných zariadeniach. E -maily však nereagujú a mobilní používatelia sa musia snažiť kontrolovať parametre objednávky alebo listovať v nekonečnom zozname odporúčaných produktov, aby sa dostali do nákupného zoznamu. 
E -maily sú kľúčovým bodom kontaktu so zákazníkom, integrujte responzívny dizajn e -mailov do svojej mobilnej stratégie. Navrhujte a testujte svoje e -maily a bulletiny, šablóny e -mailov by mali byť „ľahké“ a obsahovať iba dôležité informácie.
Rámce, ako napríklad alebo, ktoré výrazne uľahčujú a urýchľujú rozloženie stránky.
znamená vynikajúce zobrazenie webovej stránky na všetkých zariadeniach a rozšíreniach monitorov. Pravdepodobne nie každý návrhár rozloženia má úplnú sadu zariadení so všetkými možnými rozšíreniami displeja, pre testovanie rozloženia... To nie je prekvapujúce, pretože technológia v dnešnej dobe nie je lacná.
Takže. Kúpiť hory mobilných telefónov a tabletov nie je možné - ideme na mizinu. Čo robiť? Na tieto účely boli vyvinuté služby na testovanie responzívnych webov... Ich princíp fungovania je veľmi jednoduchý. Stránka, kde sa stránka otvára, sa najčastejšie nachádza v rámčeku určitej veľkosti. Efekt je približne rovnaký ako pri pohľade na mobilné zariadenie... Chcem poznamenať, že služba nie vždy presne zobrazuje zobrazenie stránky na telefóne alebo tablete. Pri kódovaní by ste mali testovať pomocou služieb, ale po dokončení, ak je to možné, testovať na najbežnejších zariadeniach.
Takže. Pre tvoju pozornosť najlepšie nástroje na testovanie responzívnych webov.
Nástroj na testovanie responzívnych webov od spoločnosti Adobe. Ak ho chcete používať, musíte si ho nainštalovať do počítača.
Program vám umožňuje synchronizovať vaše zariadenia prostredníctvom WIFI a prezerať stránky tak, ako sa budú zobrazovať na vašom zariadení. Zapnuté tento moment Podporované sú zariadenia s nasledujúcim OS: iOS, Android, Kindle Fire.
Dobrý deň, milí čitatelia blogu. Niet divu, že responzívny dizajn je na ruskom internete stále obľúbenejší. A samozrejme, návrhári rozloženia si to musia preštudovať. Pretože responzívny dizajn bude čoskoro na takmer všetkých stránkach, pretože mobilné zariadenia používa stále viac ľudí.
A chcem povedať, že stránky s sa na takýchto zariadeniach čítajú oveľa pohodlnejšie ako bez nich.
Dnes vám chcem predstaviť 5 veľmi užitočných a skvelých služieb, pomocou ktorých môžete skontrolovať prispôsobivosť stránok.
A tak poďme.
5 služieb, na ktorých môžete skontrolovať prispôsobivosť stránok.
www.responsivedesigntest.net
Dobrá služba na kontrolu stránok. Existuje mnoho rozlíšení obrazovky pre tablety aj telefóny.
mattkersley.com
Jednoduchá kontrola webových stránok od Matta Kersleyho. K dispozícii sú aj všetky obľúbené rozlíšenia mobilných zariadení.
screenqueri.es
Veľmi skvelá služba, ktorá preverí akékoľvek stránky. Dizajn sa mi veľmi páčil, rovnako ako funkčnosť.
quirktools.com
Veľmi pekná a funkčná služba. Je dokonca možné skontrolovať, ako bude stránka vyzerať v televízii :-)
