Stručná historie web designu: 1996: 640 px, 2001: 800 px, 2005: 1024 px, 2009: 1280 px, 2012: 480 px.
Marek Prokop
Počet prodaných chytrých mobilních telefonů neustále roste. Tvůrce webových stránek by měl myslet i na lidi, kteří by rádi prohlíželi webové stránky na svém mobilním zařízení.
Pohled do statistik počtu přístupů podle OS a zařízení „mých“ webů přitom vůbec neodráží relativní počty provozovaných zařízení (mimochodem jak je to u vás?). Myslím si, že jednou z příčin je obtížné prohlížení webových stránek na malých mobilních zařízeních.
Přitom základní úprava existujícího webu není zase až tak složitá. Připomíná tvorbu tiskového stylopisu, řídí se podobnými pravidly a od tvůrce vyžaduje obdobný styl uvažování.
S chutí do toho…
Všichni mluví o responsive designu (málokdo ho dělá), tak proč to nezkusit. Upravil jsem jeden web, pak druhý a nakonec z toho byl prázdninový týden mobilizace. Postupně jsem zmobilizoval několik webů tak, aby byly lépe použitelné na malém displeji novějšího mobilního telefonu:
…a půl je hotovo
K mobilizaci webů jsem přistoupil podobně, jako k tvorbě tiskového stylopisu. Hodně jsem zjednodušoval, vyhazoval zbytečnosti a převáděl jsem weby do jednoho sloupce. Přitom zjednodušování se týká především formy; sdělovaný obsah by měl být co nejvíce zachován.
Na webech jsem zopakoval tyto postupy:
- Doplnění meta do hlavičky
- Do hlavičky každé stránky je potřeba doplnit kód
, který prohlížeči řekne, aby použil šířku zařízení jako šířku viewportu a provedl příslušné změny měřítka zobrazení. - Media Query
- Do CSS souboru jsem přidal sekci
@media screen and (max-device-width: 480px) { }– pravidlo pro zobrazení na obrazovce s maximální šířkou zařízení 480 px; mezi složené závorky se zapisují definice stylů. - Vše do jednoho sloupce a na široko
- V CSS souboru jsem zrušil sloupcovou sazbu. Vyrušil jsem floaty, zmenšil jsem vnější a vnitřní okraje. Šířku prvků jsem nastavil na 100 % – místa na malém displeji není na zbyt.
- Skrýt nepotřebné
- Na stránce by nemělo být nic zbytečného, říká stará webdesignerská pravda. Ale ruku na srdce, jak často se to podaří dodržet? Takže všechny nepotřebné prvky šly pryč.
- Široké obrázky
- Neplechu dělají obrázky. Je nutné zajistit, aby nepřečuhovaly, protože pak dochází k jejich vyhřeznutí mimo stránku (v lepším případě), nebo naopak dochází ke správnému zobrazení obrázku na šířku, ale zúží se sloupec s obsahem. Naopak někdy může být obrázek, kvůli stávající definici, příliš malý. Vybraným obrázkům jsem nastavil:
img { max-width: 100%; height: auto; }- Velké odkazy
- Trefit se do odkazu na neoptimalizovaném webu je loterie. U odkazů jsem se snažil co nejvíc zvětšit klikatelnou/ťapatelnou plochu. S tím souvisí zvětšení meziřádkových mezer u běžného textu, u menu nastavení odkazů blokově a na celou šířku obrazovky.
- Velikost písma
- Zkontroloval jsem velikost písma. Někdy není desktopové CSS dobře napsané a velikost písma není pro použití na malém displeji ideální.
Testování
Pro testování na počítači jsem použil nejprve notně zúžený desktopový Firefox, ale rychle jsem přešel na Opera Mobile Emulator, o kterém se hezky rozepsal Andreas Bovens v článku Developing Responsive Designs With Opera Mobile Emulator.
Následně jsem živý web testoval na výchozím androidím prohlížeči, na mobilním Firefoxu a Chromu tamtéž a v Opeře na obstarožním telefonu s Windows Mobile. Na iPhone jsem dva z uvedených webů proletěl za dvě minuty.
Rychlá mobilizace jednoduchého webu nezabere víc než den. U výše uvedených webů pravda není úplně všechno dotaženo k dokonalosti, ale výsledek je lepší, než neudělat nic.
Těžký boj nastal s webem receptů. Upravovat WordPress šablonu byl, ve srovnání s mnou kódovanými weby, tuhý boj (a to jsem originální šablonu už dříve notně zjednodušil).
Co jsem neřešil
Pro mobilní uživatele je důležité, aby měla stránka malý datový objem. Proto může být vhodné podstrčit mobilnímu prohlížeči kapku jiný obsah, než putuje na desktop. Typickým příkladem jsou třeba obrázky, které může být vhodné posílat v měřítku 1:1. Na druhou stranu může být optimalizovaný obrázek z velkého webu datově menší, než neoptimalizovaný M1:1.
Předpokládám, že mobilní uživatelé dávají přednost rychlosti a použitelnosti před dokonalou vzhledovou shodou s velkou verzí webu. Proto jsem neřešil, jestli někde něco nezobrazuji, že je rozložení vybraných prvků záměrně jiné atp.
Úpravy jsem provedl pro zařízení s displejem do šířky 480 px. Samozřejmě je možné (a často se to tak dělá) odstupňovat několik verzí webu pro různé šířky displejů různých zařízení (ono ale taky stačí otočit telefon na šířku).
A hlavně jsem neřešil, jestli jsem echt responzivní.