Responzivny webdizajn vs. mobilna verzia webu

V dnešnej dobe sa už nerobia stránky m.niečo.com - Svetu vládne responzívny dizajn, to znamená, že prvky na stránke sa automaticky prispôsobujú rozlíšeniu prehliadača. Jedna stránka teda obsiahne mobily, tablety, aj bežné PC (keď už tam máš bootstrap, je škoda to nevyužiť).
Chýba mi možnosť registrácie bez prepojenia s niektorou sociálnou sieťou. V IE8 je rozbitý vrch stránky.

killer - to je nezmysel. Samozrejme, že sa robia stránky zvlášť pre mobily. Hype okolo responzívneho dizajnu je rovnaký, aký bol voľakedy okolo flashových stránok, alebo XHTMl atď. Ľudí to časom omrzí.
Pamätám si na jednu prednášku pred približne rokom, kde týpek obhajoval responzívny dizajn a keďže som v tom čase robil tiež na jednom väčšom responzívnom webe (ale čisto iba mobilnej verzii), tak som sa ho opýtal jednoduchú otázku - ako docielim, že sa mi na mobil nebudú sťahovať zbytočné dáta (obrázky, javascriptové knižnice, ktoré na mobile netreba atď.)? Odpovedať mi nevedel.

No veď v poriadku, ale keď má bootstrap, stačí popridávať zopár tried a stránka môže vyzerať lepšie aj na nižších rozlíšeniach (už len tým, že tam má SSL by so subdoménou musel riešiť x ďalších problémov).
Čo sa týka zbytočného načítavania obsahu v mobiloch, určite existuje spôsob. Keď už nič iné, napadá mi možné riešenie v javascripte pomocou navigator.userAgent

Tak to sa teda riadne mylis. Trendom je ako pisal killer - viac responzivny dizajn ako oddelene mobilne stranky. Uz len preto, ze responzivna stranka je univerzalna. Tvojou logikou - urobis web pre desktop a potom pre mobily a co na to tablety? Mobilna stranka sa na nich bezne "nezapne", destopovu si casto musis priblizovat a uz to nie je uzivatelsky prijemne. S responsive dizajnom urobis jednu a hotovo. Navyse s responsive dizajnom vies pokryt velke rozpatie rozliseni, aby stranka bola pekne citatelna vsade.

Takze by som to zhrnul trochu inak - podla potrieb uzivatelov, na bezne weby responzivny dizajn, na urcity ucel mobilnu aplikaciu...

Ako priklad by som uviedol www.sme.sk. Okrem klasickej stranky existuje m.sme.sk a SME aplikacia.

m.sme.sk je z hladiska citatelnosti na mobile parodiou na mobilnu stranku (velmi male pismo, velke obrazky mimo layoutu...) - s responzivnym dizajnom by sa to dalo daleko lepsie zvladnut.

SME appka je na tom citatelnostou dobre, ale tiez ma svoje muchy (obrazky mimo) na mobile, niekedy mam pocit, ze je skor robena pre tablety.

Vseobecne ma responsive dizajn viac vyhod ako dve samostatne stranky.

Nakoniec, samotny Google hovori:
Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.

A tiez:
Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google's recommended configuration.

Ach bože, kaktuss, už len ty si tu chýbal.
To, že je niečo trendom (čiže je okolo toho prehnaný hype, ako som písal), ešte neznamená, že to je aj dobrý trend. Rovnakým trendom bolo napr. to XHTML, kde pred pár rokmi som bol pre "nasledovačov trendov" za hlupáka, keď som poukazoval na jeho nevýhody.

Napriek tomu netvrdím, že by sa nemala mobilná verzia prispôsobovať zariadeniu (robili sme to pred x rokmi a nevraveli sme tomu responzívny dizajn), ale vo väčšine prípadov je nezmysel používať rovnakú verziu pre desktop aj pre mobilné zariadenia a iba ich urobiť "responzívne".

m.sme.sk som veľmi rád používal predtým, než som mal mobil, do ktorého bolo možné nainštalovať natívnu aplikáciu. Tvrdíš, že je to zle navrhnuté - povedz mi, ako by to v tomto prípade napravil responzívny dizajn? Použili by rovnaké veľké obrázky, ako sú na desktope a ak by to navrhoval ten istý človek, tak by to opäť navrhol zle (malé písmo, zlé obrázky), akurát by to bolo responzívne (čiže by si si napr. zbytočne ťahal veľké dáta).

Zase preto, ze mam pravdu ma nemusis oslovovat Boze .

Myslim, ze som dostatocne zrozumitelne napisal fakty. Ostatne si skus vyguglit.

P.S. Jasne, ze raz za cas sa trendy menia (inak by si asi doteraz robil WAP stranky), ale nemyslim si, ze tebou spominane dvojite robenie stranok, ktore ma viac nevyhod ako vyhod, je to prave orechove. Hlavne kvoli mnozstvu novych zariadeni s roznymi rozliseniami, roznymi displejmi, roznymi pomermi stran... Ale vsak nechajme sa prekvapit.

P.S.S. ad m.sme.sk responzivnym dizajnom sa da nastavit aj chovanie sa obrazkov tak, aby netrcali mimo layout, ako je to teraz. Ale vsak o tom vies, tak neviem preco sa pytas.

Čo si mám vygoogliť? Nedal si ani jeden fakt a to, čo si tu splietal, som ti vyvrátil.
A ty očividne stále nechápeš, o čom sa tu bavíme.

killer napísal:

Ty ale tvrdíš, že by m.sme.sk malo byť responzívne, proti čomu neprotestujem - weby sa prispôsobujú rozmerom okna už roky a nešlo o tzv. responzívny dizajn (nie v takom zmysle, ako sa to chápe teraz). To, že to tak nie je urobené, je iba chyba návrhu súčasnej mobilnej stránky.
Pri jednostránkovom webe to je jedno (tie ani nepotrebujú mobilnú verziu), ale pri informačne bohatých portáloch som proti tomu, aby sa robila jedna verzia, ktorá je určená rovnako pre desktop, tablet aj mobil.

Zatial si mi nic nevyvratil. Vsetko su len tvoje dohady, ale OK, beriem.

FAKT 1:
...ale nemyslim si, ze tebou spominane dvojite robenie stranok, ktore ma viac nevyhod ako vyhod, je to prave orechove. Hlavne kvoli mnozstvu novych zariadeni s roznymi rozliseniami, roznymi displejmi, roznymi pomermi stran....

FAKT 2:
Nakoniec, samotny Google hovori:
Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.

FAKT 3:
Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google's recommended configuration.

Nahodne vybraty FAKT4 (kedze zjavne nevies, co si mas vyguglit):
http://www.cmswire.com/cms/customer-exp ... 021689.php
Conclusion: Responsive Wins!

Napisal si tiez:
"Pri jednostránkovom webe to je jedno (tie ani nepotrebujú mobilnú verziu)..."

Trochu hovadina, lebo ked je ten jednostrankovy web, ako byva zvykom u nas, nastaveny napr. na pevnu sirku 960px, tak bez responzivneho "nastavenia" sa naprd pozera na mobile, naprd pozera pri tablete. Ked je fluid, tak sam o sebe je v principe responzivny, takze sme zase pri responzivnom dizajne.

Aha, takže kvôli novým zariadeniam je dobré, ak je spoločná destkop aj mobile verzia? A čo ak pribudne tablet, ktorý bude mať rozlíšenie, ako monitor? Ako ho odlíšiš od desktopu? Aj keby si používal zisťovanie browsera cez JS (čo nie je moc pekná technika), tak nový tablet ti to nerozpozná a čo potom?

Fakt 2 a 3 - to je umenie rozdeliť dve takmer identické výroky do dvoch samostatných faktov. Hlavne Fakt č. 3 nehovorí nič, iba že "toto odporúča Google, preto to tak robte!".

Ja nemám problém s čítaním jednostránkových webov na mobile - ak treba, tak si to priblížim a väčšina je urobená tak, že hlavný obsah sa dostatočne dobre zalomí (aj keď to nie je responzívny web, proste to bolo robené podľa best practices, aké platili pred pár rokmi).

Aj ja ti dám jeden fakt (nie je od google, ale priamo odo mňa) - skús pripraviť web s 1000+ podstránkami a zistíš, že spoločný obsah pre desktop aj mobil je nešťastné riešenie a vo väčšine prípadov prináša veľa negatív. Ale jasne, pre developera je to jednoduchšie, čo nás po userovi...

A naco ho mam odlisovat od desktopu, ked sa zobrazi rovnako dobre?



Ak mas web s 1000+ podstrankami, tak naco chces oddelovat obsah? Este som nevidel stranky, kde by ich majitel, napr. nejaky bloger, chcel, aby ludia s mobilmi citali na tej stranke ine ako ludia na destopoch. Prave to je jeden z problemov pri oddelenych mobilnych strankach - clovek z mobilu zdiela link z mobilnej stranky pre uzivatela, ktory si ho chce pozriet na PC alebo tablete a ten si ho nevie pozriet (ak to nejak neosetria v ramci webu)...

http://www.smashingmagazine.com/ Typujem, ze tam je viac ako 1000 podstranok a je to plne responzivny web.


No a prave o to ide pri responsive dizajne, aby si nemusel priblizovat.


Ale nakoniec myslim, ze tu vedieme zbytocnu filozoficku debatu. V principe to my dvaja jednym alebo druhym smerom nezmenime, treba sa prisposobit dobe...

Presne si to vystihol! Takto fungujú všetci tí priemerní programátori s nekritickým myslením. "Krásne rozpohybované stránky vo flashi sú budúcnosť", "Je tu XHTML a nie zastaralé HTML, musíme sa prispôsobiť dobe!" - koľkokrát som to už počul a vždy som bol za hlupáka, keď som vravel, že ľudia obhajujú niečo, čo nie je až tak ružové a sami tomu moc nerozumejú.

Potom vznikajú takéto pseudoodborné články (veľmi dobre si pamätám, ako Peter Druska písal o modernosti XHTML a teraz je zrazu HTML5 super): http://robime.it/webstranka-v-roku-2014/. A ty na také články odkazuješ a používaš ich ako fakty. To sú presne tí ľudia, ktorí vedia vypustiť tisíc vtipov o tom, aké je IE zlé a neuvedomujú si, že vlastne IE6 bol prvý, ktorý podporoval HTML5 (z pohľadu tých odborníkov je to predsa iba o doctype, nie?).
Ale hej, je to trend, čo na tom, že tí ľudia len opakujú niečo, čo zopakovali iní pred nimi. Jasné, HTML5 je super, prináša napr. sémantické značky, kód bude prehľadnejší a Google bude presne vedieť, čo a kde sa na stránke nachádza. Len škoda, že Google to vie už aj teraz, nové značky sú mu viacmenej ukradnuté (alebo si myslíte, že by sa po skúsenosti s meta keywords nechal nachytať niečim takým a weby s novými sémantickými tagmi povyšoval nad staré weby?) a kvôli starým prehliadačom väčšina ľudí zaprasí kód zbytočnými knižnicami. A konečne nemusíme používať tie zlé, zlé, zlé obrázky, je tu CSS3 (funguje až v 67% všetkých prípadov!).

Nerobím weby prvý rok, ale zisťujem, že čím viac informácií, knižníc a rôznych "uľahčovačov" práce majú (hlavne mladí) programátori k dispozícii, tým je to horšie pre nich.
Potom sa stáva, že príde na pohovor HTML a CSS expert, javascript ninja (tak sa opísal v životopise), ktorého front-end výstupy sú horšie, ako to, čo vygeneruje Word 97.
A ja som vlastne šťastný - lebo nakoniec mám aj tak vždy pravdu a vďaka nim mám stále prácu (lebo ten bordel musí po nich niekto opravovať).

OK. Napísal si si, ďakujem za tvoj názor. Nemá zmysel ďalej. Má to nezmysel .

.. vzdy sa zamyslim ked mi mobil zalomi pekne stranku preco stale nieco taha aha 1mb obrazok na pozadi a zmeny cez css iba rozmer ... to su fajnsmekri s responzive design ... hlavne stiahnut bootsrap a nic nekodit ... responzivny design je fajn, ale treba vediet robit ... nie je vsetko iba o css a html ..

narychlo som prebehol diskusiu a na tvoju otazku zo zaciatku " ako docielim, že sa mi na mobil nebudú sťahovať zbytočné dáta (obrázky, javascriptové knižnice, ktoré na mobile netreba atď.)? Odpovedať mi nevedel." mam jednoduchu odpoved.
obrazky ak si na display:none tak sa nenacitavaju, takze data nestahujes. a ohladom kniznic - preco to neminifikujes a nedas to do jedneho suboru. takze stiahnes iba jeden subor miesto 15 a to ze ci ma 20kb alebo 300kb to uz pri dnesnych 3g a 4g internetoch zanedbatelna polozka. ovela viac tam rozhoduje kolko suborov stahujes.

btw ty splietas flash, ci xhtml s responzivnym webom. flash a xhtml su technologie, responzivny web metoda. btw ked chces odlahcit mobil, tak to rob metodou mobile first (bootstrap 3 tak tiez funguje).

a ci responzivny alebo 2 verzie? zalezi od webu. ak ma byt mobilna verzia len jemne okresana, tak nema dovod robit tu istu robotu dvakrat. ak je layout zmeneni kompletne, tak jasne ze verzia m.

Prosím?

oprava: obrazky pouzite v css ako background-image
aj tak predpokladam ze obrazky napr. k clanku nemas preco odstranovat pre responzivny dizajn, takze obrazky s ktorymi manipulujes su aj tak iba tie v css (vo vacsine pripadov). samozrejme ak stranka nie je kodena stylom ze ikony su ako <img ...>

Pokiaľ sú dané obrázky dôležité obsahovo, tak MUSIA byť v <img...> . Odporúčam čo-to prečítať o prístupnosti.

nacitane aj nakodene mam dost. takze mi chces povedat, ze grafiku stranky davas do img? ikony, pozadia, logo a pod. lebo toto su prave veci ktore upravujes pri prechode do rezimu pre tablet/mobil. obrazky ktore su dolezite obsahovo na 99% ponechas na vsetkych zariadeniach.
takze ako som pisal, tych sa to netyka a musia byt stahovane navigatorom tak ci tak, je jedno na akom si zariadeni. ale obrazky z css ktore skryvas, tak tie sa ti stahovat nebudu ak su display none.

walther napisal "pokial su obsahovo dolezite"

ale ba http://www.quirksmode.org/css/displayimg.html ako to ze mi ho stiahlo?

takze predtym ako niekomu nieco radis co ho moze ovplivnit tak si to prever, aby bludy nesiril dalej

http://timkadlec.com/2012/04/media-quer ... g-results/ , niektore testy mi nesedia, ale to bude inymi verziami uz ...

pisal som z vlastnej skusenosti testy ako chlapik som nerobil

Ked is nerobil testy nemozes vediet ci sa stahuju ...

v jednom projekte ktory som robil, som na to prisiel. a nestahovali sa dokial nebol (ano v tomto pripade suhlasim s tym testom) parent div display block. priamo div s background-image som asi neskusual.

takze vratim sa k mojej odpovedi, kvoli ktorej tu vznikla tato debata. responzivny dizajn nemusi stahovat vsetko, v css cez media query (alebo inak) vies obmedzit stahovanie nepotrebnych obrazkov a tym znizit trafic, nepotrebujes robit druhu verziu pre mobily z tohto dovodu

Áno, ak je niečo cez background, tak je logické, že to cez media query dokážem pre rôzne rozlíšenia "vypnúť".
Lenže ak obsah tvoria obrázky (čo často tvoria), tak sa napr. zbytočne sťahujú veľké obrázky aj na mobilných zariadeniach. A to je najväčší problém responzívneho webdizajnu.

Sory, ale takú haluz by som ani ja nevypotil

Výhody Responsive:
1. Málo roboty k vytvoreniu
2. Ešte menej, ak použiješ CSS Framework
3. Ľahká správa stránky
4. Krajší vzhľad ako mobile verzia
5. Väčšia škála displayov/monitorov

Výhody Mobile:
1. Menej dát


Toť vsio.

K tomu boom-u, či ako ste to pomenovali, by som povedal asi toľko, že nie všetko, čo je boom, je hneď zavrhnutiahodné. Aj s prvou žiarovkou bol boom a používame ju dodnes. Aj prvé rifle boli boom a nosíme ich ešte aj po viac ako 150-tich rokoch.
Podľa môjho skromného názoru je Responsive design niečo, čo určite má budúcnosť, nakoľko tablety a smarty sa používajú čoraz viac. Aby to napokon, o pár rokov neskončilo tak, že kompy sa na net už ani nebudú využívať a všetko bude fičať na mobiloch a tabletoch. Jeden nikdy nevie... A potom nám ten responsive bude dobrý

1) zalezi od projektu
2) zalezi od projektu / a wtf s tym ma spolocny RD?
3) zalezi od projektu / a wtf s tym ma spolocny RD?
4) nie, zalezi od toho ako to nadizajnuje, ako rozoznas na mobile ci ide o responzivny design alebo zvlast mobilnnu stranku?
5) vsetky nie vacsia

1) zalezi od projektu a kto ho robil a ako ho robil

Toto bolo myslené na ten výrok s display:none, sory, zabudol som hodiť citaciu

Rozoznáš to na prvý pohľad. A ak nie, tak mobilná verzia bude mať asi na začiatku m... m.daco.org
Ak nebude, tak bude mať v pätičke odkaz na desktopovú verziu stránky. Responsive toto nemá

vies o tom ze mobilna verzia nemus mat vobec url adresu so zaciatkom m.? Co ak je to osetrene priamo v kode a overuje a vykresluje sa na zaklade koncoveho zariadenia? Co ak tam koder jednoducho link na desktop verziu neda? Stale je to iba design ktory koder nakodil a tebe sa zobrazi. Vzhladovo nevies posudit ci ide o responzivny design alebo mobilnu situ, mozu by identicke. Takze povedat, ze responzivna stranka je krajsia je hlupost. Co ak do responzivnej nedam styly bude krajsia?

Ak do responzivnej nedaš štyly, tak to by si ich musel cez media queries vypínať vo všetkom, inak sa kopírujú z desktopovej verzie

Neviem co riesis stale, napisal si vyhodu RD toto
4. Krajší vzhľad ako mobile verzia
A to je blbost, ziadna vyhoda nic. Stale je to design a zalezi ako sa nakresli a nakoduje, nezalezi na to ci je to rd alebo oddelena vetva.