Responzivní weby jsou trendy a článek Maximiliana Firtmana (děkuji za české upozornění od Martina Michálka) ukázal na jednu častou chybu. Responzivní web je velmi často jen ona „přeskládávající se harmonika“, jež na úzkých displayích i zminimalizuje navigaci.
Špatně, hodně špatně.
Možná jsem to celé špatně pochopil já, ale podle mě není responzivní design webu jen o přeskládávání elementů pro úzké displeje kapesních zařízení (smrtfonů a šmatlaplacek), ale důležitá jsou technická omezení prohlížečů i rychlost mobilního připojení/1.
Je potřeba, na mobilním zařízení…
- Nahrávat obrázek na pozadí, který je buď zcela překryt, nebo zhorší již tak mizernou čitelnost?
- Fotografie ve vysokém rozlišení, kterým bude na mobilním zařízení věnováno podstatně méně pozornosti a prodlouží dobu načítání?
- Používat různé LightBox, PrettyPhoto efekty, které se vlastně nemají na malém displayi ani kam rozbalit?
Moje řešení
…které určitě leckdo strhá, jako hloupé.
Generování stránky mám rozdělené, jeden kus kódu se stará o zpracování dat, který předává svou práci vizualizaci (šabloně). Identifikace toho, zda je prohlížeč mobilní je poměrně triviální, pokud uživatel nepřenastavil vlastnosti:
if (mb_stripos($_SERVER["HTTP_USER_AGENT"], "mobile") !== false) {
$tpl->display('mobile.php');
} else {
$tpl->display('desktop.php');
}
Na základě této identifikace předám vizualizaci buď desktopové, nebo mobilní šabloně. Jak jsem předeslal, pokud si uživatel změnil identifikaci prohlížeče, je jen jeho problém, když na normálním počítači bude koukat na mobilní šablonu, nebo obráceně. Pochopitelně obě verze šablony dodržují alespoň ony plovoucí bloky, nemohu předem vědět, jak velké okno prohlížeče bude návštěvník používat.
Mobilní verze šablony používá střídmější design, nenese části, jež by na malém displeji byly spíše na obtíž, a používá menší fotografie.
Ano, mobilní verze a verze pro desktopy jsou na stejném URL.
Je mi zcela jasné, že teď se leckterému designerovi zježily všechny chlupy na těle.
Komentáře
4 komentáře: „Neresponzivně responzivní web“
Zdravím,
k tomuto přístupu se osobně též přikláním. Prostě nějakým způsobem detekovat mobilní zařízení a pro něj zbytečnosti ořezat. Na detekci zařízení se mi celkem osvědčila tato šikovná třída – Mobile Detect
[BoUk]: Díky za tip, neznal jsem.
Hoj,
to špatné, co na tvém řešení je, že si musím změnit user agenta, abych viděl tu druhou verzi. Nemůžeš tak vlastně uživateli dát možnost verzi přepnout verzi. Lepší řešení je pak vynucení verze například nějakou get, proměnou, nebo jinou doménou. Ale i s naprosto stejnou url můžeš použít např. cookie, kterou ovládáš verzi webu.
Jinak základní problém je, že je rozdíl mezi responzivním webem a mobilním webem. To totiž nikdy není to samé, tím spíš, že to není jen o rozlišení, kdy v době phabletů a netbooků už vlastně neexistuje hranice.
Velmi dobrý článek na toto téma je na programujte.com
[Ondřej Tůma]: Ahoj, díky za hint, to přepnutí si poslat by bylo jednoduché, na doménu 3. řádu stačí .htaccess. Otázka je, kolik uživatelů to využije. Do mobilních prohlížečů peru natvrdo HTML5, desktop verze je HTML 4.01, bohužel na desktopu jsou i hodně staré prohlížeče (nebudu rýpat do kolegy s PowerPC Applem, nebo firem, kde mají kvůli intranetové aplikaci ještě IE7).
Netbooky s šířkou 800 už asi nenajdeme v provozu, ale ono „gumové přesypávání“ boxů tam zafunguje, byť se pošlou veškeré plné featury (jQuery, PrettyPhoto, pozadí, fotky s vyšším rozlišením).