Průvodce vytvořením responsivního designu ze starého webu

Výborné, s mnoha užitečnými odkazy a radami.

Co mi vadí je prosazování gumy. Nelíbilo se mi to před responizvem, nelíbí se mi to ani v něm (i když je teď procentuální šířka přijatelnější, v podstatě srovnatelná s fixní). Fixní šířka je, jak je zmíněno i v článku, blíže pixel perfect návrhům. A neznamená to, že zůstanu jen u dvou breakpointů, skoků si můžu udělat víc. Ani to neznamená, že na některé prvky nepoužiju procenta, ale fakt to dělat gumové celé je na mě moc.

Reaguji na Str4wberryho:
Pěkný článek.

„<meta> značku viewport, která mobilnímu prohlížeči řekne, že má obsah stránky zobrazovat v měřítku 1:1“
Ono to nebývá úplně 1:1. Myslím, že hodně začátečníků má problém s rozlišováním CSS pixelů a skutečných pixelů. Na desktopu jsou zvyklí ladit bez zoomu, mobilní prohlížeče jsou de facto přizoomované vždy. Podle mě je vhodné na desktopu natáhnout okno na šířku 640 nebo 960 pixelů a nastavit 200% zoom – to je přesnější reprezentace toho, jak stránka v mobilu funguje, než když prohlížeč simuluje třistadvacetipixelové okénko.

„Od IE 9 lze problém s mícháním jednotek teoreticky řešit počítáním pomocí calc“
Nezapomenout na -webkit-calc. A že venku je pořád určitá množina starých Androidů, kde není calc podporovaný ani s prefixem. Také Opera Mini ho nezná.

„Pozor na margin!“
… a pak také na max-width s paddingem nebo s borderem, protože na min-/max-vlastnosti box-sizing bohužel nepůsobí.

„Rychlé řešení je tabulku ‚rozlámat‘ změnou vlastnosti display.“
Minimálně v Exploreru 9 se odlišný display ignoruje, pokud není podpořený i floatem. Řešili jsme to tuším i u tabulek na DJPW.

„Úplné skrytí obsahu“
Tam bys mohl zmínit, že může být potíž s reklamami, protože reklamní pozice „vypnutá“ pouze přes CSS může být z pohledu reklamního systému stále živá (skript pro její zobrazení se stáhl => zobrazení se započítalo), což může být proti jeho pravidlům.

„Jde ale využít možnosti CSS (kulaté rohy, stíny, gradienty, průhlednost)“
V mobilní Exploreru 9 gradienty nepůjdou, nezapomenout na záložní barvu.
Také bych doporučil nespoléhat na webfonty, protože ty mají v mobilech menší podporu. Na ikonky je lepší použít SVG, nebo dostatečně velké PNG.

Reaguji na Str4wberryho:
Býval jsem si jistý, teď už nejsem. Něco se změnilo, dřív na ně skutečně box-sizing neměl vliv, což potvrzuje jednak Explorer 8, kde tvá ukázka zlobí, jednak habendorf v jedné staré diskusi. Nemám teď dost času na průzkum historie této změny. Jsem rád, že se to změnilo, dříve to nedávalo smysl.

„Navíc calc nepodporuje IE 9“
To jsem nepsal. Řekl bych, že ho podporuje, i v mobilní verzi.

„Mobilní varianta IE 9 se nachází ve Windows Phone 7, který v některých starších telefonech již nejde updatovat na WP 8 s IE 11.“
Přesněji řečeno žádný WP7 nejde updatovat na WP8. Novější Explorer (ani žádný jiný prohlížeč) prostě do těch přístrojů už nikdy nikdo nenainstaluje.
Překvapivě také hodně lidí s WP8 neupdatovalo na WP8.1, ti mají Explorer 10, i když nejspíš updatovat můžou.

Díky za citaci mé rady se zoomem.

Chamurappi:
„Podle mě je vhodné na desktopu natáhnout okno na šířku 640 nebo 960 pixelů a nastavit 200% zoom – to je přesnější reprezentace toho, jak stránka v mobilu funguje, než když prohlížeč simuluje třistadvacetipixelové okénko.“
Toto mě Chamurappi zaujalo. Můžše být prosím trochu konkrétnější?

V dobách před cca rokem, dvěma, kdy jsem se kódování aktivně věnoval, jsem vždy testoval na zmenšeném prohlížeči na onich 320px (respektive průběžně pro různé velikosti). Zobrazení bylo vždy stejné jako na telefonu, který má reálných 320px (napadá mě tehdy nějaká stará Nokia, kterou jsem měl na testování, tuším C5... ne, tak C5-03). Souběžně s tím jsem míval k dispozici iPhone 4S, pak i pětku. Rozlišení 640px, při defaultním zoomu telefonového prohlížeče zoomu tedy rovněž 320 CSS pixelů. Obě zobrazení byla stejná, pominu-li hustotu pixelů a tedy (pří)jemnější vykreslení na iPhonu. Šířka bloků a jejich pozice byly shodné.

Tedy, máš nějakou konkrétní ukázku, kdy by se tyto dvě veličiny (tedy 320px okno prohlížeče vs. 640px se zoomem) liší ve vyobrazení? Nějak se mi ta tvá formulace nezdá, nicméně vím, že víš něco, co já nevím. Možná se za ty dva roky něco změnilo, už to moc nesleduju.

Str4wberry:
Ale tady se přeci nebavíme o JavaScriptu. Bavíme se o responsivním designu, který souvisí s CSS. Zajímají mě rozdíly tam, ne v JavaScriptu. Osobně si myslím, že nejsou, resp. jsem na ně nenarazil. Třeba jsem jen nedával pozor.

V žádném případě jsem netvrdil, že ta dvě zobrazení jsou (ve všem) 1:1. Jen a pouze v CSS, kde mi to tak přišlo. Ale jak jsem psal, možná se něco změnilo a platí něco, co dříve neplatilo.

Reaguji na anonymníího:
Netvrdím, že se změní šířka bloků nebo jejich rozmístění, jen, že nepřizoomovaný web neodpovídá zcela mobilní realitě.

„Obě zobrazení byla stejná, pominu-li hustotu pixelů a tedy (pří)jemnější vykreslení na iPhonu.“
Já právě tu hustotu nepomíjím. Při 200% zoomu na desktopu je vztah mezi skutečnými pixely a CSS pixely shodný jako na tom iPhonu.
Takže padding o velikosti 5px vycpává 10 skutečných pixelů, obrázek s deklarovanou width: 160px je rozprostřený na šířce 320 skutečných pixelů (lze vidět, jak moc zůstává ostrý) a border s tloušťkou 2.5px zabírá 5 skutečných pixelů. Půlpixel v CSS je najednou i na desktopu postřehnutelná jednotka, stejně jako v mobilech s vysokým rozlišením.

Když mám sprite obrázek, kde je vedle sebe 50 pixelů modré plochy a 50 pixelů červené plochy, a tento dám na pozadí nějakého elementu s width: 50px (aby byla vidět jen modrá část), telefon s dvojkovým devicePixelRatio jím pokryje 100 fyzických pixelů a na pozadí nakreslí sprite obrázek roztažený nějakou chytrou interpolační technikou, při čemž hranici mezi modrou a červenou pravděpodobně rozpije a na hraně elementu se objeví červená záře. Na desktopu bez zoomu není tento kaz postřehnutelný, se zoomem jsou šance lepší.

Jinými slovy devicePixelRatio je ve skutečnosti obyčejný desktopový zoom. Bez uvedení viewportu se obvykle používá oddálení (1024 CSS pixelů se namačká do 640 skutečných pixelů), při viewportu s width=device-width se používá přiblížení (320 CSS pixelů se roztáhne do 640 skutečných pixelů). Ani jedno zobrazení není 1:1, čehož jsem se v původním znění Str4wberryho článku chytil…


Reaguji na Str4wberryho (k druhému článku):
„Omezená velikost obrazovky nutí tvůrce webu k tomu, aby se zamyslel, co na stránce je opravdu podstatné. Z toho může těžit i varianta webu pro desktop (velké obrazovky), návštěvník potom nebude zahlcen informacemi, které se na stránku dostaly dle hesla ‚když nevíš, kam s tím, vytvoř další sloupec‘.“
Existuje i druhá strana mince, kdy se kvůli primárně mobilnímu návrhu nezahrne funkcionalita, která sice není nezbytná, ale desktopu by prospěla.
Když koukám na FullHD monitoru na web, kde je sice spousta volného místa, ale přesto musím na něco klikat, aby se mi zobrazilo pětiodkazové menu nebo vyhledávací políčko, přijde mi to špatně.
Zneužívání placeholderů místo <label>ů také často pramení z toho, že na mobilu bývá málo místa… a pak to prosakuje i na desktop.

„Je snazší přidávat než ubírat“
Pro některé autory stránek je snadné i ubírat. Jeden můj kolega si třeba usmyslel, že by měl z webu ubrat všechny konstantní texty a nahradit je za ikonky. Uživatel se pak cítí jako v pyramidě, vše vidí krásně pomalované, ale nerozumí tomu.

„3. Zvolit nějakou kombinaci předchozích postupů.“
Nevytvářím-li nějakou specialitu exkluzivně pro mobily nebo exkluzivně pro desktop, tak mi tohle přijde jako jediná rozumná cesta. Bez dogmatického upřednostňování toho či onoho, zajímá mě celá cílová skupina, žádný návštěvník není druhořadý.

Chamurappi:
OK, teď už to, co píšeš, dává smysl. Vyjádřil jsi tutéž myšlenku jinými slovy, nicméně prve jsem ji pochopil jinak.

Díky za upřesnění.

Reaguji na Str4wberryho:
„Zrovna tohle je špatně i na mobilu.“
Ano, to rozhodně. Jako majitel telefonu, jehož jediný prohlížeč placeholder vůbec nezná (s čímž řada mobilních webů nepočítá), nemůžu nesouhlasit…
Ale dobře míněnou snahu o úsporu místa beru na mobilu jako polehčující okolnost. Na desktopu je místa habaděj, tam už si to nedovedu obhájit vůbec. Stav špatně na mobilu i na desktopu je pořád horší než špatně na mobilu, dobře na desktopu, při čemž upřednostnění mobilního vývoje maličko nahrává ve prospěch tohoto horšího stavu.

„Ono to na druhou stranu přináší konsistenci napříč velikostmi zařízení.“
Jako uživatel jsem s určitou mírou nekonzistence smířen – musím být, jiná možnost není, displeje jsou jinak velké a drtivá většina webů nejde zrubat tak, aby měla malou a zároveň dobrou navigaci. Očekávám, že na velkém monitoru uvidím menu (co nejvíc z něj) hned, očekávám, že na mobilu nejspíš ne – tyto dva předpoklady jsou mnohem silnější, než očekávání stejného či podobného layoutu.

„Zvlášť zapeklité je schovávání menu do tlačítka, které se na tabletu aplikuje jen při zobrazení na výšku, ale v orientaci na šířku je vidět plná navigace.“
Schovávání dělá většinou JS, takže na to je snadné řešení: nechť se na tabletu rozhoduje podle menšího z rozměrů a ne vždy podle šířky.