Obsah
- Testování
- Desktopové prohlížeče
- Simulované testování zařízení
- Rady pro zařízení
- Výkon a optimalizace
- Závěr
- Potřebné znalosti: Střední CSS a HTML
- Vyžaduje: Textový editor, moderní prohlížeč, grafický software
- Čas projektu: 1 hodina (celkem 5 hodin)
I když nám responzivní webový design může pomoci vytvořit působivé adaptivní zážitky, není to žádná stříbrná kulka; tento přístup nebude automaticky poskytovat weby, které uspokojí všechna myslitelná zařízení a případy použití - ale je to začátek.
To platí zejména vzhledem k tomu, že většina responzivních webů se přizpůsobuje pouze na základě šířky prohlížeče (a na základě této hodnoty pak odvozuje zařízení a kontext). Doufejme, že se to změní, jakmile budeme moci otestovat funkce, jako je rychlost připojení a metoda vstupu. Je brzké dny a stále na to přicházíme.
Na závěr této série se podívám na to, jak můžeme zlepšit odezvu našich webů testováním na široké škále zařízení a průběžnou iterací designu založenou na použití.
Testování
V celém tomto výukovém programu jsem navrhl upravit okno prohlížeče, abyste zjistili, jak dobře design reaguje. I když je to užitečné jako lehký test, není to ani důvod (ani to, jak se většina uživatelů setká) s responzivním webem. Stejně jako každý dobrý design by měl být způsob, jakým se web přizpůsobuje, pro uživatele neviditelný. Trent Walton zopakoval tento sentiment, když řekl: „Moje webové stránky se s vámi setkají, ať jste kdekoli - od mobilu po plnohodnotný desktop a kdekoli mezi tím“.
Abychom mohli správně posoudit, jak se uživatelé „setkají“ s naším webem, musíme si to sami vyzkoušet. O vhodnosti designu můžeme činit pouze úsudky na základě skutečného použití. Testování také není činnost, která se má provádět na konci každého projektu; je nedílnou součástí vývojového procesu.
Desktopové prohlížeče
Jsme zvyklí testovat v celé řadě různých prohlížečů pro počítače a responzivní weby se nijak neliší. Pravděpodobně máme nainstalovanou sadu prohlížečů a možná i virtuální stroj, abychom mohli testovat také na různých operačních systémech.
To by mělo potvrdit, že náš kód funguje ve všech moderních prohlížečích tak, jak bylo zamýšleno. V tomto ohledu nám pomáhají Firefox 3.5+, Opera 9.5+, Safari 3+ a Chrome, které všechny podporují dotazy médií. Přesto zůstává obvyklý podezřelý: dotazy na média byly rozpoznány prohlížečem Internet Explorer až od verze 9. Ale vytvořením našeho webu za předpokladu, že nejdříve mobilní, prohlížeče, které nerozpoznávají dotazy médií, uvidí náš obsah, i když se zjednodušeným rozložením.
Pokud chcete, aby se rozvržení orientované na plochu zobrazilo v dřívějších verzích aplikace Internet Explorer, máte dvě možnosti.
První (a nejjednodušší) je použít polyfill JavaScript. Líbí se mi reagovat.js vytvořené Scottem Jehlem. Tento skript je nejen malý (4 kB), ale podporuje také mediální dotazy založené na em. Použití podmíněných komentářů v hlava znamená, že tento skript používají pouze správné verze IE:
- ! - [pokud lt IE 9]>
- script src = "_ js / lib / respond / respond.min.js"> / script>
- ! [endif] ->
Druhou možností je přesunout složité styly rozvržení do samostatného souboru CSS, který na něj bude odkazovat z hlava s mediálním dotazem uvnitř média atribut. To nám dává styly rozvržení, které pak můžeme v podmíněném komentáři opakovat (bez mediálního dotazu):
- link rel = "stylesheet" type = "text / css" href = "style.css" media = "obrazovka, kapesní počítač" />
- odkaz rel = "stylesheet" type = "text / css" href = "layout.css" media = "obrazovka a (min. šířka: 40,5em)" />
- ! - [pokud (lt IE 9) & (! IEMobile)]>
- link rel = "stylesheet" type = "text / css" href = "layout.css" />
- ! [endif] ->
Tento podmíněný komentář je třeba vyloučit IEMobile takže Internet Explorer na Windows Phone nadále ignoruje složité styly rozvržení.
Simulované testování zařízení
Měli bychom také otestovat responzivní weby v mobilních prohlížečích. Protože to může být docela časově náročné, byla vytvořena řada aplikací a webů, které nám pomáhají testovat zarážky a simulovat pomalé síťové připojení na ploše:
- Charles Proxy: Tato aplikace pro PC, Mac a Linux vám pomůže zkoumat provoz HTTP mezi strojem a internetem a simulovat pomalejší připojení.
- Kondicionér síťového připojení: Matt Gemmell objevil užitečný nástroj obsažený v Mac OS X Lion Developer Tools, který umožňuje simulovat různé síťové podmínky.
- Pomalu: Slowy je podobný nástroj, ale pravděpodobně lépe navržený než jeho ekvivalent od Apple!
- responsivepx: Existuje celá řada webů, které vám umožní otestovat zarážky v jediném okně prohlížeče, ale tento nástroj od Remy Sharp je jedním z mých oblíbených.
- Aptus: Tato aplikace pro Mac OS X vytvořená Alexem Morrisem vám pomůže otestovat responzivní weby s řadou rozlišení zobrazení, která můžete v průběhu času přizpůsobit a přidat. To může být velmi užitečné při vývoji místního webu offline.
Většina výrobců zařízení také poskytuje emulátory, které můžeme přidat do naší testovací sady pro stolní počítače. Další podrobnosti naleznete na následujících webech:
- Apple xCode
- Android SDK
- MSDN App Hub pro Windows Phone
- BlackBerry Developer
- Nokia Developer
Rady pro zařízení
Jak užitečné mohou být simulátory a emulátory, mohou to udělat jen; simulovat. Testování webových stránek na zařízeních v reálném světě nemá žádnou náhradu. Zde můžeme zaznamenat různé rychlosti sítě a problémy s připojením, měnící se kontext použití (jak odlišně by člověk mohl použít místo, pokud je ve vlaku, spíše než sedět na pohovce) a přímá manipulace pomocí dotyku.
To znamená mít sadu zařízení k testování. Minimálně by to mělo představovat všechny moderní mobilní operační systémy (iOS, Android, Windows Phone, BlackBerry OS, Symbian) a zahrnovat i předchozí verze. Fragmentace kolem platformy Android ztěžuje navrhování jedné konkrétní verze, na které byste měli testovat, ale pokud web funguje na verzi 2.1 (Eclair), bude pravděpodobně fungovat i v pozdějších verzích. Nezapomeňte nainstalovat Opera Mini na tato zařízení a vyzkoušet to také.
Jako příklad toho, jak široká může být testovací sada, popsal David Blooman laboratoř zařízení používanou BBC během redesignu jejich responzivního zpravodajského webu. Luke Wroblewski také požádal řadu mobilních vývojářů, aby uvedli, které telefony testují na Bagchecku. A konečně, nástroje jako Adobe Shadow a showoff.io usnadňují testování návrhů na mnoha zařízeních současně.
Společným tématem je potřeba vlastnit obrovské množství zařízení; s přidáváním dalších zařízení při spuštění nových zařízení. Abych byl upřímný, je mi z této situace trochu nepříjemné. Představuje nejen potenciální překážku vstupu pro každého, kdo chce vytvářet responzivní webové stránky, ale podporuje nákup ještě více zařízení a gadgetů. Jakmile jste si prohlédli Příběh věcí, konzumerismus může být trochu nemocný.
Naštěstí existují i jiné způsoby, jak můžeme integrovat testování zařízení do našeho pracovního postupu, které jsou levnější a také trochu šetrnější k prostředí:
- Vyzkoušejte na svém vlastním zařízení: To je samozřejmost, ale testování na zařízení, které máte vždy na sobě, může být nesmírně cenné.
- Vyzkoušejte na zařízeních přátel: Je pravděpodobné, že máte přátele s modely mobilních telefonů, tabletů a čteček elektronických knih, které nevlastníte. Kdykoli můžete, vyzkoušejte na svých zařízeních weby, které aktuálně vyvíjíte.
- Když přátelé upgradují, kupte jejich stará zařízení: Přátelé mohou být opět užitečným zdrojem starších zařízení, ze kterých můžete vytvořit knihovnu zařízení. Když upgradují, nabídněte jim nákup jejich starých telefonů - pokud budete mít štěstí, mohou vám je dokonce dát zdarma!
- Najít starší zařízení na eBay: To může být užitečný zdroj levných telefonů z druhé ruky, skvělý pro vytváření sbírky starších modelů.
- Uspořádejte místní sdílenou knihovnu zařízení: Sdílené zařízení, které vlastní nebo provozuje místní designová agentura nebo se nachází v prostoru pro spolupráci, může být pro mnohé fantastickým způsobem, jak získat výhody velké knihovny zařízení bez nákladů. Může také povzbudit diskusi o běžných problémech viděných v různých zařízeních a možných řešeních, jak je vyřešit.
Klíčovou věcí, kterou si zde musíte pamatovat, je to jakékoli testování je lepší než žádné testování. Vytvořte si tak velkou sadu testů, jakou si můžete dovolit, a najděte příležitosti k testování na jiných zařízeních, kdykoli budete moci.
Výkon a optimalizace
Určité problémy zaznamenáte pouze testováním na různých prohlížečích a zařízeních. Různá rozlišení obrazovky a hustoty pixelů mohou vyžadovat úpravu cílových oblastí kolem odkazů. A možná dokonce zjistíte, že některé interaktivní prvky se na určitých telefonech nacházejí v obtížně dostupných oblastech.
Když jsem navrhoval svůj osobní web, strávil jsem několik týdnů jeho prohlížením ve vlacích, na ulici a v kavárnách při používání jejich WiFi. Tímto způsobem jsem si všiml, že načítání písem trvalo dlouho, moje nadpisy zabíraly příliš mnoho místa a že bylo obtížné procházet vloženými „kluzkými“ mapami. Implementoval jsem tedy Google WebFont Loader, abych vylepšil načítání písem, zmenšil velikost nadpisů, když se objevily v užších výřezech, a přidal pravý okraj na stranu každé mapy.
Bez ohledu na zařízení budou největšími vylepšeními ta, která ovlivní výkon vašeho webu. Výkon může být celý článek sám o sobě, ale tři klíčové věci, na které se budete chtít zaměřit, jsou: ukládání do mezipaměti, velikost souborů a počet odeslaných požadavků HTTP. Nástroje jako Google Page Speed, ySlow a WebPagetest nám mohou říci, jak si stránky vedou, a navrhnout oblasti pro zlepšení.
Jednoduché věci, jako je použití přechodů CSS místo obrázků na pozadí, vkládání malých obrázků do našich souborů CSS pomocí datových identifikátorů URI a zřetězení souborů CSS a JavaScript může snížit počet požadavků HTTP. Přesunutí odkazů na soubory JavaScriptu na konec dokumentu může také urychlit vykreslování stránky.
Můžeme zmenšit velikost obrazových aktiv pomocí vhodných formátů souborů a přijatelné úrovně komprese. Techniky, jako je rozmazání pozadí obrázků (což jim dává efekt hloubky pole) a jejich spouštění prostřednictvím aplikací, jako je ImageOptim, mohou jejich velikost ještě dále zmenšit. Můžeme také zrychlit dodání aktiv tím, že je hostujeme na CDN.
Techniky jako podmíněné načítání - kde se určité části stránky zobrazují pouze na vyžádání uživatelem - pravděpodobně získají na popularitě, zejména na větších webech. Například na naší stránce s mediálními položkami se můžeme rozhodnout, že související odkazy nejsou podstatným obsahem. Místo toho, abychom jej zahrnuli do zdroje stránky, můžeme místo toho poskytnout odkaz, který požaduje tento obsah pouze po kliknutí. Na větších displejích by se tento obsah načítal ve výchozím nastavení. Jeremy Keith napsal více o této technice 24 způsoby.
Závěr
V celé této výukové sérii jsem představil responzivní návrhový proces a poskytl vám nějaký vhled do okolní diskuse, která z něj vyplynula.
Zjistili jsme, že responzivní webový design je formou postupného zdokonalování a jako takový je pokračováním našeho dozrávajícího chápání webu jako univerzálního média. Naučili jsme se také přijmout proporce a vzorec, který je základem plynulého rozložení. Stále však přetrvávají problémy, zejména v souvislosti s obrázky, ale cestu povede neustálé experimentování založené na testování a použití.
A s tím máme náš hotový web:
roadtrip.paulrobertlloyd.com
Web však nikdy není dokončen. S ohledem na to vás vyzývám klonovat, rozvětvovat a přispívat do kódu za tímto ukázkovým webem na Githubu:
github.com/paulrobertlloyd/roadtrip/
Paul je návrhář interakcí se sídlem v anglickém Brightonu. Je nejšťastnější, když vytváří jednoduchá, ale poutavá rozhraní, která jsou pro web nativní.
