Přejít k navigační liště

Zdroják » Mobilní vývoj » 6 chyb cestou do responzivního pekla

6 chyb cestou do responzivního pekla

Cestou k optimálnímu responzivnímu webu ještě všichni nasekáme spoustu chyb. Tenhle článek by vám mohl pomoci vyhnout se těm nejhorším.

Autoři článku, Honza Sládek a Martin Michálek, pomáhají vymýšlet responzivní weby. Honza pro své klienty jako interakční designér, Martin zase pro své jako vývojář nebo konzultant. Pár nedůležitých parametrů responzivních webů za tu dobu zbytečně přeceňovali a pár zásadních zase podceňovali. Časem si uvědomili co dělají špatně. Letos hodnotili „mobilní optimalizaci” webů přihlášených do soutěže WebTop100 a přitom se vyděsili — ty samé chyby dělají skoro všichni! A někteří je umí dělat daleko lépe!

Cestou k optimálnímu responzivnímu webu ještě všichni nasekáme spoustu chyb. Tenhle článek by vám mohl pomoci vyhnout se těm nejhorším.

6 hříchů českých responzivních webů

  1. Neřeší rychlost načítání
  2. Přizpůsobují se jen konkrétním rozlišením
  3. Jsou nedostatečně otestované
  4. Používají desktopové UI komponenty
  5. Uživatelům tabletů vnucují rozhraní pro smartphony
  6. V mobilní verzi jim „nezbývá” čas na designéra

Pojďme si je postupně probrat.

1. Neřeší rychlost načítání

Honza: Náš příběh začneme jako ve snu. Vytvořili jste skvělý web, uživatelské testování neodhalilo slabiny, líbí se klientovi i jeho psovi. Zkrátka — je boží! A přece nefunguje. Načíst ho totiž trvá tak dlouho, že většina lidí na to nepočká.

Co to? Lidé čekají neradi a konkurence je tak blízko. Věděli jste, že 47 % lidí očekává, že se jim web načte do dvou vteřin? A že 40 % lidí odejde, pokud se stránka nenačte do 3 vteřin? KissMetrics dokonce spočítali, že 1 vteřina načítání stránky vás stojí až 7 % potenciálních zákazníků.

Jestli se ve WebTop100 jedna věc opakovala jako špatný vtip, bylo to ignorování času načtení webu. To ovlivňují dvě zásadní věci: počet requestů na server a datová velikost. Většinou slyším lidi mluvit o tom druhém. Důležitější je ale to první, protože mobilní sítě často mají vysokou latenci. V Kanadském CBC si spočítali, že jeden request je stojí 200 ms.

Schválně – načtěte si hned teď váš nejnověji spuštěný web se zpomaleným připojením. Na Macu ho zpomalíte pomocí nástroje Network Link Conditioner, na Windows třeba multiplatformní Sloppy.

Já počkám, fakt to teď zkuste.

Tak jak dlouho? Kdo se dostal na simulovaném EDGE připojení pod 3 vteřiny, má odpracováno, ostatní musíme zamakat.

Jako první se zaměřte na používání CSS sprites a sloučení CSS souborů do jednoho (s JavaScriptem to samé). A pěkně všechno minifikovat! Minifikace a slučování souborů jde skvěle automatizovat, třeba nástrojem Grunt.

Tohle je základ, bez kterého se dál nehnete. Pak už si můžete hrát s lazy loadem, posílat statické soubory z domény bez cookies a řešit, co všechno poslat na mobilní zařízení a co pouze na desktop (třeba velké obrázky na pozadí apod). Je toho hodně a mohli byste to optimalizovat několik týdnů.

Doporučuji si na začátku říct, kolik času (a peněz) se vám vyplatí do rychlosti investovat a pak optimalizovat, co v tom čase optimalizovat jde.

2. Přizpůsobení jen konkrétním rozlišením

Martin: Smartphone, tablet, desktop. Když chcete mamince zjednodušeně popsat, čím se zabýváte, je tohle rozdělení dobré. Moc vás ale prosím — nepoužívejte ho ve vývojářské praxi, pokud jde o breakpointy pro přizpůsobení designu.

Proč? Jediná dobrá obecná odpověď na otázku „Pro jaká rozlišení mám svůj responzivní web optimalizovat?” zní — „Pro všechna.”

Občas s weby pomáhám malé cestovce mého strejdy. Není to ničím výjimečná skupina webů s u nás běžnou „seznamáckou” cílovou skupinou, ale docela fajn návštěvností na to, aby se graf dal ukázat v článku na Zdrojáku. Tady je vývoj počtu rozlišení obrazovky za posledních pět let:

zdrojak_1_rozliseni

Graf 1: vývoj počtu rozlišení na webech Rekrey.

Ano, počet typů rozlišení ohromně roste a pryč jsou doby, kdy jedno či dvě rozlišení dominovala. I to dělení smartphone (320×480px), tablet (768×1024px) a desktop je pasé. Kam patří levné smartphony s menším rozlišením 240px? Kam minitablety, které mají menší rozlišení než některé smartphony?

Vyladit design pro důležitá rozlišení a předat vám tři návrhy — desktop, tablet a smartphone. Váš grafik si tohle dovolit může. Při implementaci ale na tohle dělení prosím zapomeňte. Udělejte to fluidní a maximálně univerzální.

3. Nedostatečné testování

Honza: Když už máte web rychlý a univerzální, je potřeba vzít do ruky několik skutečných zařízení a podívat se, jak na nich web funguje. Proklikejte si, zda se dostanete ke všem stránkám, zda zvládáte ovládat všechny interaktivní prvky. Brzy zjistíte, že je to úplně něco jiného, než si zmenšit viewport ve vašem prohlížeči.

Dejte si hlavně pozor na následující:

  1. Dostatečná velikost dotykových ploch (týká se i malých odkazů!). Různí výrobci se liší v doporučeních, jak velké dotykové plochy dělat, dobré rule-of-thumb je 1x1cm.
  2. Na dotykových zařízeních neexistuje onMouseOver, neschovávejte tedy obsah tak, že se zobrazí po najetí myši!
  3. Očekávejte, že web bude na mobilních zařízeních pomalejší. Vaše nádherné animace vůbec nebudou tak nádherné a celý dojem z webu se pokazí tím, že se při scrollování web bude trhat. Vůbec není složité to udělat a je potřeba si na to dávat pozor. A když už v tom budete – čím jednoddušší skripty mobilním zařízením dáte, tím vás lidé budou mít raději. Protože pokud procesor musí něco složitě počítat, sežere baterku.

4. Používání desktopových UI komponent

Honza: Při hodnocení WebTop100 byly momenty, které mne přiváděly do varu. Fakt, že “designér” použil nějaký zažitý vzor z desktopu a udělal ho “responzivní”. Technicky to možná funguje, ale zkusili ti lidé svůj web také použít?

Třeba si představte, že kliknete na fotku a chcete ji vidět zvětšenou. Ona se místo toho zmenší, protože na webu je nasazený lightbox a vy si můžete vybrat, zda uvidíte fotku malinkou nebo ještě menší. Naštve.

Nebo vyplňujete formulář a při výběru z jednoduchého selectu na vás vyjede dlouhý (a “krásně” grafický) seznam věcí. Je asi tak přes dvě obrazovky a když si něco vyberete, musíte ještě najet zpátky na políčko, které jste vlastně vyplnili. A to si jen nějaký “designér” vymyslel, že ten select bude vypadat hrozně pěkně a nikdo mu nevysvětlil, že nativní selecty fakt mají své výhody.

A do třetice, a to mne vážně překvapilo, je zvyk českých “designérů” odkrývat zajímavý obsah až poté, co nad něj najedete myší. Kromě toho, že cool to byla zhruba v roce 2006, tak najetí myší a dotknutí se prstem jsou mentálně dvě velmi odlišné akce. (Nebo vy se snad dotýkáte prstem každého kousku webu, abyste se s ním řádně seznámili?) Vůbec má nejoblíbenější jsou taková řešení, kdy vy stisknete velkou jasnou plochu s jednoslovným či obrázkovým odkazem, na ní se najednou objeví spousta obsahu a než ho stihnete přečíst, načte se jiná stránka.

A přitom to není o ničem jiném, než o kapce zdravého rozumu a používání vlastního výtvoru na mobilních zařízeních.

5. Uživatelům tabletů vnucují rozhraní pro smartphony

Martin: Ještě před měsícem by mě nenapadlo, že tohle může být problém. No. A pak jsem si ohodnotil svých pár webů ve zmiňované soutěži.

zdrojak_2_bata

Obrázek 2: bata.cz na iPhonu, iPadu a desktopu

Vezměte si Bata.cz — na iPadu se vám zobrazí „ořezaná” mobilní verze. Je to něco, co uživatel iPadu ocení? Uživatel smartphonu ano. Nebo uživatel malého tabletu s Androidem za 2 tisíce Kč. Ale zmlsaný iPadista? Nebo iPadista zvyklý občas holt zatnout zuby a použít desktopový web nepříliš dobře optimalizovaný pro dotykové ovládání a menší displej?

Tipuji, že Baťa má „super web pro desktop a ořezaný web pro mobily.” OK, ale pro uživatele tabletu je super web až moc super a ořezaný web až moc ořezaný. Když by super-desktopový web jen trochu počítal s většími tablety, je problém vyřešený.

Nezapomeňte prosím — rozdělení desktop/mobily neexistuje. Mezi desktopem a smartphone je tablet. Mezi smartphony a tabletem je kategorie malý tablet. Mezi smartphony a malým tabletem je kategorie velký smartphone. Mezi smartphony a velkým smartphonem… Víte co, raději na ty kategorie zapomeňte úplně!

6. V mobilní verzi „nezbyl” čas na grafika/designéra

Martin: Honzo, já jsem svého času „kóderskou mobilní verzi” docela obhajoval. Byly to začátky „mobilního webdesignu” a viděl jsem, že v postupech optimalizace pro mobily jsou technici dál než grafici. A tak dávalo smysl nechat si od grafika udělat jen desktopový návrh a přípravu pro mobilní zařízení obstarat sám. Vždycky jsem ovšem jako kodér od grafika chtěl spolupráci nebo alespoň zpětnou vazbu. Když jsem ale hodnotil ty WebTop100 účastníky, zjistil jsem, že „ mobilní verze” je skoro vždycky kodérská a na grafika nezbyl čas. Myslím, že dnes už je ten obor jinde a tohle by se dít nemělo. Jak to vidíš ty?

Honza: Martine, já myslím, že základní problém je, rozlišovat vůbec návrh webu na desktopovou a mobilní variantu. Plyne z toho, myslím si, mj. i to, že lidé zapomínají na tablety. Prostě web je jenom jeden a tak bychom se k němu měli návrhově i technicky chovat.

Myslím, že základním úkolem člověka, který navrhuje web (a nemyslím si, že by to měl být grafik či kodér) je navrhnout jeho strukturu tak, aby se na webu člověk vyznal a mohl ho používat na jakémkoli zařízení. Jsou různé příklady, že to jde. V ČR se mi z tohoto hlediska v poslední době hodně líbí třeba web karlovyvary.cz. Grafik by pak měl přistupovat k tomu stejně – navrhovat prvky, které se budou na různých velikostech obrazovky chovat různě. Výsledkem je úplně jiný styl práce a to je myslím něco, co si bude ještě chvilku sedat. Sám s tím stále bojuji.

Martin: OK, to se dostáváme k pracovním postupům v týmu. Ten problém je v nich. Hodně se v souvislosti s responzivním webdesignem mluví o prototypování, style tiles, odklonu od návrhů stránek k systému komponent. O post-PSD éře. Jenže osvědčený postup neexistuje. Co je ale pravděpodobné — přenosem postupu návrh –> PSD –> kódér –> programátor –> produkce do responzivního webdesignu na konci nebývá profit, ale zklamání z výsledku. Myslím, že responzivní webdesign je příležitost ke společnému experimentování designérů a techniků za účelem hledání optimální cesty a ta může být v každé firmě trochu jiná.

Honza: Přesně Martine! Pro mne je zatím červená linka mezi jakýmikoli přístupy k responzivnímu webdesignu hodně o komunikaci mezi designérem a techniky. Všichni musí být na stejné vlně a vědět, čeho chtějí dosáhnout. Grafický návrh (pokud zrovna existuje) už je spíše takové vodítko, které je super, ale stejně bude na každém zařízení výsledek vypadat trošku jinak. A to je podle mne právě to, co si spousta “grafiků” ještě nepřipustila a zatím je prostě zajímá jen ta verze pro jejich velikost monitoru. Myslím, že příští dva roky je to hodně na kodérech – aby s grafiky komunikovali, ptali se jich na různá designová rozhodnutí a ukazovali jim, jak vlastně web funguje.

Závěr?

Stejně jako u každé nové technologie, i u responzivního webdesignu platí, že ji zpočátku používáme špatně. Zdůrazňujeme méně důležité věci (mnoho variant layoutu pro různá zařízení, podporu vysokokapacitních displejů) na úkor těch opravdu důležitých (rychlost načítání, pracovní postupy).

A jako tenhle seznam neduhů ani responzivní webdesign není uzavřené téma. Postupy, které si při výborných výsledcích zachovávají dostatečnou efektivitu tak, aby byly prodejné, se teprve vytvářejí.

Responzivní webdesign není border-radius. Tedy něco, na co se podíváte nebo se naučíte na školení a pak to umíte. Responzivní webdesign je změna, kterou budeme všichni prožívat minimálně ještě několik let a jejíž scénář si budeme psát sami.

Komentáře

Subscribe
Upozornit na
guest
38 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Martin Prokeš

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!

TomKout

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.

Miré

… 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.

Jonáš Krutil

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.

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í.

jaroslavhorak

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)?

Jonáš Krutil

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ě.

Dominik Tilp

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

jaroslavhorak

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čí.

Dominik Tilp

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/

Čelo

I po těch letech, co se snažím o různé přístupy k RWD prostě vím, že nic nevím ;) Pěkné shrnutí.

Michal

Co místo lightboxu?

TomKout

Zkus Swipebox, ale jsou i další.

martindrzka

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

Jakub Stacho

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…

Jonáš Krutil

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 : ).

NN

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?

Martin Hassman

Detailní odpověd je odkázána přímo z článku.

NN

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.

martin
Kvalitnikod.cz

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í.

Tomáš Dvořák

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.

Tomáš

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í.

Martin Hassman

Nejde jen o rozlišení, ale třeba i o malou rychlost mobilního připojení.

Tomáš

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

kaktuss

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.

Radek

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é“ :)

kolemjdoucí

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.

pav

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?

Pavel

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)

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.

Miloš

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.

Marek Lecián

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í.

Marek Lecián

Docela pěkný článek o respozivním designu a mobilním redesingnu.
http://www.artweby.cz/blog/mobilni-stranky-nebo-responzivni-web
Aneb co je řešením ? Responzivní web? Mobilní?
Nebo rovnou mobilní aplikace? Já si mobilní aplikaci škrtám, protože sám bych si nic takového do mobilu asi nedal :).

Tomáš Kouba

Ú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.

Tomáš Kouba

Nějak se vytratil odkaz na článek: Proč chtít mobilní web a responzivní design (článek)

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.