Nazor na design webu - hudobný projekt

Reaguji na dPod:
Osobně mám rád jednoduché weby, které nejsou náročné na hloupé JS animace, které jsou mnohdy zbytečné a přeplácané.

• Stránka je barevně rozvržená na černou a bílou. Chválím i za černobílé obrázky.
• Aby nebyl web moc smutný a morbidní rozveselil jsi ho růžovou, která tomu dodá ten správný šmrnc.
• Stránka s kontaktem je nepřehledná a chtělo by ji znovu formátovat, aby se tam každý vyznal.
• U stránky se stažením je to podobné. Proč tam nedáš k názvu a malému popisku výrazné tlačítko "Stáhnout"?
• Web není upraven pro mobilní prohlížení. To je dnes u velkého procenta mobilních uživatelů velké minus.
• Oživíš svůj web ikonkou?

Rady velkého hnidopicha

(Jsou to rady, které nejsou nutné, ale z mého hlediska si je neodpustím.)
• Proč máš na hlavní stránce pomalu více HTML komentářů jak samotného textu? To nepoužíváš PHP pro include menu a podobně?
• Možná by se šiklo maskovat při odkazu adresu credits.html na credits. Je to sice maličkost, ale vzhledově to přidává.

Edit: Opraveno "kontem" za "kontaktem"

Reaguji na dPod:
Není proč děkovat. :-)

• Překlep, byla myšlená stránka s kontaktem. V [#2] příspěvku jsem to opravil.
• S mobilním vzhledem to není složité. Stačí se naučit ovládat jen jedinou věc v CSS a bude to lítat. Doporučuji tuto část článku. Článek je ale dobrý celý.
• Ovládat základ PHP na tomto projektu zatím není nutné, ale mít desítky stránek a poté chtít na všech upravit jen písmeno dost naštve.

Sitole:
„• Proč máš na hlavní stránce pomalu více HTML komentářů jak samotného textu?“
Jaké komentáře myslíš? Jestli HTML komentáře, čemu jejich počet vadí?

„To nepoužíváš PHP pro include menu a podobně?“
Proč by měl/neměl používat PHP? A vůbec, podle čeho jsi poznal, zda includuje či nikoliv?

„Možná by se šiklo maskovat při odkazu adresu credits.html na credits.“
Proč?

„Je to sice maličkost, ale vzhledově to přidává.“
Co přidává? Jediné, co to přidává je, že to ubírá 5 znaků z URL. Jinak nic.

„mít desítky stránek a poté chtít na všech upravit jen písmeno dost naštve.“
Ať žije hromadné nahrazení v souborech.

dPod:
- proč je stránka slovensky, ale má anglické menu? Je to více cool?
- bílý text se na černém pozadí blbě čte, obzvláště je-li takhle malinký
- šedý text v patičce už je za hranou čitelnosti, byť v něm nic zajímavého není

Reaguji na anonymníí:
To s anglickou a slovenskou verzí je zajímavé a jsem zvědav na rozuzlení.
• Ty komentáře jsou velice podobné systému, který tam vkládá různé soubory přímo u tvůrce, jako například FrontPage.
• Ničemu komentáře nevadí, ale mají pomoci koderům vyznat se v kodu, ale zde to spíše znepřehledňují.
• Je to prostě krásnější. Osobně jsem se setkal s uživateli, kteří při odkazování například na FB mazali .php a .html jako spousta lidí maže ?action=1 a podobně.
• Hromadné upravování je sice krásná věc, ale přece jen není lepší to udělat globálně pomocí PHP?

Reaguji na dPod:
Font je malý a špatně se čte. Sice to vzbuzuje minimalismus, ale musíš dát i na čtenáře, kterým se to čte špatně.

- chybí favicon
- logo není klikací - mělo by fungovat jako odkaz na úvodní stránku
- používáš odkazy na www.arwenthalion.sk/index.html. Odkazuj na www.arwenthalion.sk, takhle si škodíš.
- ruší mě ta dvojjazyčnost. Jestli chceš mít web ve dvou jazycích, umožni jejich přepínáná, ale nemixuj je do sebe.
- v logu je text "dPod" (nebo "dPad") špatně čitelný.

Muzika nezní špatně. Hned v první skladbě je slyšet ta inspirace jak Rudessem, tak Jarrem :)

dPod:
Web nenadchne, ale ani neurazí. Som rád, že si stavil na jednoduchý, ale decentný dizajn bez prekombinovaných prvkov. Výsledkom je solídne použiteľná stránka.

1. Web by som oživil faviconkou.

2. Na slovenskej stránke mi titulok s Meno autora Official Site trošku trhá oči, lepšie mi znie spojenie oficiálna stránka.

3. Podobné tvrdenie platí aj o pätičke štylizovanej do angličtiny.

4. Logo v hlavičke by rozhodne malo byť klikacie.

5. Pochválim zvýraznenie aktívnej položke v menu, pekný hover efekt i vhodne zvolené riadkovanie písma.

6. Samotné texty by ešte zniesli písmo o nejaký ten pixel-dva väčšie.

7. S novými HTML 5 elementmi (header, nav, footer…) ešte radšej opatrne, staršie Explorery (8 a nižšie) ich bez pridaného JS nevedia naštýlovať.

8. Na notebooku mám na pravej strane monitoru pomerne veľa voľného miesta, skúsil by som sa trošku pohrať so šírkou stránky.

dPod:
„chcem sa este spytat - oplati sa pouzivat Google fonty?“

Môj názor je — v protiklade k väčšine — záporný. Zrejme za tým väzí fakt, že nespadám do kategórie, ktorá by sa dala označiť ako typický užívateľ, možno istým zrakovým hendikepom brániacim mi vychutnať si pôžitok z pekného neopozerane pôsobiaceho fontu…

Zmeny hodnotím kladne s jedinou výnimkou. Logo webu momentálne takmer splýva s čiernym pozadím, vyskúšal by som o dva chlpy svetlejšie písmo.

dPod:
„lebo pekny font je zaklad“
Nevím, zda je to pravda, ale prý 90 % návštěvníků si web prohlíží a 10 % návštěvníků web čte, ale myslím si, že to bude záležet i za založení webu. Já patřím mezi čtenáře, chci čitelný web, tedy čitelné písmo se vším všudy, tedy diakritika, vhodné písmo a dostatečný kontrast. A to žádný zrakový handicap nemám.

„neviem, ci to obsahuje nejake rizika pri tvorbe a naslednom prezerani...“
Stačí nespoléhat se na to, že se externí písmo načte a že se některým uživatelům web zobrazí jiným fontem.

Ještě dodám, v případě Google písem odpadají právní a bezpečnostní rizika.

Doplním estetickou odpověď. Nedovedu si dnes moc představit pěkný web se základními fonty (Verdana, Tahoma, Arial, Comic, Trebuchet). Ač teda je pravda, že Verdana je pořád pěkná, tak staré fonty nejsou řezově ani tolik zajímavé. Samozřejmě čest výjimkám, pořád se najde plno webů, kde ty fonty mají své místo, ale...

Je ale teda fakt, že nepoužívám Google, ale písma ukládám přímo na web, takže neodpovídám přímo na otázku.

dPod:
„lebo pekny font je zaklad, len neviem, ci to obsahuje nejake rizika pri tvorbe a naslednom prezerani...“

1) Font nebude rovnako vyzerať naprieč rôznymi platformami. Každý OS a browser renderuje fonty po svojom.

2) Je užitočné si nastaviť správny font stack - ideálne zložený z web-safe fontov ktoré sú typovo čo najbližšie ku custom fontu ktorý chceš primárne používať. Ak sa na nejakej platforme tvoj custom font z určitého dôvodu nenačíta, browser použije web-safe font ktorý funguje ako fallback a to v poradí ako si ich definoval vo font-family. Font stack potom ešte ukončíš generic skupinou do ktorej tvoj font patrí - to pre prípad, že na danej platforme nie je nainštalovaný žiaden web-safe font ktorý si k fallback použitiu definoval. V tom prípade sa vyberie iný font, ten ktorý má systém nainštalovaný a patrí do generic skupiny ktorú si zadefinoval na konci font-family.

Pri vlastných fontoch si treba dať ešte pozor aby sada obsahovala aj znaky s diakritikou. Ak neobsahuje, pre písmeno s diakritikou sa zobrazí font, ktorý si definoval ako fallback.

Reaguji na dPoda:
section ani další HTML 5 elementy nelze v IE 8 a starších stylovat. Když ale už, tak tu druhou variantu.

dPod:
Záleží na tobě. Některé projekty vyžadují i jakous takous podporu IE6, kterou mnozí považovali za mrtvou i v době, kdy jsi o internetu ještě neslyšel, nebo alespoň neuvažoval o tom, že budeš někdy něco tvořit.

Něco na starších prohlížečích můžeš oželet a spokojit se s tím, že to tam bude fungovat, byť třeba trochu jinak a i jinak vypadat. Ale zatracovat někoho jen kvůli použití section, proč? Vždy je to i delší na psaní, než div a žádnou výhodu to nepřináší. V tomto konkrétním kusu kódu dokonce ten wrapper možná ani potřebovat nebudeš.

dPod:
„Co sa obrazkov na web tyka (napriklad logo, alebo ikonky socialnych sieti), co je lepsie? Mat ten obrazok ulozeny v takej velkosti, v akej sa to zobrazuje, alebo ho mat vacsi a zmensovat ho na aktualnu velkost priamo v html kode?“

Jednoznačne prvá možnosť. Načo plytvať dátami, keď aj tak v druhom prípade nevykreslíš všetky pixely?

„Co pozeram niektore weby, tak maju vacsinou rovnaku velkost ulozeneho obrazka, ako sa aj zobrazuje, ale nerobi to potom zlobu pri pripadnom zvacsovani stranky?“

Mne nikdy, hoci zväčšujem všetko a výrazne.

Reaguji na dPoda:
„Co sa obrazkov na web tyka (napriklad logo, alebo ikonky socialnych sieti), co je lepsie? Mat ten obrazok ulozeny v takej velkosti, v akej sa to zobrazuje, alebo ho mat vacsi a zmensovat ho na aktualnu velkost priamo v html kode?“
Záleží. Cílíš i na mobily (tzn. máš responzivní design nebo mobilní verzi?; na web jsem nekoukal)? Pokud ano, bylo by dobré mít obrázky uložené asi dvakrát tak velké, než má být jejich výsledná velikost, aby se pak na mobilech s jemnými displeji zobrazily krásně ostré. Ještě se sluší doplnit, že úplně nejlepší by bylo použít tip Petra Soukupa.