Použití javascriptu pro testy responzivního designu. Jak otestovat responzivní webdesign? Malé prvky pro mobilní obrazovky

Internetový obchod je potřeba optimalizovat pro mobilní zařízení. Tento problém je vyřešen pomocí adaptivního designu, který umožňuje správné zobrazení webu na jakékoli platformě. Implementace responzivního designu však přináší standardní řadu úskalí. Uveďme si 8 nejčastějších problémů typických pro online nakupování.

Spěch vstoupit do mobilního segmentu nutí maloobchodníky navrhovat webové stránky, aniž by prováděli seriózní analýzu chování návštěvníků. Analýza chování návštěvníků je nejdůležitější fází přípravy, která vám umožní identifikovat nejoblíbenější mobilní zařízení a optimalizovat pro ně web jako první. Analytics pomáhá určit „nejoblíbenější“ akci uživatele, například zvětšení obrázku produktu; ukazuje konverzní poměr mobilních návštěvníků atd. Tato data poskytnou přehled o preferencích chování uživatelů a pomohou splnit očekávání mobilního publika. Analýza mobilní provoz je nutné provádět systematicky a důsledně implementovat výsledky, finalizovat a optimalizovat stránky tak, aby vyhovovaly potřebám zákazníků.

Obvykle je verze internetového obchodu pro stolní počítače přepracována pro mobilní obrazovky, i když je logičtější vzít malou obrazovku mobilního zařízení a poté ji škálovat na plochu. Obchodníci si to často neuvědomují technické problémy Převedení webu určeného pro desktop do velikosti chytrého telefonu.
Počáteční návrh pro mobilní obrazovky, soustředíte se na mobilní uživatelskou zkušenost. V důsledku toho pro vás bude snazší navrhnout pro oba kanály: pro počítače i pro mobily.

Testování mobilního uspořádání internetového obchodu je povinná fáze spuštění, ale mnoho majitelů to často zanedbává a spustí bez testování. V důsledku toho se na živé verzi webu pro mobilní zařízení mohou objevit chyby i během procesu nákupu a zadávání objednávky.

Nedostatky adaptivního designu lze snadno identifikovat předběžným testováním internetového obchodu, ale mnoho prodejců na to nemá prostředky. Chcete-li snížit riziko ztráty peněz, otestujte klíčové uživatelské cesty kolem webu v hlavních prohlížečích – Chrome, IE, Firefox, Safari a operační systémy– Windows, Mac OS, Android, IOS na oblíbených mobilních zařízeních. Testujte pokaždé, když provedete změny; služby jako BrowserStack nebo Viewport Resizer mohou pomoci zkrátit dobu testování na několik hodin.

Ve snaze umístit více místa na obrazovku smartphonu majitelé internetových obchodů šetří velikostí svých tlačítek „výzvy k akci“. Nenuťte uživatele, aby přibližovali, aby klikli na tlačítko Koupit, a neumisťujte malé prvky příliš blízko u sebe, jinak se vaši uživatelé rozhodnou přejít na pohodlnější web. Navrhněte rozhraní s velkými navigačními prvky a velikostí tlačítek s výzvou k akci.

Mobilní uživatelé milují rychlé weby a minimální dobu načítání. Zhodnoťte komponenty svého mobilní stránky– obrázky, tlačítka, text, skripty – musí být optimalizovány pro mobilní zařízení. Google ve svých SERP bere v úvahu dobu načítání stránky a řadí mobilní weby a upřednostňuje je na prvním místě, takže „lehké“ weby získávají další vážnou výhodu.

Oddělte obsah do různých záložek, například stránka produktu může obsahovat pouze základní obrázek, popis, cenu a tlačítko „Koupit“. Zákaznické recenze a videa lze umístit na samostatnou kartu a snížit „váhu“ hlavní části stránky. Kromě obsahu optimalizujte i další prvky ovlivňující rychlost načítání – CSS soubory, obrázky a skripty, posílejte jen potřebná data. Pomohou vám s tím nástroje, které snižují velikost zdrojových souborů a dobu jejich načítání: Uglify nebo JSCompress.

Vývojáři často skryjí část obsahu, aby bylo načítání na mobilních zařízeních rychlejší. Často se však velikost stránky ve skutečnosti nezmenší a obsah se uživateli jednoduše nezobrazí. Váš obchod by měl být schopen dynamicky generovat stránku, čímž se sníží hmotnost stránky a doba načítání pro mobilní návštěvníky. Poskytování méně obsahu mobilním uživatelům je navíc špatné a má negativní dopad na spotřebitelskou zkušenost. Obvykle během nákupního procesu používají různá zařízení, jako to dělá asi 90 % online nakupujících. Omezovat je na metody responzivního návrhu je velká chyba.

Dobrý web s responzivním designem automaticky mění rozlišení obrázků v závislosti na typu zařízení, těžké obrázky prodlužují dobu načítání. Existuje několik způsobů, jak automaticky upravit velikost obrázku tak, aby se vešel konkrétní zařízení. „Flexibilní“ obrázky (fluidní obrázky) jsou metodou založenou na CSS, která umožňuje komprimovat a roztahovat obrázek v závislosti na šířce prvku, který jej obsahuje, nebo prvku HTML5, který umožňuje načíst obrázek požadované velikosti pro každý typ zařízení.

Stává se, že na samotném webu je vše v pořádku, responzivní design funguje dobře na desktopech i mobilních zařízeních. E-maily ale nereagují a uživatelé mobilních zařízení se musí snažit zkontrolovat podrobnosti objednávky nebo procházet nekonečný seznam doporučených produktů, aby se dostali ke svým dokončeným nákupům. e-maily Jedná se o klíčový bod kontaktu s klientem, integrujte responzivní e-mailový design do své mobilní strategie. Navrhněte a otestujte své dopisy a informační bulletiny; šablony dopisů by měly být „odlehčené“ a obsahovat pouze důležité informace.

Od autora: "Přestaňte měnit velikost tohoto prohlížeče, brzy bude vymazán!" Jak často to slyšíte? Dobře, možná ne tak často, ale pokud vyvíjíte responzivní weby, víte, o čem mluvím: pokaždé, když upravujete DOM nebo CSS, přetahujete okraj prohlížeče tam a zpět a testujete změny a hledat nepřesnosti.

Obecně platí, že většina těchto snah je pokusem napodobit velikosti obrazovky různých zařízení.

Pokud děláte podnikový vývoj, pravděpodobně budete muset otestovat spoustu zařízení od společnosti. Tam, kde pracuji, máme iPady, iPhony, jeden nebo dva další tablety, notebooky a stolní počítače. Pokud nemáte ten luxus, musíte použít to, co máte po ruce.

Doma mám dva různé notebooky, dva různé Zařízení Android: Kindle a Nexus 7. Tato zařízení používám k testování svého vývoje na volné noze, ale je jasné, že to není vyčerpávající výběr. Neexistují vůbec žádná iOS zařízení, a i když jsem považován za raného osvojitele, neplánuji si koupit každý nový telefon/tablet/tablet, jakmile se dostane do prodeje.

Co by tedy měl vývojář dělat? Naštěstí existuje stále více nástrojů založených na prohlížeči, které simulují velikosti obrazovky různých zařízení. Různé nástroje samozřejmě přicházejí s různými sadami funkcí a různou úrovní účinnosti. Na některé z nich se zde podíváme.

Pro účely testování jsem si vzal první skutečně responzivní web, který jsem vytvořil, PyjamasOnYourFeet.com. Je založen na šabloně Brownie HTML5, velmi štědře a zdarma poskytované komunitě vývojářů na EGrappleru.

Jsem citlivý? – zcela snadný, okamžitý náhled vašeho webu z hlediska toho, jak bude vypadat na čtyřech různá zařízení. Všechny čtyři jsou iOS a vývojář vysvětluje svůj výběr na webu. Nenabízí žádné ovládací prvky ani výběry, pouze velmi jednoduchý a elegantní displej. Rozměry okna:

Desktop – 1600 x 992 pixelů, zmenšení podle měřítka (0,3181)

Notebook – 1280 x 802 px, zmenšující se měřítko (0,277)

Tablet – 768 x 1024 pixelů, zmenšení podle měřítka (0,219)

Mobilní – 320 x 480 pixelů, zmenšující se podle měřítka (0,219)

Abychom citovali vývojáře: „Toto není testovací nástroj, je velmi důležité to udělat na skutečných zařízeních. Ale je to nástroj pro pořizování rychlých screenshotů (pro mě) a poskytující vizuální příležitost „provrtat“ na schůzkách s klienty, co jste měli na mysli.“

deviceponsive je podobný webu Am I Responsive? takový, který zobrazuje váš web jednoduše a přehledně, ale nemá žádné ovládací prvky ani dostupné možnosti, pokud jde o zařízení. Všechny jsou zobrazeny současně na jedné dlouhé stránce. Má zajímavou vlastnost - hlavičku můžete upravit úpravou barvy pozadí a vložením vlastního loga a následně „vytisknout“. Tímto způsobem můžete v jistém smyslu označit svůj web při zobrazování snímků obrazovky klientovi. Zařízení a velikosti obrazovky simulované na tomto webu:

Macbook – 1280 x 800

iPad (na výšku) – 768 x 1024

iPad (na šířku) – 1024 x 768

Kindle (na výšku) – 600 x 1024

Kindle (na šířku) – 1024 x 600

iPhone (orientace na výšku) – 320 x 480

iPhone (na šířku) – 480 x 320

Galaxie (na výšku) – 240 x 320

Galaxie (na šířku) – 320 x 240

Stejně jako u většiny podobných nástrojů se na malých zařízeních objevují posuvníky. Na skutečném zařízení se nezobrazí, ale abyste mohli posouvat testovací zobrazení na nedotykovém zařízení, musíte udělat určité ústupky.

Responzivní test podobně jako u zařízení zobrazí váš web na více zařízeních, ale namísto zobrazení všech najednou na jedné stránce si z jednoduché nabídky v horní části stránky vyberete, které zařízení chcete zobrazit. Při procházení tohoto webu na středně velkém notebooku jsem zjistil, že zmenšování stránky funguje skvěle a umožňuje vám vidět celý web uvnitř okna zařízení, které testuji.

Nabízí se zde třináct různých pohledových oken z velkého monitoru stolní počítač na takzvaný „Crappy Android“ (abych byl upřímný, mají také možnost nazvanou „ Android je lepší"(Hezčí Android).

Firefox na tomto webu opět trochu klopýtá. Všimněte si na snímku obrazovky - mezi zeleným záhlavím a oblastí obsahu s bílým pozadím - je pouze modrý pruh, kde by se měl objevit posuvník obrázku.

Je velmi podobný předchozím dvěma a jediná věc, která odlišuje responsive.is mimo ně, je plynulá animace displeje z jednoho zařízení na další a také průsvitné překrytí zobrazující nemovitosti na webu vypadávající z výřezu .

Jediný Dostupné možnosti tato zařízení jsou automatická, která vyplňují okno vašeho prohlížeče a zobrazují web tak, jak byste jej viděli, kdybyste na něj přešli: Desktop; Tablet (orientace na šířku); Tablet (orientace na výšku); Smartphone (orientace na šířku) a Smartphone (orientace na výšku), rozměry v pixelech nejsou uvedeny.

Opět několik různých funkcí a možností odlišuje Screenqueries od jiných webů. Zde je 14 telefonních a 12 tabletová zařízení se samostatným prvkem pro přepínání mezi portrétem a orientace na šířku. Ty jsou zobrazeny na očíslované pixelové mřížce s rozměry zobrazenými v pravé dolní části testovacího displeje. Okraje displeje lze přetáhnout, takže můžete testovat vlastní velikosti. Přetáhněte nebo klikněte na testovací oblast a pozadí zešedne a bude méně přeplněné.

Zajímavou funkcí tohoto webu je, že pro více zařízení existuje možnost „True view“, která zobrazuje váš web zabalený ve vhodném zobrazení pro dané zařízení. prohlížeč chrome. Bohužel, a už jsem si na to zvykl, Firefox neumí zobrazit jezdec obrázku testovacího webu. Nebojte se, pokud jde o prohlížeče, opravdu preferuji Firefox, ale naštěstí máme možnosti.

Screenfly skutečně zvyšuje faktor použitelnosti. Nabízí devět zařízení větších než tablety, od 10palcového notebooku po 24palcový desktop, pět tabletů, devět chytrých telefonů, tři velikosti televizorů a možnost vlastní velikosti obrazovky. Jakoukoli volbu, kterou vyberete, lze otočit na výšku nebo na šířku pomocí individuální prvek ovládací prvky menu. Můžete si vybrat, zda povolit rolování nebo ne, a vygenerovat odkaz ke sdílení jediným kliknutím na tlačítko.

Stránka je proaktivně užitečná ve způsobu, jakým prezentuje informace o velikosti pixelů. Každé zařízení v nabídce je zobrazeno s názvem a rozměry v pixelech, velikost vašeho vlastního okna prohlížeče je zobrazena v pravém horním rohu okna a rozměry vybrané možnosti jsou zobrazeny v zápatí pod displejem spolu s URL testovaného webu. Tato malá funkce usnadňuje dokumentování snímků obrazovky a sdílení informací s klienty.

Vše výše uvedené by z něj již učinilo ideální nástroj, ale vývojáři Screenfly našli příležitost udělat z něj jednoduše prvotřídní a poskytli vlastnost proxy serveru. Citace z jejich webu: „Screenfly může používat proxy server k vydávání se za zařízení, když si prohlížíte jejich web. Proxy simuluje řetězec user-agent zařízení, která vyberete, ale ne chování těchto zařízení." Všechny ostatní zde popsané nástroje se zabývají výhradně CSS. Screenfly je jediný, který umožňuje testování na základě řetězce user-agent.

Po otestování jednoho webu, který jsem tímto způsobem vytvořil se stávající mobilní verzí, mohu říci, že výsledky byly velmi dobré. Vše se zobrazilo přesně tak, jak jsem očekával, a funkce byly testovatelné. Je třeba říci, že testování řetězců uživatelských agentů se stalo tradiční, ale tato stránka byla vytvořena již dávno a vlastnost proxy se ukázala jako velmi užitečný doplněk.

Můžete tedy vidět, že existuje spousta dostupných zdrojů pro testování responzivních webů. Liší se jedinečnými vlastnostmi; které stránky budete používat, bude záviset na vašich osobních preferencích a požadavcích, a já se vás snažím povzbudit, abyste je prozkoumali a experimentovali. Čím více máme my, vývojáři, skutečně užitečných nástrojů, tím lépe.

Dobrý den, milí čtenáři blogu. Není divu, že adaptivní design je na ruském internetu stále populárnější. A designéři rozvržení to samozřejmě musí prostudovat. Vzhledem k tomu, že responzivní design bude brzy na téměř všech webech, protože stále více lidí používá mobilní zařízení.

A rád bych řekl, že stránky s ním se na takových zařízeních čtou mnohem pohodlněji než bez něj.

Dnes vám chci představit 5 velmi užitečných a skvělých služeb, pomocí kterých můžete zkontrolovat přizpůsobivost vašeho webu.

A tak pojďme.

Dobrá služba pro kontrolu stránek. Existuje mnoho rozlišení obrazovky pro tablety i telefony.

Jednoduchá služba pro kontrolu webu od Matta Kersleyho. K dispozici jsou také všechna oblíbená rozlišení mobilních zařízení.

Velmi skvělá služba, která zkontroluje jakýkoli web. Moc se mi líbil design, stejně jako funkčnost.

Velmi krásná a funkční služba. Dokonce je možné zkontrolovat, jak bude stránka vypadat v televizi :-)

S rozvojem webových technologií rostou i požadavky na vývoj webu. Největší tlak pociťují weboví vývojáři, návrháři layoutů nebo jak se jim dnes říká frontendoví vývojáři.

V tomto článku budeme hovořit trochu o adaptivním rozložení, protože tento „trik“ je nyní velmi drahý. Pokud jde o adaptivní rozvržení, návrháři rozvržení jakékoli úrovně se na zákazníky nebo projektové manažery dívají mírně řečeno s hněvem, protože chápou, jak je to obtížné.

Mnoho lidí si začíná plést adaptivní rozvržení s flexibilním rozvržením, což je velmi častá chyba začínajících designérů rozvržení. Jaký je rozdíl, ptáte se?

Nejprve, aby vám to bylo jasné a takříkajíc, dejte všechny tečky a podívejte se, jaké typy rozložení existují.

Existují 4 typy rozložení:

Zvažme všechny typy podrobněji.

1. Pevné rozložení

Bloky nemění svou šířku. Na monitorech s nízkým rozlišením se zobrazí vodorovný posuvník.

#temnyi, #svetlyi ( šířka: 440px; )

2. Rozložení pryže

Bloky mění svou šířku v závislosti na velikosti okna prohlížeče. Může nabývat maximální a minimální hodnoty (vlastnost max-width). Ale nemůžete udělat 50 % z 50 % na 100 %, jak se obrazovka zmenšuje.

#temnyi, #svetlyi ( šířka: 50 %; )

3. Adaptivní rozložení

Implementováno pomocí @media nebo skriptů. Přizpůsobeno pro konkrétní známá zařízení (320, 768, 1024 atd.). Jakákoli změna nastává trhnutím, po dosažení jedné ze zadaných úrovní. Rozhodně vhodné pro

#temnyi, #svetlyi ( šířka: 430px; ) @media (max-width: 1220px) ( #temnyi, #svetlyi (šířka: 380px; ) ) @media (max-width: 1120px) ( #temnyi, #svetlyi ( šířka : 325px; ) ) @media (max-width: 680px) ( #temnyi, #svetlyi ( šířka: 200px; ) )

4. Responzivní rozložení

Jedná se o kombinaci proměnlivého a adaptivního uspořádání. Nejnáročnější na realizaci. Ale výsledek je nejpřijatelnější. Dá se s jistotou říci, že se stránka přizpůsobí jakémukoli zařízení.

#temnyi, #svetlyi ( šířka: 50 %; ) @media (max-width: 1006px) ( #temnyi, #svetlyi ( šířka: 100 %; ) )

Mluvili jsme tedy o 4 typech rozvržení webu. Nyní nastal čas pro náš zázračný scénář adaptivní rozložení. Doufám, že nemusím nic vysvětlovat, skript je docela jednoduchý, jen říkáme, že když změníte, nějaký blok se někde přimíchá a je to. Samozřejmě je to možné prostřednictvím CSS styly, ale musíte znát všechny metody, někdy na některých místech některé nebudou fungovat a některé budou tak akorát.

Skript adaptivního rozvržení:

/* Vytvořme proměnnou, do které můžete vložit třídy monogest, abyste je mohli pohodlně používat v kódu. To znamená, že zde je detekuje jednou a je to, a ne před každým vzorkem! toto je užitečná funkce */ var my = ( window: $(window) ); /*Vlastně samotná funkce*/ $(window).resize(function () ( /*Proměnná, která určuje šířku okna a vkládá ji do proměnné width*/ var width = my.window.width( ); /*podmínka transformace okna, tj. podmínka, která se provede, když šířka okna dosáhne určité velikosti */ 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še. Pokud máte nějaké dotazy, pište do komentářů, přejděte na

Dnes již není potřeba nikoho o potřebě přesvědčovat mobilní verze místo. Každý den totiž přibývá návštěvníků z chytrých telefonů a tabletů. V době psaní tohoto článku asi 20 % návštěvníků mého blogu používá k prohlížení mobilní zařízení. To znamená, že každý pátý člověk navštíví můj web z telefonu nebo tabletu.

Před několika lety jsem o takových návštěvnících ani neuvažoval, ale když jejich počet přesáhl 10%. celkový počet Začal jsem používat adaptivní rozložení. To umožnilo správně zobrazovat obsah na mobilních zařízeních a zvýšit loajalitu k webu jak ze strany návštěvníků, tak i vyhledávače.

Mobilní verze webu a responzivní design nejsou to samé. V tomto článku budeme hovořit o testování adaptivního rozvržení, kdy se design webu mění v závislosti na rozlišení obrazovky zařízení návštěvníka.

Chcete-li si být jisti, že se vaše stránky zobrazují správně na mobilních zařízeních, musíte je zkontrolovat, a proto je jich několik užitečné služby a nářadí.

Populární internetový prohlížeč (prohlížeč) Mozilla Firefox vybavena vestavěnými nástroji pro kontrolu vhodnosti designu webových stránek pro zobrazení na mobilních zařízeních. Chcete-li jej použít, přejděte na „Menu“ - „Vývoj“ - „Adaptivní design“. Nebo stačí stisknout tři klávesy na klávesnici současně ++[M]

Měli byste vidět něco takového:

Změnou rozlišení a orientace obrazovky můžete zkontrolovat, jak se bude vaše stránka zobrazovat návštěvníkům z mobilních zařízení.

Prohlížeč Google Chrome Má také vestavěnou podporu pro kontrolu přizpůsobivosti návrhu webu. Chcete-li to provést, přejděte do nabídky, vyberte „Další nástroje“ a poté „Nástroje pro vývojáře“ (nebo stiskněte klávesu).

Poté klikněte na ikonu responzivního designu (nebo současně stiskněte ++[M] na klávesnici):

Uprostřed obrazovky uvidíte, jak se vaše stránky budou zobrazovat na obrazovkách mobilních zařízení:

Jak víte, dva světoví lídři ve vyhledávání Google a Yandex mají svůj vlastní neskromný názor na to, jak by měl web vypadat na obrazovkách mobilních zařízení. A pokud je web považován za nevhodný pro mobilní návštěvníky, je ve výsledcích vyhledávání snížen. Takže z pohledu SEO, pokud nechcete ztratit mobilní návštěvníky, musíte mít nejen responzivní design, ale vyhledávače jej musí považovat za responzivní, tedy pro mobily.

Pro kontrolu adaptability pomocí služba Google přejděte na následující adresu a zadejte název svého webu: https://www.google.com/webmasters/tools/mobile-friendly/.

Takto vypadá výsledek kontroly mého blogu:

S Yandexem je to trochu složitější; pro kontrolu se musíte zaregistrovat ve službě Yandex.Webmaster a používat beta verzi rozhraní:

Hlavním úkolem těchto služeb je prezentovat (ukázat), jak bude váš web vypadat mobilní zařízení. Existuje velké množství stránek s takovými funkcemi. Uvedu jen několik z nich. Ve většině případů duplikují vestavěné funkce FireFox a Chrome.

Začnu znovu s Googlem, který má svou vlastní službu pro demonstraci přizpůsobivosti: http://design.google.com/resizer/#

Druhá příjemná služba je http://quirktools.com/screenfly/. Ukáže vám, jak může váš web vypadat i v televizi!

Abych neurazil „domácího výrobce“, uvedu příklad jiného webu: http://symby.ru/adaptest/. Na jedné stránce uvidíte několik pohledů s různým rozlišením obrazovky.

Jakmile jste si jisti, že váš web reaguje a zobrazuje se správně na většině zařízení, měli byste zkontrolovat jeho rychlost. Opět ve vztahu k mobilním návštěvníkům.

Google je jako vždy napřed: https://developers.google.com/speed/pagespeed/insights/. Tato služba vám ukáže, jak web vypadá na obrazovce telefonu, a poskytne doporučení pro optimalizaci kódu pro zvýšení rychlosti načítání na mobilních zařízeních.

A na závěr uvedu příklad služby, která nejen ukáže, jak stránka vypadá na mobilním zařízení, ale ukáže i její rychlost: http://www.webpagetest.org/

Podle mého názoru je v každodenní práci při provádění změn v designu webu snazší využít vestavěné schopnosti Prohlížeče FireFox a Chrome. Poté musíte samozřejmě zkontrolovat loajalitu vyhledávačů k vašemu návrhu. A teprve potom, abyste uklidnili svou duši nebo se předvedli, můžete využít online služeb.