Pamatujete na dobré staré dny? Víte, za které dny mluvím; dny ne tak dávno, když jsme používali k návrhu webových stránek na pevnou šířku. Při pohledu zpátky se zdá, že je to jednodušší čas; šťastnější čas; čas, kdy jsem mohl recitovat každé písmo, které bylo k dispozici pro použití online bez dalšího myšlení. Pravdou je, že Responsive Web Design změnil všechno. Svět byl plochý a teď je to kolo, byl jsem slepý a teď vidím, že web byl pixelů a teď je to procento.
Se zavedením RWD je životně důležité, abychom jako vývojáři vyvíjeli náš pracovní postup tak, aby lépe vyhovoval požadavkům nového webu. Mnoho z nás vyjádřilo naše frustrace, jak je přístup Photoshopu s pevným pixelem nevhodný pro návrh rozložení tekutin potřebných pro citlivé webové stránky, ale nebyly nabízeny žádné užitečné alternativy. Web design světa je zoufalý pro software na míru, který je postavený od základů s RWD v mysli. Produkty jako Adobe Reflow jsou skvělý začátek, protože ukazuje, že Adobe přinejmenším pracuje na řešení, ale poté, co s víkendem strávil několik hodin, vidím, že má ještě dlouhou cestu, než se stane užitečné doplnění mého pracovního postupu. S námi, že jsme v záloze mezi prehistorickým softwarem a příslibem toho, co přijde zítra, musíme vytvořit alternativní pracovní postupy, které by vyhovovaly nedostatkům našeho současného "designového softwaru", a to zavedením dalších nástrojů a postupů, které pomohou překlenout mezeru mezi pevnou pixelovou a tekutou odezvou.
Níže není v žádném případě seznam toho, jak by měly být projekty RWD osloveny, ale spíše, jak jsem svůj pracovní postup přizpůsobil novému prostředí.
Stál jsem na hranici rozdělení Photoshop / Fireworks / Illustrator, protože každý bojoval za nadřazenost a byl svědkem nevinných lidí, kteří byli zachyceni v crossfire pixelů. Návrháři mají tendenci mít své oblíbené a raději by zemřeli pomalou bolestivou smrtí, než přiznat, že jiný software má funkci, kterou by mohli skutečně chtít. Můj názor je, že byste měli navrhnout v jakémkoli softwaru, který vám umožní pracovat na nejúčinnějším a rychle prozkoumat své nápady, ať už je to Photoshop, Powerpoint nebo Paint.
Je to téměř bezvýznamné, které si vyberete, protože by mělo být výchozím bodem pro rychlé experimentování s různými rozloženími. Osobně dávám přednost ohňostrojům, protože klíště více boxů toho, co chci v softwaru. Snažím se, aby se v této fázi nevěnovali podrobnosti a skutečně se pokoušeli udělat jen předběžná rozhodnutí o uspořádání a struktuře podobně jako některé drsné dráty.
Všechno, co je třeba říci o použití Lorem Ipsum v podobě makety ups bylo řečeno, prosím, jen mi věřte, že na tohle a tam, kde je to možné, použijte skutečný obsah, z něhož můžete navrhnout. Pokud to není možné, použijte obsah posledních let, napište svůj vlastní obsah nebo použijte slova "Svíčka ve větru", ale nepoužívejte Lorem ipsum. Pokud nepoužíváte skutečný obsah, bude obtížné vidět, na kterých bodech přerušení je třeba některé prvky upravit.
Jedná se pouze o šířku, o kterou se mi líbí začátek, protože je blízko k malému desktopovému zážitku, který lze snadno zvětšit pro větší obrazovky a pro tablety / mobilní zážitky. Někteří lidé dávají přednost širšímu, zatímco jiní dávají přednost designu mobilních zařízení - nejdřív to jde jen na to, co pro vás funguje.
RWD je vše o kontejnerech pro tekutiny, které rostou a zmenšují, aby vyplnily dostupnou plochu prohlížeče, takže navrhování v procentních poměrech než pixelů zajistí, že vaše návrhy proudí v poměru k prohlížeči a vyžadují méně bodů zlomu než ekvivalentní návrh na základě pixelů.
Mám tendenci mít In-Design otevřené v pozadí, takže mohu snadno a rychle zjistit procentuální velikost prvku založeného na pixelech. Aplikace InDesign je skvělá při manipulaci s tímto typem výpočtů a snadno zjistíte, jakou velikost bude mít prvek 428px x 333px na 46% své původní šířky, a zároveň zachovat své proporce nebo možná zjistit 27% šířky prohlížeče 889px během několika sekund. Výsledky se stále zobrazují v pixelech, takže se můžete vrátit zpět do softwaru, který vytváříte, a vytvářet takový kontejner v pixelech, protože vědí, že bude relativní k procentu definovaného pracovního prostoru.
Pokud si myslíte, že se budu bavit o tom, že ve svých tvarech používáte skutečný obsah, měli byste mě slyšet navrhování typografických stylů ve Photoshopu (nebo ekvivalent). Typografie bude v prohlížeči vypadat velmi odlišně, než to vypadá v obvyklých formátech Adobe, což bude znamenat více práce pro vás, když vylepšujete design, jakmile je vybudován.
Ušetřete si bolest hlavy a použijte aplikace jako typecast.com experimentovat a vytvářet styly písma. Jakmile jste spokojeni s rozvržením a stylem své typografie, můžete exportovat celý pracovní prostor jako průhledný PNG, který můžete umístit do návrhových maket. Nebudete muset mít ve vašem systému nainstalováno žádné vybrané písmo, protože to bude jen obrázek, ale nebudete jej moci upravovat aniž byste se vrátili do formátu.
Nyní byste měli mít svůj design v šířce 1000 pixelů (nebo jakoukoli šířku, kterou jste vybrali na začátku) doplněnou o šířky kontejnerů, které obsahují váš různý obsah přeložený do procent. Teď bych začal vytvářet mřížku na míru, která napodobuje šířku kontejneru, kterou používám v rámci svého designu. Takže pokud mám boční panel, který je 30% široký a plocha obsahu, která je 55% mého prohlížeče s 5% polstrováním na obě strany, můj mřížka může vypadat asi jako 5%, 30%, 5%, 55%, 5%.
Můžete použít aplikace jako Gridset abyste si vytvořili svoji síť na míru, ale znovu, dávám přednost použití aplikace InDesign, protože můžete seskupovat prvky a měnit je navzájem úměrně.
Nyní mám svou mřížku, kterou jsem vytvořil pomocí aplikace InDesign a vložil ji do šířky 1600 pixelů (nebo maximální šířky, kterou chcete, aby vaše stránky byly) dokument. Pak začnu měnit velikost mřížky širší a užší o přírůstky 100 pixelů až do šířky 300 pixelů. Při každém kroku zkontroluji šířku každého kontejneru obsahu a ujistěte se, že je stále dostatečně velký, aby mohl obsahovat jeho obsah. Když se dostanu na šířku, která podle mého názoru činí obal příliš malý, jednoduše upravím mřížku, aby se vešla. Takže pokud je šířka 800 pixelů, postranní panel, který jsem vytvořil na 30% šířky prohlížeče, je příliš úzká, mohu do něj přidávat dalších 10%, takže je nyní 40% šířky prohlížeče a je dostatečně široký, aby mohl obsahovat zamýšlený obsah .
Klíčovou věcí, kterou si pamatujete, je, že pokud uděláte širší kontejner, musíte vytvořit další kontejner užší o stejnou částku, aby byla zachována 100% celá šířka. To je nejlepší způsob, jakým jsem zjistil, že definuje body zlomu (bod, ve kterém se vaše rozložení změní), když přidáte pouze jinou zarážku, když se obsah rozpadne, a nikoliv na šířku nového zařízení. Tento postup může být časově náročný, když skončíte se 14 různými náhledy vaší mřížky, jak rostou od šířky 300 až 1600 pixelů, ale je to nejlepší způsob, jakým jsem zjistil, že zjistím, jak bude váš návrh vypadat na různých šířkách obrazovky, než bude v rozvoj.
Další možností je použít nástroj, jako je Adobe Reflow který také umožňuje přidat obsah do kontejnerů a poté přetáhnout pracovní plochu a zobrazit měřítko prvků. Můžete také určit body zlomu tak, že změníte velikost pracovního prostoru, dokud se obsah neodstraní a jednoduše přidá dotaz na média. Reflow je stále ve veřejném Beta a lze jej stáhnout tady .
Po změření vašich návrhů na přírůstky o 100 pixelů byste určili několik šířek, při kterých se obsah zlomil a opravil přidáním zlomu. Nyní se můžete vrátit zpět do softwaru, který vytvořili původní návrhy, a změnit rozvržení vašeho návrhu na šířky, které jste označili jako body zlomu. To znamená, že nakonec navrhujete pouze 2, 3 nebo 4 různé rozvržení (v závislosti na složitosti vaší sítě a kolik zlomů potřebujete), které budou pokrývat celou cestu od 300px do 1600px.
Pokud jste tento postup sledovali, měli byste nyní mít soubor rozvržení, které odpovídají vašim bodům zlomu, dokument, který ukazuje, jak je vaše mřížka tvořena procenty šířky prohlížeče a jak se sbaluje pro menší obrazovky, stejně jako pro všechny vaše typografické styly vytvořené a testované v prohlížeči. To by mělo být velmi silné místo pro vývojáře, aby pak začal budovat vaše návrhy přesně a bez nutnosti vypořádat se s obsahem lámání v určitých šířkách později.
Tento proces se může zdát velmi dlouhý, ale bez specifického nástroje postaveného výhradně pro RWD, je to nejlepší způsob, jakým jsem zjistil, že můžu snadno testovat mé odpovědi pomocí nereagujícího softwaru a jasně sděluje své nápady vývojáři. To není v žádném případě jediný způsob, jak přistupovat k projektu RWD, ale je to nejlepší, co jsem našel.
Co změnilo váš pracovní postup? Jaké tipy byste sdíleli? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, průtokový obraz přes Shutterstock.