Dobrá reakce na webový design, díky své povaze, zůstává bez povšimnutí těm, kteří spotřebovávají obsah on-line. Takže když někdo požádá o novou webovou stránku, často koncept zcela neví, a to i přesto, že ji každodenně prožívá. A přesto, reagující design webových stránek je nyní uznáván jako standardní praxe v celém odvětví.

Budování citlivých webových stránek změnilo naše procesy, od vytváření mockup kompletních stránek až po budování knihoven opakovaně použitelných komponent a rozvržení.

uspořádání je založeno na obsahu a styly jsou řízeny značkami

Nedávno nás oslovil stávající klient, který reagoval na novou webovou stránku. Předtím jsme s nimi spolupracovali pomocí rigidního procesu vodopádu. Při přechodu k agilnímu pracovnímu postupu jsme byli schopni přijmout změnu v jakémkoli bodě projektu.

Během celého procesu jsme se drželi filozofie, že uspořádání je založeno na obsahu a že styly jsou řízeny značkami.

Specifikace specifikací

Dokumenty specifikací fungují skvěle pro vypsání všech funkcí, které musí mít webová stránka. Ale je to opravdu to, co klient potřebuje? Je velmi těžké tyto funkce vizualizovat. Výsledkem je, že specifikační dokumenty se často stávají nafouknutými seznamy přání. To nepomůže klientovi, návrhářům ani konečnému webu.

Namísto specifikačních dokumentů jsme se rozhodli používat drátěné rámy. První krok projektu zahrnoval vytváření drátových rámů pro každou stránku. To může znít jako přehnané, ale drátěné rámy vedly k časné diskusi o obsahu a vlastnostech každé stránky. Zjistili jsme, že funkce, které jsme nikdy předtím nezvážily, byly přidány, zatímco mnohé byly odstraněny.

Dráty nám daly jasné, vizuální znázornění toho, jak by měl být obsah a funkčnost upřednostňována na každé stránce. Tyto dráty se pak staly referenčním bodem, nahrazujícím specifikační dokument.

Key takeaway: výroba drátových rámů namísto specifikací dokumentů se zaměřuje na všechny základní prvky a důležitost obsahu.

Audit

Kontrola drátových rámů nám umožňuje sestavit seznam všech běžných komponent. Na jedné stránce budou na každé stránce velmi desítky malých částí, které jsou velmi podobné. Tyto komponenty lze shromáždit do vyčerpávajícího seznamu, který bude použit později.

Tato fáze má tři hlavní výhody:

  • Označuje jakékoliv nesrovnalosti v drátěných rámečcích. Přemýšlejte o tom jako o důkazu čtení rámců. Některé oblasti mohou být jiné, a to bez reálného důvodu. Předtím, než začneme vytvářet zbytečné komponenty nebo rozvržení, můžeme celou stránku spojit.
  • Pomáhá udržet veškerý front-end kód co nejslabší. Plánování toho, jak bude CSS strukturováno, se stalo pro velké projekty životně důležité. Chceme, aby byla webová stránka co možná nejrychlejší a strukturování CSS na začátku pomáhá.
  • Velké webové stránky budou zahrnovat více lidí kdykoli, a to jak v průběhu vývoje, tak iv budoucnosti. Vytváření udržovatelného kódu je důležité pro postup vpřed.

Klíčová cesta: plánování, jak přistupovat k vývoji projektu v přední části projektu, je důležité pro vytvoření udržitelné a štíhlé kódové základny.

Knihovny vzorů

Knihovny vzorů jsou sbírka společných prvků používaných na webových stránkách. Zaměřením vývoje front-end na komponenty budov, které nejsou závislé na stránkách, můžeme snížit režii kódu a zlepšit konzistenci.

S využitím seznamu komponent, který jsme během auditorské fáze shromáždili, jsme schopni strukturu našeho Sassu do spravovatelné sbírky souborů.

Konvence pojmenování jsou důležité

Knihovny vzorů jsme použili v několika projektech, ale vždy jsme se potýkali s konvencemi o pojmenování, zejména se strukturou složek: kde vkládáte své styly pro tento hudební přehrávač, komponenty nebo části?

Dříve jsme používali terminologii, jako jsou součásti a komponenty, pro uspořádání souborů Sass. Zatímco se zdá, že to jsou zcela legitimní konvence pojmenování, jsou otevřené interpretaci. Když na projektu pracuje více vývojářů, ponechání organizace otevřené kódové základny k interpretaci vede k neorganizovanému CSS.

BEM (Block, Element, Modifier) ​​nám poskytuje společnou konvenci, která následuje a vytváří porozumění mezi vývojáři front-end. Stará cesta byla ponechána jednotlivým vývojářům, aby přišli s názvy tříd, které byly příliš vysoké na to, aby získaly jakýkoli význam. Naštěstí jsme měli štěstí Brad Frost mluvit o jeho knihovně vzoru na Konference předem v Manchesteru. Pattern Lab přenáší terminologii z chemie a popisuje součásti, které tvoří knihovnu. Použití atomů, molekul a organismů k popisu rozdílů mezi komponentami na stránce pomáhá vysvětlit koncept vývojářům novým projektům.

Atomy - základy

V přírodě jsou atomy nejmenší denominací (pokud se ponoříme do kvarků a elektronů). Ve vývoji webových stránek jsou atomy nejdůležitějšími prvky HTML. Kvůli všem záměrům a účelům moc nečiní mnoho. Patří sem nadpisy, odstavce, vstupy, tlačítka, seznamy ... Získáte nápad.

Molekuly - škálovatelné vzory

Jedná se o další vrstvu nahoru. V chemii jsou molekuly tvořeny atomy a totéž platí pro strukturu CSS. Molekuly jsou komponenty na webových stránkách, které používají atomy k jejich tvorbě.

Dobrým příkladem molekuly je vyhledávací pole. Obsahuje 3 atomy: štítek, vstup a tlačítko. Vrstva molekuly začíná vytvářet některé prvky, které můžeme použít na webových stránkách. Je důležité, aby byly všechny tyto molekuly škálovatelné. Měli by být navrženy s myšlenkou, že mohou být použity kdekoli na místě. Naším konečným cílem je, aby CSS bylo co nejpružnější a co nejpoužívanější.

Organismy - sbírky vzorků

Jak název napovídá, organismy jsou seskupení molekul. Některé příklady z nich zahrnují záhlaví, zápatí nebo seznam produktů.

Pokud vezmeme příklad záhlaví, bude obsahovat logo, vyhledávání a navigaci. Všechny byly vytvořeny jako molekuly a jsou spojeny tak, aby vytvářely záhlaví organismu.

Šablony - lepidlo stránky

To je místo, kde končí analogie biochemie. Jak říká Brad, "dostat se do jazyka, který má větší smysl pro klienty a konečný výstup" . Šablony jsou lepidlem webové stránky. Ty spojují všechny vytvořené organismy do rozvržení, které lze použít na stránku na webu.

Příkladem může být výpis blogu. Tato šablona by obsahovala hlavičku, zápatí, seznam položek blogu a postranní panel. Šablony jsou obecně strukturální a obsahují pouze rozvržení.

Stránky - Manipulace s variantami

Poslední část jsou stránky. Zde můžete vyzkoušet šablony s reálnými daty. Stránky jsou specifické instance šablony. Tato část je důležitá, protože nám umožňuje vidět, jak úspěšné byly atomy, molekuly, organismy a šablony.

Je nevyhnutelné, že při vytváření webové stránky budou některé scénáře chybět. Klasickým příkladem jsou dlouhé tituly nebo stravování různých měn a jazyků.

Klíčová cesta: Konverze pojmenování jsou důležité. Vrstvení CSS vytváří čistou práci, od níž je co nejmenší.

Navrhování s ohledem na flexibilitu

Navrhování vzorů je těžké. Nelze navrhnout izolovaný vzor, ​​jako například novinku, a očekávejte, že se vejde do zbytku stránky. Způsob, jakým budeme vytvářet weby a způsob, jakým jsme je navrhli, se liší.

Vzory se pravděpodobně změní bez ohledu na to, zda se dostaneme k odhlašování ... Odhlášení se stalo nepodstatným krokem v procesu, jenž vyvíjí tlak na obě strany

Photoshop jsme použili k vytvoření modelů kabelových rámů s těmito stylizovanými součástmi. Jakmile jsme byli spokojeni s vzhledem a vzhledem designů, přesunuli jsme se k izolaci jednotlivých komponent. To nám umožnilo zajistit, aby každá součást byla dostatečně flexibilní, aby mohla pracovat kdekoli na webu.

Byli jsme velmi vědomi toho, že se nepřihlásíme na žádnou designovou práci. Design signoff vytváří bariéru, v níž se návrhář cítí pod tlakem, aby vytvořil něco, co bude započato do kamene. Vzory se pravděpodobně změní bez ohledu na to, zda se odhlásíme nebo ne. Obecně jsme rádi, že vyhoví všem změnám v jakémkoli bodě časové osy projektu. Odhlášení se stalo nepodstatným krokem procesu, jenž vyvíjel tlak na obě strany na úkor vztahu.

Přesuňte z aplikace Photoshop rychle kód

Vědět, kdy přesunout z aplikace Photoshop na kód, je důležité. Tento krok je mnohem dříve, než jsme byli zvyklí ze dvou důvodů:

  1. Vylepšení rozvržení ve Photoshopu je časově náročné a nakonec ztráta času. Doba zdokonalování webových stránek je lépe vynaložena na konci, na skutečný kód.
  2. Vytváří referenční bod pro to, jak by měla vypadat webová stránka. Realita je, že nikdy nebude vypadat shodně; ale jakmile klient vidí (a zdokonaluje) návrhy, vzniká očekávání.

Namísto trávení více času ve Photoshopu jsme se rozhodli investovat čas do kódu. Pokud bychom měli něco dokonalé, měl by to být kód, bit, který skutečně použijeme a uvidíme všichni uživatelé webových stránek. Společnost Photoshop pro nás byla nástrojem pro vytváření stylů, které by mohly být použity na webových stránkách.

Design je spíše o spolupráci mezi všemi týmy. Mockups byly stále velmi důležitou součástí procesu a pomohly klientovi vizualizovat, jak vypadá stránka. Kdybychom byli všichni spokojeni s obecným směrem návrhu, přesunuli jsme ho na kód. Málokdy jsme strávili čas chodit zpět a dopředu, čímž upravujeme dokumenty aplikace Photoshop.

Key takeaway: Photoshop je skvělý nástroj pro vytváření návrhových konceptů. Nejdůležitější je přesun na kód co nejdříve. Dokonalé to v kódu, ne Photoshop.

Itera pro lepší použitelnost

Krása tohoto pracovního postupu je, že existuje tolik míst, které lze prohlížet a vylepšovat.

Je důležité si uvědomit, že jde o volné kroky v našem projektovém procesu. Pokud během projektu budeme potřebovat něco nového, budeme jej obecně chápat jako samostatnou, modulární součást, která může být propuštěna na webovou stránku a přijata návrhová témata webu.

  • Na fázi tvorby drátu plánujeme projekt
  • Ve fázi auditu kontrolujeme a vylepšujeme drátové rámce
  • Ve fázi návrhu jsme vylepšili styl designu
  • Ve fázi kódování ji integrujeme dohromady

Každý z těchto kroků nabízí místo, kde můžeme dosud přezkoumat naši práci. Umožňuje také nový soubor očí, aby viděli věci z jiné perspektivy.

Během některé z těchto fází se může stát, že některé části nefungují dobře. To je v pořádku. Ve skutečnosti je to dobré. Chytit špatnou použitelnost brzy je klíčem k úspěšné webové stránce. Pokud se vrátíte zpět a vytvoříte si tyto části webových stránek, vytvoří to lepší projekt, když bude fungovat.

Klíčová cesta: Nebojte se vrátit se na začátek, pokud se něco potřebuje zlepšit. Chytání těchto časů bude lepší, když projekt bude fungovat.

Cíl

Strávili jsme dny spolupráce, abychom zajistili, že každá část webu bude dokončena na vysoký standard. Testovali jsme co nejvíce scénářů a zajistili jsme konzistentní zážitek z prohlížení.

Jakmile jsou data na webové stránce, můžeme web úplně otestovat. Je často příliš snadné nastavit projekt naživo bez úplného testování. Můžeme zkontrolovat rychlost, snadnou navigaci a především nákupní tok.

Všichni se zmiňují o Apple za perfekcionisty, ale jsem si jistý, že jejich první pokusy nebyly dokonalé. Trvá to čas a odhodlání, aby se tyto konečné vylepšení dostaly k nám, které máme dnes. Pomocí naší laboratoře zařízení, která zahrnuje většinu populárních zařízení a platforem, jsme byli schopni zajistit, aby zkušenosti byly optimalizovány na co nejvíce nejnovějších platforem a velikostech obrazovky.

Retrospektivní

Výuka z každého projektu je důležitá, abychom mohli neustále zlepšovat procesy, které vedou k lepším internetovým stránkám.

Tento projekt zaznamenal vznik naší vlastní interní knihovny, která podporuje konzistenci projektů. Když pracujeme v agentuře, můžeme mít současně desítky projektů, které se právě vyvíjejí. Schopnost pro každého pracovat na jakémkoli projektu je důležitá.

Vytvoření základny, na které můžeme pracovat, přispěje k dosažení tohoto cíle.

Výkonnost webové stránky byla posouzena pouze ke konci projektu. Úspěšná reaktivní webová stránka musí být štíhlá a rychlá. Obrovská škála zařízení a jejich schopnosti se značně liší od zbrusu nových počítačů Mac až po staré smartphony. Při budování webové stránky bohaté na média může být velmi obtížné řídit výkon, a to zejména při retrospektivním zlepšování.

Na konferenci Upfront v Manchesteru jsme viděli Ano, Perez Cruz mluvit o posouzení výkonu v každé fázi projektu, včetně návrhu. V tomto pohledu je to něco, co bychom měli realizovat. Jako tým několika designérů, vývojářů a vývojářů front-end by měla být větší prioritou řízení celkové velikosti a výkonu (zejména vnímání výkonu).

Vše na stránce má cenu za výkon. Upřednostnění toho, co je důležité, zajišťuje, že web je nejen rychlý, ale dostupný i pro více zařízení. U některých starších zařízení jsme zjistili, že webové stránky havarovalo nejen prohlížeč, ale celé zařízení. Pokusit se o urychlení webu zpětně znamenalo, že jsme nemohli vytvořit webové stránky tak rychle, jak to mohlo být.

Příště budeme mít jistotu, že výkon bude zakomponován do každé fáze procesu, takže to není nápad.

Doporučený obrázek, obrázek kódu přes Shutterstock