Tvorba responzivních webových stránek

Responzivní WEB

Responzivní web je dnes nutností a kdo ho nemá, může přicházet o velké zisky. Přístupy na webové stránky jsou čím dál častěji realizovány z mobilních zařízení a tak ten, komu se v mobilních zařízeních prezentace nezobrazuje správně, může přijít o potencionálního zákazníka.

To, že jsou stránky optimalizovány pro různé druhy zařízení, zajišťuje právě responzivní web, nebo také responzivní web design. Zároveň Google ve výsledcích vyhledávání z mobilů upřednostňuje responzivní weby před jinými, které si se smartphony a tablety tolik nerozumí.

Image

Na konci roku 2016 nastal celosvětový zlom v oblasti přístupu k internetu. V této době se poprvé počet vyhledávání z mobilních zařízení stal větším, než množství vyhledávání z desktopu, neboli z klasických počítačů a notebooků. To znamená, že dnes využívá internet více lidí přes mobil nebo tablet, než kolik jich přistupuje k internetu prostřednictvím klasických počítačů. Dá se předpokládat, že tento trend bude pokračovat i nadále.

„Mobile first“

Při tvorbě responzivního webu je vhodné využít metodu „mobile first“ a to začít od nejmenšího rozlišení, a pokračovat postupně k rozlišením větším.

V opačném případě by se mohlo stát, že to, co jste si naplánovali pro desktopovou verzi - například nějakou tabulku - by se pak do té minimalistické mobilní nemusela vejít.

Image

Výhody

Omezená velikost mobilní obrazovky nutí k zamyšlení, co na stránce je opravdu podstatné.

Nevýhody

Hlavní problém tvorby nejprve pro mobily je v tom, že to může svádět k ošizení webu pro desktop

Progresivní Web Aplikace (PWA)

Progresivní webové aplikace jsou vylepšením stávající webové technologie. PWA pracují v každém prohlížeči, ale některé funkce typu "app-like" (např. nezávislost na připojení, instalace na domovskou obrazovku a push zprávy) závisí na podpoře prohlížeče.

PWA jsou tedy webové aplikace, které vypadají a načítají se jako běžné webové stránky, ale navíc nabízí funkce běžně dostupné pouze nativním aplikacím jako je například offline načtení.

Od roku 2018 tyto funkce podporují v různém rozsahu Microsoft Edge, Google Chrome, Mozilla Firefox a Safari. Dá se očekávat, že je i další prohlížeče budou postupně následovat.

Image

PWA charakteristiky

Progresivní

Pracují pro každého uživatele bez ohledu na volbu zařízení, prohlížeče nebo operačního systému.

Aktuální

Díky procesu aktualizace Service workers.

Responzivní

Přizpůsobí se jakémukoli zařízení, kde se mají objevit, tedy PC, mobilnímu telefonu i tabletu.

Instalovatelné

Bez stahování z App Store nebo Google Play.

Bez připojení

Service workers umožňují práci offline nebo v sítích s nízkou kvalitou připojení díky uloženým datům.

Dostupné

Snadno se sdílejí prostřednictvím adresy URL.

Optimalizace stránek

Image

Pro co nejlepší uživatelský zážitek při procházení webových stránek je nutné zajistit, aby se stránky načetly co nejrychleji. Nelze spoléhat, že návštěvník webu bude na silném pevném připojení, kdy je mu jedno, že stránka má velikost v řádech megabytů.

Ruku v ruce s mobile first jde i nutnost stránky optimalizovat po stránce velikosti a to jak ze strany zdrojových kódů. tak ze strany použitých obrázků. Zejména právě obrázky je třeba nabízet v ideálním rozložení a kompresí a najít tak správný mix, kdy obrázek vypadá dobře a zároveň není datově náročný.

Jednou z cest k dosažení výše uvedeného je minifikace scriptů a používání obrázků nové generace, které nabízejí lepší kompresní algoritmy, kdy při zachování kvality obrazu nabídnou datově menší soubor.