Responsivní design

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

Všechny články z kategorie

CSS Elements Queries

CSS Elements Queries

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

Změna barvy lišty v mobilních prohlížečích

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

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

Media queries v JavaScriptu

Media queries v JavaScriptu

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

Poskakování stránky

Poskakování stránky

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

Prodleva při kliknutí na mobilu

Prodleva po tapnutí na mobilech

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

SVG

SVG

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

Automatické zoomování inputů na iOS

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.

Prohlížeč Blisk a testování responsivních webů

Blisk – testování responsivních webů

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

Responsivní popisky odkazů

Responsivní popisky tlačítek

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

Odkaz pro poslání SMS

Odkaz pro předvyplnění SMS

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

Nekonečné rolování

Nekonečné scrollování

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

Testování webů na mobilech

Ladění responsivních webů

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

Stránkování

Stránkování

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

Responsivní logo

Responsivní logo stránky

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

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

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

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

Responsivní reklama

Responsivní reklama na mobilech

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

Proč nepoužívat hamburger menu

Proč hamburger menu nefunguje

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

CSS @media queries

CSS pravidlo @media

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

Přepnout na mobilní/desktopový web

Přepnout mobilní/desktopový web

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

Mobilní web na subdoméně

Mobilní web na subdoméně

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

Responsivní vyhledávání

Responsivní hledací formulář

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

Velikost písma podle šířky

Velikost písma podle šířky

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

Jeden sloupec fixní, druhý proměnlivý

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.

Převod sloupců na procenta

Převod sloupců na procenta

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

Jak zvolit šířku stránky

Jak široký web udělat

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

Responsivní Facebook Like

Responsivní Facebook Like

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

Proč nepoužívat fixní hlavičku

Proč nepoužívat fixní hlavičku

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

Nastavení rozměrů responsivního obrázku

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

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

Proč (ne)použít Mobile First

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).

Meta tag viewport

Značka <meta name=viewport>

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

Zvětšení obrázku

Zvětšení obrázku

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

Jak předělat web na responsivní

Převod webu na responsivní design

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

Max-width pro pozadí

Maximální šířka pozadí

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

Rychlé vytvoření mobilního webu

Tvorba mobilního webu

Potřebujete vytvořit mobilní web. Z vaší WWW stránky vytvořím responsivní variantu za výhodnou cenu.

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

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?

Google označí mobile-friendly stránky

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í.

Responsivní design webu

Responsivní design webu

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

Responsivní CSS mřížka

Responsivní CSS mřížka

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

Responsivní menu

Responsivní navigace

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

Responsivní obrázky

Responsivní obrázky

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

Responsivní komentáře

Responsivní komentáře

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

Responsivní tabulky

Responsivní tabulky

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

Responsivní web

Jak na mobilní (responsivní) web

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