Objektivní kritika podruhé

Dobrý den. Je tomu několik týdnů, co jsem vás žádal o objektivní kritiku svých stránek. Bylo jim vyčítáno především příliš mnoho tabulek, strohý design a takřka žádné zastoupení CSS. Vzal jsem si vaše připomínky k srdci, zakoupil nějakou literaturu o CSS a převedl web do trochu modernější podoby. Stručně řečeno, zajímal by mě váš názor na novou verzi stránek. Protože vím, že nikdo z vás nevlastní křišťálovou kouli, tak vám to trochu usnadním a přidávám odkaz http://www.cebrk.wz.cz/
Web vypadá dobře. Je vidět, že vám literatura o CSS hodně prospěla, pár výtek tu ale ještě stále je:

1.) DOCTYPE by měl být vždy první
2.) kódování v metainformaci by měl být úplně to první, co je v elementu head

a teď trošku ke vzhledu (dovolím si nípnout):
3.) panel s menu sice na výšku vyplní 100% velikost okna, ale jakmile se stránky rolují, menu při odrolování dolů zmizí kdesi v dáli nad obzorem. Lepší by bylo div, ve kterém je vlastní obsah (tedy třída "obsah2") udělat na výšku také sto procent, ale s řešením přetékání pomocí posuvníku (height:100%;overflow:scroll)
4.) hodilo by se spíše bezpatkové písmo
5.) vzhled je poněkud strohý, ale ve vašem případě stejně jaksi nevidím důvod ho oživovat ;-)

celkové hodnocení provedení: 89%
Nejdřív ke vzhledu - je opravdu jednoduchý. Chtělo by to odsadit obsah černé části od toho tlustého bílého okraje menu, dejme tomu o 15px. V Mozille při 800×600 text dokonce přeteče až do menu.
Asi by tomu i bodlo nějak víc sladit barvy...
Design tvých stránek by se dal snadno a čistě ozvláštnit nastavením nějakého méně obvyklého písma - třeba Georgia nebo Impact se jen tak nevidí a když tam nějak slušně nastavíš alternativní fonty (můžeš se inspirvat v Pixyho článcích o definicích písem), může to vypadat zajímavě.

Zdroják je jedním slovem nádherný. Probírat se něčím takovým je jedna radost :-) Přesto tu ale mám pár doporučení:
- Pomohlo by tomu víc metainformací (description, keywords, content-language).
- Máš to samou class, ale třeba obsah i nadpis by klidně mohly být id (na každé stránce jsou jenom jednou).
- Nemusí tam být 6x <a class="menu"... V CSS se to dá definovat jako .menu a , což značí všechny a uvnitř tvého divu s class="menu".
- V menu se to nemusí zalamovat pomocí <br />. Stačí těm odkazům nastavit display:block.
- <h2>CeBrkovy stránky</h2> - je to jediný nadpis na hlavní stránce. Proč to není <h1>?
- nastavovat font-size v px není úplně košer, protože IEčkaři si pak nemůžou v prohlížeči pořádně nastavit velikost písma, pokud jim ta tebou určená nevyhovuje. Vhodné jsou relativní jednotky (x-small, normal, large... nebo em nebo %).
- všechny barvy, které tam používáš, by se daly o tři znaky zkrátit. Třeba #00ff00 = #0f0, #888888 = #888.

Tohle všechno jsou ale maličkosti, kterých bych si u stránek, které tu běžně okukuju, asi vůbec nevšimla. Ten zdroják je na jedničku!
A líbí se mi obsah. :-)


ad 1.) Nípale, s tím doctype - ta stránka je validní podle XHTML 1.0 Strict :-)
ad 3.) Vyplňovat něco 100% výškou podle mě dneska už nemá smysl... Líbí se mi, když menu třeba plave nalevo bez pevné výšky a kde skončí, tam skončí. Dej mu volnost...
ad 5.) vzhled je strohý, ale zdroják, to je parádička. Takhle napsané by v ideálním případě měly být všechny malé webíky.
Freyo, menu plave sice krásně nalevo, ale že ti v takovém případě nevadí ta vysoká mezera pod posledním odkazem? ;-) (mám 1280x960) Když už má menu plavat nalevo, tak bez zbytečných mezer pod posledním odkazem.

Mně osobně by Georgia font vadil. Pravda, na tisk je hezčí než obyč. Times New Roman a často ho ve Wordu (ne se záměrem tvorby html, se rozumí, nejsem sebevrah ;-) používám. Na čtení z obrazovky je pro člověka PODSTATŇE čitelnější bezpatkové písmo (Verdana je asi nejpoužívanější - pak ještě v řadě za ním je Arial a sans-serif). A Impact? To bych byl sebevrah, Impact se dá číst jedině při velikosti 30px.

Jo zdroják je parádička, to je fakt. Však já nekritizoval <body>, ale jenom vzhled a <head>, na <body> není pomalu ani co kritizovat :)))
ad to polovoucí menu > neměla jsem na mysli přímo tenhle web. Ale když ti něco plave nalevo a zbytek obsahu ten prvek obtéká, tak tam žádná mezera vespod být nemusí.

A co se týče čitelnosti a vůbec vzhledu Impactu (s tím, že bezpatkové písmo je čitelnější než patkové, bez výhrad souhlasím), nějakou tu chvilku jsem se jím zabývala a zjistila jsem, že se dá výrazně zlepšit mírným zmenšením line-height. Chce si to prostě trochu pohrát. A vypadá to elegantněji...
ad obtékané menu: menu, které obtéká text... vypadá to zajímavě, ale mně by to rušilo při čtení textu, protože to se potom musím soustředit, kde končí menu, abych skočil opravdu na první písmenko v řádku pod menu. A navíc, ještě jsem se snad s tím na žádném profi webu nesetkal.

já Impact odepsal definitivně, nikde ho nepoužívám a navíc je pouze součástí MS Office, což je tedy stejně k ničemu, když prohlížitelem stránky nemusí být nutně uživatelem sady MS Office.
> menu, které obtéká text
Naopak. Menu, které je obtékáno textem. A když má div s menu řekněme modré pozadí a bílé písmo a u zbytku stránky (toho obtékajícího textu) je to naopak, nevidím v tom problém. Ale samozřejmě je to jenom jedno z mnoha a mnoha řešení.

k tomu Impactu v MS Opice: od toho tu máme alternativní písma. Arial/Helvetica/ Lucida/ sans-serif.
Což o to, stránky jsou hezké, pěkně a korektně napsané a rozhodně jejich vzhled nikoho neurazí, ale přijde mi to až trochu moc asketické. Co takhle nějaká grafika. Alespoň něco málo, nějaké logo a tak podobně. Určitě by pak stránky byly zajímavější a originálnější...
(Freyo, jsem češtinářský kulinář. ve spojení "menu, které obtéká text" je slůvko "které" ve čvrtém pádě rodu středního (což se často nevidí, lidi to totiž mate, tak se tomu obvykle pisatelé vyhýbají) ;)

hanyZ - grafika může být strohá - stačí zajímavý design. Chybí tu sice oboje, ale je to první vlaštovka ;-)
Nípal >> á, vidíš - moje chyba. Je to podobné jako "účel světí prostředky", vlastně by se to dalo vykládat jaksi oboustranně :-)
Nípal - No jasně, moje řeč. Já taky netvrdím, že mají být na stránkách stovky kilobytů obrázků. V jednoduchosti je krása..
TOTO JE ODSTRASUJICI PRIPAD WEBDESIGNU
Nípal
ad 1.) No, na stránkách Word Wide Web Consortium mají DOCTYPE až na druhém řádku jako já, takže to tak asi nechám :-)
ad 3.) V tom máš pravdu. Menu na "vyšších" stránkách odplouvá nahoru, ale řešení s overflowem se mi nějak esteticky nezamlouvá. Ideální by bylo nastavit menu místo absolute, fixed, což ovšem nepodporuje IE 6.0, takže to padá.
ad 4.) Hledání vhodného písma je zatím ve stádiu hledání :-).

Freya
- Máš pravdu, v Mozille zazahuje obsah do menu. To bude asi tou chybou IE při počítání rozměrů boxů. Trochu jsem si s tím pohrál a už to vypadá celkem dobře v IE 6.0 i v FireFoxu 0.8.
- Na webu "Jak psát web" sem se dočetl, že Google ignoruje keywords a protože Google je best, nemá snad ani cenu kvůli ostatním vyhledávačům něco měnit :-). Navíc jsem se někde doslechl (už nevím kde, ani zda-li to je pravda), že některé vyhledávače penalizují stránky, které mají klíčových slov příliš. Co když si jich tam dám jen tolik, aby to ještě nebylo penalizováno a oni ten počet následně sníží? To nebudu riskovat :-). Ostatní metainformace se mi nezdají natolik důležité aby přinutili mou legendární lenost k nějaké akci.
- 6x a class="menu" bylo odstraněno a nahrazeno .menu a
- 6x <br /> odstraněno a nahrazeno display: block
- <h2> nahrazeno <h1>
- Pixeloidní výška anihilována a nahrazeno procenty, aby slabozrací uživatelé IE nepřišli k úhoně :-).
- Šestimístní "názvy" barev jsem arogantně ponechal v nezkrácená formě :-).
- 100 procentní menu ponecháno, nemůžu si pomoci, ale zamlouvá se mi to víc, než menu volné.

hanyZ
Máš nepochybně pravdu, ale já nejsem grafik. Už při tvorbě úvodního loga jsem si sáhl na samé dno svých grafickým možností :-).

Petr S
Jestli můj web odstraší některé webdesignery a popostrčí je k vyšším výkonům, budu spokojený :-).

Abych nezapomněl na slušné vychování a hlavní důvod proč sem po tak dlouhé době píši. Děkuji všem, kteří mi zde pomahájí dobře míněnou radou. Je to do vás hezké :-).

Omlouvám se, že je tento příspěvek tak dlouhý, ale neměl jsem dost času ho napsat kratší :-).
CeBrk
v XHTML dokumente musi byt na prvom riadku deklaracia xml a az potom sa uvadza DOCTYPE, takze tento tvoj zapis je spravny.
Čau!
Celkem jednoduchý web, ale v jednoduchosti je síla - aspoň se to rychle zobrazuje a člověk tam něco najde, zatímco u jiných webu čeká než se stáhnou desítky kilobajtů obrázků atp.
Jen bych roztáhl modré menu na levé straně po celé stránce, zdá se mi to estetičtější...

Kéž bych CCS zvládal alespoň takhle i já - chystám se taky o nich něco nastudovat...

Jirka