Vzhůru dolů

Spravovatelnost — o důvod víc proč využít CSS3

Wed, 08 Feb 2012 22:24:00 +0100

Dobře, toto sice je blog vývojářského frikulína — ale telelícího se radostí, že vám konečně může ukázat jak používání CSS3 a dalších nových front-end není akt frikulínství. Je to akt úspornosti. Šetření vlastní energie a klientovy peněženky kromě jiného pomocí lepší spravovatelnosti projektu.

Pojďme si to ukázat na zjednodušeném příkladu kolovrátku (znáte jako preloader nebo spinner). Konvenční příprava pro použití na webu vypadá asi takto — navštívíte Ajaxload, vyberete typ a barvy a necháte si vygenerovat animovaný gif.

Na jiném místě webu potřebujete jinou velikost a tak si vygenerujete nový gif.

A pak ještě potřebujete dvě variany pro jinou barvu pozadí. Přidáte třetí a čtvrtý gif. Pak i pátý a šestý.

Za týden si designér prohlédne web a upraví barevné schéma.

„To si nemohl vzpomenout dřív!?” Tady stop. Problém hledejte u sebe. Iterativní vývoj vzhledu weby potřebují jako sůl a grafik dělá svou práci dobře. A my naše technologie musíme sedlat tak, aby interace a časté změny podporovaly.

Co se dá dělat — vygenerujete obrázky s novým barevným schémate a vložíte do stylopisu. To máme index spravovatelnosti kódu 0,5 z 10 a index radosti z práce 0 z 10.

PNG32, jeden obrázek za všechny

Pojďme se podívat na lepší variantu — namísto animovaných GIFů použijeme 24bitové PNG s alfaprůhledností (znáte z Photoshopu). Nádhera! Teď můžeme donekonečna měnit barvy nebo vzory na pozadí. PNG32 neumí animace a tak kolovrátek rozhýbeme pomocí CSS. Výsledek je tady.

Navíc — když si vyrobíme dostatečně rozměrný obrázek, vystačíme si s jedním souborem, který budeme na různých místech našeho projektu různě zmenšovat.

Prohlížeče co CSS animacemi nevládnou zobrazí statický obrázek, což by většinou vadit nemělo. Kolovrátek se obvykle zobrazí jen na nepatrnou chvíli a uživatel si jeho statickost pravděpodobně vůbec neuvědomí.

Při zvažování přihlédněte k tomu, že index radosti z práce i index spravovatelnosti narostl tak, že rozpoutal explozi teploměru.

SVG, pozdrav z blízké budoucnosti

Chcete slyšet ještě lepší variantu?

Pak si spolu uděláme kodérského bobříka strachu. Vezmeme se za ruce a zkusíme se společně přestat bát SVG. :)

Vektorová grafika má v současných prohlížečích přibližně stejnou podporu jako CSS animace, takže nás degradace pro starší prohlížeče bude bolet přibližně stejně. Vektorové SVG má dvě výhody:

První je zřejmá — můžete je i zcela šíleně nafukovat a pak taky zmenšovat. Vykreslovat se budou pořád stejně hezky (vzpomeňte na Retina displeje a rozmazanou bitmapovou grafiku většiny webů)
Je to otevřený XML formát, který můžete automaticky zpracovávat serverovým skriptem nebo Javascriptem podle vaší libovůle.

SVG řešení našeho kolovrátku kromě toho poskytuje dvoustupňovou degradaci — pro prohlížeče co neumějí SVG animace (v Opeře nebo IE9 se kolovrátek neanimuje) a pak pro prohlížeče co neumějí SVG (v IE8 a starších se zobrazí text „Načítám…”).

Každou změnu vzhledu, tvaru, nastavení animace můžeme kontrolovat přímo v jeho otevřeném kódu.

Index spravovatelnosti dnes je přibližně stejný jako u PNG32 varianty. Index radosti z práce je vyšší, protože jsme mysleli na měsíce dopředu. SVG kolovrátek je kamarád z blízké budoucnosti a tak se bude hodit hlavně těm odvážnějším z vás nebo na projektech, kde plná podpora IE8 není důležitá.

Shrňme si to:

při výběru technologií klademe důraz také na spravovatelnost
méně obrázků definujících vzhled projektu se spravuje lépe než více obrázků
SVG se spravuje lépe než bitmapy
vektorů bychom se měli přestat bát

Hledá se kóderský talent!

Mon, 09 Jan 2012 08:44:00 +0100

Tohle může být zajímavé pro ty z vás co se už nějaký čas zabýváte front-end kódeřinou, HTML a CSS máte docela v malíku, vaše nadšení do webdesignu nepolevilo a chtěli byste nabrat nové zkušenosti se zajímavými klienty a zajímavými technologickými postupy (mobilní webdesign, progressive enhancement…).

Hlásím stav, ve kterém musím odmítat i sympatické zakázky a potřebu se teď chvíli více věnovat jiným radostem. Pojďte se mnou vytvořit dvoučlenný kóderský tým! ;)

Výhodu mají kluci a holky s nějakým technologickým přesahem (Javascript, Django, PHP…) a baví je pracovat na zajímavých projektech kolem kultury.

Vibrujete zvědavostí? Hurá! Pošlete mi ukázky prací a představu o hodinové sazbě na michalek@shortcat.cz.

Luke Wroblewski: Mobile First (recenze knihy)

Thu, 05 Jan 2012 14:24:00 +0100

Zeldmanovo vydavatelství A Book Apart tohle umí – krátké časové období ve vývoji některé části webdesignu vloží do hrnce a uvaří vývar. Hodně silný vývar.

Pokud však obor denně sledujete, výsledek vás i přes hustotu vývaru může zklamat stejně jako se to stalo mě s průvodci po HTML5 a CSS3.

V případě mobilního webdesignu nemůže být zklamaných. Kolik z nás má několikaleté zkušenosti s návrhem webů uzpůsobených mobilům? Pár designérů na světě. Luke Wroblewski je jedním z nich a tak zformuloval přístup Mobile First a teď o tom pro Zeldmana napsal knížku.

Hlavní myšlenky přístupu Mobile First nejspíš znáte. Pojďte se radši podívat na koláž interpretovaných výstřižků z mého Kindle:

„Můj původní cíl byl udělat mobilní variantu, ale zjistil jsem, že je možné vytvořit lepší verzi Facebooku jež je ta webová.“ – Joe Hewitt
Pokud si odsouhlasíte množinu nejdůležitějších vlastností a obsahu pro vaše zákazníky a váš byznys, proč by se tato množina měla s větším prostorem na obrazovce změnit?
U desktopu se lidé ponořují do problému, na mobilech šnorchlují.
Užívání mobilů má tři hlavní scénáře: “Jsem na tomhle místě”, “Nudím se” a “Mám čas na mikroúkoly”.
Apple jako minimální velikost cíle pro dotek doporučuje 44×44 pixelů
Opusťte myšlenku, že potřebujete navigaci a ovládací prvky, na mobilech jsme blízko NUI.
Přes mobilní aplikaci eBay si někdo koupil letadlo za 5 milionů.
Zařízení jako mobil, TV nebo desktop se neliší jen technickými parametry, ale hlavně způsobem jakým je lidé používají.

Luke je silně analytický typ, rešerše je jeho rodná sestra a tak si buďte jistí, že pro argumenty nebo trefné zkratky („mobilní uživatel je jedno oko a jeden palec“) nebudete muset chodit jinam. Na druhou stranu, Luke je taky úspěšný designér a svou zkušenost ke škodě knihy předává jen na velmi konkrétní úrovni.

Na úrovni pravidel a konkrétních řešení (proč dávat popisky nad a ne vedle formulářových políček). Postrádám Wroblewskiho zkušenost v rovině způsobu přemýšlení o architektuře webu a výběru řešení (aplikace nebo web? responsive web nebo extra mobilní web?).

Na ose kde nalevo je obecná filozofie tvorby webů a napravo konkrétní technická implementace pro mě stojí Wroblewskiho Mobile First zkrátka až příliš vpravo. (A to i přes to, že v knize jsou snad jen dvě ukázky kódu.)

I přes zmíněné subjektivní výhrady Luke Wroblewski výborně formuluje důležitost jednoho z nejvýznamnějších zlomový bodů v historii webdesignu a (pozor!) rovnou navrhuje způsoby jak na něj reagovat.

Přečíst Mobile First by měli chtít nejen weboví vývojáři nebo designéři, ale i majitelé webů, accounti nebo projektoví manažeři ve větších firmách.

Luke Wroblewski k dilematu nativní app vs. web

Mon, 05 Dec 2011 09:05:00 +0100

Je jasné, že dilema je falešné, ale nikdo to zatím neformuloval lépe než pan Mobile First:

As mobile strategist Jason Grigsby is fond of pointing out, “Web links don’t open apps, they go to web pages”. Whether it’s through search, email, social networks, or on web pages, if you have content online, people will find and share links to it. Not having a mobile web solution means anyone that follows those links on a mobile device won’t have a great experience.

Takže — mobilně uzpůsobený web potřebujete skoro vždy. A kdy je čas přemýšlet nad aplikací? Zjednodušeně:

…if your mobile product or business requires deeper hardware access, background processes, app or in-app sales, or more integrated placement on mobile devices to be viable, you may need a native solution.

CSS řešení: fotogalerie se zvětšením po najetí myši

Mon, 14 Nov 2011 11:56:00 +0100

Tohle řešení není žádná věda, ale můžete si tady hezky osvojit principy progressive enhancement a taky se třeba naučit obrázky s kulatými rohy. ;-)

Demo >

Základní funkčnost je jednoduchá: Absolutně pozicovaný element (zelený .photo) leží uvnitř relativně pozicovaného (fialového .photo_container):

.photos .photo_container {
  position: relative;
  float: left;
  width: 150px;
  height: 100px;
}

.photos .photo {
  position: absolute;
  z-index: 90;
}

Po najetí myši se pomocí záporného vnějšího okraje vnitřní element vytáhne za hranice vnějšího a zvýšením z-indexu překryje vedlejší elementy:

.photos .photo:hover,
.photos .photo:focus,
.photos .photo:active {
  z-index: 100;
  width: 240px;
  height: 160px;
  margin-top: -30px;
  margin-left: -45px;
}

Je tady ovšem jeden problém — pokud chceme obrázky vylepšit kulatými rohy, ve Webkit prohlížečích je musíme umístit na pozadí elementu.

Jenže my zároveň chceme obrázky jako samostatné elementy v dokumentu, abychom nabídli základní funkčnost také lidem se staršími prohlížeči včetně MSIE do verze 8.

Pomůžeme si trikem s nulovou neprůhledností (opacity). Ve standardních prohlížečích umístíme obrázky na pozadí obalujícího elementu. Ve starších prohlížečích jež opacity neznají pak pracujeme s obrázkem z dokumentu:

.photos .photo img {
  opacity: 0;
  z-index: 90;
  position: absolute;
  width: 150px;
  height: 100px;
}

.photos .photo {
  position: absolute;
  z-index: 90;
  width: 150px;
  height: 100px;
  background-size: 150px 100px;
}

.photos .photo.first
  { background-image: url('photo_1.jpg'); }

Podívejte se na plný kód — obsahuje všechny varianty CSS3 vlastností pro transitions, kulaté rohy a stínování.

V MSIE 8 a novějších pak bude výsledná galerie bez všech CSS3 efektů. Nicméně plně použitelná:

Doplněno: V MSIE 6 a 7 se fotogalerie musí obejít bez zvětšování po najetí myši. Základní funkčnost ale zůstává nezměněná.

Perch, redakční systém pro nepřizpůsobivé designéry

Thu, 27 Oct 2011 11:45:00 +0200

Musíte řešení designu webu přizpůsobovat redakčnímu systému? Většina z nás asi na limity CMS nenarazí, ale jsou mezi námi designéři co se odvážně vrhají do vln neobvyklých řešení. A pro ty je Perch.

Představte si projekt, který vyžaduje důraz na vizuální atraktivitu a obsah si říká o šití designu na míru. Třeba portfolio architektonického studia s výrazným rukopisem.

Designér rád chytne příležitost za pačesy, ale co kodér, který má náročný vizuál implementovat do Wordpressu, Drupalu nebo nedejbože něčeho jako Webnode? Prostor, ve kterém se nebožák musí pohybovat je úzce vymezen možnostmi CMS a jeho šablonovacího systému.

Tam v edgeofmyseat spatřili díru v trhu a navrhli redakční systém, který designéry a vývojáře omezuje daleko méně než ty zavedené.

Perch startuje veřejnou část webu s nulovou konfigurací. Připravíte ji jak jste zvyklí u „statických“ webů. Ve chvíli kdy jste spokojení, řeknete Perchu, se kterou částí obsahu chcete nechat klienta pracovat přes redakční systém. Ryan Singer z 37signals k tomu říká:

I feel like my templates are still fully under my control, and I can sprinkle a little Perch in here and there to get the client-editable magic that I need. That’s extremely important to me and none of the other CMSes seem to do a good job of it.

Konkurence Wordpressu? Omyl!

Perch si říká „mini CMS“ a hodí se hlavně na mini weby, které akcentují vizuální dojem nebo interaktivitu. Nepovažujte ho za konkurenci blogovací supermašiny Wordpressu nebo modulárního molocha Drupalu. Na Perchu se s úspěchem stavějí třeba právě portfolia, weby hotelů, restaurací atd. Obrovská svoboda, kterou Perch nabízí front-end vývojáři se velmi dobře hodí pro vývoj webů pro desktop a mobily zároveň.

Líbí? Oznamuji, že se s Perchem po večerech seznamuji už nějaký ten čas a touha po praktických zážitcích mě právě včera donutila aktivně hledat zájemce o jeho implementaci. ;) Jste nepřízpůsobivý designér nebo studio se zajímavým projektem vhodným pro peršanizaci? Oznamte to sem: michalek@shortcat.cz

„Křápy“ first

Thu, 29 Sep 2011 10:10:00 +0200

Na Webexpo přednášce nebyl čas tuhle myšlenku rozvést. Tady je i s konkrétní technickou aplikací.

Metodu Mobile first a její platnost asi není potřeba dále rozvádět. Luke Wroblewski přes pochyby běží tryskem a nechává jen spálenou zemi. ;)

Designér co navrhuje rozhraní metodou „jeden web“ by v prvé řadě měl myslet na horší zařízení a řešení pro lepší koncipovat jako rozšiřující.

Proto nejdříve mobily a proto jde na proces designu webu krásně pohlížet jako na vrstvení jeho jednotlivých elementů na sebe:

Vývojář designérský pohled obohacuje kromě jiného o přístupnost. Než navrhne řešení pro smartphony, musí se zamyslet nad zařízeními, kterým můžeme říkat třeba „křápy“. :)

Nemusí to být jenom stará Nokia se špatným prohlížečem nebo MSIE6. Mezi křápy počítejte i vaši zcela novou tiskárnu nebo slepeckou čtečku. Všechno to jsou zařízení, který pomůžete především správně vyznačenou strukturou dokumentu, významem obsahu a taky čitelnou typografií.

„Křápy first” není nic jiného než metoda Mobile first obohacená o přístupnost.

V přednášce jsem stihl být jen obecný. Pojďme se na vrstvení designu podle „křápy first“ podívat technicky a v konkrétní situaci. Tohle je vrstvení viditelné z obrázku převedené do CSS souboru v probíhajícím redesignu webů kin Světozor, OKO a Aero:


index.css:

/*
 Vrstva pro krapy:
 * reset/normalizace
 * zakladni typografie
*/ 

/* css pravidla... */

/*
 Vrstva pro smartphony:
 * vzhled prvku (barvy, vlastni pisma, formatovane boxy)
*/
@media screen and (max-width: 480px) {

/* css pravidla... */

}

/*
 Vrstva pro tablety a desktop:
 * uprava vzhledu
 * layout
*/
@media screen and (min-width: 481px) {

/* css pravidla... */

}

Hezčí kód je na Github gyzdu.

CSS je úmysleně zjednodušené. V praxi pro každý z typů zařízení přidáváme ještě extra vrstvu s drobnými úpravami — třeba pravidla pro zalamování stránky v tiskové verzi.

Problémy s media-queries v IE8 nám v tomhle jednoduchém případě pomůže vyřešit Respond.js.

Prosím, jen to CSS neberte jako šablonu. Váš projekt a hlavně zařízení rozšířená ve vaší cílové skupině mohou vyžadovat radikálně jiné nastavení.

„Kdy při návrhu webů začít počítat s mobilními zařízeními?”

Mon, 19 Sep 2011 09:31:00 +0200

Vy jste ještě nezačali?

„Nemá to zatím smysl, protože z nich na weby klientů přichází jen 2-3 % návštěvníků. Jsou pod pětiprocentní hranici. To bychom rovnou mohli optimalizovat pro IE4!”

Navrhujete dneska weby pro rok 2011 nebo pro 2013, kdy mobily v počtu přístupů na web pravděpodobně desktop sežerou i s klávesnící?

„Ano, ale vždycky to můžeme udělat zpětně. Stačí vložit pár řádků kódu, ne?”

U většiny webů skončíte jako sedláci u Chlumce. Jestli se chcete dozvědět proč si to myslím, moc rád vás uvidím v sobotu v 11 hodin na Webexpo.

Mobilní webdesign jako krize „neúsporného webdesignéra”

Thu, 18 Aug 2011 13:35:55 +0200

Bruce Lawson se mi na na Zdrojáku trefil do aktuálních myšlenek:

… mobilní uživatelé spěchají; neustále jsou zaměstnaní, takže chtějí vykonat jeden specifický úkol a pak skončit. … Omyl spočívá v předpokladu, že uživatelé desktopových počítačů nejsou zaměření na vykonávání úkolů a mají čas nazbyt, který rádi věnují plnému estetickému prožitku. Pravda je, že všichni uživatelé spěchají.

Chudák neúsporný webdesignér. Pokud navrhuje web, kam mají lidé chodit pro informace, jeho největším nepřítelem je bílá plocha. Nebo příliš jednoduchá struktura webu — všechny přece musejí obsahovat „O nás” a „Kontakty”!

Jak ten prostor využít? „Tady by se hodila flashová animace s logem firmy, že jo. Na všech vnitřních stránkách zopakujeme tuhle sadu postranních boxíků nebo navigaci a radši hned dvakrát — co bychom tam jinak dali?! Něco tam prostě musíme plácnout, web jinak nebude vypadat profesionálně!”

Krize je ozdravný proces ekonomiky. Neúsporní neobstojí. Světová krize zabila neúsporného Hummera. Mobilní webdesign konečně zabije neúsporného webdesignéra.

"I would in fact prefer, instead of

,

etc for headings (…) to have a nestable..."

Mon, 08 Aug 2011 12:59:00 +0200

“I would in fact prefer, instead of

,

etc for headings (…) to have a nestable
..
element, and a generic .. which at any level within the sections would produce the required level of heading.”

- Poznáváte úryvek z diskuze o document outline v HTML5?

Nikoliv! To Tim Bernes-Lee uvažuje o první verzi HTML v jedné z prvních zmínek v říjnu 1991. Některé otázky hold zůstávají i po dvou dekádách nezodpovězené.

Pokud slavíte 20 let World Wide Webu, nezapomeňte na panáka pro HyperText Markup Language! ;)

"In particular, you should not view the large iPad screen as an invitation to bring back all the..."

Fri, 05 Aug 2011 12:45:00 +0200

“In particular, you should not view the large iPad screen as an invitation to bring back all the functionality you might have pruned from your iPhone application.”

- — iOS Human Interface Guidelines

A když půjdeme dále, měli bychom takto uvažovat i o webdesignu na desktopu.

Proč je Gmail pro tvůrce newsletterů větší pohromou než Outlook 2007

Wed, 01 Jun 2011 22:28:00 +0200

Povzdech uondaného kodéra na Twitteru…

…doprovodily reakce co by se daly shrnout do věty: „Navrhovat newslettery pro Gmail sice je nepříjemné, ale daleko větší nadělení je renderovací jádro MS Outlooku 2007”.

Jasně, MS Word jádro Outlooku 2007 je vážně zastaralé a usilovně se brání všem snahám o náročnější vzhled nebo layout. Jenže Outlook 2007 na rozdíl od Gmailu (a dalších, minimálně českých, webmailů) přináší jeden zásadní vklad do budoucnosti řemesla — podporu stylopisu vloženého do těla dokumentu.

Právě uvnitř elementu