CSS sprity
2013
CSS sprity jsou s námi, tak jako ikonové fonty, pěkně dlouhou dobu. Zhruba od roku 2006. Sprity byly v prvopočátku svého vzniku používány především ve hrách, kde se do jednoho souboru vložily obrázky všech objektů ve hře a tím se šetřil výkon procesoru.
Ve chvíli, kdy se webové stránky staly náročnými na objem dat přenášených v síti, jsme si začali uvědomovat, že je lepší vytvořit jeden větší soubor než desítky menších. Ulehčí to stahování dat, kdy rázem nemusíte vytvořit desítky requestů pro jednotlivé soubory, ale v kuse stahujete jeden soubor.
Ve větším měřítku ušetříte na velikosti souboru. Stačí vyexportovat jeden obrázek a při manipulaci se soubory máte stále jeden název a jednu cestu k souboru. Problém může pro někoho nastat, pokud bude velmi často měnit obrázky, ale to se liší projekt od projektu. Pokud navrhujete sprite dopředu a víte, že se bude často měnit, není problém si obrázek rozdělit na sekce. Např. prvních 300 px na výšku můžete vyhradit pro ikony, další 300 px pro tlačítka atp.
Aplikace je poměrně jednoduchá. Provádí se stejně jako u klasických pozadí s tím rozdílem, že je třeba definovat background-position a vybrat hodnoty podle pozice vašeho obrázku ve spritu.
#logo {
height: 51px;
width: 101px;
background: url("img/sprite.png") no-repeat;
background-position: 0 -166px;
}Obrázek se nalézá 166 px od horního okraje a 0 px od levého. Pokud bychom chtěli objekt napravo od loga, stačí malá úprava:
background-position: -101px -166px;Výběr zůstane na jednom řádku, ale posune se doprava (o šířku loga). Pokud máte několik objektů stejně velkých a dobře zařazených do mřížky, následné kódování se značně urychlí. Na jednom řádku můžete mít několik stavů tlačítek nebo obrázků, kdy při levém okraji máte základní obrázek a napravo od něj hover a active.
Jak na ikonové fonty
2013
Malá, ale příjemná evoluce webdesignu - tak by se daly nazvat ikonové fonty. Ikony jsou nosným prvkem, a to především v komplexních systémech a větších stránkách. Řádně je exportovat, vytvořit z nich sprite a následně je používat dá však bohužel dost práce. Naštěstí je tu řešení v podobě ikonových fontů. Ty odstraňují všechny nedostatky a celé pojetí ikon a symbolů extrémně zjednodušují – samozřejmě za předpokladu, že je knihovna ikonových fontů dobře optimalizovaná. Pak vám neskutečně urychlí práci na větších projektech. Ačkoli fonty s podporou ikon existovaly už v prvních verzích HTML a CSS, teprve teď si vydobyly zaslouženou pozornost. Pojďme se na ně podívat podrobněji.
Jedna z největších výhod tkví v neomezeném zvětšování a zmenšování. Také se nemusíte omezovat co do barevnosti. Ta byla dříve určena tím, co jste si exportovali. Při použití ikonových fontů můžete font libovolně obarvit a měnit jej stejně jako text. Úplně bezproblémové to však není. Jeden zádrhel může nastat, pokud font příliš zmenšíte. Na to však většinou autoři fontů pamatují a doporučí vám nejmenší rozumnou velikost.
Nasazení fontů se provádí přes @Font-face stejně jako u klasických písem.
@font-face {
font-family: 'Entypo';
src: url('/fonts/Entypo/entypo.eot');
src: url('/fonts/Entypo/entypo.eot?iefix') format('eot'),
url('/fonts/Entypo/entypo.woff') format('woff'),
url('/fonts/Entypo/entypo.ttf') format('truetype'),
url('/fonts/Entypo/entypo.svg#entypo') format('svg');
font-weight: normal;
font-style: normal;
}Změna nastává až při aplikaci, přičemž některé fonty si ikony namapují na abecedu. Pokud tedy chcete vygenerovat ikonku planety(globe), provedete to následovně:
<span class="icon">G</span>Třída .icon má jako rodinu písma nastavený váš ikonový font, zbytek za vás udělá prohlížeč. Problém může nastat, když se špatně nahrají fonty nebo když funkce @Font-face nepodporuje prohlížeč. V takovém případě bude stránka plná nesrozumitelných znaků.
Řešením tohoto nešvaru jsou Ligatury. Ve zkratce se jedná o dvojici znaků, které se "svážou" dohromady. Typickým příkladem je skupina znaků fi. Jak vám to ale pomůže eliminovat nesmyslné znaky, pokud nebude font podporovaný?
<h1 class="logo">
<a href="#">Meebio</a>
</h1>Pro danou skupinu znaku "Meebio" si namapujete symbol s logem. Pro tyto účely existuje skvělá aplikace Icomoon.io. Je to rychlé, efektivní a v kódu to vypadá skvěle. Ligatury bohužel podporuje až IE9 a jeho další verze. Pro zastaralé prohlížeče budete bohužel stále muset používat hacky. Klasické ikonové fonty bez namapovaných ligatur mají naštěstí širokou podporu v prohlížečích.
Mezi nejpropracovanější fonty patří Font-Awesome, který bez debat dostává svému jménu - úžasný opravdu je. Jeho knihovna čítá 249 do detailu vypracovaných kousků, je zdarma, dobře udržovaná a do budoucna můžeme očekávat přírůstek dalších symbolů. Fonty jsou velmi dobře optimalizované, nezaberou moc místa a můžete je používat téměř v každém prohlížeči - i v IE7+. Aplikaci knihovny a seznam všech ikon naleznete zde.
Další fonty najdete třeba na stránce weloveiconfonts.com, vhod vám může přijít také generátor fontello.com. Existuje také společnost tvořící ikony čistě za použití ligatur - symbolset.com.
Responsive ano nebo ne?
2013
Na blogu naší sesterské společnosti vyšel hodně zajímavý článek a my si to nenecháme jen pro sebe. Dočtete se v něm o odvrácené straně responzivního layoutu a také kdy je vhodnější sáhnout při vývoji spíše po mobilní verzi webu.
Responzivní webdesign je sice v mnoha případech dobrým řešením, ne však ve všech, přestože tento dojem z prezentací občas vzniká. Je to především z toho důvodu, že autoři se zaměřují primárně na výčet hlavních výhod, ale zapomínají na nevýhody a srovnání s možnými alternativami.
Úvod do grid systémů
2011
Při navrhování webů existuje několik věcí, kterých se designér snaží dosáhnout. Pokud se soustředíme čistě na design, jedná se především o přehlednost a čitelnost. Návštěvník se musí rychle zorientovat a najít, co hledá. Grid systémy jsou pro to skvělou pomůckou. V mém posledním článku jsem toto téma zmínil, ale myslím, že si zaslouží více pozornosti, proto mu věnuji samostatný článek.
Grid systémy můžete vnímat jako jakési vodítko při navrhování. Jedná se v zásadě o hrubou strukturu, podle které jsou do návrhu umisťovány a pozicovány jednotlivé prvky. Dávají návrhu řád a pomáhají docílit již zmíněné přehlednosti a čitelnosti, ať už díky tomu, že se díky nim snáze udržuje rovnoměrný spacing mezi prvky, anebo díky přesnějším a “hezčím” rozměrům, kterých se s grid systémem lépe dosahuje.
Pokud si jako příklad vezmeme 960 grid systém, tak zjistíme, že se skládá z 12 sloupců (ale samozřejmě je i variant s více sloupci) po 60 pixelech s 20 pixelovými mezerami mezi nimi. To jsou pěkná zaokrouhlená čísla a ty budou mít i prvky tvořené podle gridu. Minimálně kodér vám za ně bude vděčný.
Na druhé straně ale občas není na škodu z gridu vybočit, což může daný prvek vizuálně vyzdvihnout. Grid systém rozhodně není žádné dogma, kterého je třeba se křečovitě držet u každého prvku. Jeho používání je ale nepochybně vhodné a práce s ním je efektivnější.
Za zmínku v souvislosti s grid systémy rozhodně stojí i téma šířky webu. Pojem responsive design určitě mnohým z vás zní minimálně povědomě a podíl mobilních zařízení používaných k prohlížení webových stránek nelze ignorovat. To by měla reflektovat i práce s gridem a je to zároveň i důvod, proč jako vzorový grid systém doporučuji 978.gs. Základní verze tohoto systému pracuje s šířkou 978 px, do které se vejde 12 sloupců (či více, pokud si jej přizpůsobíte). 978 není tak pěkné číslo jako v případě 960.gs, nicméně výhodou 978.gs je to, že vedle základní verze najdeme ke stažení i několik dalších variant tohoto systému, které se hodí pro použití při navrhování pro různé šířky viewportu a to od 300 px až po 1378px.
Komu by nevyhovoval ani jeden z dvou zmíněných grid systémů, může si vytvořit svůj vlastní. Generátorů se na internetu najde spousta, zmínit mohu například: http:// www.gridsystemgenerator.com/ , kde si navolíte požadovanou šířku celého gridu, počet sloupců a jejich šířku. Stránka vám vygeneruje grid, který si můžete navíc stáhnout v HTML/CSS a jako obrázek v .png.
Tím tedy dnešní článek uzavřu, ale již brzy se můžete těšit na pokračování, kde se budu věnovat používání grid systémů v praxi při navrhování. Já se mezitím budu těšit na vaše komentáře :-)
Závěrem několik ukázkových příkladů stránek využívajících grid systém.
 |  |  |
Užitečné pomůcky pro webdesignéry
2011
Chci se v tomto článku podělit o tipy na několik pomůcek, které rád využívám při navrhování webů a které považuji za zajímavé a užitečné.
Mřížka - grid systém
Mnozí z vás možná mřížku při navrhování webů už používáte, ale stejně mi to nedá a musím ji zmínit, protože je to esenciální věc, bez které si práci již nedovedu představit.
Pomáhá mi při volbě rozměrů prvků, aby byly na pixel přesné, udržuje rovnoměrný spacing mezi nimi a celkově by se dalo říci, že dává designu jakýsi řád. Naopak vybočením z mřížky se dá docílit zvýraznění prvku.
Photoshop i Fireworks disponují vlastní základní mřížkou, kterou používám jako doplněk také. Za sebe však doporučuji tuto mřížku resp. grid systém:978.gs/downloads. Grid systémů existuje hned několik, mají různé šířky a varianty, které se hodí pro různá použití a každý si určitě najde ten, který mu bude vyhovovat nejlépe. Na grid systémy se určitě podíváme někdy příště.
Subtlepatterns.com
Stránka subtlepatterns.com je výborný zdroj jemných vzorků pro vaši tvorbu, které dokáží skvěle oživit (nejen) pozadí webu.
Každý týden se objevují nové a komu se nechce je stahovat po jednom, pro toho připravili autoři webu šikovné tlačítko, kterým stáhnete všechny vzorky do jednoho .pat souboru.
CloudApp
Neocenitelná pomůcka getcloudapp.com pro sdílení souborů a obrázků. Lze ji použít i jako zkracovač odkazů. Funguje na jednoduchém principu drag&drop, podporuje i automatické uploadování screenshotů. Ve verzi zdarma máte k dispozici 10 uploadů za den při maximální velikosti 25 MB na soubor. Komu by toto nestačilo, je zde i varianta PRO, která vám umožní uploadovat neomezené množství souborů s maximalní velikostí 250 MB. Účet PRO stojí $45 na rok.
Tento nástroj oceňuji hlavně při sdílení náhledů s klienty nebo pokud potřebuji někomu rychle něco ukázat pomocí screenshotu.
CloudApp je určena primárně pro Mac, ale díky fluffyapp.com ji lze vesele používat i na Windows.
ColorSchemer
Nástrojů pro tvorbu barevných palet je na internetu mnoho. Velmi známý je například Kuler od Adobe. Já bych však chtěl zmínit aplikaci pro iPhone od autorů webu ColourLovers.com a tou je ColorSchemer. Samotný web umí samozřejmě to stejné, co aplikace. Na aplikaci je ale skvělé to, že vám umožňuje tvorbu barevných palet kdekoliv jste, tudíž můžete těžit z momentálních inspirací.
Nástrojů na tvorbu samotné palety je uvnitř aplikace několik, tím nejzajímavějším je podle mě výběr barev z fotografie. Stačí vyfotit novou anebo vzít starší z alba a můžete ihned vybírat pomocí kapátka jednotlivé barvy. Pokud jste někdy litovali, že si nedokážete zapsat viděnou barvu v hexadecimálním tvaru, je toto vaše spása.
Aplikace je dostupná zcela zdarma na App Store
Viewlike.us
Jako webdesignéři potřebujeme čas od času (nebo často) vidět náš návrh či nakódovaný web v různých rozlišeních. Nástroj viewlike.us se taky výborně hodí v případě tzv. responsive webdesign (o tom někdy příště).
Tip: zadávejte adresy stránek bez “http://” - v opačném případě vrací web chybové hlášení.
Blabot.net
O vhodnosti používání dummy textů by se z hlediska content strategy dalo úspěšně pochybovat, ale i přesto se tento nástroj často hodí.
Lorem Ipsum hezky česky aneb Blabot.net pro vás vygeneruje náhodný český text, který, stejně jako lorem ipsum, nedává smysl a skvěle se tak hodí jako výplň do návrhů v momentě, kdy nemáte k dispozici finální texty.
Copypastecharacter.com
Pokud si jako já nepamatujete zdaleka všechny klávesové zkratky pro znaky, které během navrhování občas potřebujete, budete milovat copypastecharacter.com.
Jednoduchým kliknutím na daný znak jej zkopírujete a můžete dle libosti vkládat, kam potřebujete, což dokáže ušetřit spoustu času.
Vaše tipy
Ponechám počet mých tipů na 7, protože nechci, aby byl článek tak dlouhý, že ho nikdo nebude chtít číst :). Dám prostor vám, čtenářům, pro sdílení vlastních tipů na užitečné nástroje a pomůcky, rád se o nich dozvím.
Pokud jste dočetli až sem, děkuji, a těším se na vaše komentáře.