Category Archives: Web design

Experimentování v YouFailube

Posted on by

Vždy jsem si myslel jak na YouTube, obzvlášť, po převzetí Googlem, pracují špičkový designéři a to jak ti grafičtí, tak především UI/UX.

To, co ale YouTube předvádí v posledních měsících, bych neváhal označit za designovou troufalost. Jako majitele jednoho menšího kanálu na YouTube mě nejdřív překvapili nové kanály, které byli zatím možné přepnout do starého kabátu (což skončí 7.března, kdy dojde k přepnutí všech kanálu napevno). Dřív, měl návštěvník kanálu všechno na jedné stránce a vy jste jako majitel kanálu měli možnost nastavit každý prvek k obrazu svému. Téměř tomu nebylo co vytknout.

Nové kanály naproti tomu například komentáře ke kanálu (které jsou pro mě velice užitečný zdroj reakcí komunity) odsouvá až někam do druhé záložky na druhé stránce, takže na kanálech, které mají vzhled přepnutý je vidět 90% pokles aktivity komunity. Nejen že díky komentářům jste na kanále měli slušný provoz, také jste si díky boxíku Informace mohli do návštěvníků tlačit potřebné informace. Teď, když na vašem kanále budou tyto komunitní funkce potlačeny, prakticky ho ani nepotřebujete.

To samé se stalo s doporučenými kanály, které se přesunuli kamsi doprava dolu a není možné je nijak zvýraznit.

Jakožto majitele partnerského kanálu mě dále docela štve že i když došlo ke zvětšení tlačítek nad videem, nebyl zvětšen prostor, který je mi dán k možnosti vlastního obrázku, místo názvu kanálu. Dříve sem si (a nejen já) dělali vlastní loga tak, aby pěkně zapadli do designu YouTube, dnes všechny okolní prvky trčí nahoru i dolu.

Další úžasnou věcí je automatická velikost playeru podle šířky vašeho prohlížeče. Nevím, jak ten, kdo to psal, mohl zapomenout na takový detail jako je výška viewportu, protože se vám vesele může stát že se vám nevejde celé video do prohlížeče a například se vám nezobrazí ovládací prvky, jak můžete vidět na obrázku níže. Dále mě také baví to, že player nereaguje na změnu velikosti browseru po načtení stránky, tudíž, když si okno zmenšíte, player vám zůstane obludně obrovský a zobrazí se vám horizontální scrollbar.

Já si dokážu pomocí addonu v prohlížeči upravit CSS tak, aby se mi velký player nezvětšoval nad původní velikost (šířku YouTube layoutu), ale dokáži si živě představit ty miliony návštěvníků, kteří s tím nic nenadělají a jsou zklamáni.

Nechci se tímto posmívat designérům a říkat že bych to zvládl lépe, píšu to čistě jako uživatel, kterého to fakt štve a o to více jako aktivního tvůrce videí.

Konečně také někdo přemýšlí nad výkonem a testováním CSS

Posted on by

Tento odkaz mě potěšil: http://andy.edinborough.org/CSS-Stress-Testing-and-Performance-Profiling

Bookmarklet, který vždy odebere jeden CSS selector a spočítá render time stránky zaskrolováním dolů a nahoru, přičemž si ukládá a vypisuje čas, jaký to trvalo. Jednoduše vám pomůže najít místa, která trvají vašemu prohlížeči vyrenderovat největší dobu. Autor takto zjistil že IE9 má problémy s border-radius na elementech na úrovni body.

CSS stress test mě prostě potěšil, jdu si testovat weby :)

Pořád “to” mám v oku :D

Posted on by

Právě je třetí den od doby co jsem založil nový web a na vyhledávání celkem zajímavé fráze, které jsem si definoval sem na druhém místě v google. Začínám koketovat s myšlenkou přivydělání pomocí jedné formy blogování, ale zatím je těžké dělat nějaké závěry. Jsem poměrně skeptický co se týče velikosti trhu v Čechách.

Tipy pro efektivnější zápis CSS

Posted on by

ID pro body tag

Pokud se vám podaří donutit programátory, aby předávali ID stránky podle pravidel, která určíte, bude se vám velmi snadno spravovat odlišný vzhled stránek. Například pro různé sekce webu potřebujete odlišně barevné záhlaví a podsekce menu. Pokud budete mít ID stránky v body, můžete tím krásně řídit celou barevnost webu a nemusíte myslet na to, v které šabloně jste zapomněli napsat správné třídy.

 

Oddělte CSS hacky

Pokud vám nezbude jiná možnost a jste donuceni použít CSS pro odlišné prohlížeče, oddělte je do samostatných souborů a ty volejte pomocí podmíněných komentářů.

<!--[if lte IE 6 ]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if IE 7 ]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->

 

Použijte @import

Pokud pro vložení CSS použijete direktivu @import, bezpečně odříznete velmi staré prohlížeče, jako IE4 a Netscape 4, které mají velmi špatnou podporu CSS a je mnohem lepší pro ně zobrazit pouze strukturovaný html dokument.

 

Použít “master” CSS dokument?

K použití master CSS dokumentu – tedy CSS souboru, který sám o sobě obsahuje pouze importy dalších CSS souborů jako CSS pro fonty, CSS pro layout, CSS pro všeobecné třídy, mám dvě výhrady. Jednak každým souborem navíc zvyšujete počet HTTP požadavků (což vám bude jedno na prezentaci firmy, kam přijde maximálně několik desítek návštěvníků denně) a hlavně – pokud rozdělovat CSS dokumenty, tak jsem spíš pro logické než strukturální dělení, tedy zvlášť CSS pro layout, barvy a fonty a zvlášť CSS pro samostatné sekce – např. homepage, detail produktu, kontakty. Zde je ovšem opět nutná součinnost programátorů, aby příslušná CSS volali dle sekce kde se návštěvník nachází, pokud by jste CSS vkládali najednou a sekce rozdělovali pode ID body (například), tak vám raději doporučuji použít jeden CSS soubor. Výhodou jednoho CSS souboru je také rychlá orientace při editaci a možnost rychle něco najít pomocí hledání v editoru.

 

Zkracujte zápis CSS

CSS v mnohých případech dovoluje použít zkráceného zápisu. Výhody – ušetříte datovou náročnost a zvýšíte čitelnost vašeho CSS dokumentu. 

 

Například:

margin-top: 2em;
margin-right: 6px;
margin-bottom: 0;
margin-left: 1em;

 

Lze zapsat jako:

margin: 2em 6px 0 1em;

 

Není to přehlednější?

 

Víte například že mnoho definic písma lze zapsat do následujícího krásně zkráceného zápisu?

font: oblique small-caps 900 12px/14px arial, sans-serif;

 

Definujte si barvy

Na začátku CSS dokumentu si v zakomentovaném bloku vypište všechny použitelné barvy a kde se používají. Nic nezdržuje víc, než se neustále přepínat do Photoshopu a kapátkem chytat barvy. Dobře popište kde se barvy používají, včetně kombinací barva/pozadí. Pokud vám grafik poslal návrh, kde odkazy mají šest různých modrých odstínů, klidně mu to vraťte – i v Photoshopu si můžete definovat vlastní paletku barev.

 

Odsazujte tabelátorem

Dlouho mě vůbec nenapadlo odsazovat celé bloky kódu podle logického zanoření v DOMu. Když jsem objevil onu pověstnou Ameriku, tak jsem zjistil že se jedná o jednu z nejlépe zpřehledňujících technik. Kdykoliv budete hledat nějakou definici, nebo budete nějakou potřebovat dopsat, najdete velmi rychle místo kam patří.

 

#head {
	background: #fff;
}
	#head p {
		margin: 0;
	}
	#head a {
		text-decoration: underline;
	}
		#head a span {
			font-weight: bold;
		}

 

Jak řadit CSS vlastnosti?

Každý kodér si časem najde svůj vlastní způsob jak píše pořadí vlastností. Například já, když mám nějaký element, kterému nastavují šířku, výšku a float, tak je do CSS píšu přesně v pořadí jako jsem napsal v této větě. No jo, ale co když hrozí že na CSS se bude podílet víc lidí, nebo že v budoucnu bude mít správu pod palcem někdo jiný než vy? Asi nejjednodušší je vypisovat CSS vlastnosti abecedně.

 

Vnitřní rozdělení CSS dokumentu

CSS dokument je dobré členit do logických celků a dle kaskády. Mě se osvědčilo jako první vypisovat HTML entity (p, ul, a), následuje layout (a tedy všechny prvky na stránce) a na konci dokumentu mám sekci “všeobecných” tříd se samovysvětlujícími názvy jako .bold, .noborder, .red. 

 

Obsah

I když zrovna nepíšeme knihu, je dobré uvést na prvním místě obsah dokumentu. Kde máte jaké části layoutu, případně vypsat jejich hlavní ID. Také každou sekci v dokumentu uvádějte vizuálně dobře viditelným komentářem, aby se dalo při rychlém scrolování dokumentem dobře orientovat. 

 

V pracovním CSS buďte velkorysí, v produkčním skoupí

Vždy si veďte dvě verze CSS dokumentu – vaší pracovní, která bude také sloužit ke všem budoucím úpravám a produkční, do které se nikdy nic neupravuje, pouze slouží k linkování z webu. V pracovní verzi nemusíte šetřit místem, dělejte vizuální odrážky pomocí komentářů, nebojte se vynechat řádek za logickým celkem definic stylů. Až bude potřeba hodit CSS dokument na ostrý web, prožeňte vaše CSS nějakým nástrojem na kompresi – dejte do Google “CSS compressor” a uvidíte že je z čeho vybírat. Nejen že se zefektivní velikost vašeho dokumentu (všeobecně lze říct že v rozmezí 10 až 30%), ale také vyhodíte všechny komentáře, které nejsou pro provoz na ostrém webu vůbec podstatné.

Cena práce za web design – OSVČ

Posted on by

Jsme mladí, plní síly a děláme weby. Fajn, ale za kolik?

Průměrná pracovní doba je asi 2000 hodin ročně (bez dovolené). Protože jsme líná verbež a zasloužíme si nějaký ten odpočinek, počítám s 1800 hodinami ročně, tedy 150 hodin měsíčně.

Kolik spotřebuji W za hodnu práce?

Výkonnější počítač s LCD panelem spotřebuje asi 250W, k tomu si můžeme přidat 50W paušálně za osvětlení. Dále předpokládám ADSL/WiFi modem a menší server na zálohování a ukládání souborů. Za tyto položky přidávám dalších 200W. Naše spotřeba je tedy 0,5kWh. Průměrná cena je 3,82 Kč/kWh, naše spotřeba je tedy za 1,91 Kč/h.

Nájem a náklady spojené s kanceláří

I když pracujete doma, stále máte náklady spojené s provozem. Dokonce i domácí pracoviště můžete dávat do nákladů. Pro jednoho člověka počítám příkladovou malou kancelář o rozloze 16m2. Průměrný nájem v Praze za kancelářský prostor je zhruba 350 kč/m2. Měsíční nájem tedy činní 5600 Kč plus náklady spojené s údržbou, vodné a stočné, teplo a poplatky za drobné opravy – paušálně měsíčně 1000 Kč. Dále máme kancelář vybavenou kancelářským nábytkem za 30 000 Kč, který dva roky odepisujeme, tedy 1250 Kč měsíčně. Naše celkové měsíční náklady za kancelář jsou 7850 Kč, což činí (při 150 hodinách měsíčně) 52,33 Kč/h.

Náklady za počítač a software

Můj počítač stál 55 000 Kč a bude se odepisovat tři roky. Software – 52 000 Kč za Adobe CS3 Web Premium (Photoshop, Illustator, Flash, Acrobat). Software se odepisuje jeden rok (a Adobe nám skoro každý rok nadělí nějaký ten nový produkt), nicméně další rok budeme platit jen upgrade, který bude stát zhruba polovinu, proto počítám dvouleté náklady na 70 000 Kč. Dohromady jsou roční náklady 53 333 Kč, měsíční 4444,41 Kč a hodinové tedy 29,62 Kč.

Moje odměna

Takže, tohle bude nejsložitější :) Kolik si chcete vydělat? Řekněme že jakožto profesionál na úrovni chcete mít k dispozici 40 000 Kč měsíčně čistého. Z tohoto údaje musíme zpětně odhadnout daně, sociální a zdravotní a vypočítat hrubou měsíční částku. Pro zjednodušení si řekneme že hrubého měsíčně musíme mít 50 000 Kč, tedy 333,33 kč/h.

Další náklady

Nezapomeňme na náklady spojené s všeobecný mi činnostmi, které se ale musí nutně promítnou do naší celkové ceny. Například náklady na dopravu (500 Kč měsíčně za tramvajenku), paušál mobilního telefonu (500 Kč měsíčně), náklady spojené s provozem tiskárny a náklady za všeobecné kancelářské drobnosti (100 Kč měsíčně). V přepočtu tyto náklady dávají 7,33 Kč/h.

Jaká je naše vzorová hodinová sazba?

Podle předešlých výpočtů činí naše hodinová sazba 424,52 Kč.

Tato částka je tedy přesně vypočítaná na základě našich fiktivních nákladů, které jsem se snažil nasadit do reálného průměru.

Nyní nás čeká ještě jeden složitý úkol – odhad času stráveného na projektu.

I když nyní známe přesnou částku, kterou bychom měli fakturovat za hodinu naší práce, je velice pravděpodobné že většina klientů se nespokojí s touto částkou a poznámkou že jim vyfakturujeme hodiny strávené na jejich zakázce. Přichází tedy na řadu vysoce přesná vědecká metoda – odhad. Je třeba odhadnout kolik času nám zabere jaký úkol.

Rezervy

Vždy si vytvářejte časové rezervy. I když je možné nakreslit obyčejný web v Photoshopu za hodinku, asi to nebude to pravé ořechové. Nad webem je třeba přemýšlet, udělat si pár náčrtků na papír, zase si to nechat projít hlavou a až poté si sednout k Photoshopu a pustit se do prvních pokusů. Před tím, než začnete web navrhovat, musíte si rozmyslet jeho strukturu, cíle a prostředky. Jakou bude mít barevnost? Máme všechny potřebné podklady? Máme logo ve vektorech? Co se stane, když se zaseknu na nějakém detailu a nedokončím web v mém časovém odhadu?

Samotný odhad

Někde jsem četl, že odhad v IT se dělá tak, že vlastní odhadnuté hodiny vynásobím dvěma a přičtu čtrnáct dní. A stejně to nestihnu. V praxi to funguje výtečně.

Vážně. Odhadnout čas na projekt vyžaduje praxi. Také záleží na velikosti projektu a jeho složitosti. Bude to jenom prezentace firmy ve stylu „O nás, Produkty, Kontakty“?

Spodina táhne spodinu

Ačkoliv to zní sprostě, je to tak. Když budete svoje ceny držet na maximálně možném minimu, budete na sebe navalovat klienty, kteří tomu odpovídají. Navíc si nebudou vážit vaší práce, stejně jako vy si nevážíte trička z vietnamské tržnice za 40 korun.

Pokud mám nějaký větší projekt (krásný příklad jsem četl na Nyxu – developerské stránky s nabídkou luxusních bytů), je dost dobře možné že se celý měsíc budu věnovat jen jim a v pohodě vyfakturuji 63 750 Kč. Navíc v mém případě bych ještě externě zaměstnal člověka na Flash a i kdyby se výsledná cena blížila 100 000 Kč, stále bych si za ní stál.