Názor na testovací stránku Japajp*

JaPaJP:
Pri zmene rozlíšenia sa ti rozpadá layout a v päte máš zle poradie slov. Za symbolom © má nasledovať meno držiteľa autorských práv. Copyright © je niečo ako Copyright copyright. Stačí to druhé. Dizajn stránky je jednoduchý, celkom nenápadný a často používaný. I keď nijako neohúril, celkom sa mi páči.

Kód je dosť zložitý na to, o akú jednoduchú stránku ide. Určite by šiel zjednodušiť a znížiť počet zbytočných divov a tried.

Vymenujem niekoľko zbytočných prvkov:
– <div id="obal-venkovní"> - úplne zbytočný, vyhodiť;
– <div id="prouzek"> - takisto;
– <div class="leve-menu"> - nahradil by som nadpisom <h3> alebo spanom;
– <div class="pravy-box"> a <div class="pravy-panel"> sa dajú definovať jednou triedou;

Definované CSS, ale treba vhodne premiestniť.

Zbytočné CSS deklarácie:
#obal-vnitrni {background-repeat: repeat-y} - žiadne obrázkove pozadie sa tam nenachádza;
#logo-banner {width: 980px} - blokové prvky, ktorý <div> je, sa sami roztiahnu na celú šírku;
#paticka {clear: both} - nepotrebné, clearuje prvok <div class="nadcarou">

Toto sú iba prvé postrehy a zbytočné CSS deklarácie sú spomenuté skôr okrajovo, keďže žiadne vážne problémy netvoria.

Väčším problémom by mohlo byť vysporiadanie sa s utekajúcim pravým panelom. Pravdepodobne bude potrebné preskladať štruktúru kódu zo súčasnej:

... na:

Budeš teda môcť namiesto súčasného stavu, kde každému prvku nastavuješ float: left nechať stred neplávajúci. Nastavíš iba margin-left a margin-right o šírke panelov na kraji (a medzery). Pri skúške mi to vyšlo na okrúhlych 200px zľava i sprava. Po takejto úprave by mala stránka lepšie držať formu. Určite existuje aj riešenie, ktoré vyžaduje menšiu úpravu kódu, takto by som to ale urobil ja sám.

Tomáš123:
odkázanou stránku jsem moc podrobně nezkoumal, nicméně nevidím důvod, proč při třísloupcovém rozvržení (které je časté a standardní), panely peskládávat tak, jak radíš. Je to zbytečné. Navíc, většina stránek je má poskládáno stejně jako tazatel/ka, a je to i logické uspořádání. A že ušetřím jeden float? I kdyby, ničemu to nevadí. Naopak, místo jednoho floatu budu deklarovat dva marginy :-)

anonymníí:
So všetkými dôvodmi proti súhlasím, ale v tomto prípade v kóde nevidím chybu. Neviem, ako to upraviť tak, aby sa to neposúvalo. Celá táto kauza mi je od začiatku nejasná. Keď som skúšal experimentovať so správaním stĺpcov a postavil to tak, aby sa súčet vnútorných rozmerov rovnal tomu vonkajšiemu, stále sa to po oddialení rozbilo. Keď som ale prehádzal vonkajšie alebo vnútorné okraje, už to zase išlo. Teda dôvod, prečo som neposkytol inú radu je ten, že aj keby sa mi podarilo stabilizovať polohy a napísal by som se riešenie, nebolo by všeobecné a pri iných rozmeroch by nefungovalo. Radšej som teda napísal o overenom spôsobe s poznámkou, že by som to takto urobil ja. Rád sa nechám poučiť...

JaPaJP:
„ja jsem to včera zkoušel v ruznych webovych prohližeču a nic jsem neviděl“
Lebo som kritizoval staršiu verziu...

Tomáš123:
„– <div class="leve-menu"> - nahradil by som nadpisom <h3> alebo spanom;“
To není dobrý nápad. Při náhradě spanem by z něj stejně musel dělat blokový prvek nebo by bylo nutné celý obsah nadřazeného prvku zarovnávat na střed a tuto deklaraci u seznamu odkazů přebíjet, což by mi přišlo dost nesystémové. Nehledě na to, že nadpis patří do horizontálního členění textu, kterému by <div> odpovídal lépe než <span>.
Náhrada nadpisem je lepší návrh. Ale není třeba začínat až od třetí úrovně, když na stránce žádný jiný nadpis není.

„zbytočné CSS deklarácie sú spomenuté skôr okrajovo, keďže žiadne vážne problémy netvoria.“
Nezpůsobují ani nevážné problémy.

„Pravdepodobne bude potrebné preskladať štruktúru kódu zo súčasnej:“
Zbytečně by si to tím zkomplikoval. V pravém sloupci jsou dva prvky, musel by je sloučit. A nic by tím nezískal.

JaPaJP:
1) Největší problém ve vzhledu tvého webu vidím to, že používáš světlé písmo na tmavém pozadí. Takovou kombinaci si šetři třeba na plakáty, ale nedávej ji na web, který mají lidé číst.

2) Zbytečně opakuješ třídy, přestože je v css možné cílit i na HTML značky. Místo opakujícího se:

Můžeš použít jednodušší:
Ve stylopisu pak použiješ:
Výhodou tohoto řešení je, že kromě toho, že máš jednodušší HTML, si nemusíš pamatovat tolik různých tříd. Stačí ti pohled do stylopisu a hned vidíš, jak jsou prvky v HTML zanořeny. Když se ke složitému kódu vrátíš po roce nebo třeba po třech, dávno nebudeš vědět, co která třída označuje, a budeš to muset lovit vývojářskými nástroji.

3) Někteří lidé budou čekat, že po kliknutí na obrázek v záhlaví se dostanou na úvodní stránku nebo že se tato obnoví, pokud je právě zobrazená.

Jinak to bude chytat i odkazy v textu.

To je asi pravda. Chybně jsem předpokládal, že se jedná o úryvky ze článků. V nich není moc žádoucí odkazy zobrazovat. U některých z těch boxíků ale nejsou odkazy na článek, takže se zřejmě nejedná o seznam perexů. V tomto případě bych ale použil třídu. Po nahlédnutí do stylu po delší době bych si určitě nepamatoval, proč tam vlastně ten symbol přímého potomka je. Vhodně zvolený název třídy by mi napověděl víc. Dobrý postřeh.

JaPaJP:
Přepínám mezi "starou" a "novou" verzí webu jak divý, ale kromě odskočení obrázků žádný rozdíl nevidím. Má tam nějaký být?

Jan Kozák:
„Nezpůsobují ani nevážné problémy.“
Niekedy nerozumiem účelu takýchto viet...

„V pravém sloupci jsou dva prvky, musel by je sloučit. A nic by tím nezískal.“
Tie stĺpce by som zlúčil (obalil) tak či tak.

anonymníí:
Stĺpce sú stabilné.

Tomáš123:
> „Nezpůsobují ani nevážné problémy.“
> Niekedy nerozumiem účelu takýchto viet...
Zmínil jsi, že přebytečné deklarace v CSS nezpůsobují vážné problémy. Doplňuji, že jimi nemohou vzniknout ani malé potíže. Tři styly navíc nezpůsobí nepřehlednost zápisu při vývoji webu.
Představa, že zbytečně navyšují objem stažených dat, je irelevantní. Externí stylopisy se kešují. Ze správně nastaveného serveru je prohlížeč stahuje třeba jednou za měsíc. Investuješ spoustu času do dohledávání nevyužitých zápisů ve stylech, ale prakticky nic za to nezískáš. Web by muselo navštívit 15 000 návštěvníků, abys díky této optimalizaci ušetřil jediný MB stažených dat. Jenomže těchto 15 tisíc uživatelů ti ze stránek stáhne třeba 100 000 MB dat, protože tam máš obrázky, texty, občas nějaký soubor ke stažení atd. Aby optimalizace měla smysl, měl bys jí ušetřit alespoň procento. Ne tisícinu procenta.
Před každou prací je nutné si stanovit priority. Udělat přednostně to, co je důležité. U webu je všechno podstatnější než tři zbloudilé zápisy v CSS. Profesionální kodér by se jejich odstraňování nevěnoval, protože mu je jasné, že by takovou činnost nikdo nezaplatil. Pokud by někde takové zápisy problémy v zátěži způsobovaly, jejich vyhledávání a odstraňování je práce pro automat, nikoliv pro člověka.

1. stránka je IMO najlepšia, pomáha jej tá ďalšia farba, nie je to tak fádne. Pridal by som ale padding v menu, aby boli tie tlačítka 'vzdušnejšie'. Plus, sa mi akosi nevidí tá kombinácia farby textu a pozadia. Biela svieti a text je tmavý, no nie čierny. Zrušil by som ten bold.

JaPaJP:
Proč je na první stránce v záhlaví modrá, když web je černočervený? To mi přijde jako nesmyslná kombinace.

U zbylých dvou verzí mi vadí zubaté "logo", pokud to logem lze nazývat. A vysoká hlavička, která je prázdná.

Celkově bych se ale zkusil poohlédnout po něčem více "trendy". Působí to na mě celé, nehledě na barvičky, jako bychom se zasekli v čase.

JaPaJP:
1. Zvýš riadkovanie textu (line-height) na hodnotu okolo 1.40.

2. Obrázky sa načítavajú príšerne dlho. Zmenši ich na takú veľkosť, v akej ich reálne použiješ na stránke. Obrázok o veľkosti 600 × 450 pixelov je zbytočný, keď ho prehliadač beztak musí zmenšiť na 135 × 98.

3. Je overené, že kontrast (takmer) 100% biela na 100% čiernej (prípadne naopak) príliš unavuje oko, ty navyše obe verzie kombinuješ v rýchlom slede. Čierny nechaj len text, na ostatné bloky použi inú farbu. Navyše to nebude vyzerať ako parte.

4. Meta tag keywords je dlhé roky zastaraný a vyhľadávače na neho neberú ohľad, odstráň ho.

5. Namiesto <header> použi klasický <div>, staré Explorery (8 a nižšie) ho nepoznajú, preto ho nebudú vedieť naštylovať. Iste, ide len o pár percent, ale v tomto prípade je aj 98,5% zbytočne málo.

Vypadá to jak nějaký lepší drátový model webu. Kdy nasadíš design? Proč je to samý obdélník v obdélníku vedle obdélníku? Proč nevyrovnáš hezky odsazení? Některé prvky vyloženě tahají za oči, jak jsou křivě opticky umístěné... Není moc co hodnotit.

JaPaJP:
Myslím, že je čas prejsť z testovacej verzie do ostrej. Až tam zisíš, kde sú ďalšie nedostatky. Momentálne mi celkom vadí, že položky v hornom menu sú hneď vedľa seba a pri hoveri sa zlejú dokopy. Tiež nie sú vertikálne v strede (ani pri hoveri). Japajp je zľava zarovnané na úroveň, ktorú nemá žiadny iný prvok na stránke. Prečo to nedáš do jednej línie s obsahom? Nadpisom som zväčšil písmo na 1.2em a padding na 8px 12px a celkom sa mi to páčilo. Neviem, aká hodnota je najoptimálnejšia a či je dobré, že majú nadpisy modré pozadie. Tam lepšie poradí Taurus. Ale myslím, že v celku to vôbec nie je zlé a web pôsobí celkom ucelene. Pre „Zobrazit více“ by sa hodil väčší padding a možno aj menšie písmo.

Vysoký kontrast dost unavuje oči. Hodně střídáš bílou černou.

goodui.org/#23
goodui.org/#63

V zásadě mám stejný názor jako před rokem. Je to takové nijaké, tuctové, nedotažené.

JaPaJP:
Souhlasím s Taurusem, ještě bych dodal, že se mi na notebooku rozpadá menu img.djpw.cz/lie.png