Kritika webu https://fitkram.cz

HTML a CSS Kritika webů - ukažte se! https://fitkram.cz American English version English version

Jak se ti líbí web?
Celkové hodnocení (8 hlasů):
2.8752.8752.8752.8752.875
Přejít na web:
http://https://fitkram.cz
Avatar
Fitkrám.cz
Člen
Avatar
Fitkrám.cz:

Zdravíme celé osazenstvo,
rádi uvidíme jakékoliv návrhy, nápady a kritiku k našemu e-shopu Fitkrám.cz. (https://fitkram.cz)

Ve stručnosti po technické stránce: PHP (OOP), Memcache, Apache, MySQL, Dibi, Texy!, PHPMailer, Bootstrap, HSTS (HTTP Strict Transport Security (jsme na preload listu)), Bcrypt.

Díky za jakékoliv nápady, podněty a kritiku! :)

(Mimochodem, URL je: https://fitkram.cz -> zdejší systém nepodporuje https adresy.)

Editováno 11.6.2015 22:43
Odpovědět 11.6.2015 22:41
Měřit, měřit a měřit!
Avatar
Fitkrám.cz
Člen
Avatar
Odpovídá na Fitkrám.cz
Fitkrám.cz:

Mimochodem hodnocení hvězdičkou je sice super věc ale zlepšit se nám to příliš nepomůže. Pokud je to možné nebojte se do nás pustit.

Nahoru Odpovědět  +1 11.6.2015 22:51
Měřit, měřit a měřit!
Avatar
Inoue Yūki
Redaktor
Avatar
Odpovídá na Fitkrám.cz
Inoue Yūki:

Počkej si na poledne, něco ti k tomu napíšu. :)

Nahoru Odpovědět 12.6.2015 6:20
Avatar
Inoue Yūki
Redaktor
Avatar
Odpovídá na Fitkrám.cz
Inoue Yūki:

Občas si tu chvíli musíš počkat, častí přispěvatelé do Kritiky webů jsou zaneprázdnění, v mém případě spíše líní. :)

Web na mě působí odtažitě a neosobně, skoro jako by to byla pouze výchozí šablona v Bootstrapu (což věřím, že není). Používáte vzor F, což bych řekl, že je v tomto případě správně, nicméně košík v horní liště tu působí poněkud osaměle. Možná bych druhou část z postranního menu přesunul nahoru.

Občas na mě vybafne přespříliš syté písmo (červená, žlutá). Možná by bylo vhodnější vybírat barvy z předpřipravené palety barev. Postranní menu mě nemění kurzor, což ve výsledku vyvolává pocit, že se nejedná o odkaz.

Když fotíte produkty, je dobré si s fotografiemi trochu vyhrát, v tomto případě konkrétně s vyvážením bílé. Pokud s tím nemáte zkušenosti, pak například v Zoner Photo Studiu otevřete fotografii v záložce Editor, nástroj Rychlé úpravy a Ručním vyvážením si kapátkem vyberte oblast, která má být bílá.

Pokud jde o kód, deklarujete HTML5, ale nepoužíváte ho. Poohlédněte se po značkách, které by webu přispěly v konkrétnosti. Interní styly jsou většinou pomalejší, určitě by se to vešlo do původního externího stylu. Trochu mě mrzí JavaScript uprostřed souboru. Jinak to není nic příšerného.

Jinak chválím responzivitu stránky, to se tu často nevidí. :)

Vzhled: 6/10
Použitelnost: 8/10
Kód: 7/10

Celkem: 7/10 za 3 hvězdičky

Nahoru Odpovědět  +1 12.6.2015 10:20
Avatar
Fitkrám.cz
Člen
Avatar
Odpovídá na Inoue Yūki
Fitkrám.cz:

To je v pořádku, není kam spěchat. :)

  1. Nad přesunem některých informací z levého menu nahoru těsně pod lištu s logem a košíkem jsme přemýšleli ale nenašli jsme úplně vhodnou variantu ve které by to vypadalo dobře. Určitě se na to ale podíváme znovu.
  2. červenou máme u některých věcí vyzkoušenou jako účinnou. Oranžovo / žlutou z levého menu jsme ale dali pryč (ano, byla opravdu příšerná).
  3. Máme Mac s GIMPem (s fotografiemi opravdu méně než více zkušeností). Zkoušel jsem vše možné ale ve výsledku mi vyšla nejlepší fotografie originální tak jsem ji zachoval (hodláme nechat nafotiti profi fotky).
  4. Těmi značkami ke konkrétnosti jsou myšlena microdata? JavaScript uprostřed jsme přesunuli dolů a dali do externího souboru, styl přesunuli do CSS k ostatním.

Stále je pořád co zlepšovat ale každopádně vám děkuji za vaše rady a postřehy - velmi si jich cením.

Děkuji.

Nahoru Odpovědět 12.6.2015 10:58
Měřit, měřit a měřit!
Avatar
Inoue Yūki
Redaktor
Avatar
Odpovídá na Fitkrám.cz
Inoue Yūki:

1.) Určitě se na to podívejte. :) Jestli mohu poradit, můžete si vzít inspiraci z http://insurancebyjack.co.uk/ (tedy ohledně toho horního menu).

2.) Ano, červená skutečně je efektivní bráno z pohledu copywritera nebo ekonoma. K samotnému designu se to ale moc nehodí. Mno, přímo do očí to nebije. Existuje menší trik, který by vám mohl pomoct vybrat správný odstín červené.
Nejprve v GIMPu (když už ho tedy máte) kapátkem nastavte barvu na tu modrou, kterou aktuálně používáte na webu. Ponechte sytost (S) a jas (V/B) na stejných hodnotách a odstín (H) pomalu přesuňte do hodnot červené (model HSB/HSV).

3.) Nejlepší bude určitě fotky znovu nafotit (nejlépe do formátu RAW) na čistě bílém pozadí, se správnou expozicí, mírně nakloněný do úhlu vnikající na pravou stranu stránky, se značkou na kameru (v tom u vás není problém, jinak to ale vidím často). Nemusíte se bát to vyfotit na zeleném pozadí a softwarově jej poté odstřihnout. Tento efekt je také velmi účinný. Na ukázku se můžete podívat třeba na stránky Alzy.

4.) Těmi značkami jsem myslel spíše <section>, <aside>, <nav>, <figure> a tak podobně. Pomáhá to vyhledávačům například s porozumněním obsahu.

Mno, přeji hodně štěstí, ať se vám obchod vydaří. :)

Nahoru Odpovědět 12.6.2015 15:06
Avatar
Fitkrám.cz
Člen
Avatar
Odpovídá na Inoue Yūki
Fitkrám.cz:
  1. Aha, myslel jsem to trochu jinak ale tohle vypadá taky dobře. Otázkou je jestli tam pak ten košík bude dost viditelný.
  2. Vyzkouším, díky za tip.
  3. S fotkami ještě musíme opravdu popřemýšlet protože takhle nejsou úplně ideální a sám bych si je přál úplně jiné. Zelené pozadí by bylo ideální ale nevím jak jej udělat co nejlépe s běžným vybavením (možná nějaký obří zelený papír).
  4. Abych pravdu řekl nemám s těmito tagy příliš zkušeností, takže mám co zkoumat.

Díky za cenné rady :)

Nahoru Odpovědět 12.6.2015 15:23
Měřit, měřit a měřit!
Avatar
Inoue Yūki
Redaktor
Avatar
Odpovídá na Fitkrám.cz
Inoue Yūki:

Myslím, že nějaká A3 čtvrtka by úplně stačila. Odebrat pozadí lze potom třeba i v PowerPointu. Výsledný obraz pak lze srovnávat i s profesionálními snímky. Nicméně GIMP bude asi vhodnější. Potom pravé tlačítko, Color, Color to Alpha. Popřípadě v české lokaci Barva, Barva do průhledné. :)

Nahoru Odpovědět 12.6.2015 15:39
Avatar
Fitkrám.cz
Člen
Avatar
Odpovídá na Inoue Yūki
Fitkrám.cz:

No ono jsou ty doplňky právě některé docela obrovské takže A3 by podle mě úplně nestačila.

Nahoru Odpovědět 12.6.2015 15:41
Měřit, měřit a měřit!
Avatar
Inoue Yūki
Redaktor
Avatar
Odpovídá na Fitkrám.cz
Inoue Yūki:

Ta klíčovací pozadí jsou docela drahá (asi 1500 - 2000 Kč). Takže pokud do toho nechcete investovat, můžete zkusit nějaké zelené/modré/bílé povlečení. :D Možná ale bude potřeba nastavit vyšší ISO.

Editováno 12.6.2015 15:46
Nahoru Odpovědět 12.6.2015 15:45
Avatar
Fitkrám.cz
Člen
Avatar
Odpovídá na Inoue Yūki
Fitkrám.cz:

To asi dáme radši za to pozadí. Týdně stejně fotíme několik fotek jako dostáváme nové a nové zboží takže se to do budoucna rozhodně vyplatí.

Povlečení raději ne :D

Nahoru Odpovědět 12.6.2015 15:47
Měřit, měřit a měřit!
Avatar
Odpovídá na Fitkrám.cz
Filip Oborník (Oboras):

Mně tedy přijde naprosto zbytečné kupovat klíčovací pozadí, když ho potřebuješ jen na vyfocení malých produktů. Určitě postačí třeba barevná A3 nebo jak už bylo zmíněno, nějaká látka. Pak už je to jen o správném nasvícení. Účel to splní naprosto stejně ;)

Teď k webovkám:
Moc se v tvorbě webu zatím neorientuji, takže kód rozhodně řešit nebudu ;)
Jak jsem poprvé vstoupil na web, přišel mi takový moc jednoduchý. Ano, říká se, že v jednoduchosti je krása, ale ...

Rozhodně bych e-shopu vytvořil nějaké logo. Jednoduchý nápis "Fitkrám" moc neupoutá. Většina obchodů má logo, protože se s ním prezentují. Pokud vymyslíš nějaké pěkné a lehce zapamatovatelné, zákazníci si ho budou pamatovat a váš krám poznají i na "dálku". Možná bych zkusil vymyslet i nějaký slogan, ale to je vedlejší.

Vysvětlení funkce produktů (BCAA, Protein, ...) bych přemístil někam více na oči. Přeci jen, tam dole to není moc vidět. Ale budiž.

Jak již bylo zmíněno, postranní menu mění kurzor jen po najetí na text. To bych rozhodně změnil a nechal bych změnit kurzor ihned po najetí do pole ohraničujícího text.

Při otevření podrobností o šejkru, je tam, jako u ostatních výrobků, možnost zjistit nutriční hodnoty, dávkování a složení. To je přeci blbina. I když tam nic není, působí to přinejmenším divně :) Rozhodně bych to dal pryč.

Všechno tohle je můj neprofesionální názor, takže ho neber nějak moc vážně. Spíš jen jako takový podnět. Ale jinak se mi e-shop rozhodně líbí. Jako velké plus bych uvedl možnost kontaktovat vás přes červenou lištu vpravo dole. Je to mnohem lepší než hledat na webu kontakt a pak to ještě muset napsat ze svého emailu.

Tak přeji hodně spokojených zákazníků ;)

Editováno 12.6.2015 17:22
Nahoru Odpovědět  +1 12.6.2015 17:20
"Good judgment comes from experience, and a lot of that comes from bad judgment." Will Rogers
Avatar
Fitkrám.cz
Člen
Avatar
Odpovídá na Filip Oborník (Oboras)
Fitkrám.cz:

Věřte mi oni jsou často dost velké. Různé sedmikilové pytle a krabice už budou A3 klidně celou zakrývat.

U popisů funkcí produktů myslíte dole v popisu přímo u produktu? Pokud ano, tak chystáme úplně jiný způsob informování zákazníků o funkčnosti látek ve výrobku a jejich popisu.

Za informaci o vypisování dávkování, nutričních hodnot a podobných informací velice děkuji. Vůbec nám to při prvotním zadávání informací nedošlo - rozhodně u těchto produktů automatizovaně tato data odstraníme.

Díky moc za pozitivní příspěvek a další informace pro nás jak se zlepšit.

Ještě bych doplnil informaci, že e-shop je v provozu asi 30 dní. Za tu dobu už máme velké množství zákazníků a věřte nebo ne ale více jak 13 hodin denně se mu věnuji a opravuji právě drobné chyby ale dělám i další vylepšení - za každou radu či názor jsem tedy velice vděčný.

Děkuji mockrát.

Nahoru Odpovědět 12.6.2015 18:24
Měřit, měřit a měřit!
Avatar
Odpovídá na Fitkrám.cz
Filip Oborník (Oboras):

No tak pokud by ty produkty byly velké, dá se použít nějaká látka, ale do toho vám nechci a ani nebudu kecat ;)

No nemyslel jsem popis přímo konkrétního produktu, ale ten obecný (třeba k čemu jsou obecně proteiny dobré a tak). Je to super nápad tam dát popis, k čemu je obecně protein dobrý, ale zaniká to tam. Myslím si že by bylo lepší to přemístit někam nahoru. Přeci jen pro laika je to docela užitečná informace a takhle by ji mohl přehlédnout.

A to, že se věnujete e-shopu 13 hodin denně vám věřím. Provozovat e-shop a ještě k tomu si ho sám napsat není žádná sranda. Klobouk dolů.

Tak ještě jednou přeji mnoho štěstí :)

Nahoru Odpovědět 12.6.2015 18:49
"Good judgment comes from experience, and a lot of that comes from bad judgment." Will Rogers
Avatar
BlugW
Redaktor
Avatar
BlugW:

Jako obyčejný návštěvník bych řekl že je vše ok.
Na hlavní stránce je vše co potřebují: vyhledávání, přehledné menu, klientská zóna, řazení a seznam zboží.

Popis zboží obsahuje taky vše co by mě zajímalo.
Checkout stránka je taky přívětivá, hlavě pěkně vypsaný seznám výběrných míst s fotkami a pracovní dobou.

Jako vývojář bych se mohl přilepit k tomu že design je moc prostý, a trochu táhne na basic bootstrap.

Pak třeba k tomu že po načtení stránky se mi asi za 1s změní font(ale to je asi jenom u mně, i když jen na této stránce).

Pak hlavně k tomu že u popisu produktu, po klikání na tlačítka(nutriční hodnota, dávkování, složení, ...), se obsah zobrazí hodně dole, takže napoprvé jsem myslel že tlačítka nefunguje, než jsem to proscrolloval.

K čemu je vlastně ta lupa po najeti na obrázek? Myslím že je zbytečná v tomto případě. Ale samozřejmě ničemu nevadí.

Editováno 12.6.2015 20:15
Nahoru Odpovědět 12.6.2015 20:13
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
tomasmanhal
Člen
Avatar
tomasmanhal:

Mě tedy jako obyčejnému návštěvníkovi po příchodu chybí něco, co by mě oslovilo, popostrčilo k nákupu. Je to zkrátka takové nevýrazné. Hlavním cílem obchodu je přece upoutat, "vnutit" produkt, provést jednoduše výběrem, doporučením, nákupem. Klidně bych menu udělal menší, skromnější a ušetřené místo bych předal větším a poutavějším obrázkům.

Vlevo dole je tabulka "Proč nakoupit u nás" a je nevýrazná a snadno přehlédnutelná a přitom tam jsou bonusy pro návštěvníka ty nejdůležitější a potažmo i pro Vás :-)

Na titulní straně bych se vůbec nebál udělat netradiční rozložení produktů, slogany, akční nabídky. Zkrátka aby to už napohled křičelo na návštěvníka "kup si mě a bude Ti fajn". Například první tři hlavní a pod nimi další menší. Zkrátka přimět nenásilně návštěvníka k tomu kliknutí na produkt a tam poté na objednávku :-)

Celé by to mělo být předmětem testování. Vytvořit více designů landing page a vždy pozorovat a porovnávat (třeba v měsíčním intervalu), která konvertuje nejlépe :-)

Nebojte se hledat inspiraci u jiných eshopů, hlavně těch velkých, které do takových testování vkládají obrovské peníze a tak je výhoda, když umožňují inspiraci pro ostatní, začínající. Právě ty velké eshopy kladou důraz na co největší konverzní poměry a přitáhnutí pozornosti. Ale svou roli hraje i marketing :-)

Editováno 12.6.2015 20:34
Nahoru Odpovědět  +1 12.6.2015 20:32
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Fitkrám.cz
Člen
Avatar
Odpovídá na Filip Oborník (Oboras)
Fitkrám.cz:

Díky - má to ovšem jednu výhodu. Na rozdíl od konkurence dokážu mnohem rychleji reagovat a implementovat další funkčnost - napíšu si to sám.

Nahoru Odpovědět 12.6.2015 21:13
Měřit, měřit a měřit!
Avatar
Fitkrám.cz
Člen
Avatar
Odpovídá na BlugW
Fitkrám.cz:

Font je způsobený tím že jej pro rychlejší načtení načítáme JavaScriptem až později po načtení celé stránky (aby se nezdržovalo). Při běžném načítání to je sice ihned ale zdržuje to načítání celého webu (je to font od Google).

Zkoušel jsem najít nějaký problém u toho rozklikávání dávkování, parametrů, hodnocení atp ale nic jsem nenašel. Mohu vás požádat o informaci jaký prohlížeč na jakém systému se jedná a případně nejlépe screenshot?

Díky za reakci! :)

Editováno 12.6.2015 21:17
Nahoru Odpovědět 12.6.2015 21:16
Měřit, měřit a měřit!
Avatar
Fitkrám.cz
Člen
Avatar
Odpovídá na tomasmanhal
Fitkrám.cz:

Díky za nápady.

Vše postupně zkoušíme a testujeme různé varianty rozmístění a obsahu. Takže určitě i na něco podobného dojde.

Díky.

Nahoru Odpovědět 12.6.2015 21:19
Měřit, měřit a měřit!
Avatar
BlugW
Redaktor
Avatar
Odpovídá na Fitkrám.cz
BlugW:

Screen je z Chrome, ale v IE to je stejný.
Stejně tak i na mobilu(Windows Phone)

Nahoru Odpovědět 12.6.2015 21:56
Pořiď si mac na www.appletrh.cz. Novinky a zajímavosti ze světa Apple na https://www.applemagazin.eu
Avatar
Fitkrám.cz
Člen
Avatar
Odpovídá na BlugW
Fitkrám.cz:

Díky, způsobil jsem to při opravě jiných věcí.

Už by to mělo být v pořádku.

Nahoru Odpovědět 13.6.2015 8:23
Měřit, měřit a měřit!
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 21 zpráv z 21.