38 komentářů k článku 6 chyb cestou do responzivního pekla:

  1. Martin Prokeš

    návrat k webdesignerským kořenům
    Já vidím responzivní web jako šanci na obnovu webdesignérské hrdosti v celé kráse.

    Vždyť čím se staly internetové stránky? Komoditou. Necháme udělat grafika PSD, dáme číňanovi rozřezat a nakódovat a máme web.

    A teď do toho přišlo těch milion rozlišení, různé rychlosti připojení (ad Baťa – očekávání majitele tabletu bude jiné, pokud sedí v křesle na wifi a pokud sedí v metru a hledá otvíračku prodejny), různé technologie u klienta. Neschopní amatéři odpadají, ale kvalitní designeři opět mají co dělat. A ještě si vydělají, protože responzivní design už není pro číňana, ale vzdělaný a schopný tým!

  2. TomKout

    Používejme mobilní zařízení
    Díky za článek! Jako se doporučuje používat vlastní aplikace, myslím, že je stejně zásadní mít tablet a chytrouna a brouzdat s nimi po webu. Jinak responzivní design nepochopíš. Chytrouna mám už třetím rokem, o responzivní weby se pokouším (blbě, ale čím dál líp) přes 2 roky, ale teprve když jsem teď doplnil do výbavy tablet (po různém zdráhání), konečně se mi to propojilo.
    Zkrátka, můžete si hodně načíst o moři, ale dokud nevyplujete, víte prd.

  3. Miré

    Možná jsem zastaralý...
    … ale osobně nejsem příznivcem responzivních webů. Ne pro složité weby. Chápu, firmám, co to dělají, se lépe prodává „responzivní design“ než „mobilní design“, ale zastávám názor, že pro uživatele je lepší mobilní verze. Na straně provozovatele je s tím méně práce (protože vás při návrhu nic neomezuje -> kód děláte přímo pro mobily a od začátku) a funguje to lépe. Jeden příklad za všechny. Jeden náš eshop má cca 60-70 KB jen HTML kódu (jen čistě HTML, tj. bez CS, JS a obrázků). Připravovaná mobilní verze má… necelých 5 KB.

    1. Jonáš Krutil

      Re: Možná jsem zastaralý...
      Popravdě si myslím, že nemáte pravdu. Pokud se nad responzivitou opravdu přemýšlí již od počátku návrhu webu, bude ve většině případů lepší než pouhá mobilní verze. Uživatelé očekávají od mobilní verze stejné informace jako by jim nabídla verze desktopová. Vašich 20+ normo stran textu stejně nikdo číst nebude a pokud ano, můžete jim tyto informace naservírovat dodatečně ajaxem. Navíc vám může odpadnout případnná dvojí administrace atp. Souhlasím, že jsou případy, kdy je mobilní verze lepší než předělávat celé stávající řešení.

      Pokud ale můžu mým uživatelům nabídnout přívětivější a použitelnější řešení, budu vždy kráčet responzivním směrem.

  4. MichalSvatos

    Taktéž díky za článek!
    O responsivní designu jsem toho přečetl mraky, ale jak píše TomKout – dokud do těch vod neskočíte, víte prd :)
    Jsem ale rád, že ačkoli momentálně pracuji teprve na druhém celistvém projektu (bohužel(?) mi spadl na hlavu dost velký), většinu zmíněných bodů jsem přijal za své tak nějak intuitivně a snažím se je aplikovat. Jediné, co je pro mě dost frustrující je momentální „workflow“. U klasických webů to člověk má už docela dobře zmáknuté, ale tady to pořád tak nějak drhne. Zase je spoustu místa ke zlepšení :)
    Na responsivním designu obecně shledávám nejtěžším nutnost změnit myšlení a pohled, kterým se na web dívate (alespoň u mě to tak bylo). Člověk zvyklý na plně grafické pixel perfect weby… not easy at all :) Každopádně RWD je výzva a skvělé mozkové cvičení.

  5. jaroslavhorak

    Responzivní vs. Adaptivní
    Je jasné že adaptivní přístup nemá moc budoucnost a je pasé. Ale přece i u responzivního návrhu si musím určit nějaké break pointy ne? Myslíte si že breakpointy mam určovat opravdu dle designu a toho kde se co rozpadá, nebo je lepší to právě určit dle kategorii (mobil, tablet, desktop) a neřešit mezní rozlišení (která fyzicky vlastně neexistuji, přeci jen jsou tu nějaké standardy)?

    1. Jonáš Krutil

      Re: Responzivní vs. Adaptivní
      Opravdu pěkný dotaz Jaroslave.
      Odpovědět na něj není úplně jednoduché a bude záležet na konkrétním řešení. Nicméně doporučil bych vždy přemýšlet nad obojím. Respektive se zaměřit na mezní hodnoty, kdy mi již layout nevyhovuje a je třeba ho upravit pro aktuální rozlišení s důrazem na výkon pro konkrétní typ (Mobil, Tablet, Desktop) zařízení, který můj layout aktuálně zobrazuje – například zobrazení „optimalizovaných“ obrázků a podobně.

    2. Dominik Tilp

      Re: Responzivní vs. Adaptivní
      Smím se zeptat proč myslíte že adaptivní design je pasé? Jaký je vlastně rozdíl mezi adaptivním a responzivním web designem. Trochu jsem se v poslední době o toto téma zajímal a přijde mi že responzivní a adaptivní design se často prolínají a pro oboje se používá známější „buzzword“ responzivní design.
      můj krátký článek shrnující responzivní a adaptivní design http://www.agile-ict.com/cs/blog/responzivni-a-adaptivni-design

      1. jaroslavhorak

        Re: Responzivní vs. Adaptivní
        Proč je adaptivní design pasé? Protože si dnes web můžete zobrazit na tolika zařízeních že určit nějaké 2-3 adaptivní velikosti prostě nestačí.

        1. Dominik Tilp

          Re: Responzivní vs. Adaptivní
          Takže pod pojmem adaptivní design si představujete adaptivní grid layout, a responzivní design pak znamená fuidní layout. Potom bych s tímto tvrzením souhlasil.
          Myslím ale, že responzivní / adaptivní web design nejsou jen o layoutech. V adaptivním i responzivním designu můžeme použít jakýkoliv layout (fluidní, adaptivní a responzivní).
          http://www.alistapart.com/articles/responsive-web-design/, http://easy-readers.net/books/adaptive-web-design/, http://www.rasmussen.edu/degrees/design/blog/web-design-101-adaptive-vs-responsive-design/

    1. martindrzka

      Re: Lightbox
      Asi záleží na konkrétním projektu, ale na nejmenším breakpointu bych fotky skládal normálně pod sebe. Swipování je v konfliktu s historií browseru (Safari iOS7 a Chrome), na starších zařízeních se seká a scrolling je přecijen zatím nejběžnější interakce. Ale chápu, že to asi bude potřeba vysvětlovat klientovi:) Pokud stavíš Mobile First tedy „odspodu”, nadetekuješ si lightbox dle potřeby až na vyšším breakpointu

    2. Jakub Stacho

      Re: Lightbox
      Zkoušel jsem různé akternativy lightboxu ale vždy to v nějaké kombinaci skřípalo. Např. zmíněný Swipebox na starších Androidech.

      Momentálně prostě při užším viewportu lightbox neinicializuji, takže se klasicky otevře původní odkaz na obrázek.

      Není to ideální řešení, je ale dostačující. Návštěvník dostane konzistentní chování, které zná z „neresponsivních“ webů, může zazoomovat poklepáním nebo roztažením, posouvání je plynulé, tlačítko Zpět funguje dle očekávání…

      IMHO by bylo nejlepší navrhnout něco jako «a rel=lightbox» a výrobci browserů ať si to řeší nativně podle potřeb zařízení a konzistentně napříč všemi weby…

      1. Jonáš Krutil

        Re: Lightbox
        Myslím, že toto řešení je více než dostačující a také ho šířím kudy chodím.
        Nápad s lightboxem se mi velmi líbí – možná se jednou dočkáme : ).

  6. NN

    Prečo statický obsahu z domény bez cookies?
    Mohol by prosím niekto objasniť význam odosielania statického obsahu z domény bez cookies? Ako sa tam ušetrí čas? V cookies sa prenáša väčšinou len identifikátor, takže objem dát to IMHO nebude. Ide o čas potrebný na zápis, resp. kontrolu existencie cookies v úložisku prehlidača?
    Nie je so skôr na škodu, najmä ak obsah ide cez SSL a dôsledok je ten, že prehlidač kričí o možných problémoch z dôsledku len čiastočne zabezpečeného obsahu?

      1. NN

        Re: Prečo statický obsahu z domény bez cookies?
        Vďaka za odpoveď. Najprv mi to prišlo ako absolútna hlúposť, pretože v cookies prenášam väčšinou len kľúč k session o dĺžke 40 Bytes + ešte pár bajtov pre názov. Keď ale pozerám, že mi tam browser odosiela cca 180 Bytov len z Google Analytics (CSS, JS, obrázky)… je to dokopy už 2 – 5kB. Aj keď server posiela pre tento obsah ako odpoveď 304, tie hlavičky sa z serveru aj tak prenášajú, čo ma v prvom momente nenapadlo. Dobré vedieť o tejto možnosti.

  7. Kvalitnikod.cz

    Dobře napsaný článek
    Nejprve bych chtěl ocenit, že někdo dostal odvahu o tomto tématu psát. To, co píšete v článku, je svatá pravda a drtivá většina firem zabývající se tvorbou www si takovou práci nedají ani s desktopovou verzí webu.

    Myslím si, že jsem všechny body splnil u posledního webu marest.cz . Nejvíce jsem pyšný na servírování menších obrázků při menších rozlišeních i přes to, že se zobrazují jako pozadí roztáhnuté na šířku. Co bylo v mezích možností, tak jsem optimalizoval, používám i kešování.

  8. Tomáš Dvořák

    PageSpeed Insights
    Když se řeší rychlost načítání webu, doporučoval bych i test pomocí googlí aplikace PageSpeed Insights. Obsahuje kontroly na běžné chyby a problémy spolu s doporučeními, jak situaci řešit. Funguje pro mobilní i desktopové verze webu. Alternativa je pak třeba Pingdom Tools.

    Nakonec, hezký a obsáhlý seznam doporučení ohledně rychlosti webů: browserdiet.com.

  9. Tomáš

    K čemu to je ?
    Zajímalo by mě k čemu je v současné době responzivní design dobrý, nové tablety již mají desktopová rozlišení a to často i šířku > 1024 při držení na výšku. Co zbývá je malý a velký smartfoun a pro ty je myslím lepší vyladěná mobilní verze. Jediné co má smysl pak řešit je no mouseover, zmiňované pravidlo 1×1 cm je také nerealizovatelné, stejně rozměrné displeje mají často až dvojnásobně rozdílná rozlišení.

      1. Tomáš

        Re: K čemu to je ?
        A navíc ještě malá rychlost připojení :) to opět nahrává volbě desktopové + mobilní verze

    1. kaktuss

      Re: K čemu to je ?
      Pretože, napr. na tablete sa mi neresponzivny web zobrazi ako bežne v celej svojej veľkosti. Potom mám problém pohodlne čítať také malé písmenká (záleží od webu), musím zväčšovať layout, tým pádom UX ide dole vodou :). Pri takých weboch je často problém na prvý krát sa trafiť tapnutím na príliš malé elementy, hlavne keď sú príliš pri sebe. Responzívny dizajn by to mal vyriešiť. Čiže optimálna čitateľná veľkosť písma, pohodlne klikateľné odkazy a pod. Podobne, vyladená mobilná verzia sa na tablete nezapne, takže je na dve veci a to už nehovorím o dvojitom obsahu.

      1. Radek

        Re: K čemu to je ?
        A to je přesně podle mě právě ten návrat ke kořenům, jak tu už padlo – a tedy k maximální jednoduchosti. Možná, že se od „co nejjednodušší“ přesuneme k „ne až tak strohé“ :)

  10. kolemjdoucí

    Standardy
    Celej ten bordel okolo mobillních zařízení je danej neexistencí standardů. Výrobce mobilu, kterej udělá přístroj „do chlapský ruky“, vybaví to wifinou, HSDPA a já nevím čím ještě, a pak k tomu dá displej 320×240 nebo 480×320, tomu patří sezvat valnou hromadu a jednoho po druhým nakopat do koulí. Lidi jsou samozřejmě blbý a koupí to, lidi koupí všechno co se jim trošku vychválí. Je to stejná situace jako donedávna s netbookama – je potřeba se ozvat, časem tyhle nesmyslně malý rozlišení prostě vymřou. Rozumný minimum je 640×480 a 800×480 a výš, s tím už se dá něco trochu dělat. Očekávání uživatelů, že si koupí mobil s displejem velkým jako poštovní známka a rozlišením 240×160 a bude na tom surfovat stejně jako na desktopu prostě naplnit nejde a ani bych se o to nepokoušel, to je jen s*aní si do bot a pomalá agónie.

    1. pav

      Re: Standardy
      aha, takže si koupím mobil 4.5″ obrazovka a mám si tam dávat rozlišení 1600x1200px, jinak to nemám v hlavě v pořádku?

  11. Pavel

    Re:
    Nemyslim si, ze optimalizovat na kazde rozliseni je efektivni, je to samozrejme od projektu (rozsah, obor), ale ze statistik nekolika webu se momentalni navstevnost techto zarizeni dohromady pohybuje od 5-15 % (budu rad, kdyz nekdo zmini rozdilnou zkusenost) … dalsi veci je to, ze jestli ma ted nekdo „maly“ smartphone ci tablet, je jich minimum a nez RD uzraje, tak (diky tomu, ze se technologie rychle vyviji) vymizi… za sebe preferuji bud variantu A – desktopova/mobilni nebo B – responzivni ve trech rozliseni… je nad tim urcite nutne premyslet projekt od projektu (standardy nepomohou, jelikoz zadne nejsou)

  12. MartinJ

    Chápu že vývoj musí jít dopředu nicméně nejsem visionář abych tvrdil že responzivnost je nutnost. Nedávno se začali prosazovat Gridové layouty ty jsou dnes vytlačované respozivními, mám pocit že je tento humbuk okolo mobilních přístupů trochu předčasný. Nevím samozřejmě jaké jsou celosvětové statistiky přístupu mobilních platforem ale tady v ČR to je okolo 10% (alespoň co mám k dispozici já). Nerozumím tedy tomu proč by se měli degradovat weby které jsou navštěvovány z 90% uživateli z PC kvůli 10% ostatních.
    Ještě jsem neviděl responzivní web který by byl po obsahové a uživatelské stránce hodnotnější a pohodlnější než web určený pro pevné rozlišení. Navíc si myslím že pro většinu lidí je naopak problém že se jim web pokaždé zobrazí jinak. Tento problém je i mobilní verze webu … jenže tady je možné se přepnout do plné verze.
    Responzivní weby ano, ale jen pro specifický segment trhu, dle mého je nesmysl tvrdit že je to budoucnost pro všechny.

  13. Miloš

    Neustupovat pitomosti
    Vždycky když slyším názory, že se mají plošně ošetřit všechny existující odrůdy a varianty browserů a zařízení si říkám, zda je rozumné ohnout hřbet a vyladit to na všechny rozměry a ošetřit všechny chyby. Přesně jak zde někdo píše pro úplně malá rozlišení mobilů bych se moc o kvalitu nesnažil a pachatele kteří si zakoupí takový šunt bych trestal nečitelným webem. Tím by výrobci mobilů byli dotlačeni do rozumných rozlišení.
    Před lety dělal podobné problémy IE6, nebyl jsem fanda ošetřovat všechny chyby, které dokázal vyprodukovat, protože to byla nikdy nekončící práce. Naopak správný postup byl IE6 ještě trochu sabotovat aby uživatelé Windows vyvíjeli tlak na výrobce IE6.
    Podle mého názoru je za správné zobrazení webu zodpovědný výrobce zařízení, nikoliv dodavatel webu. Zařízení by mělo umět přepočítat pixely tak, aby vše bylo dobře čitelné. Výrobce zařízená snad přece ví, jaká je minimální velikost fontů, který je ještě čitelný. Já to nevím, protože jeho model se mě velmi pravděpodobně do ruky nedostane.
    Tím nechci říct, že by se weby neměly navrhovat responzivně, ale vše má svoje hranice.

  14. Marek Lecián

    Respozivní web - Ano jde to i zadarmo....
    V dnešní době kdy jsou docela kvalitní respozivní šablony zdarma pro většinu systému je to docela snadné.
    Vytvořit takový blog je otázka hodin. Pokud člověk hledá vhodnou šablonu třeba na WP je dobré omezit hledání na poslední měsíc a najít nejnovější šablony s lepšími funkcemi.
    Příkladem může být můj blog. Mareklecian.cz vystřídal jsem několik šablon a skončil jsem u graficky čistě a jednoduché šablony.
    Co je u takových šablon potřeba je přidat i vkládání responzivního videa a slideshare.
    Příklad jak na to je v mém článku na toto téma.
    http://mareklecian.cz/responzivni-youtube-videa/

    Respozivní web je budoucnost, protože překážky proč ne ustupují.

  15. Tomáš Kouba

    Přesněěě... a jak udělat přepnutí do desktopové verze?
    Úplně souhlasím, super článek :) Tenhle článek by mohl vyjít klidně včera, jak stále je aktuální. Pro ty, co ještě responzivitu neřeší, jsem dal z 8 zdrojů dohromady důvody, proč chtít responzivní design:

    Na jednu kodérskou věc v responzivním designu jsem ale nepřišel. Jak dobře udělat přepínání do desktopové „verze“ webu? Někteří uživatelé se přece jen více orientují v desktopové verzi… Snadno se udělá, že se odstraní <meta name=“viewport“>, ale problém je se styly, když je web dělaný jako mobile-first. Mobil s malým vieportem prostě nepřinutím, aby simuloval nějaký viewport a stáhnul odpovídající styly. Nebo to jde řešit?

    Díky.

    1. Martin MichálekAutor příspěvku

      Re: Přesněěě... a jak udělat přepnutí do desktopové verze?
      Je ta reponzivita pro mobily dostatečně vyladěná? Je totiž dost neobvyklé, že si lidé i přes to žádají desktop variantu.
      Mimochodem – dynamické změny viewportu jsou dost peklo, kdysi jsem si s tím hrál a moc si s tím mobilní prohlížeče nerozumí. Nedělal bych to.

      Jinak díky za pochvalu i za odkaz na moc hezký článek. :)

Napsat komentář

Tato diskuse je již příliš stará, pravděpodobně již vám nikdo neodpoví. Pokud se chcete na něco zeptat, použijte diskusní server Devel.cz

Zdroj: https://www.zdrojak.cz/?p=10247