Ako bezplatne otestovať responzívny dizajn. Responzívne rozloženie pomocou skriptu JavaScript Testovanie responzívneho dizajnu
Dobrý deň, milí čitatelia blogu. Nie je prekvapujúce, že adaptívny dizajn sa na ruskom internete stáva čoraz obľúbenejším. A samozrejme, dizajnéri rozloženia si to musia naštudovať. Keďže responzívny dizajn bude čoskoro na takmer všetkých weboch, pretože stále viac ľudí používa mobilné zariadenia.
A rád by som povedal, že stránky s ním sa čítajú na takýchto zariadeniach oveľa pohodlnejšie ako bez neho.
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ť svojho webu.
A tak poďme.
5 služieb, kde si môžete skontrolovať prispôsobivosť svojej webovej stránky. www.responsivedesigntest.netDobrá služba na kontrolu stránok. Existuje veľa rozlíšení obrazovky pre tablety aj telefóny.
mattkersley.comJednoduchá služba na kontrolu webovej stránky od Matta Kersleyho. Dostupné sú aj všetky obľúbené rozlíšenia mobilných zariadení.
Veľmi skvelá služba, ktorá skontroluje akúkoľvek stránku. Veľmi sa mi páčil dizajn, ale aj funkčnosť.
Veľmi krásny a funkčný servis. Dokonca je možné skontrolovať, ako bude stránka vyzerať v televízii :-)
Od autora: "Prestaňte meniť veľkosť tohto prehliadača, čoskoro bude vymazaný!" Ako často to počujete? Dobre, možno nie tak často, ale ak vyvíjate responzívne webové stránky, viete, o čom hovorím: zakaždým, keď upravujete DOM alebo CSS, ťaháte okraj prehliadača tam a späť a testujete zmeny a hľadať nepresnosti.
Vo všeobecnosti je väčšina týchto snáh pokusom napodobniť veľkosti obrazoviek rôznych zariadení.
Ak robíte podnikový vývoj, pravdepodobne máte na testovanie veľa zariadení od spoločnosti. Kde pracujem, máme iPady, iPhony, jeden alebo dva ďalšie tablety, notebooky a desktopy. Ak nemáte ten luxus, musíte použiť to, čo máte po ruke.
Doma mám dva rôzne notebooky, dva rôzne zariadenia so systémom Android: Kindle a Nexus 7. Tieto zariadenia používam na testovanie svojho vývoja na voľnej nohe, ale je jasné, že to nie je úplný výber. Vôbec nie iOS zariadenia, a hoci som považovaný za raného používateľa, neplánujem si kúpiť každý nový telefón/tablet/tablet hneď, ako sa dostane do predaja.
Čo by teda mal vývojár robiť? Našťastie existuje rastúci počet nástrojov založených na prehliadačoch, ktoré simulujú veľkosti obrazoviek rôznych zariadení. Rôzne nástroje, samozrejme, prichádzajú s rôznymi súbormi funkcií a rôznymi úrovňami účinnosti. Na niektoré z nich sa tu pozrieme.
Na testovacie účely som si vzal prvý skutočne responzívny web, ktorý som vytvoril, PyjamasOnYourFeet.com. Je založený na šablóne Brownie HTML5, veľmi veľkoryso a bezplatne poskytovanej komunite vývojárov na EGrappleri.
Som citlivý?Som citlivý? – úplne jednoduchá a okamžitá ukážka vašej stránky z hľadiska toho, ako bude vyzerať na štyroch rôznych zariadeniach. Všetky štyri sú iOS a vývojár vysvetľuje svoj výber na webovej stránke. Neponúka žiadne ovládacie prvky ani výbery, iba veľmi jednoduchý a elegantný displej. Rozmery okna:
Desktop – 1600 x 992 pixelov, zmenšujúce sa podľa mierky (0,3181)
Laptop – 1280 x 802 px, zmenšujúca sa mierka (0,277)
Tablet – 768 x 1024 pixelov, zmenšujúce sa podľa mierky (0,219)
Mobil – 320 x 480 pixelov, zmenšujúce sa podľa mierky (0,219)
Aby som citoval 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 rýchle vytváranie snímok obrazovky (pre mňa) a poskytuje vizuálnu príležitosť „prehĺbiť“ na stretnutiach s klientmi, čo ste mali na mysli.“
deviceponsive je podobný stránke Responzívny? taký, ktorý zobrazuje vašu stránku jednoducho a prehľadne, ale nemá žiadne ovládacie prvky ani dostupné možnosti, pokiaľ ide o zariadenia. Všetky sú zobrazené súčasne na jednej dlhej strane. Má zaujímavú vlastnosť – hlavičku môžete upraviť úpravou farby jej pozadia a vložením vlastného loga a následne „vytlačiť“. Týmto spôsobom môžete v istom zmysle označiť svoju stránku pri zobrazovaní snímok obrazovky klientovi. Zariadenia a veľkosti obrazoviek simulované na tejto stránke:
Macbook – 1280 x 800
iPad (na výšku) – 768 x 1024
iPad (na šírku) – 1024 x 768
Kindle (na výšku) – 600 x 1024
Kindle (na šírku) – 1024 x 600
iPhone (orientácia 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
Rovnako ako u väčšiny podobných nástrojov sa na malých zariadeniach zobrazujú posúvače. Nezobrazia sa na skutočnom zariadení, ale aby ste mohli posúvať testovacie zobrazenie na nedotykovom zariadení, musíte urobiť určité ústupky.
Podobne ako pri responzívnom teste, aj pri responzívnom teste sa váš web zobrazí na viacerých zariadeniach, no namiesto zobrazenia všetkých naraz na jednej stránke si z jednoduchej ponuky v hornej časti stránky vyberiete, ktoré zariadenie chcete zobraziť. Pri prehliadaní tejto stránky na stredne veľkom notebooku som zistil, že zmenšovanie stránky funguje skvele a umožňuje vám vidieť celú stránku v okne testovaného zariadenia.
Ponúka sa tu trinásť rôznych zobrazovacích okien z veľkého monitora stolný počítač na takzvaný „Crappy Android“ (aby som bol úprimný, majú aj možnosť s názvom „ Android je lepší"(Lepší Android).
Firefox na tejto stránke opäť trochu naráža. Všimnite si na snímke obrazovky – medzi zelenou hlavičkou a oblasťou obsahu s bielym pozadím – je len modrý pruh, kde by sa mal zobraziť posúvač obrázka.
Je veľmi podobný predchádzajúcim dvom a jediná vec, ktorá nastavuje responsive.is okrem nich, je plynulá animácia displeja z jedného zariadenia na ďalšie, ako aj priesvitné prekrytie zobrazujúce nehnuteľnosti na stránke vypadávajúce z výrezu .
Jediné dostupné možnosti zariadenia sú tu automatické, ktoré vyplnia okno vášho prehliadača a zobrazia stránku tak, ako by ste ju videli, keby ste na ňu prešli: Pracovná plocha; Tablet (orientácia na šírku); Tablet (orientácia na výšku); Smartphone (orientácia na šírku) a Smartphone (orientácia na výšku), rozmery v pixeloch nie sú uvedené.
Opäť niekoľko rôznych funkcií a možností odlišuje Screenqueries od iných stránok. K dispozícii je 14 telefónnych a 12 tabletových zariadení so samostatným prvkom na prepínanie režimov na výšku a na šírku. Tieto sú zobrazené na očíslovanej pixelovej mriežke, pričom rozmery sú zobrazené v pravej dolnej časti testovacieho displeja. Okraje displeja sú posuvné, takže si môžete vyskúšať vlastné veľkosti. Potiahnite alebo kliknite na testovaciu oblasť a pozadie sa zmení na sivú a bude vyzerať menej preplnené.
Zaujímavá vlastnosť tento web – pre niekoľko zariadení existuje možnosť „True view“, ktorá zobrazuje váš web zabalený do prehliadača Chrome priradeného k tomuto zariadeniu. Bohužiaľ, a už som si na to zvykol, Firefox nedokáže zobraziť posúvač obrázkov testovacej stránky. Nebojte sa, naozaj preferujem Firefox, pokiaľ ide o prehliadače, ale našťastie máme možnosti.
Screenfly skutočne zvyšuje faktor použiteľnosti. Ponúka deväť zariadení väčších ako tablety, od 10-palcového notebooku po 24-palcový desktop, päť tabletov, deväť smartfónov, tri veľkosti TV a možnosť vlastnej veľkosti obrazovky. Akákoľvek možnosť, ktorú vyberiete, sa dá otočiť na výšku alebo na šírku pomocou samostatného ovládacieho prvku v ponuke. Môžete si vybrať, či povoliť rolovanie alebo nie, a vygenerovať odkaz na zdieľanie jediným kliknutím na tlačidlo.
Stránka je proaktívne užitočná v spôsobe, akým prezentuje informácie o veľkosti pixelov. Každé zariadenie v ponuke je zobrazené s názvom a rozmermi v pixeloch, veľkosť vášho vlastného okna prehliadača je zobrazená v pravom hornom rohu okna a rozmery vybranej možnosti sú zobrazené v päte pod displejom spolu s URL testovanej stránky. Táto malá funkcia uľahčuje dokumentovanie snímok obrazovky a zdieľanie informácií s klientmi.
Všetky vyššie uvedené by z neho už urobili ideálny nástroj, ale vývojári Screenfly našli príležitosť urobiť z neho jednoducho špičkovú a poskytli vlastnosť proxy servera. Citácia z ich webovej stránky: „Screenfly môže používať proxy server na vydávanie sa za zariadenia, keď si prezeráte ich webovú stránku. Proxy simuluje reťazec používateľského agenta zariadení, ktoré vyberiete, ale nie správanie týchto zariadení." Všetky ostatné tu uvedené nástroje sa zaoberajú výlučne CSS. Screenfly je jediný, ktorý umožňuje testovanie na základe reťazca používateľského agenta.
Po tomto testovaní jednej stránky som vytvoril s existujúcou mobilná verzia, môžem povedať, že výsledky boli veľmi dobré. Všetko sa zobrazilo presne tak, ako som očakával a funkcie boli testovateľné. Treba povedať, že testovanie reťazcov používateľských agentov sa stalo tradičným, ale táto stránka bola vytvorená už dávno a vlastnosť proxy sa ukázala byť skutočne veľmi užitočným doplnkom.
Môžete teda vidieť, že na testovanie responzívnych webových stránok je k dispozícii množstvo zdrojov. Líšia sa jedinečnými vlastnosťami; ktoré stránky použijete, bude závisieť od vašich osobných preferencií a požiadaviek a ja sa vás snažím povzbudiť, aby ste ich skúmali a experimentovali. O to viac máme my vývojári užitočné nástroje, tým lepšie.
Internetový obchod musí byť optimalizovaný pre mobilné zariadenia. Tento problém je vyriešený pomocou adaptívneho dizajnu, ktorý umožňuje správne zobrazenie stránky na akejkoľvek platforme. Implementácia responzívneho dizajnu však prináša štandardnú sadu úskalí. Uveďme si 8 najčastejších problémov typických pre online nákupy.
Zanedbanie analýzy správania návštevníkovZhon vstúpiť do mobilného segmentu núti maloobchodníkov navrhnúť webovú stránku bez serióznej analýzy 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 identifikovať najpopulárnejšie mobilné zariadenia a ako prvé pre ne optimalizovať stránku. Analytics pomáha určiť „najpopulárnejšiu“ akciu používateľa, napríklad zväčšenie obrázka produktu; zobrazuje mieru konverzie návštevníkov z mobilných zariadení atď. 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 mobilná návštevnosť je potrebné vykonávať systematicky a dôsledne implementovať výsledky, finalizovať a optimalizovať stránky tak, aby vyhovovali potrebám zákazníkov.
Navrhovanie stolného obchoduVerzia internetového obchodu pre stolné počítače je zvyčajne prepracovaná pre mobilné obrazovky, aj keď je logickejšie vziať malú obrazovku mobilného zariadenia a potom ju škálovať na plochu. Obchodníci si často neuvedomujú technické problémy, ktoré prináša web určený pre desktop na veľkosť smartfónu. 
Počiatočný dizajn pre mobilné obrazovky, zameriavate sa na dojem používateľov mobilných zariadení. V dôsledku toho bude pre vás jednoduchšie navrhovať oba kanály: počítač aj mobil.
Testovanie mobilného rozloženia internetového obchodu je povinná fáza spustenia, no mnohí majitelia ju často zanedbávajú a spúšťajú ju bez testovania. V dôsledku toho sa na živej verzii stránky pre mobilné zariadenia môžu objaviť chyby aj počas procesu nákupu a zadania objednávky.
Nedostatky adaptívneho dizajnu sa dajú ľahko identifikovať predbežným testovaním internetového obchodu, no mnohí predajcovia na to nemajú prostriedky. Ak chcete znížiť riziko straty peňazí, otestujte kľúčové trasy používateľov okolo stránky v hlavných prehliadačoch – Chrome, IE, Firefox, Safari a operačné systémy- Windows, Mac OS, Android, IOS na populárnych mobilné zariadenia. Testujte vždy, keď vykonáte zmeny; služby ako BrowserStack alebo Viewport Resizer môžu pomôcť skrátiť čas testovania na niekoľko hodín.
Malé prvky pre mobilné obrazovkyV snahe umiestniť viac miesta na obrazovku smartfónu majitelia internetových obchodov ušetria veľkosť svojich tlačidiel „výzvy na akciu“. Nenúťte používateľov približovať sa, aby klikli na tlačidlo Kúpiť, a neumiestňujte malé prvky príliš blízko seba, inak sa používatelia rozhodnú prejsť na pohodlnejšiu stránku. Navrhnite rozhrania s veľkými navigačnými prvkami a veľkosťou tlačidiel výzvy na akciu.
Nízka rýchlosť načítania stránkyMobilné publikum miluje rýchle weby a minimálne časy načítania. Vyhodnoťte komponenty svojho mobilné stránky– obrázky, tlačidlá, text, skripty – musia byť optimalizované pre mobilné zariadenia. Google berie do úvahy čas načítania stránky vo svojich SERP a zoraďuje mobilné stránky a uprednostňuje ich na vrchole, takže „ľahké“ stránky získajú ďalšiu vážnu 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ť“. Zákaznícke recenzie a videá je možné umiestniť na samostatnú kartu a znížiť „váhu“ hlavnej časti stránky. Okrem obsahu optimalizujte aj ďalšie prvky ovplyvňujúce rýchlosť načítania – CSS súbory, obrázky a skripty, posielajte len potrebné dáta. Pomôžu vám s tým nástroje, ktoré zmenšia veľkosť zdrojových súborov a čas ich načítania: Uglify alebo JSCompress.
Orezávanie obsahu pre používateľov mobilných zariadeníVývojári často skryjú časť obsahu, aby bolo načítanie na mobilných zariadeniach rýchlejšie. Často sa však veľkosť stránky v skutočnosti nezmenší a obsah sa používateľovi jednoducho nezobrazí. Váš obchod by mal byť schopný dynamicky generovať stránku, čím sa zníži hmotnosť stránky a časy načítania pre mobilných návštevníkov. Poskytovanie menšieho množstva obsahu používateľom mobilných zariadení je navyše zlé a negatívne ovplyvňuje dojem spotrebiteľov. Zvyčajne počas nákupného procesu používajú rôzne zariadenia, robí to asi 90 % online nakupujúcich. Obmedzenie na metódy responzívneho dizajnu je veľkou chybou.
Podporuje obrázky 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ú čas načítania. Existuje niekoľko spôsobov, ako automaticky prispôsobiť veľkosti obrázkov konkrétne zariadenie. „Flexibilné“ obrázky (plynulé obrázky) sú metódou založenou na CSS, ktorá vám umožňuje komprimovať a roztiahnuť obrázok v závislosti od šírky prvku, ktorý ho obsahuje, alebo prvku HTML5, ktorý vám umožňuje načítať obrázok požadovanej veľkosti pre každý typ zariadenia.
„Neodpovedajúce“ e-mailyStáva sa, že so samotnou stránkou je všetko v poriadku, responzívny dizajn funguje dobre na desktopoch a mobilných zariadeniach. E-maily však nereagujú a používatelia mobilných zariadení sa musia snažiť skontrolovať podrobnosti objednávky alebo prechádzať nekonečným zoznamom odporúčaných produktov, aby sa dostali k dokončeným nákupom. 
E-maily sú kľúčovým kontaktným bodom zákazníka, preto do svojej mobilnej stratégie integrujte responzívny e-mailový dizajn. Navrhnite a otestujte svoje listy a bulletiny; šablóny listov by mali byť „ľahké“ a obsahovať iba dôležité informácie.
S rozvojom webových technológií rastú aj požiadavky na vývoj webu. Najväčší tlak pociťujú weboví vývojári, návrhári layoutov, alebo ako sa im dnes hovorí frontend developeri.
V tomto článku budeme hovoriť trochu o adaptívnom rozložení, pretože tento „trik“ je teraz veľmi drahý. Pokiaľ ide o adaptívne usporiadanie, dizajnéri layoutu akejkoľvek úrovne sa pozerajú na zákazníkov alebo projektových manažérov, mierne povedané, s hnevom, pretože chápu, aké je to ťažké.
Mnoho ľudí si začína zamieňať adaptívne rozloženie s flexibilným rozmiestnením, čo je veľmi častá chyba začínajúcich dizajnérov rozloženia. Pýtate sa, aký je rozdiel?
Najprv, aby vám to bolo jasné a takpovediac, vložte všetky bodky a pozrite sa, aké typy rozloženia existujú.
Existujú 4 typy rozloženia:
Zvážme všetky typy podrobnejšie.
1. Pevné rozloženie
Bloky nemenia svoju šírku. Na monitoroch s nízkym rozlíšením sa zobrazí vodorovný posúvač.
#temnyi, #svetlyi ( šírka: 440px; )
2. Rozloženie gumy
Bloky menia svoju šírku v závislosti od veľkosti okna prehliadača. Môže nadobudnúť maximálne a minimálne hodnoty (vlastnosť max-width). Ale nemôžete urobiť 50% z 50% na 100%, keď sa obrazovka zmenšuje.
#temnyi, #svetlyi (šírka: 50 %; )
3. Adaptívne rozloženie
Implementované pomocou @media alebo skriptov. Prispôsobené pre konkrétne známe zariadenia (320, 768, 1024 atď.). Akákoľvek zmena nastáva v trhnutí, po dosiahnutí jednej zo špecifikovaných úrovní. Určite vhodné pre
#temnyi, #svetlyi ( šírka: 430px; ) @media (max-width: 1220px) ( #temnyi, #svetlyi (šírka: 380px; ) ) @media (max-width: 1120px) ( #temnyi, #svetlyi ( šírka : 325px; ) ) @media (max-width: 680px) ( #temnyi, #svetlyi (šírka: 200px; ) )
4. Responzívne rozloženie
Ide o kombináciu plynulého a adaptívneho usporiadania. Najťažšie na realizáciu. Ale výsledok je najprijateľnejší. Dá sa povedať, že stránka sa prispôsobí akémukoľvek zariadeniu.
#temnyi, #svetlyi ( šírka: 50 %; ) @media (max-width: 1006px) ( #temnyi, #svetlyi ( šírka: 100 %; ) )
Hovorili sme teda o 4 typoch rozloženia webových stránok. Teraz nastal čas pre náš zázračný skript adaptívneho rozloženia. Dúfam, že nemusím nič vysvetľovať, skript je celkom jednoduchý, len hovoríme, že keď zmeníte, nejaký blok sa niekde primieša a je to. Samozrejme, je to možné aj pomocou štýlov CSS, ale musíte poznať všetky metódy, niekedy na niektorých miestach niektoré nebudú fungovať a niektoré budú správne.
Skript adaptívneho rozloženia:
/* Poďme vytvoriť premennú, do ktorej môžete vložiť triedy monogest, aby ste ich mohli pohodlne použiť v kóde. To znamená, že tu ich detekuje raz a je to, a nie pred každou vzorkou! toto je užitočná funkcia */ var my = ( okno: $(okno) ); /*Vlastne samotná funkcia*/ $(window).resize(function () ( /*Premenná, ktorá určuje šírku okna a vkladá ju do premennej šírky*/ var width = my.window.width( ); /*podmienka transformácie okna, t.j. podmienka, ktorá sa vykoná, keď šírka okna dosiahne určitú veľkosť */ 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 všetko. Ak máte nejaké otázky, píšte do komentárov, prejdite na
