Avatar
Michal Doubek (HAPPY DAY):

Ahoj

Tohle je moje "víkendová" práce s cílem se trochu procvičit a možná hodit i na obchod s šablonami. Proto se chci taky zeptat, jestli je http://themeforest.net/ dobrý obchod. Pokud vím je šablona plně responzivní a to i na mobilech a tabletech. Validátor nic nehlásil a funguje i v IE.

Předem dík

Odpovědět 2.6.2014 21:50
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Vojtěch Mašek (Woyta):

Plně responzivní si teda představuju trochu jinak...

Nahoru Odpovědět 2.6.2014 23:02
Výraz "to nejde" není v mém slovníku
Avatar
Odpovídá na Vojtěch Mašek (Woyta)
Michal Doubek (HAPPY DAY):

jestli je tam chyba tak mi pošli screen nebo to nějak popiš. tohle je moc abstraktní :)

Nahoru Odpovědět 3.6.2014 5:31
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Michal Žůrek (misaz):

Je tam velký okraj na úkor obsahu a děsné menu.

Nahoru Odpovědět 3.6.2014 6:58
Nesnáším {}, proto se jim vyhýbám.
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Jiří Gracík:

Dělal jsem šablonu asi 3x rozsáhlejší, plně responsivní, nastavitelnou v mnoha ohledech, několik barevných verzí a napsali mi: We could not take your template, we see no potencional sale value, sorry.

Takže tady bych to viděl asi podobně. Ale jestli ti to někde vemou, tak sem pak hoď adresu, nahraju tam svoje výtvory :D

Nahoru Odpovědět 3.6.2014 7:09
Creating websites is awesome till you see the result in another browser ...
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Michal Doubek (HAPPY DAY):

to máš na mobilu? mě to na Iphonu funguje úplně normálně

Nahoru Odpovědět 3.6.2014 10:18
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Samuel Illo
Redaktor
Avatar
Samuel Illo :

Na mobie to vyzerá hrozne. Text je len úzky stĺpcek v strede obrazovky a neviem ako iným ale mne pri scrollovani akosi blbo vykresľuje obsah. Inde mi to nerobí takže by som tipoval na chybu šablóny.

Nahoru Odpovědět 3.6.2014 10:25
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Odpovídá na Samuel Illo
Michal Doubek (HAPPY DAY):

to se asi vykreslovalo pozadí. jinak co se týče obsahu a menu mě to fakt jede, ale to je možná i prohlížečem.

Nahoru Odpovědět 3.6.2014 10:41
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Odpovídá na Jiří Gracík
Michal Doubek (HAPPY DAY):

Nevím kde jsi to chtěl prodávát, ale třeba na templatemonster.com jsou responzivní šablony průměrně tak za $100. já bych to nabízel tak za $5 :D

Nahoru Odpovědět  +1 3.6.2014 12:00
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Jiří Gracík:

Tak to zas takový rozdíl není, já jí nabízel za 10$. Ale tvoje ani moje šablony nemají vůbec žádnou hodnotu - když se podíváme na ty zmíněné šablony na templatemonster­.com, tak jsou:

  1. Skutečně responzivní
  2. Mají skvělý design cílený na určité kategorie a odvětví, často několik variant (barevných i tematických, různá rozložení)
  3. Jsou pro minimálně jeden redakční systém (WP, Joomla nebo webshopy jako PrestaShop
  4. Obsahují více stránek včetně formuláře, galerie a dalších věcí
Editováno 3.6.2014 12:06
Nahoru Odpovědět 3.6.2014 12:06
Creating websites is awesome till you see the result in another browser ...
Avatar
Nahoru Odpovědět 3.6.2014 12:09
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Jiří Gracík
Redaktor
Avatar
Nahoru Odpovědět 3.6.2014 12:12
Creating websites is awesome till you see the result in another browser ...
Avatar
Nahoru Odpovědět 3.6.2014 12:16
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Jiří Gracík:

Bavíme se o tvém výtvoru nebo nabízené šabloně :D?

Nahoru Odpovědět  +1 3.6.2014 13:06
Creating websites is awesome till you see the result in another browser ...
Avatar
Odpovídá na Jiří Gracík
Michal Doubek (HAPPY DAY):

o výtvoru, klidně to řekni rovnou, neurazím se

Nahoru Odpovědět 3.6.2014 13:09
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Michal Doubek (HAPPY DAY):

přesněji řečeno chápu že s několika členným týmem s grafikem s 10 letými zkušenostmi a týdenním vývojem se nemůžu rovnat :)

Editováno 3.6.2014 13:13
Nahoru Odpovědět 3.6.2014 13:11
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Jiří Gracík:

Já se nesnažím smést tvojí šablonu, ale ušetřit ti práci, kterou jsem do toho už zbytečně dal já ;)

Nahoru Odpovědět 3.6.2014 13:18
Creating websites is awesome till you see the result in another browser ...
Avatar
Odpovídá na Jiří Gracík
Michal Doubek (HAPPY DAY):

tím myslíš že si dal práci do snahy vytvořit prodejnou šablonu. Mě nejde ani tak o to to prodat. Já zoufale potřebuju REÁLNÉ reference. Poslední 2 roky jsem dělal hlavně GIGA projekty na kterých jsem se hodně naučil, ale h**** udělal. A to že bych to prodal je spíš takový úrok nebo tak něco.

Nahoru Odpovědět 3.6.2014 13:28
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Jiří Gracík:

Tak začni dělat weby známým a kamarádům, tohle nebude nic moc reference

Nahoru Odpovědět 3.6.2014 13:58
Creating websites is awesome till you see the result in another browser ...
Avatar
Odpovídá na Jiří Gracík
Michal Doubek (HAPPY DAY):

To se lehko řekne :D. U táty mam rozjetej web a 2 měsíce čekám na obsah. máma se zblázní z každýho pixelu (to má ověřený brácha, který jí dělal web). ve třídě nás je 6 z toho 3 holky. těm web vážně dělat nebudu, protože ty stovky fotek denně co by na to dali to by schodilo server :D (ještě že facebook to ustojí). kluci by zase rozjeli stránky old school hry kde se platí houbičkami a obsahuje předměty věčného zasunutí :D. Jo ještě jedna perla. Jedna známá si objednala předělávku šablony kterou měla na websnadno a z ňákýho důvodu jí nešli přidat do menu položky. jenže z websnadno nezkopíruješ obsah takže sem to musel ručně opisovat :D.

PS: nemyslíš že ty šablony jsou přeci jen lepší :D

Nahoru Odpovědět 3.6.2014 14:29
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Honza Bittner:

Trochu ti to zkritizuji:

  1. Šablona je ošklivá, nedrží se trendů - jako pozadí určitě nedávej obrázek, dej tam jednu barvu, písmo je až moc kontrastní, zkus trochu ho zmírnit ;)
  2. Určitě není responzivní, to znamená trochu něco jiného. Je to elastické, ale například menu je zabugované (http://prntscr.com/3p95bm).
  3. Drobnosti jako JS animace etc. opravdu chybí, kor pokud jí chceš prodat.
  4. CSS v HTML souboru, vážně?
  5. Obrázky styluj v CSS. To samé s patičkou webu, všechno styluj v CSS souboru, nemíchej HTML a CSS.
Nahoru Odpovědět 3.6.2014 15:06
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Michal Doubek (HAPPY DAY):

bod 3, 4, a 5 jsem právě dodělal takže je to tam. To CSS bylo jenom provizorní teď jsem to oddělil.

k bodu 2. nevím proč vám to nefunguje mě to jede úplně všude kde jsem to zkoušel naprosto v pořádku.

k bodu 1. zkusím něco namíchat a dám vědět

jinak dík že jsme se konečně dostali od bugů k samotné podobě.
byl bych rád jestli by jsi zhodnotil i samotné HTML

Nahoru Odpovědět 3.6.2014 15:25
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Nahoru Odpovědět 3.6.2014 15:28
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Samuel Illo :

to s tou extrémne pomalou animáciou v menu snáď nemyslíš vážne :D

Nahoru Odpovědět 3.6.2014 15:29
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Odpovídá na Samuel Illo
Michal Doubek (HAPPY DAY):

sorry já upravil jenom -webkit- :D už by to mělo jít

Nahoru Odpovědět  +1 3.6.2014 15:53
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Honza Bittner:

Nastav a-čku v menu display: inline-block a přestyluj ho, pak to půjde ;)

Nahoru Odpovědět 3.6.2014 16:56
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Honza Bittner
Michal Doubek (HAPPY DAY):

a co font-size? má být v procentech nebo v em/rem

Nahoru Odpovědět 3.6.2014 17:00
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Jiří Gracík
Redaktor
Avatar
Nahoru Odpovědět 3.6.2014 17:09
Creating websites is awesome till you see the result in another browser ...
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Samuel Illo :

To je skoro jedno či % alebo em. Závažnejšia je šírka tela - nedávaj to v % lebo na mobile je to fakt príšerné, musíš myslieť na menšie zariadenia. Daj mu napr.:
max-width: 900px; a bude po probléme alebo sa pohraj s media queries, kde to spravíš lepšie.

Nahoru Odpovědět 3.6.2014 17:10
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
Odpovídá na Honza Bittner
Michal Doubek (HAPPY DAY):

Jiří Gracík
Samuel Illo

Pokud nebude mít mobil na šířku 100px mělo by to jít :D pomocí @media jsem upravil i obsah. tak můžete testovat.

Nahoru Odpovědět 3.6.2014 18:13
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Michal Vašíček
Tým ITnetwork
Avatar
Michal Vašíček:

https://www.dropbox.com/…07.02.18.png
Ty okraje u obsahu asi nebyly v plánu, že? To je jen zmenšené okno na desktopu... na mobilu jsem ještě nezkoušel.

Editováno 4.6.2014 7:03
Nahoru Odpovědět 4.6.2014 7:02
Příspěvek může obsahovat stopy arašídů, sarkasmu a sóji.
Avatar
Odpovídá na Michal Vašíček
Michal Doubek (HAPPY DAY):

myslíš odsazení po stranách? to samozřejmě v plánu je :)

Nahoru Odpovědět 4.6.2014 7:41
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Michal Štěpánek:

Jen takový dotaz:
Proč není menu vidět stále, ale po kliknutí mi zůstává na vrchu stránky, takže se schová? Po výběru položky už si nemůžu vybrat nic jiného a musím rolovat buď na začátek stránky na menu, nebo prohlížet stránku "ručně"...

Nahoru Odpovědět 4.6.2014 8:40
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
Odpovídá na Michal Štěpánek
Michal Doubek (HAPPY DAY):

protože není fixní. kdyby bylo a ty si kliknul na odkaz, nadpis by byl zakrytý. a hlavně ta stránka není tak velká, aby to nějak vadilo

Editováno 4.6.2014 12:33
Nahoru Odpovědět 4.6.2014 12:32
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Michal Štěpánek:

No abych pravdu řekl, docela mě při prohlížení stránky vadí, když si můžu vybrat jen poprvé a pak musím hledat menu, nebo jen rolovat...
Pak to menu tam nemusí být vůbec.

Nahoru Odpovědět 4.6.2014 12:38
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
Odpovídá na Michal Štěpánek
Michal Doubek (HAPPY DAY):

hotovo :)

PS: padding s marginem dokážou zázraky ;)

Editováno 4.6.2014 12:53
Nahoru Odpovědět 4.6.2014 12:53
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
jopop1
Člen
Avatar
jopop1:

Estetícká část obsahu

  • nebál bych se použití lehce světlejší barvy na text, jelikož oči jsou pak mnohem šťastnější a esteticky to vypadá lépe
  • barvy jsou dobře vybrány vzhledem k obrázkům
  • ačkoliv to jde s trendy, celkově je to dost plytké, chybí zde nějaké další prvky jako třeba icony, úvodní obrázek, nebo nějaký podobný prvek, který by nebyl jen text
  • white-space si použil docela dobře, možná by nevadilo trošku větší line-height na text a seznam
  • text ve footeru bych zmenšil, což je detail, ale každopádně bych přidal např. nějaké social icony nebo nějaké vedlešjí informace, protože teď je to až moc prázdné. Co bych ale přidal určitě je scroll-to-top, jelikož na takovém jednostránkovém webu se to dnes už skoro vyžaduje a další plus je vyplnění přebývajícího prázdného prostoru (pozor však, aby ho zase nebylo málo, prázdný prostor je s fontem nejdůležitějším prvkem designu)
  • pro ukázku je dobré vždy přidat do textu nějaký link (možná to mají být ta tučná slova, nevím), klidně bych ten link držel v té vínové barvě a poměru s menu taky s nějakým color transitionem

Kódová část

  • chtělo by to nějaký fallback pro html5 tagy na stará ie i ostatní browsery
  • pojmenovat stylesheet "index.css" není zrovna nejšťasnější
  • obrázky jsou ve zbytečně velkém rozlišení, a mohli by se zkomprimovat
  • chybí mi zde důležitý meta tag pro respozivitu - <meta name="viewport" content="width=de­vice-width, initial-scale=1">

    ○ taky nějaký favicon

  • ačkoliv je web malý, styly by mohly být minifikovány, což je věc velice důležitá, pokud se webům chceš věnovat, je dobré si to zažít a dělat to softwarově automaticky, podobně jako konverzi z preprocesorového stylu na normální styl.
  • vyvaroval ybch se používání selektoru id, ikdyž je to teda věc jakou metodiku upřednostňuješ
  • u img tagů ti chybí "alt", a taky pro rychlejší najíždění stránky, je dobré upřesnit tzv. image dimensions, což je jednoduše udání width a height v html u tagu
  • nerozumím z jakého důvodu jsi pro :hover u navigace použil animaci s keyframes, když to celé jde lehce udělat přes transition, který je: zaprvé podporován o řád staršími browsery a zadruhé je to mnohem jednodušší. I kdyby si chtěl použít animation, tak stějně musíš definovat více vendor prefixů a to hlavně pro mozillu, operu a webkit, který tam máš jediný
  • u footeru nerozumím důvod použití position: absolutem to je přece relativní část
  • fonty máš psány stylem jako by je každý browser znal, to není nutně pravda, vždycky je nutné fallbacknout apoň Arial a sans-serif

Responzivita

  • nepoužíval bych jako hlavní jednotku %, nýbrž em (ještě lépe rem), nebudu zde rozepisovat všechny důvody, článků je na internetu hodně, už ted je můj příspěvek dost dlouhý. Jen řeknu, že definovat width, font-size a line-height v % je celkem v pohodě, ale používat ho na margin a padding je celkem hardcore, nehledě na to, že používáš chvíly %, chvíly ems a někdy dokonce rems, což je věc kterou by si měl držet pro celý dokument stějnou! To je celkem důležité.

(Doporučil bych použití knihovny Remixins, v případě, že děláč v LESSu, v SASSu nevím)

  • teď k navigaci, udělej následující: spusť prohlížeč a pravým spusť nástroje pro vývojáře nebo page inspector (podle ptolhížeče), pak si zvětšuj height okna inspectoru, na navigaci můžeš vidět jak se děformuje a zmenšuje, to je způsobeno použitím max-height v procentech. Height obecně, ale hlavně height u fixního menu se nenastavuje v %, vždy v em nebo rem (popř. px) (když už si v tom page inspectoru zkuš si ty procenta změnit na 5em)

Estetická část responizivity

  • toto mi přijde jako docela velký problém webu

    ○ za prvé - mít tak velký white-space horizontáln kolem contentu je hloupost, při nižších resoluitionech to nevypadá pěkně a nedělá se to. To vystředění mainu mě úplně zaráží, nastavit si margin na left na nějakou hodnotu rozhodně není dobrý způsob, doporučil bych nějaký wrapper s margin: 0 auto (popř. padding: calc(50% - px), což je zajímavá věc koho by to zajímalo, ale zatím to není moc dobře podporováno),

    ○ za druhé - media-queries máš málo podchycené těch resolutionů je třeba rozhodně více

    ○ za třetí - tabulka dělaná přes <table> a responzivita nejsou moc dobří přátelé, lepší se jí vyhnout nebo pracovat s divy a display: table, kde je zase problém s podporou vendorů

Doufám že ti to pomůže. Po zvážení alespoň některých věcí by to bylo možné někde prodávat, ale nemyslím si že podobně prázdnou věc by někdo chtěl, chtělo by ot na designu zapracovat, už si se dostal docela daleko, takže v tom pokračuj

 
Nahoru Odpovědět 4.6.2014 18:07
Avatar
Odpovídá na jopop1
Michal Doubek (HAPPY DAY):

Ahoj promiň, že odpovídám tak pozdě, ale mám spoustu práce, takže jsem se k tomu dostal až teď. trochu jsem si s tím vyhrál tak se můžeš podívat

Nahoru Odpovědět 14.6.2014 7:13
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Jakub Vaněk (Bubavanek):

Ahoj, když sjedu úplně dolů, tak se mi část šipky back to top, schová za zápatí.

 
Nahoru Odpovědět 14.6.2014 12:43
Avatar
Old Account
Člen
Avatar
Old Account:

Mam uz skusenost s themeforestom, aj CodeCanyonom, a mozem ti povedat ze toto ti tam na 100% rejectnu - mne uz zamietly omnoho lepsie sablony/temy/skrip­ty.

Nahoru Odpovědět 14.6.2014 12:58
"If you keep your eye on the profit, you’re going to skimp on the product. But if you focus on making really gre...
Avatar
Jakub "Jacob" Sycha:

Moc responsivní to teda není... Resp. Nemáš to retina-ready, tudíž na mém SG Note3 se to zobrazí jako web pro desktop...

 
Nahoru Odpovědět 6.7.2014 12:39
Avatar
vajkuba1234
Člen
Avatar
vajkuba1234:

V menu, mezi jednotlivymi odkazy, mas mezeru, coz si myslim, ze nechces...

Nahoru Odpovědět 6.7.2014 19:05
No hope, no future, JUST WAR! For world peace Israel must be DESTROYED!
Avatar
Matyáš Rec
Člen
Avatar
Matyáš Rec:

To menu se mi moc nelíbí jsou to pouze obyčejné odkazy a šablona je taková divná díky zvoleným barvám

Nahoru Odpovědět 6.7.2014 20:09
Na čem pracuješ precizně se ti povede
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 43 zpráv z 43.