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.
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
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.
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:
Skutečně responzivní
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í)
Jsou pro minimálně jeden redakční systém (WP, Joomla nebo webshopy jako
PrestaShop
Obsahují více stránek včetně formuláře, galerie a dalších
věcí
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.
To se lehko řekne . 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 (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í. 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 .
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.
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.
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ě"...
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.
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=device-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
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/skripty.
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.