20.9.2017

foto Petr Bravenec

Petr Bravenec
Twitter: @BravenecPetr
+420 777 566 384
petr.bravenec@hobrasoft.cz

S postupem času zjišťuji, že nemalou část svých aktivit přesunuji na mobilní zařízení. Jdu někomu ukázat webové stránky – vezmu si tablet. Potřebuji zákazníkovi ukázat nějaký dokument – strčím mu do ruky tablet. Chci si přečíst něco ve vlaku – vezmu si tablet. Chci najít něco na internetu někde v terénu – vezmu si mobil.

Před pár měsíci jsem si koupil nový mobilní telefon, ve kterém mi vydrží baterka i při intenzivním internetění pár dní (UleFone Power 2). I když je to jen "levný číňan", dostalo se mi do ruky skvělé zařízení, se kterým jsem srostl důkladněji, než s jakýmkoliv telefonem před tím. Mobilní telefon jsem tak začal pro přístup k internetu používat mnohem častěji.

Předpokládám, že podobný přesun z počítačů na mobilní zařízení proběhl u velké části uživatelů internetu. Při tomto stavu věcí se mi samozřejmě nelíbilo, že naše stránky nejsou optimalizované pro zobrazení na mobilních telefonech a na tabletech.

Od samého začátku byly naše stránky velice jednoduché. Přepracování na nový design proto naštěstí nebylo příliš pracné. Přechodem na responzivní design jsme stránky zjednodušili ještě více.

Designem jsme se tentokrát téměř vůbec nezabývali. Použili jsme prakticky holý Boostrap, doplnili jsme pouze podkladový obrázek a logo v hlavičce stránky. Stránky proto vypadají trochu jednoduše, ale jednoduchost byla u našich stránek vždy záměrem.

Malý slovník použitých pojmů

Responzivní design

Responzivní stránky jsou takové, které se zobrazují přijatelně jak na velké obrazovce počítače, tak na malé obrazovce mobilního telefonu. Na počítači bývá responzivní design obvykle graficky košatější. Na menších zařízeních se však grafický design často podstatně zjednoduší, důraz bývá kladen na čitelnost a použitelnost webu na malé obrazovce.

Responzivní web design na Wikipedii
Responsive web design na Wikipedii (anglicky)

Bootstrap

Bootstrap je malá knihovna, která usnadňuje tvorbu responzivních webů. Bootstrap mám rád – s minimálními prostředky mi umožňuje vyrobit dobře vypadající stránky. Běžně se nezabývám webem, takže moje znalosti webových technologií jsou silně omezené. Mnoho mých aplikací (i v C++) však používá webové rozhraní a pomocí Boostrapu dokážu udělat profesionálně vypadající aplikaci jednoduchým opisováním z dokumentace a ze Stack Overflow.

Boostrap na Wikipedii
Stránky Boostrap

Hobrasoft s.r.o. | Kontakt