Obsah
- Výhody navrhování pomocí kódu
- Nejprve data
- Mobilní dobrota zdarma
- Hledání společného jazyka
- Učte se rychleji
- Rychlá iterace
- Rychlejší spuštění
- Proč HTML5?
- Magický atribut dat
- CSS3 - je to nový Photoshop
- Sass + Compass: magicky vynikající
- jQuery: ach, ano, můžete
- Rámce
- Závěrečné myšlenky
Tento článek se poprvé objevil v čísle 235 časopisu .net - světově nejprodávanějšího časopisu pro webové designéry a vývojáře.
Nikdy jsem nebyl velkým fanouškem toho, abych dělal víc práce, než bylo potřeba. Mám sklon hodnotit metody a nástroje na základě jejich schopnosti zefektivnit mě nebo můj tým. Jak rychle nás dostanou k fungujícímu produktu? Jak efektivní jsou při komunikaci? Zůstávají nám v cestě?
V průběhu let jsem upravil svůj návrhový proces a nástroje. Představuji si, že v tom budu pokračovat. To je podstata navrhování pro technologii a web. Toto odvětví se neustále vyvíjí; musí se vyvíjet také náš proces a nástroje.
HTML5 a CSS3 usnadňují přechod větší části návrhového procesu proti proudu - od Photoshopu a více směrem k živému, dýchajícímu designu. Nástroje jako Foundation, Bootstrap a jQuery zpřístupňují přesun větší části vašeho návrhového procesu do kódu.
Výhody navrhování pomocí kódu
Za prvé, neobhajuji upuštění od Photoshopu ani od žádného jiného editoru vizuálního designu z vašeho pracovního postupu. Místo toho se zaměřím na výhody přesunu tohoto designu do kódu dříve než později.
Nejprve data
Věc, která se mi na designu s HTML vždy líbila, je to, že podporuje myšlení z pohledu první na data. Naproti tomu pomocí kreslicích programů, jako je Illustrator, OmniGraffle nebo Balsamiq, začnete s rámečkem a naplníte jej daty.
V HTML vytvoříte DOM (dokumentový model dokumentu), něco jako vytvoření obsahu. Jedná se o návrat ke skutečnému designu informací se smysluplnými hierarchiemi. HTML5 jde o krok dále s přidáním nových sémantických prvků: článek, sekce, záhlaví, stranou, zápatí a tak dále. Tento přístup založený na datech se dobře mísí s responzivním designem na prvním místě.
Mobilní dobrota zdarma
Pokud to čtete, pravděpodobně navrhujete pro mobilní zařízení. Je pravděpodobné, že budete muset navrhnout formulář nebo dva. S HTML5 máte štěstí. Před HTML5 byly vaše typy vstupu do značné míry buď textové nebo heslo. HTML5 představil řadu dalších typů vstupu, včetně:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-time">
Co je na těchto dodatečných, jedinečných typech vstupu opravdu úžasné, je to, že je mobilní prohlížeče na iOS a Android rozpoznávají a automaticky vyměňují kontextově orientovanou klávesnici - bez nutnosti použití speciálních zásuvných modulů jQuery nebo hacků. A pokud váš prohlížeč neví, co input type = "email"> je, pak je pouze výchozí pro zadávání textu.
Hledání společného jazyka
„Je úžasné, jak mohou naši návrháři a vývojáři pracovat ve stejném jazyce“ - John Drago, vývojář aplikací ve společnosti Inflection.
Zjistěte, zda to zní povědomě. Jsem v konferenční místnosti s půl tuctem vývojářů aplikací na straně serveru, kteří dokážou kódovat kruhy kolem mě v Ruby, Pythonu, Javě nebo .NET. Jsem jediný designér. Několik mých návrhů bylo původně zamítnuto jako příliš komplikované na implementaci. Přistoupím k tabuli a začnu na tabuli psát nějaké HTML a CSS, jak by bylo možné design implementovat. Náhle se tón konverzace změní a jeden z vývojářů neochotně říká: „No, jo - pokud to uděláme tímto způsobem, mohlo by to fungovat.“
Přesunutí více mých návrhových procesů do kódu vylepšilo konverzace s vývojáři. Je tu další vrstva respektu získaná vědomím, jak vytvořit své návrhy v kódu. K dosažení tohoto respektu nemusíte být odborníkem. Zatímco moje dovednosti v HTML a CSS jsou pevné, moje dovednosti v JavaScriptu jsou přinejlepším průměrné. A nestydím se to přiznat. Při práci s frontendem nebo vývojáři na straně serveru je skutečnost, že můžeme mluvit společným jazykem nebo se setkat na půli cesty, obrovskou výhodou.
Učte se rychleji
Zatímco drátové rámy a vizuální kompozity mohou při plánování pomoci, tyto statické artefakty jsou teoretické. Kolikrát jste se pokusili vysvětlit interakci někomu, jen aby odpověděl: „Myslím, že to budu muset vidět.“ Čím dříve se dostanete k prototypu, s čím mohou lidé komunikovat, tím dříve si můžete vyzkoušet design a zjistit, zda nápady fungují.
Rychlá iterace
Kdy naposledy se konečný design, který byl dodán do výroby, přesně shodoval s vaším Photoshop compem? Skoro nikdy. S designem digitálního produktu dochází ke změnám neustále. Navíc změny, jako je zvětšení velikosti nadpisů z 22 na 24 bodů na několika desítkách obrazovek, mohou ve Photoshopu trvat hodiny. Inteligentní objekty vám ve Photoshopu poskytnou určitou úroveň objektově orientovaného designu. Bohužel většina vizuálních návrhářů, které znám, dostatečně nevyužívá inteligentní objekty. S CSS, protože podporuje systematičtější přístup k designu, typografické změny trvají minuty místo hodin.
A co změna lineárních přechodů na všech vašich tlačítkách? Nebo velikost hranice? Co takhle změnit ze čtvercových rohů na 2px zaoblené? Ve Photoshopu to může trvat hodiny a stále to musíte kódovat. Schopnost navrhovat v kódu pomáhá vyhnout se zpáteční cestě zpět do Photoshopu pro iteraci vizuálního designu. Když tyto změny přesunete proti proudu do kódu, pomocí CSS3 a Sass (kterým se budu věnovat dále v tomto článku) se mohou stát v reálném čase a zabere vám to jen pár minut.
Rychlejší spuštění
V průběhu let, když jsem převáděl více svého pracovního postupu návrhu do proudu, jsem zaznamenal skutečné zlepšení - asi 20 až 30 procentní snížení času na uvedení na trh. Čím víc toho dělám, tím méně času trávím zdvojováním úsilí. Trávím méně cyklů používáním Photoshopu nebo Fireworks a opakováním práce v kódu.
V určitém okamžiku musí design spolupracovat s nějakým typem backendu, ať už je to CMS, aplikace Rails nebo něco jiného. Protože většina mých návrhářských prací je v kódu, integrace proběhne dříve než později. Před pár lety přešel jeden z mých klientů, PointRoll, z prototypu do výroby za pět dní.
Proč HTML5?
HTML5 je jednodušší než předchozí verze HTML. Vezměte například deklaraci typu dokumentu. V předchozích verzích HTML se DOCTYPE vypadal asi takto:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
A bylo jich tam šest různých verzí. Naštěstí HTML5 DOCTYPE vypadá takto:
! DOCTYPE HTML>
Vážně. A je to. Šokující jednoduché.
Při vytváření standardní stránky HTML existuje řada společných prvků, například záhlaví, hlavní oblast obsahu, postranní panel a zápatí. Jsem si jist, že jste už něco takového viděli:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" zápatí "> / div>
Nic neobvyklého. Jakmile je však tato šablona vyplněna obsahem, změní se na polévku div. Naproti tomu s novými sémantickými prvky HTML5 získáte něco mnohem jednoduššího a snadněji skenovatelného, například:
záhlaví> nav> / nav> / záhlaví> článek> stranou> / stranou> / článek> zápatí> / zápatí>
Podívejte se na to. Něco, co dává smysl.
Magický atribut dat
HTML5 přichází s dalším úžasným háčkem, který vám dává schopnost vytvořit si svůj vlastní sémantický význam: data-. Dříve, pokud jste chtěli prvku DOM přiřadit něco smysluplného, omezili jste se pouze na ID, třídy a role.
ID musí být bohužel jedinečná. Třídy jsou univerzální (yippee!), Ale jejich používání se může rychle proměnit v nepořádek. Role jsou nevyužitým aktivem, které pro ARIA poskytuje významný význam. Nedávno používám data - pro analytickou platformu pro sledování událostí, kterou vyvíjíme v Inflection.Jsme velcí fanoušci testování našich návrhů. Při práci na aplikacích nebo stránkách, které mají velkou míru interaktivity, bychom chtěli mít podrobnější přehled o zapojení zákazníků na stránce.
Zadejte data-. S ním můžete přiřadit, předat a připojit se k „definovat svůj vlastní“ model významu. Můžete například udělat toto:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> typ vstupu = "tlačítko" data-id = "twitter" dataregion = "main" data-event = "registr "> typ vstupu =" tlačítko "data-id =" linkedin "dataregion =" main "data-event =" zaregistrovat ">
Můžeme na stránku připojit posluchače s JavaScriptem a kdykoli zákazník najede kurzorem nebo klikne na toto tlačítko, můžeme tuto aktivitu sledovat. Místo toho, abychom mohli sledovat pouze to, že někdo zaregistroval prostřednictvím OAuth na Twitteru, vidíme, že se vznášel nad Facebookem, pak Twitterem, pak LinkedInem a nakonec se rozhodl zvolit pro svůj model OAuth Twitter.
Představte si, že byste to mohli rozšířit na web, jako je Pinterest, nebo na nový design Myspace, kde zákazníci přetahují dlaždice a mění jejich pořadí na základě zájmu. Nebo možná skryjí dlaždice, které je nezajímají data- Atribut umožňuje připojit nebo přiřadit další vrstvu sémantického významu věcem, které můžete definovat. Pro weby a aplikace, které do značné míry spoléhají na Ajax, to otevírá neomezené příležitosti.
CSS3 - je to nový Photoshop
CSS3 přinesl zcela novou úroveň designu vzhledu, který vyžadoval obrázky na pozadí, řezy a nechvalně známou techniku „posuvných dveří“. Naštěstí je to všechno minulost.
Pojďme se podívat na to, jak vytvořit efektní tlačítko s lineárním přechodem, zaoblenými rohy, stínem textu, který mu dává pěkný efekt stisknutí písmene, a záře při najetí myší. Naučit se tyto techniky bude dlouhá cesta. Každý z nich lze použít samostatně nebo v různých kombinacích k vytažení téměř jakéhokoli současného vizuálního trendu, který dnes trenduje web.
Nejprve provedeme několik úprav výchozího nastavení tlačítko> a vstupní typ = "odeslat"> elementy. Za předpokladu, že použijete jedno ze standardních resetů CSS, přidáme jen malou velikost a dýchací místnost.
/ * Tlačítka tlačítka, jejichž tlačítka mají. ======================================== * * / tlačítko, vstup [type = "submit"] {výška: 2.7em; výplň: .4em .7em; výška čáry: 1,9; }
Profesionální tip: Tlačítka a vstupy, které jsou zadáním, mohou být obtížné změnit. Zjistil jsem, že úpravou výšky čáry na 1,6 nebo větší se můžete vyhnout hacku, že budete potřebovat další div nebo rozpětí uvnitř tlačítko> štítek.
Nyní jsme náš problém s tlačítky „opravili“, můžeme vytvořit .btn třída, která nám dá pěkné čisté tlačítko se zaoblenými rohy, lineárním přechodem, obrysem a tímto knihtiskovým vzhledem.
.btn {display: inline-block; ohraničení: 1px pevný # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; poloměr ohraničení: 4px; výplň: .4em .7em; pozadí: # edeff2; pozadí: -webkit-gradient (lineární, 0% 0%, 0% 100%, od (#fefefe), color-stop (0,55, # edeff2), do (# e4e6e9)); pozadí: -moz-linear-gradient (uprostřed nahoře, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160,172,187, .7) 0 0 .2em 0; stín boxu: rgba (160 172 187, .7) 0 0 .2em 0; barva: # 6c7786; velikost písma: 1.1em; textový stín: #fefefe 1px 0 1px; výška řádku: 1,375em; kurzor: ukazatel; }
A pak pěkný efekt vznášení se s jemnou záři pomocí stín stínu metoda:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; box-shadow: # 129ceb 0 0 2px; pozadí: # e6e9eb; pozadí: -webkit-gradient (lineární, 0% 0%, 0% 100%, od (# f7f7f7), color-stop (0,55, # f6f6f7), do (# e6e9eb)); pozadí: -moz-lineargradient (uprostřed nahoře, # f7f7f7, # f6f6f7 55%, # e6e9eb); barva: # 45484b; textový stín: rgb (255 255 255) 1px 1px 0; border-color: # c9c9c0; }
Nyní nejsem velkým fanouškem psaní kódu lineárního přechodu. Je to dlouhé a matoucí. Jak vidíte, zahrnul jsem pouze verzi pro -moz, -webkita standardní model. Pokud chcete zahrnout verze -o a -ms, budete muset zdvojnásobit kód.
Existují dvě další možnosti. Jedním z nich je generátor CSS3; na webu je k dispozici několik, včetně ColorZilla. Pokud si ale chcete trochu zintenzivnit hru, zvažte potápění se Sassem: v kombinaci s Compassem je to dar z nebes.
Sass + Compass: magicky vynikající
Můžete přestat doufat v edici CSS4 Unicorn. Je to tady a jmenuje se Sass + Compass. Sass znamená Syntactically Awesome Styles Sheets: zdědíte všechny tradiční výhody CSS3 s přidanými radosti proměnných, mixinů, prodlužovačů a dalších dobrot.
Nedávno jsem refaktoroval soubor CSS s 5 000 řádky, který měl více než 30 variací ve stejném odstínu modré. S Sassem jsem nahradil každou variantu tímto kódem:
barva: $ modrá;
Definováním $ modrá v mém _variables.scss soubor, mohu vytvořit výchozí barvu, na kterou může odkazovat každý soubor CSS nebo SCSS. Kdokoli, kdo píše CSS, může použít $ modrá a nemusíte se starat o použití kapátka, nalezení hexadecimálního kódu nebo barvy RGB, RGBA nebo HSL.
Pamatujete si ten lineární gradientní kód? Místo psaní několika řádků kódu, co takhle:
@include background (linear-gradient (# b1cfdc, # 7a9cac));
Nechte Sass a Compass provést těžkou práci a vygenerovat správnou syntaxi pro vás: hotovo. Řekněme, že chcete tmavší nebo světlejší verzi barvy. Ve Photoshopu můžete kapátkem pohybovat nebo jednoduše použít příkazy lighten / darken v Sass:
@include background (linear-gradient (darken ($ litegray, 2%), darken ($ off-white, 5%)));
Tím se vytvoří lineární gradient s 2% ztmavnutí $ lite-šedá a 5% ztmaveno špinavě bílá. Voil! Nepotřebujete ani kódy HEX nebo RGB.
jQuery: ach, ano, můžete
Musím se přiznat. JavaScript mě zastrašoval. Pak jsem našel jQuery. Nebudu tvrdit, že jsem guru JavaScriptu, ale jsem si docela jistý, že dokáži využít jakýkoli druh přechodu nebo funkce, kterou potřebuji k používání jQuery.
Vezměme si například možnost zobrazit na obrazovce vstup sekundárního telefonního čísla kliknutím na odkaz Přidat nové číslo. Pomocí jQuery jednoduše napíšete toto:
// - Progresivní odhalení - // $ („. New-number“). Click (function () {$ („. Alt-number“). FadeIn („fast“);});
Hledáte něco pokročilejšího? Pravděpodobně k tomu existuje modul plug-in. Základní chování je snadné a složité jsou přístupné pomocí jQuery.
Rámce
Dva z nejrobustnějších rámců současnosti jsou Foundation a Bootstrap. Nyní, než zavřete rámce CSS, dovolte mi, abych se vás na něco zeptal. Používáte jQuery? Ruby on Rails? Django? Všechny rámce.
Stejně jako jQuery a RoR se Foundation a Bootstrap zrodily z poznání, že existuje spousta věcí, které děláme znovu a znovu (jako jsou resety, typografie, mřížky, formuláře, tlačítka, navigace a seznamy). Foundation a Bootstrap nabízejí podporu pro responzivní návrhy pomocí tříd pomocníků. Oba jsou dobře zdokumentovány a byly testovány na silnicích, takže je můžete používat s jistotou.
Jeden klíčový rozdíl mezi nimi: Bootstrap je založen na systému LESS pro předzpracování CSS, zatímco Foundation je založen na Sass. Dávám přednost Sass před LESS kvůli jeho dalším schopnostem, ale Sass i LESS squashují tradiční CSS na kusy.
Poslední myšlenka na rámce. Pro ty, kteří nechtějí zdědit nadouvání rámce někoho jiného, zvažte výběr existujícího a svléknutí do holých kostí, nebo výběr třešní z několika, abyste si hodili vlastní. Ať tak či onak, není opravdu žádný důvod začít pokaždé od nuly.
Závěrečné myšlenky
Chcete větší kontrolu nad tím, jak váš návrh nakonec dopadne? Přesuňte více procesů proti proudu do kódu. HTML5 konečně přináší DOM nějaký smysl. Dobré zbavení se nesmyslů DOCTYPEsa divitida. CSS3 je nový Photoshop: lineární přechody, borderradius a FTW stínových rámečků! A s nástroji, jako jsou Bootstrap, Foundation, Sass a jQuery, nebylo nikdy jednodušší přesunout design před kódem.
Objevte 55 úžasných příkladů HTML5 na Creative Bloq.
