Vzhůru dolů

"This is my personal site. There are many like it, but this one is mine. Designers with personal..."

Tue, 22 May 2012 16:54:00 +0200

“This is my personal site. There are many like it, but this one is mine. Designers with personal sites should experiment with new layout models when they can.”

- Jeffrey Zeldman ještě ke „kauze příliš velkého písma”. Viz Zeldmanův Mobile Only.

Patřím mezi ty, kterým na desktopu obří Zeldman.com vůbec nevadí. Naopak. Jenže kdo ví? Nakonec to opravdu nemusí být dobrá cesta. Ale šlapání po neznačených trasách je ctí každého webdesignéra. Minimálně na vlastních projektech. Už tohle je happy end příběhu.

Novinky webového front-endu — 0. díl

Mon, 14 May 2012 09:34:00 +0200

Pojďme spolu zkusit natočit seriál. Každý měsíc až dva jeden díl kóderské soap opery. V hlavní roli šílený vývoj na webovém front-endu. Na režisérském křesle ve slunečních brýlích — vy a já.

Novinky webového front-endu jsou moderovaný vývar subjektivně nejzajímavějších událostí, nástrojů, postupů nebo názorů pro ty z nás co tu melu nestíhají sledovat denně.

Až najdete úžasnou novinku, která vám na front-endu ušetří čas nebo změní názor, neváhejte ji přidat do komentářů, tweetnout (cc @machal) nebo e-mailnout. Korespondeční lístky případně zavedeme později. :)

Poprvé to vezmu sám. Klapka. Jedém…

Konference Mobilism

Pokud se dnes někde na front-endu bourají myšlenkové modely, je to bezesporu mobilní webdesign. Tedy mobilní… Máme tu desktop, mobily, smartphony, tablety, čtečky… a ve frontě na štěstí našich webů čeká nová generace televizí, herních konzolí, ovládací obrazovky v autech nebo Google brýle. Nový webdesign je multiplatformní. A ještě lépe future-proof. Odolný budoucnosti.

A vzpomeňme na „Křápy first”…

It’s not really “mobile first”, it’s “structured content first” @stephenhay at #mobilism
— Peter-Paul Koch (@ppk) May 11, 2012

HTML5 Please

…není nejnovější, ale naprosto zásadní web pro každého kdo ví, že nějaké HTML5 a CSS3 novinky existují, ale neví jakým způsobem a v jakých situací je může začít používat. A teď už nám žádné výmluvy nepomůžou. ;)

Zeldmanův Mobile Only

I přes inzerovanou rozdělanost práce webařská legenda za svou odvahu navrhnout web především pro mobilní zařízení sklidila spíše nesouhlasné bučení. Ať je provedení jaké chce, zamyšlení nad Zeldmanovými motivy je výborný způsob jak reagovat na to jak se webařům mění půda pod nohama.

Konec Firefoxu 3.6

Automatic updates from FF3.6 to FF12 will be occurring some time in the next day.
— Paul Rouget(@paulrouget) May 9, 2012

Moc se neví, že 3.6 byla poslední verze Firefoxu bez automatické aktualizace a tak nám třeba ještě v lednu v ČR zůstavalo kolem 7% nešťastníků s touhle poměrně málo vyvinutou verzí prohlížeče. U mě se sice nová verze nenatáhla automaticky, ale prohlížeč začal namísto 3.6.26 nabízet rovnou verzi 12. A tak palec nahoru, Mozillo.

retina.js

Moc fajn pomocník pro všechny co potřebují podporovat displeje s vysokým rozlišením typu Retina. To jsou s nástupem nového iPadu přibližně všichni front-end vývojáři na světě. :)

The Current State of HTML5 Forms

Očima HTML/CSS kódera, nové formuláře jsou jedna z nejzásadnějších části HTML5 specifikace. Podporované velmi různorodě, ale s pomocí polyfillů poměrně dobře. Wufoo aktualizovalo skvělou učebnici HTML5 forms.

Novinky webového front-endu můžete v intenzivnější podobě sledovat na mém Twitteru pod nickem @machal.

Naslyšenou příště. :)

"Multiple columns are so 1990s."

Thu, 26 Apr 2012 15:22:00 +0200

“Multiple columns are so 1990s.”

- — Jeffrey Zeldman redesignoval svůj blog. Až kliknete, nelekejte se a nehledejte odkaz na „desktop” verzi. Nejste na mobilní verzi webu.

Za mě palec nadšeně nahoru. Díky přístupu mobile first jsme s webdesignem zpátky ve světěkde vládne obsah. Ve světě kde designéři do „bočních boxíků” nevkládají obsah, který uživatel nepotřebuje jen proto, že to vypadá hezky a profesionálně. Ve světě, kde layout je dobrá, ale ne nutná část designu. Děkuji tímto svému smartphonu.

PS: Zeldmana už dlouho nesleduju a tohle bych od něj úplně nečekal. Pro mě tedy trochu prozření — za oceánem hold staří páprdové udávají rytmus. :)

"Over 25 per cent of people in the US who browse the web on smartphones almost never use any other..."

Mon, 16 Apr 2012 15:04:00 +0200

“Over 25 per cent of people in the US who browse the web on smartphones almost never use any other platform. (…) Mobile isn’t just ‘mobile’. It’s also the couch, the kitchen, the three-hour layover, all places where we have time and attention to spare. 42 per cent of mobile users say they use it for entertainment when they’re bored. Those aren’t 10-second sessions.”

- Josh Clark, Nielsen is wrong on mobile

Konec éry potrhlého uživání bitmap

Tue, 10 Apr 2012 08:19:00 +0200

Není nač čekat. Každý kdo si v Photoshopu při exportu obrázků pro web někdy zaťukal na čelo teď vezme do ruky trubku a společným „Tramtadadá!” oznámíme konec Epochy potrhlého užívání bitmap ve webdesignu.

Třeba obrázkové nadpisy - to už dneska zní jako vtip, že?
Ani přechody, kulaté rohy nebo stíny už v CSS nejsou žádná vyšší dívčí.
Obrázková tlačítka? V době generátorové a presetové už skoro žádná nepotřebujeme.
Některé ikony můžeme nahradit písmem, některé vektory a některé úplně ujetě v CSS.
Mezi indikátory načítání už obrázky taky skoro vyhynuly. A pokud obrázek potřebujeme, stačí nám jeden namísto 36 variant pro každý projekt.
Blbiny a tvary už umíme někdy divně, jindy docela prakticky v CSS taky

Navíc - doba kdy i zbývající potrhlé bitmapy nahradíme vektory není daleko. Dovedu si představit, že Asociace na ochranu ohrožených rastrových ikonek a bitmapových logotypů už měla ustavující sjezd. ;-)

Haml a dva typy kóderů

Tue, 27 Mar 2012 15:01:58 +0200

Josh Symonds píše:

I like Haml. But it’s a markup language for programmers, and ultimately the people who use HTML the most aren’t programmers.

S Haml jsem na tom stejně — vizuálně se mi líbí, projekt v něm vytvořený zvládnu nějak adoptovat, ale neumím si ho představit jako náhražku HTML.

Podobně to mám s CSS preprocesory. Na řešení určitých problémů je to skvělý nástroj, ale používat je opravdu na každém malinkém projektu? Nahradit jimi CSS? Prosím né! :)

Část kóderů se mnou určitě souhlasit nebude. Pro potřeby dělení je zkusím nazvat frontend vývojáři. Ti co na hraně design/technologie mají blíž k technologii.

Josh Symonds totiž v článku používá jeden hezký pojem — frontend designéři. Tzn. frontend vývojář zkamaráděný s designem nebo designér zkamaráděný s frontend vývojařinou. Každopádně člověk co má blíž designu. Tohle je můj flek. :)

Vzhůru do CSS3!

Mon, 19 Mar 2012 08:09:00 +0100

Průvodce použitelnými CSS3 vlastnostmi vznikal původně pro probíhající sérii mých školení HTML5 a CSS3. Poskytuje ovšem docela dobrou úroveň rozhledu i bez doplňujícího povídání a tak není důvod se nepodělit se všemi.

A tak…

Vás webaře by kromě jiného mohlo zajímat, že mini-webík je postavený na layoutové a responsivní části pozoruhodného frameworku Bootstrap od designérů Twitteru.

Vzhůru do CSS3 je po všech směrech „work in progress“. Významnější aktualizace budu průběžně posílat na Twitter účet @machal.

"If you could only do one thing to prepare your desktop site for mobile and had to choose between..."

Thu, 15 Mar 2012 09:24:00 +0100

“If you could only do one thing to prepare your desktop site for mobile and had to choose between employing media queries to make it look good on a mobile device or optimizing the site for performance, you would be better served by making the desktop site blazingly fast.”

- Jason Grigsby. Furt se nám to vrací na začátek, že? „Nikdy nepodceňujte význam rychlosti” říká Eric Schmidt.

fancyBox 2.0

Mon, 12 Mar 2012 13:36:00 +0100

Mám historickou povinnost zmínit se o nové verzi oblíbeného lightboxu. Fancybox si do verze 2.0 naježil kompletní přepsání kódu a přizpůsobení vlastností aktuálnímu stavu webdesignu.

V zásadě přináší vše co mi v poslední verzi chybělo nebo jsem dokonce nahrazoval ohýbáním, které bylo na úrovni kódu někdy poněkud krkolomné.

Fancybox je teď kromě jiného responsivní, vizuální efekty tvoří pomocí CSS3 vlastností a zjednodušuje tvorbu rozšíření. Několik užitečných už autor předpřipravil.

Možná se budete divit, ale největší radost mám z toho, že Fancybox je teď placený produkt. Proč? Každý z nás přispěje jednomu šikovnému chlapci na to, aby užitečné věci věnoval svou energii.

CSS3: Roleček pomocí animace změny šířky rámečku

Thu, 23 Feb 2012 00:05:00 +0100

Před časem Twitterem proklusaly elegantní „rolečky” poháněné spřežením několika CSS3 vlastností. Pojďme odchytit ten nejdecentnější z nich a udělat malý CSS striptýz. Nejdřív ale vezměte kurzor a navigujte sem:

Není to nic těžkého, slíbené negližé odhalí další řádky:

.circle {
  display: inline-block;
  width: 150px;
  height: 150px;
  margin: 0;
  padding: 0;
  background: url(data:image/png;base64,…) center center no-repeat;
  /* Barva pozadi s fallbackem pro prohlizece co neumi CSS gradienty */
  background-color: #660066;
  background-color: linear-gradient(45deg, #FF33FF, #660066);
  /* Vytvorime kruhovy tvar */
  border-radius: 50%;
  /* Chceme, aby se sirka ramecku nepripocitala k celkove sirce elementu */
  box-sizing: border-box;
  /* Ramecek zabira celou plochu elementu a je polopruhledny (ano, to muze byt) */
  border: 75px rgba(0,0,0,.5) solid;
  /* Nastavime jak rychle a jakou casovou funkci ma prohlizec animovat prechod stavu pri zmene vlastnosti */
  transition: .2s ease;
}

.circle:hover {
  /* Po najeti mysi zmensime plochu ramecku */
  border-width: 10px;
}

Funguje ve všech moderních prohlížečích včetně IE9 (tam jen bez elegantní animace). V IE8 a starších má element hranatý tvar a postrádá rámečky. Neva, uživatel se k obsahu dostane hezky.

Před použitím si doplňte prefixované verze jednotlivých CSS3 vlastností. Příklad používá knihovnu -prefix-free.

Hrát si s tím můžete v Dabbletu.

"I got to the point where I actually liked iPhone app better than our website, I thought it was..."

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

“I got to the point where I actually liked iPhone app better than our website, I thought it was aesthetically more beautiful.”

- říká šéf nově redesignovaného Kayaku Paul English. „Desktopového” webu redesignovaného kromě jiného tak, aby se podobal jejich úspěšným aplikacím pro iPad a mobilní zařízení. (Zdroj)

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.