Dobre chápem responzive designu?

Doporučené je žádné rozlišení neřešit, udělat stránku roztahovací, potom ji postupně zužovat a ve chvíli, kdy už nevypadá pěkně (např. sloupce jsou moc úzké), přidat @media pravidlo. Takto potom pokračovat, než se dostanete na nějakých 240 pixelů.

Druhá možnost je začít obráceně. Udělat stránku pro rozlišení 240 pixelů a postupně si okno roztahovat. A naopak přidávat podmínky pro vyšší rozlišení.

jefitto44:
„Roztahovací= všetko na percentá?“
Kdyby to bylo tak jednoduché, tak není co řešit.

Koukni na http://www.zdrojak.cz/clanky/6-chyb-cestou-responzivniho-pekla/, kde najdeš i podrobnější popis Str4wberryho rad.

Já to dělám tak, že si vždy nejdřív udělám css pro stránku na PC rozlišení a poté začnu řešit responsiv. Dělám to asi nějak takto:
- šířky různých boxů a prvků nenastavuju
- šířku celého layoutu mám nastavenou na max-width
- pomalu web začnu zhazovat na menší rozlišení, jak už psal Str4wberry.

Přizpůsobuju to tak, aby web vždy vypadal dobře. Ač nerad, tak se dá s nadsázkou říct, že používám dvě základní rozlišení. Pro tablety - MQ od 700px a pro mobily, MQ od 320px, ale samozřejmě se tím nedržím striktně. Ani se toho nejde držet. Občas se musí přidávat další MQ, záleží na rozvržení webu.

Responsivní design dělám vždy mobile-first. Tzn. že první je CSS pro nejmenší rozlišení a postupně přidávám MQ, až do finálního rozlišení (např. 960px). Jde hlavně o to, aby šlo na mobilní zařízení co nejméně dat.

Jo a nezapomeň do havičky webu přidat:
Jinak ti responsiv na mobilních zařízeních nikdy nepojede.

Stalker:
„Responsivní design dělám vždy mobile-first.“
Tohle podle mě v dnešní době není pořád ta správná technika. Zabíjíš tím uživatele se starší verzí Internet Exploreru. Chytřejší telefony podle mého testu nejprve zpracují CSS a pak se načítají obrázky. Nedojde tedy ke stahování většího obrázku pro normální verzi a následně menšího pro malou verzi, což je uváděno jako jedna z uváděných výhod mobile-first.

---

Nemyslím si, že responsivní web je v každém připadě ten nejlepší nápad. Sám jsem upravoval několik webů mířící do oné soutěže WebTop100 (jejíž výsledky mnohé překvapily) a se článkem na Zdrojáku (viz Bubák) úplně nesouhlasím. Pokud je na webu JavaScript, který má třeba 10 tisíc řádků, je z toho dost těžké udělat responsivní verzi :-) a minifikace tomu moc nepomůže.

Zároveň brát ohledy na nejpomalejší internet, je jako neustálé vracení se k Internet Exploreru 6 a optimalizace i pro tento prohlížeč. Samozřejmě záleží, na jakou cílovou skupinu je web zaměřený.

Osobně nejsem příliš zastáncem měnícího se webu při změně velikosti okna prohlížeče, takže pro mobilní zařízení bych doporučoval používat v CSS spíš max-device-width.

joe:
A jaká je podle tebe ta správná technika?

IE6 v dnešní době ještě nekdo používá? Já osobně bych už nejradši kašlal i na IE7 (což teda zatím nedělám)

Stalker:
Media query nejdou ani v IE8, jedině s podporou dalšího JavaScriptu. Já to tvořím "klasicky", obráceně. Napřed klasický web (zobrazí se tedy bez JavaScriptu v pořádku i v IE) a ten pak zmenšoval na mobilních zařízeních, a protože neřeším responsive na desktopech, ale jenom na mobilních zařízeních (menší verze je přizpůsobená prstu, takže nevidím důvod ji vidět na monitoru, ikdyž si okno zmenším na velmi malé), nemusím se pak starat o to, že media query v IE nefungují, protože na mobilních zařízeních už ano.

[#8] joe
Media query v IE přece vůbec nemusíme řešit. Myslel jsem to tak, že IE stačí v dnešní době podporovat až od verze 7 (na kterou už bych se taky nejradši vyprdl) IE 6 jsem měl pak za to, že už je to dávná minulost.

Já teda s "profi" kódováním teprve začínám, takže to dělám tak, jak mě to učili dělat a věřím, že to jsou mistři svého oboru, proto to zde demonstruji. Dle tvých poznatků je ale asi jedno, jestli to dělat nebo nedělat mobile-first, či se mýlím? To už pak záleží teda jenom na zvyku.

Řekl bych, že to joe myslí tak, že v případě „mobile first“ nedostane bez JavaScriptu, který by zprovoznil pravidlo @media, plnohodnotné styly ani IE 8.

Stalker:
Str4wberry to zkrátil (díky), přesně tak to bylo myšleno. Jinak ani dneska nevidím důvod mít web ve starších prohlížečích správně zobrazený, aniž bych pro něj nějak speciálně optimalizoval. To jsou ty dnešní moderní trendy, které využívají nejnovější feature z Chrome, ale v ostatních prohlížečích je to všechno rozpadlé...

Str4wberry, joe:
Aha, díky za vysvětlení. Na fix v IE vždy používám respond.js

Dělat responsive mobile-first... nebo dělat... To může být věčná otázka. Má teda nějaké použití vyloženě nějakou výhodu, nebo je to jedno? Jak mám vědět, co je nejlepší a nejefektivnější?

Jak píšete, „na fix v IE vždy používám respond.js“, tj. starším IE, které už tak mohou mít problém s výkonem, ještě zatopíte dalším zbytečným skriptem, na který spoléhá celé zobrazení. Pokud je tedy cílem mít v IE 8 plnohodnotnou podobu stránky, přijde mi toto řešení ne úplně ideální.

Reaguji na Stalkera:
„nezapomeň do hlavičky webu přidat“
Proč zakazuješ přibližování?

„Dle tvých poznatků je ale asi jedno, jestli to dělat nebo nedělat mobile-first, či se mýlím?“
Mně připadá jako nesmysl hledat za návrhem webu nějakou hlubší filozofii, nějakou správnou modlu… jakoukoliv jinou, než myšlenku, že na prvním místě jsou uživatelé. Dogma „mobile first“ je populární zejména kvůli tomu, že je zcela umělé a tím pádem jde výrazně proti této myšlence — staví do popředí menšinu brouzdalů, která sice už není zanedbatelná, ale je pořád dost malá (na Slovensku sice větší než u nás, ale pořád zdaleka ne dominantní).

Dokonce i teď po Vánocích, kdy pod stromečky údajně dominovaly tablety, nijak dramaticky podíl dotykových zařízení na návštěvnosti nevzrostl. Jestli dobře počítám, relativně k předvánočním číslům je nárůst dokonce menší, než při předchozích Vánocích. Vysvětluji si to tak, že chytrý telefon i tablet už sice má kdekdo, ale lidi s nimi zase tak moc nebrouzdají. Možná časem změní názor, kdo ví.

Tudíž prioritou pro současnost — i pro minimálně další rok — by u běžných webů měl být stále desktop… a mobilní zobrazení by mělo být obětí kompromisů, nikoliv naopak.

Před jistou dobou jsem se tu bavil s Martinem Michálkem o procedurální grafice v CSS, nadhodil jsem argument, že retiny mají menší tržní podíl než starší Explorerové, on opáčil, že se weby dělají „pro dnešek, pro zítřek a pro období za dva až tři roky“… uběhl rok a půl a dotyková zařízení (z nichž mají nezanedbatelně lepší device-pixel-ratio jen některé) pomalu dosahují podílu Explorer 8. Takže investice do vektorové grafiky na úkor starších prohlížečů se v ČR při neupřesněné cílové skupině zatím nevrací.

„Jak mám vědět, co je nejlepší a nejefektivnější?“
Stačí přemýšlet, nehltat bezhlavě trendy.
Nejlepší je, když při vývoji myslíš na všechny uživatele najednou. Pokud tě nic nenutí upřednostňovat konkrétní způsob použití stránky, pokryj úplně všechny možnosti. Everyone-first.

Chamurappi:
„staví do popředí menšinu brouzdalů, která sice už není zanedbatelná, ale je pořád dost malá“
Podle mne to zobecňuješ. Jsou weby, kde mobilní uživatelé zůstanou menšinou dalších X let, ale jsou weby, kde mobilní uživatelé již dnes tvoří významný podíl návštěvnosti.
V prvé řadě bych se díval na cílové publikum, např. v případě restaurace nebo hotelu, budou mobilní zařízení zcela jistě vítána (třeba se můžeš kouknout na jídelní lístek, když jedeš v tramvaji), ale v případě webu s flash hrami asi nemá smysl se o mobilní zařízení ani otírat :)
A mohu z vlastní zkušenosti říct, že web jednoho nejmenovaného hotelu, který je responzivní tak z 30% :), má za posledních 30 dní, 18% podíl návštěvnosti z mobilních zařízení (mobil+tablet).

Pokud si někdo není jist, nemá žádné statistiky z běžícího webu (vytváří zcela nový web) a neví jestli do toho investovat čas a peníze, tak to nemusí vadit. Stačí když web nebude prasárnička s hromadou rozbalovacích a přebalovacích nabídek a jiných nesmyslů, které nelze při dotyku ovládat, protože dnešní mobily i tablety, zvládnout takový web zobrazit, uživatel sice musí přibližovat, ale pokud bude schopen ten web i s tímto "handicapem" použít, tak to pro začátek může stačit.
Je třeba si taky uvědomit, že responzivní web neznamená, že se web bude jen přizpůsobovat každému rozlišení, ale že na těch mobilních zařízeních s (dej bůh) 3G a EDGE, bude vůbec možné jej natáhnout aniž by si člověk vyčerpal celý FUP.

Reaguji na quinuxe:
Zobecňuji, protože to dělá i to zmiňované dogma, snaží se tvářit jako univerzální pravidlo pro vývoj všeho nového, s příslibem cesty naproti k převážně mobilní budoucnosti.

„v případě restaurace nebo hotelu, budou mobilní zařízení zcela jistě vítána“
Mluvím pouze o tom, na kterou verzi se klade větší důraz. O tom, že by se s mobilním zobrazením mělo počítat prakticky všude, nepochybuji. Otázka není, koho vítat, ale koho vítat víc (není-li možné myslet na všechno najednou).

„ale že na těch mobilních zařízeních s (dej bůh) 3G a EDGE, bude vůbec možné jej natáhnout“
Přesně tak. Ovšem rychlé načítání se hodí i na desktopu (a naopak část těch mobilních přístupů je z wi-fi), takže nad rychlostí je dobré přemýšlet všude.

„aniž by si člověk vyčerpal celý FUP“
Zrovna datová velikost patří mezi parametry, kde může být web nenápadně bezohledný (ne, že bych to doporučoval). Pokud se samotná stránka zdánlivě rychle načte a pak ještě dodatečně přenáší velké obrázky, nebo dělá psí kusy s AJAXem, uživatel nemusí postřehnout, kolik dat mu doopravdy proteklo prsty.

Reakce na Chamurappiho:
„Zrovna datová velikost patří mezi parametry, kde může být web nenápadně bezohledný“
Ovšem v případě, že bezprostředně po prohlížení zmíněného webu nepřijde upozornění na dosažení FUPu. :–)

[#6] joe:
Trochu jsem si o tom ještě zjišťoval info a bylo mi řečeno, že to nedělají úplně všechny prohlížeče. Že stále jsou využívány prohlížeče, které stahují kompletní velikost obrázku.
[#13] Str4wberry:
Problém s výkonem by většinou měly až stránky, které by měly tisíce řádku, ne? U "menších" projektů se to ani nepozná.
[#14] Chamurappi:
Protože například při focusu na ipnut se stránka roztáhne. Tak mě napadá otázka: Proč ho mít zapnutý?

Stalker:
„Že stále jsou využívány prohlížeče, které stahují kompletní velikost obrázku.“
Jsou, stejně tak, jako je IE6 :-) a dozvěděl jsi se,které to jsou? Stále je podle mě lepší vytvořit nejdříve klasickou verzi webu a tu zobrazit úplně všem a správně, než se vrhat po hlavě do techniky "mobile-first", kde jak už Str4wberry napsal, se akorát zatopí dalším zbytečným JavaScriptem. Pokud se obrázky stáhnou velké, tak se stáhnou, stáhnou se ale pravděpodobně jen jednou a pak se uloží, do cache, ne? JavaScript by se zpracovával pokaždé.

Reakce na Stalkera:
„Problém s výkonem by většinou měly až stránky, které by měly tisíce řádku, ne? U "menších" projektů se to ani nepozná.“
No, možná se podívejte, co ten respond.js dělá. Po stažení a interpretování veškerého CSS ho znovu načte AJAXem, regulárními výrazy vyzobe @media části, přeměří velikost obrazovky, změří pixelovou velikost em jednotek a odpovídající části připlácne do dokumentu, čímž se stránka překreslí do plné podoby.

Další věc je, co se stane, když bude problém respond.js načíst.

[#20] Str4wberry
hm hm, v javascriptu se nevyznám, ale vypadá, že toho je hodně. a když respond.js nepujde načíst, tak je to samozřejmě problém.

Když se ještě vrátím k tématu, proč responzivovat mobile-first, tak co kvůli renderování dat? Tzn. že když píšu MF, tak další pravidla, pro desktop už nemusím znova všechny přebíjet, ale přebiju jen ta, která potřebuju upravit. Zatímco opačně bych je musel pro mobilní zařízení přebíjet všechna. Nebo to je už zanedbatelné?

Stalker:
„Tzn. že když píšu MF, tak další pravidla, pro desktop už nemusím znova všechny přebíjet, ale přebiju jen ta, která potřebuju upravit.“
Co když budeš chtít na desktopu zobrazit tabulku? Na mobilu ji vlastně jako tabulku zobrazovat chtít nebudeš, takže přepíšeš tabulku na display: block;, ale na desktopu už zase budeš muset vracet všechny výchozí hodnoty, nebudeš moct ani využít v CSS a vlastnost all, která by se na takovou věc hodila. Osobně jsem ještě nikdy nezačal dělat web mobile-first a v nejbližší době se na to nechystám, přijde mi to jako hloupost.

Tak díky všem za diskuzi, která se tu rozjela. Já to tak budu dělat, protože to tak děláme v práci, a je to už náš standart. Nemám tolik zkušeností a tento postup jsem v práci nezavedl, jen mě to tak naučili a stojí si za tím, že to nej nejlepší možné řešení. Já klukům v tomto plně důvěřuji, myslím, že jsou mistři svého oboru. :)

Nicméně mě to stejně nedá, jednoho dne chci být nejlepší, a proto díky za podměty. Určitě se budu o tuto problematiku zajímat dál, a zjišťovat, jaké je nejlepší řešení.

Stalker:
„Já klukům v tomto plně důvěřuji, myslím, že jsou mistři svého oboru. :)“
Stačí mít svou hlavu a nevěřim všemu, co se používá. U nás firmě se taky používalo plno věcí, které jsou k ničemu, protože u toho někdo nepřemýšlel.

Zeptej se jich tedy, proč je nejlepší možné řešení právě mobile-first a pak nám ho sem napiš, díky :-)

[#24] joe
Hlavně výše zmiňované 2 důvody. Načítání CSS pouze pro mobily a postupná kaskáda. Taky se ještě zmiňovali, že výjimečně jde z mobile-first bezproblému použít styly pro čistě m.verzi. Proto jsem i s odpovědí čekal dýl, dnes jsme to probírali na poradě.

Vzhledem k tomu, že nemám tolik zkušeností, moc k tomu už říct nemůžu, trošku mi to spíš připadá, že je to tvrzení proti tvrzení, kde si dvě strany budou stát stejně stát za svým, se svoji pravdou a v konečném důsledku vlastně nesejde na tom, zda to bude, nebo nebude mobile-first, protože rozdíl je minimální.

jefitto44:
Tak ako na stolných PC. Nikdy si sa snáď nepokúšal rozbaliť na mobile roletové menu? :hover sa simuluje buď kliknutím (touch) alebo krátkym podržaním (v prípade odkazu, kde je nežiaduce prekliknutie).

jefitto44:
Chápeš to dobře. Akorát šířku layoutu můžeš zapsat i v procentech (100%), pokud má být stránka zobrazena přes celé rozlišení
MQ chápeš taky dobře. Zadáváš do nich hodnotu "rozlišení", od kterého chceš mít jiné styly.

[#29] jefitto44
Vesměs jo, ale je to v trochu jiné posloupnosti. Nejdřív si nastyluješ stránku pro desktop, která bude od určitého rozlišení (nejčastěji 960px) vypadat vždy stejně a dobře. A pak postupně zmenšuješ a přidáváš media-query. Takže jedeš od největšího po nejmenší. Tzn. že na televizi to zkoušet nemusíš :) Navíc, stejně nemá většinou větší rozlišení, než monitor .-)