Buď tady mají všichni 18 nebo už trpí silnou senilitou. Je poměrně módní tady nadávat na kvalitu UI současných webů, ale já si ještě moc dobře pamatuji to množství webů s lopatami, závorami, blikajícími texty, šílenými barvami a fonty. Nemyslím si, že by se kvalita designu webů nějak zásadně zlepšila, ale rozhodně se nezhoršila. Díky různým UX frameworkům se spíš zunifikovala, ale ty nejhorší excesy díky tomu vymizely.
Pro ilustraci ukázka typického tehdejšího designu: http://www.dpgraph.com/
Uff, už jsem chtěl psát příspěvek, ale naštěstí tady asi nejsem jediný pamětník. I když já bych vypíchnul spíš dobu "flešovou" (kdy skutečně polovina "webů" byl jen flash a nic jiného) a pak dobu "fotošopovou", kdy celý "web" byla jedna jediná bitmapa (rozsekaná na kousky pomocí <table>, ale jen z technických důvodů). Možná bych vynechal weby "xaktivní", kdy "web" byla prostě nativní windows aplikace distribuovaný přes ActiveX. To bylo naštěstí vždy mimo korporátní intranety jen doménou malé skupinky úchylů.
Prostě: ten trend (tlak) je pořád stejný, není to nic skutečně moderního. Moderní jsou jenom způsoby, jak uživatele zhnusit.
10x méně dat? Proboha, na čem si ho prohlížíte? Myslel jsem, že dial-up už je dávno historií. I když jasně, pokud používáte jako své hlavní připojení EDGE s minimálním signálem... Metrika je jedna věc a smysluplnost té metriky věc druhá. Měřit mohu v podstatě cokoliv. Třeba rychlost letu auta nebo elektrické lokomotivy. Pak mi jasně vyplyne, že by nikdo neměl jezdit vlakem nebo autem.
Možná vás to překvapí, ale množství stažených dat nezáleží na druhu připojení, takže moc nechápu, proč to zmiňujete.
V článku jsou 10MB weby, vzhledem k tomu, že drtivá většina populace nemá ani 10Mbit, tak ty weby se načítají 10s a více. Možná vám přijde normální, že se vám při návštěvě webu spustí desetisekundový cirkus, mě ne. Mobilní FUP protočíte po pěti takových stránkách denně, to mi taky nepřijde v pořádku (jasně, můžem argumentovat blbym tarifem, ale i to by měly weby zohledňovat).
Ktery web tam ma 10MB ?:-) Zkousel jsem nahodne 3, nikdy vsechny resources (ktere ale nejsou ani potreba okamzite, ale nacitaji se postupne - pokud jsou napr. na dalsich strankach) mely max 2-3 MB a kolem 50 requestu. Nacteni cca 1-2s. Zkusil jsem i treba Google Inbox se zapnutnym throttlingem na 1.5mbit, vypnutou cache a uvodni page se nacetla behem 1.2 vteriny (a pak donacetl zbytek). V tomhle ohledu jsou ty ukazkove stranky udelany velmi dobre, funguji i pri castecnem nacteni a pomalejsi lince.
Takze naprosto v pohode. Jestli nebude spis problem v tvem prijimaci (treba outdated HW / browser).
Kdybys víc klikal a míň psal, tak to najdeš:
http://compliments.dk/ 7.7MB
https://www.pumperlgsund-bio.de/de/ 10.5 MB
https://designmodo.com/qards/ 5.7MB
https://designmodo.com/slides/ 7.2MB
http://www.anonymoushamburger.com/ 11.8MB
https://zerofinancial.com/ 8.9MB
http://hellomonday.com/home se pouze pohybem mysi a jednim kliknutim na jakesi tri tecky dostala na 22MB
Ovšem naprostá chuťovka je http://www.ortizleon.es/ tam se lze dostat na 80MB po pár kliknutích.
Je až k nevíře, jak rychle o sobě dokážeš ukázat jaký jsi diletant a ignorant. Velký weby nenajdeš, o obrázcích meleš aniž by ses na to podíval.
Takže opět krutá realita: vzal jsem obrázek
http://www.ortizleon.es/wp-content/uploads/2016/06/05_alt.jpg
tento má 1920x1400, v originále 2MB, pouhým přeuložením se to zmenší na 380kB aniž by došlo k pozorovatelné ztrátě kvality. Znamená to, že ten web lze zmenšit na pětinu (o desítky mega) operací, která zabere 30s. Na mobilním netu už to může být zásadní rozdíl. Závěr si udělá každý sám.
Tahle diskuse je uplne mimo - clanek (a ty ukazky pro nej) autor psal jako ukazky DESIGNU, nikoliv konkretni optimalizace HTML/CSS/JS, takze diskuse nad tim, jak maji velky obrazek je zcela mimo misu.
A za tim, ze ten web je hezky, si stojim. Ze by se dal optimalizovat? Jo, to celkem urcite, staci se podivat trochu dovnitr - je to postavene na nejakem WP a podle toho tam nektere veci dost vypadaji. Ale to je uplne jina diskuse nez design...
A jinak teda pri tom zmenseni, schvalne jsem to v Photoshopu zmensil, bez pozorovatelne ztraty kvality to neni (nebo ses slepej), ale me osobne by to na podkladovou fotku naprosto stacilo. Zrejme dusledek, ze si to sami adminuji v WP bych si tak tipnul.. Ale to uz tak holt chodi a vzdy chodilo, jeste pamatuji jak nekteri experti davali BMP obrazky na web, to byla taky chutovka :-D
Sorry jako, ale to teda není mimo. Cituji z článku: "...stávající trendy formují a posouvají směrem k lepšímu UX", a pokud se bavíme o UX, tak nutně musíme hledět i na to, jak rychle se načte na běžnym netu. Já prostě nemůžu ocenit designový skvost, kterému trvá věčnost než se zobrazí, který nejdřív zabliká pěti progressbarama než něco zobrazí a v důsledku nemůžu ocenit ani takový, který vysosne měsíční tarif během pár minut. I to by mělo přeneseně patřit do UX. Prostě design který nefunguje je špatný design (vždy si vzpomenu na cool stříšku nad vchodem do našich kanclů, ovšem ve tvaru V, takže lidi dostanou za deště slušnej zásah :-) ).
A je jedno jestli to hnije hned navrchu nebo pod tím. Designer se musí zajímat o výrobu a musí rozumět alespoň základům, jak ověřit, že to nezmrvili. Vždyť je pod tím podepsán...
Mimochodem - na některém z těch webů je animace načítání dělaná jednotlivými obrázky a většinu času trvalo načíst těch 100 obrázků, to je prostě zážitek k popukání.
> bez pozorovatelne ztraty kvality to neni
myslel jsem pro návštěvníka webu, že si prostě nevšimne, že je to zmáčklý víc...
Hele, sorry, ale to je jako rict jako reakci na clanek o malirstvi, ze o Monu Lisu se rozhodne zajimat nebudes, protoze je v moc velkym JPG a stahuje se ti dlouho :-D
Cely clanek je o webdesignu, ukazuje jednolive weby jako priklad designove hezkych webu, nikde nerika, ze takhle presne se technicky ty weby maji delat (na spoustu veci tam ani nemame dost informaci).
A zrovna tohle konkretne neni absolutne pripad spatneho UX, to je priklad spatne implementace. Stejne tak ty animace, to jsem videl, neni to idealni (i kdyz me se to nacetlo na mobilnim netu teda svizne a ty obrazky se prubezne donacitaly pri scrollovani a po zobrazeni hlavni stranky). Treba ty animace by se pravdepodobne daly mnohem lepe vyresit pomoci PNG a CSS spritu, i kdyz tezko rict, je to takovej lehce neresitelnej problem, pokud to chteli vizualne opravdu presne takhle.
Ne, to je jako rict, ze kdyz je clanek o malirstvi, s prihlednutim ke krajinam a portretum (tedy "uzitemu" malirstvi, nikoli umeni pro umeni samotne), tak se nebudes zabyvat obrazy, ktere jsou namalovane jako kdyby malir drzel stetec poprve v ruce. Pokud ma byt neco funkcni, tak musi ten kdo to tvori dobre ovladat zakladni techniky, aby mohl delat umeni.
Tak zrovna uvedené aspekty byly kritizované i tenkrát, tohle rozhodně nebyl běžný styl všech webů (a navíc si to někteří uvědomili a web změnili). Normální weby vypadaly ... normálně. Prostý text, tabulkový design (což je výtka), ale informace byla poměrně rychle dostupná.
Dnešní kritizované aspekty jsou sice jiné, než tehdy, ale pořád si kritiku zaslouží.
Nevím proč bych se měl na webu dívat na loading.... 96% animaci. Jako proč to tam je? Web má být strukturovaný tak, že když budu na 1kbps lince, tak se mi postupně načte vše od toho nejdůležitějšího (což je většinou ten prostý text s tou informací, kterou hledám) a za hodinu se mi možná načte logo - které tam fakt nepotřebuju a na této lince bude grafika pravděpodobně vypnutá.
V ukázkovém webu designmodo.com se mi obsah ani nezobrazil a první informace, ke které jsem doscrolloval byla buy now. Sorry, nekoupím, protože nevím co.
Čím dál tím více webů dnes již vypadá jako jedna interaktivní animace/video/hra.
Ano a na takový single page web se hrozně dobře dávají odkazy. Dřív stačilo dát url a ten kdo si to otevřel byl hned na konkrétní stránce s konkrétní informací. Single page je prostě single, odkaz neplní svou roli, takže je potom nutné popisovat, jak se k dané informaci dostat.
Možností, kde font pořídit a služeb, které fonty poskytují pro užití na internetu, je mnoho.
Je nutno počítat s tím, že ne všichni webový font mají zapnutý a také by bylo vhodné jej servírovat ze serveru daného webu. Při nedávném výpadku google polovina webů (z těch do vůbec jela), vypadala jinak až k nepoznání, protože fonty Google byly nedostupné (a to zejména různé fonty symbolů, pomocí kterých byla na weby udělána navigace). Takže zbytečně nevytvářet single point of failure a závislost na třetí straně. Taky nehledě na tracking ze strany google (aneb vypnete si facebook a g+ tlačítka a reklamy, to nevadí, stejně vás sledujeme pomocí google fonts).
A ještě poznámku na konec. Aktuálně sedím na 8Mbps lince (průměr v ČR je údajně 12Mbit) a drtivá většina ukázkových webů se nenačetla do 10s (což je luxusní čas pro obyč. web stránku). Kolik trpělivosti má člověk mít s těmito weby? Dlouho se načítají, informace se nedá najít, nelze na ním dát odkaz, musí se scrollovat apod. Děkuji, nechci.
Ono hlavne v dobe tech blikajicich webu to blikalo ... presne stejnym frikulinum, ktery tam dneska rvou tuny js. Web je proste (x)html. To samo o sobe musi na normalne udelanym webu poskytnout veskerou potrebnou funcionalitu. Pokud to tak je, tak stim webem navic nema problem slepej se svejma cteckama, ani vyhledavace a dalsi. Vedle toho ma bejt minimalisticky css, ktery by v optimalnim pripade melo resit treba to, ze to nekdo chce vytisknout ... a js je bonus, nadstavba, zlepseni funcionality, bez ktery to ale vpohode musi chodit.
Dneska se to ale dela opacne, udela se polonefunckni az uplne nefunkcni js srackomet, stahuje to 50+ js z 30+ webu s velikosti klidne v desitkach MB (vse samo s nocache ) ... a pak se (za dalsi hromadu penez) dela ... SEO ... kde se defakto vedle toho srackometu vyrabi aspon castecne pouzitelny ... html.
Ano a na takový single page web se hrozně dobře dávají odkazy. Dřív stačilo dát url a ten kdo si to otevřel byl hned na konkrétní stránce s konkrétní informací. Single page je prostě single, odkaz neplní svou roli, takže je potom nutné popisovat, jak se k dané informaci dostat.
Lez jak vrata. Uz 6 (nebo je to uz 7?) let stary Angular umel url pomoci hashu. To si stezujte na konkretni stranky a ne SPA. Stejne tak to byva rozbite i bez SPA - proste je na servru vazane k session (napr. vysledky vehledavani, kosik atp.).
Je nutno počítat s tím, že ne všichni webový font mají zapnutý a také by bylo vhodné jej servírovat ze serveru daného webu.
Rekl bych (a ani se nemusim divat na statistiky), ze drtiva vetsina ma webove fonty zapnute. U JS to byly 3% (vedome to blokovalo 1%). Navic fonty se pouzivaji i na ikony, takze blokovat fonty => nevidite ikony. Ale je to vas problem, pokud si aktivne blokujete neco, co podporuje kazdy cihla-mobil.
Servirovat to od CDN ma vyhodu, ze je stranka mnohem rychleji nactena (na to si pritom stezujete), protoze font je pravdepodobne davno nacachovany (za "soukromi" si holt zaplatite nefunkcni strankou nebo fallbackem = stahovanim stejneho fontu mnohokrat). Navic ne vsechny fonty lze servirovat od sebe (licence).
A ještě poznámku na konec. Aktuálně sedím na 8Mbps lince (průměr v ČR je údajně 12Mbit) a drtivá většina ukázkových webů se nenačetla do 10s (což je luxusní čas pro obyč. web stránku). Kolik trpělivosti má člověk mít s těmito weby? Dlouho se načítají, informace se nedá najít, nelze na ním dát odkaz, musí se scrollovat apod. Děkuji, nechci.
Co se divam, tak je to 15Mbit. Ve vetsich mestech jsou bezne 100MBity a vic. Navic ty weby staci nacist jednou a vetsina assetu se cachuje. Pokud mate silne podprumernou linku a domrveny prohlizec ci jeho nastaveni, tak se nedivte, ze to nejede jak ma. Rekl bych, ze tvurci a provozovatele tech webu si rikaji to same o vas: "dekuji, nechci" ;-).
Lez jak vrata. Uz 6 (nebo je to uz 7?) let stary Angular umel url pomoci hashu.
To je hezké, že nějaká technologie to umí, ale co je mi po tom, když se to v praxi nepoužívá nebo to stejně nefunguje?
Nehledě samozřejmě na to, že # není určen k lokalizaci stránky (od toho je v url path), ale k lokalizaci fragmentu na stránce. Takže jestli někdo k tomuto účelu používá #, tak porušuje jeho původní smysl.
Navic fonty se pouzivaji i na ikony, takze blokovat fonty => nevidite ikony
Ano, že se to používá k navigaci jsem psal. A to je právě ta chyba. Na to klidně mohou používat svg.
Navic ty weby staci nacist jednou a vetsina assetu se cachuje.
Jo no. A teď tu o karkulce. Dělám si archiv zajímavých webů (protože obsah mizí), aktuálně něco kolem 200GB deduplikovaných dat (cca 1.5TB celkem), před tím sedí squid jako proxy cache a necachuje prakticky nic. Jistě, najdou se i výjimečné stránky, ale většina je prostě nocache.
Pokud mate silne podprumernou linku a domrveny prohlizec ci jeho nastaveni, tak se nedivte, ze to nejede jak ma.
Jasně, všichni budeme mít gigabit jen proto, aby se ty stránky načítaly stejně rychle, jako kdysi na modemu, protože každý obrázek musí mít minimálně 80MB (protože se přece nikdo nebude zdržovat s hledáním vhodného formátu, viz příklad někde jinde v diskusi).
Btw, z výše uvedeného stahovátka mám i stats, takže aktuálně vychází jedna průměrná stránka na 1.3MB. Což je i na to "podprůměrném" 8Mbitu 1.3s.
Unikátní data (kdyby fungovala cache), tak 205KB. Takže asi tak.