Stránky hospůdky ukladiva.cz

Flay:
Tak tomu říkám dobře odvedená práce. Je tam pár nedostatků, které uvádím níže, ale které by mě od návštěvy rozhodně neodradily:

1. Obrázkovým nadpisům (konkrétně tagům Hn) přidej overflow:hidden, aby ti při zvětšení písma nevyplul jejich text z poza obrázku. Mimochodem proč máš onen prázdný komentář mezi spany?
2. Při zvětšení písma ti otevírací doba přeteče úplně až k oddělovací čáře. Podobný problém je s oblíbenými jídly, které jsou ve fixním tácu a při zvětšení z něj vypadávají. Udělej ho vertikálně natahovací.
3. V jídelním lístku ti při zvětšení písma skočí jednotka od hodnoty na druhý řádek (100 na jednom řádku a gramy na druhém). Dej mezi to tvrdou mezeru a levému sloupci tabulky nenastavuj šířku, on si jí dopočítá podle dvou pravých a šířky tabulky.
4. Podobný problém je s nápojovým lístkem, tak se to naopak slévá do sebe.
5. U fotek bych se asi nebál Lightboxu, Slimboxu nebo jiných vychytávek.
6. V kontaktu ti při zvětšování písma ujíždí sloupeček s mapkou doprava (a následně se zalamuje pod kontakt).
7. Do patičky bych dal celý kontakt, dle mě s místem není problém: Martin Kladiva, pankladiva@seznam.cz, +420 604 412 549
8. Názvy stránek (souborů) doporučuji psát malými písmeny. Asi bych měl problém dostat se na Fotogalerii a následně na jidListek.

Ještě dvě připomínky:

9. Mrkni na http://latrine.dgx.cz/experiment-s-maskovanim-e-mailu-pred-roboty
10. Trochu marketingového tahu na konec: Do hlavičky dej nějaké pozitivnější fotky, možná jedu zevnitř a jednu zvenčí. Takto to vypadá, že tam nikdo nechodí. :-)

Aj mě se to líbí, jen hlavička je docela slabá. Mrkni na nějaké moderní stránky hospod / vinných sklípků, protože hlavička dělá hodně. Hodilo by se, kdyby byla celá tmavá jako je menu. Myslím celý horiz. pruh nahoře. Jídelní a nápojový lístek by chtěl vyladit - zarovnání, nadpis (u jednoho není). IE ti nezvládá přístupné menu a je vůbec celé posunuté. Dobrá by byla tisková verze.

Flay:
Prohlížím si tak web a říkám si "Co se to se mnou stalo?", nenacházím nic co bych mohl vytknout, opravdu se mi tahle práce líbí :).

Reaguji na Flaye:
V Exploreru 7 ti nefunguje správně překrývání nadpisů obrázky, protože <span>ům nenuluješ left.
Proč dáváš do těch <span>ů prázdné komentáře? (Prosím o rozumné zdůvodnění z vlastní hlavy.)

Flay:
Pokud fotky na stránku, tak od profesionála! Fotky jsou také částí firemního image a nekvalitní napovídají nekvalitní firmě.
Ale ty na Vašem webu nejsou až tak špatné.

Flay:
Ten tutoriál tady byl nesčetně krát rozebíraný. Obsahuje hromadu nezmyslů a blbostí. Výsledek výskumu byl takový, že normální prohlížeče si poradí s prázdnými tagy. Zastaralé a orientální prohlížeče, co nepodporují prázdné tagy se dají obejít tvrdou mezerou  

sarojan:
Ovšem nutno podotknout, že tvrdá mezera se projeví ve všech výstupech. A to tam, kde nemá co dělat (typografie ji tam nevyžaduje). Navíc to v některých případech může vypadat špatně a dělat neplechu při kopírování (na řádku je jenom tvrdá mezera apod.).

Reaguji na Flaye:
„někde jsem zaslechl, že by neměl být žádný prvek prázdný“
Příště trochu zapoj kritické myšlení a pátrej po důvodech. Pokud důvodům neporozumíš, pátrej dál. Pokud nikde nic rozumného nenajdeš, přehodnoť důvěryhodnost původního zdroje.

Podívám-li se na HTML kód:

1) Né, že by na tom nějak zvlášť záleželo, ale -//W3C//DTD HTML 4.01 Strict//EN neexistuje. Slůvko „Strict“ se u HTML 4.01 Strict neuvádí.
2) Tabulka s oblíbenými jídly je skupina odstavců se složitě nastylovanými <span>y. Proč to není tabulka?
3) Totéž celý jídelní lístek. Vlastně i všechny nápojové lístky. Odstavec by měl vyjadřovat víceméně ucelenou myšlenku, což „25,- 1 ks Párek“ nesplňuje.
4) Kontaktní údaje bych vyjádřil raději definičním seznamem než (opět) odstavcem.
5) Adresa hospůdky patří do <address> spíš než do <span>u.

Podívám-li se na kompatibilitu a CSS:

6) Používáš zbytečně Explorerem 6 nepodporovaný alfakanál (průsvitnost) u PNG obrázků — prakticky vždy víš, co pod nimi bude, takže můžeš vrstvy sloučit už v grafickém editoru a nenechávat to na prohlížeči.
7) <div> s oblíbenými jídly zkoušíš odsouvat od horního textu marginem na nadpisu <h2>, který je uvnitř něj, což je jednak trochu nelogické (kdyby tam nadpis nebyl, neměla by být jídla odsunutá?) a jednak to nefunguje v Explorerech 6 a 7, kde se neodsune celý <div> od textu, ale jen nadpis od horní hrany <div>u.
8) Tentýž <div> má nastavenou fixní výšku 298px. Kdo si zvětší písmo v prohlížeči, tomu texty vyjedou. Obsahovým blokům bys neměl nikdy nastavovat pevnou výšku, z principu by měly být pružné.
9) Nastavuješ velikost písma v jednotkách pt, čímž znemožňuješ uživatelům Exploreru zvětšit písmo. Používej k určení font-size procenta či klíčová slova. Velikost pt je navíc (tuším) závislá na nastavení DPI v systému.
10) Až opravíš velikosti písma, změň i line-height na něco relativního ze stávajících pixelů.
11) V Explorerech 6 a 7 se nezmění kurzor na ručičku při přijetí přes menu či logo. Nastav překrývajícím <span>ům cursor: hand.
12) V Exploreru 6 vypadá pár věcí jinak (třeba Novinky) zejména kvůli zdvojenému marginu. Všemu, co floatuješ doleva/doprava a odsazuješ marginem doleva/doprava nastav display: inline — zruší to zdvojení bez vedlejších efektů, protože plovoucí prvky jsou vždy blokové.
13) Proč posouváš některé elementy relativním pozicováním? Většinou je to zbytečné (ve tvém případě zvládne všechno margin) a často si tím začínající kodéři zadělávají na pozdější problémy, protože zapomínají, že posunutý element zabírá místo na své původní pozici.
14) Stylopis by šel zestručnit, kdybys deklarace stejných vlastností sdružil dohromady. Mnohokrát opakuješ stejné deklarace u překrytí nadpisů obrázky — všem <span>ům ve všech nadpisech můžeš naráz nastavit display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100% a pak těm konkrétním jen dospecifikovat obrázek.
15) Patička je nastylovaná zvláštně — kontakt dostáváš doprava několikasetpixelovým paddingem. Nešlo by to chytřeji? U kontaktu je zarovnání sloupce s mapou doprava také podivné.
16) Chválím nepřítomnost jakýchkoliv hacků.

Podívám-li se na přehlednost a použitelnost:

17) U jídelního lístku je v patičce uveden mobil 123 456 789, což je sice lépe zapamatovatelné, než číslo uváděné na ostatních stránkách, ovšem zřejmě i hůře dovolatelné.
18) Sjednoť line-height. Výška řádku u úvodního odstavce (cca 1.5) mi připadá lepší než výchozí výšky u všech ostatních víceřádkových textů. Zejména ten brambůrkový text v jídelním lístku vypadá dost nahuštěně.
19) Proč začínají „Buráky, Tyčinky, Tyčky, Křupky, Pistácie, Sušenky, Čokolády, Žvýkačky“ velkým písmenem? A „světlá tlačenka“ nad nimi malým? Takhle podezřele zapsaná jídla si jistě žádný typograf nikdy neobjedná :-)
20) Odkazy v levém menu nápojového lístku nejsou podtržené. Je to sice menu, ale vypadá dost obyčejně, podtržení by určitě části lidí pomohlo v orientaci.
21) Menu nápojových lístků začíná o kousek výš než obsahový sloupec. Možná je to úmysl, ale vypadá to jako chyba.
22) Ve fotogalerii se mi nelíbí nadpis „Sled. sport. přenosů“. Vypadá podivně, když si někdo dá práci s obrázkovým nadpisem, ale nenajde si pár sekund na rozepsání zkracovaných slov.
23) U kontaktů by mohla být větší mapa a možná i nějaké další povídání o tom, k čemu jde kontakt použít. Nyní ta stránka nemá vůbec žádnou přidanou hodnotu oproti úvodní stránce, je tam tentýž telefon, tentýž e-mail, tatáž mapa.
24) „Pro zvětšení klikni na mapku“ — to je jediná tykací věta na jinak vykacím webu. Mimochodem, nechceš ji přeformulovat z té anglické češtiny do české češtiny? (Viz článek na Intervalu, část „Ještě jedno varování“.)
25) Stránky Nápojový lístek a Rozlévaná vína (v nápojovém lístku) jsou záměrně stejné?
26) Text v úvodním odstavci na hlavní straně není dobře napsaný (suchá konstatování, větám chybí přísudky), spíš by pasoval do odrážkového seznamu.

Jinak už (podobně jako kolega mckay v [#5]) nenacházím nic, co bych mohl vytknout.

Flay:
(1) Podívej se ještě na telefonní číslo v patičce stránky Rozlévaná vína.
(2) Proč je telefonní číslo u jídelního lístku (604 412 459) jiné než u lístku nápojového (604 412 549)?
(3) Chamurappiho poznámka číslo 17 se dá vztáhnout i na stránku Fotogalerie.
(4) Proč světlá tlačenka na jídelním lístku začíná oproti ostatním malým počátečním písmenem?
(5) U novinek na titulní stránce bych doplnil, že se v případě noticky 23. 5. 2010 Mistrovství světa 2010 Přijďte si zafandit ve finále MS 2010 jedná o mistrovství světa v ledním hokeji. S ohledem na právě probíhající světový šampionát ve fotbale je Tebou uváděný údaj poměrně zavádějící.