Moderní tvorba webových aplikací

O webu

Responsivní design

Přizpůsobení se webové stránky cílovému zařízení.

Proč nepoužívat fixní hlavičku

Proč se vyhnout fixování záhlaví/menu k hornímu okraji obrazovky.

10 minut

Barva horní lišty v mobilním prohlížeči

Jak obarvit záhlaví mobilního prohlížeče, aby ladilo se stránkou.

3 minuty

CSS Elements Queries

Jak zajistit různý vzhled elementů v závislosti na jejich rozměru.

4 minuty

Media queries v JavaScriptu

Jak v JavaScriptu používat @media pravidla jako v CSS.

6 minut

Poskakování stránky

Proč vadí poskakování stránky během načítání a jak se ho zbavit.

5 minut

Prodleva po tapnutí na mobilech

Co způsobuje 300 milisekundovou prodlevu po kliknutí na odkaz/tlačítko na dotykových zařízeních.

4 minuty

SVG

SVG je grafický formát vhodný pro grafické prvky, které mají mít možnost měnit svou velikost.

28 minut

Automatické zoomování inputů na iOS

Jak se vypořádat s automatickým přibližováním stránky u formulářových prvků na iPhonech.

5 minut

Blisk – testování responsivních webů

Blisk prohlížeč vypadá jako Chrome, ale má šikovné nástroje pro testování responsivních webů.

3 minuty

Responsivní popisky tlačítek

Jak na různě velkých obrazovkách měnit popisky odkazů a tlačítek.

5 minut

Odkaz pro předvyplnění SMS

Jak dát na stránku odkaz, který na mobilech předvyplní číslo a text SMS.

5 minut

Nekonečné scrollování

Je lepší nekonečné rolování, klasické stránkování nebo tlačítko „Zobrazit další“?

12 minut

Ladění responsivních webů

Jak testovat zobrazení responsivního webu na mobilních zařízeních.

7 minut

Stránkování

Jak správně řešit stránkování na webové stránce.

13 minut

Responsivní logo stránky

Jak vytvořit logo, které se bude přizpůsobovat velikosti stránky.

7 minut

Obtékané boxy s proměnlivou šířkou

Jak udělat, aby se obtékané boxy přizpůsobovaly proměnlivé velikosti okna.

7 minut

Responsivní reklama na mobilech

Jak se vypořádat s reklamami při vytváření responsivního webu. Jde to vůbec?

10 minut

Proč hamburger menu nefunguje

Hamburger menu je oblíbený postup řešení responsivní navigace. Proč se mu vyhnout.

12 minut

CSS pravidlo @media

Pravidlo @media se používá k omezení platnosti CSS jen za určitých podmínek.

15 minut

Přepnout mobilní/desktopový web

Jak přepnout mezi desktopovým a mobilním webem. Má to vůbec smysl?

9 minut

Mobilní web na subdoméně

Má smysl mít mobilní web na zvláštní adrese m.example.com?

13 minut

Responsivní hledací formulář

Jak vytvořit responsivní vyhledávací formulář, kde se políčko a tlačítko přizpůsobuje šířce.

6 minut

Velikost písma podle šířky

Jak přizpůsobovat velikost písma aktuální šířce stránky.

5 minut

Jeden sloupec fixní, druhý proměnlivý

Jak vytvořit dvousloupcové rozvržení, kde je jeden sloupec s pevnou šířkou a druhý se přizpůsobuje šířce okna.

6 minut

Převod sloupců na procenta

Jak převést fixní sloupcové rozložení na procenta, která se budou přizpůsobovat šířce okna.

3 minuty

Jak široký web udělat

Jakou zvolit optimální šířku webové stránky.

5 minut

Responsivní Facebook Like

Jak zajistit, aby se Facebook Like a Page box přizpůsobovaly šířce obrazovky.

7 minut

Nastavení výšky responsivního obrázku

Jak zabránit poskakování responsivních obrázků během načítání stránky.

8 minut

Proč (ne)používat mobile first

Mobile first je postup tvorby responsivního webu, kdy se začíná od nejmenších obrazovek (mobil) až po větší (desktop).

12 minut

Značka <meta name=viewport>

K čemu používat <meta> tag name=viewport.

5 minut

Zvětšení obrázku

Jakými způsoby řešit zvětšení malého obrázku.

4 minuty

Převod webu na responsivní design

Jak webovou stránku co nejlépe a nejjednodušeji převést do responsivní podoby.

20 minut

Maximální šířka pozadí

Jak obrázkovému pozadí nastavit maximální šířku. Tj. aby se přizpůsobovalo menší šířce okna.

2 minuty

Oprava chyb použitelnosti v mobilních zařízeních

Google informuje o chybách v použitelnosti u mobilních zařízeních. Jak je opravit?

6 minut

Google označí stránky vhodné pro mobil

Ve výsledcích hledání na Google se objeví informace, že je stránka přizpůsobena pro mobilní zařízení.

2 minuty

Responsivní design webu

Jak jednoduše a kvalitně vytvořit web, který se přizpůsobí všem velikostem cílových zařízení.

17 minut

Responsivní CSS mřížka

Jak vytvořit čistě v CSS mřížku, která se bude přizpůsobovat velikosti okna.

5 minut

Responsivní navigace

Jak udělat elegantní navigaci pro zobrazení na malých obrazovkách.

5 minut

Responsivní obrázky

Co s obrázky na mobilních zařízeních?

5 minut

Responsivní komentáře

Jak některé části stránky načítat jen při určité velikosti obrazovky.

3 minuty

Responsivní tabulky

Co udělat s tabulkami, aby se rozumně zobrazovaly na mobilech/tabletech.

8 minut

Jak na mobilní (responsivní) web

Jak a proč vytvářet mobilní versi webu – responsive web.

6 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025