Responsivní logo stránky

19. února 2016 Responsivní design Obrázky CSS

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

Obrázek <img>
Značka <picture>
CSS background
Media queries
CSS sprite
Alternativní text
Textové logo
SVG
Odkazy jinam

Existují tři základní způsoby, jak na stránku vložit logo:

Jako obrázek značkou <img>.
Pomocí CSS pozadí (vlastnost background).
Vytvořit logo fontem.

Obrázek `<img>`

Použít běžný obrázek je asi nejjednodušší. Zároveň je triviální řešení situace, kdy se obrázek nenačte – jde použít atribut alt.

<img src="logo.png" alt="Název">

Nenačtený obrázek jde do jisté míry i stylovat:

Výhoda skutečného obrázku je kromě snadné realisace i v tom, že jde o skutečný obrázek, takže si ho:

všimnou vyhledávače,
dokáží ho najít nástroje pro sdílení na sociálních sítích,
nezmizí při tisku,
uživatelé si ho dokáží snadno zkopírovat/uložit

Většina z toho jde řešit i při jiném řešení, ale tady je to rovnou bez extra práce navíc.

Zásadní nevýhoda loga vloženého značkou <img> je ale v tom, že s ním nejde nic moc dělat. Při tvorbě responsivního webu se někdy může hodit vyměnit logo za jiné, které se lépe vejde do dostupného prostoru.

Teoreticky by šlo vložit <img> značek několik a pomocí pravidla @media mezi nimi přepínat, problém je ale v tom, že není možné jednoduše zabránit stažení obrázku zapsaného do <img>, i když je skrytý pomocí CSS.

Obrázky vložené značkou <img> se stahují vždy:

Kdy začne stahování <img> obrázku

Značka `<picture>`

HTML značka <picture> právě řeší problém <img> pro načítání různých obrázků v závislosti na šířce s využitím atributu media:

<picture>
  <source media="(min-width: 45em)" srcset="logo-velke.png">
  <source media="(min-width: 32em)" srcset="logo-stredni.png">
  <img src="logo.png" alt="Popis obrázku">
</picture>

Podporují ji prohlížeče MS Edge, Chrome 38+, Firefox 33+, Opera 25+.

Nefunkčnost v IE nemusí tolik vadit, protože mobilní IE, kde je responsivní logo převážně potřeba (na desktopu tolik ne), nejsou tolik rozšířeny. Navíc se v nepodporovaných prohlížečích zobrazí obrázek v <img> a zbytek bude ignorován.

Podpora může chybět hlavně v Safari 9.2 a starších na iOS.

CSS `background`

V současnosti s nejlepší podporou řeší responsivní logo pozadí – CSS vlastnost background.

Do HTML kódu se vloží prázdný element:

<div class="logo"></div>

Případně rovnou odkaz, protože logo by mělo být klikací (odkazovat na hlavní stranu).

<a class="logo" href="./"></a>

A logo se nastaví jako pozadí:

.logo {
  display: inline-block;
  width: 250px;
  height: 50px;
  background: url(logo.png);
}

Media queries

Přepnutí loga při menší šířce se zajistí díky media queries:

@media (max-width: 45em) {
  .logo {
    background: url(logo-mensi.png);
  }
}
@media (max-width: 35em) {
  .logo {
    background: url(logo-nejmensi.png);
  }
}

CSS sprite

Díky tomu, že je logo nastavené jako pozadí, jde navíc zakomponovat do CSS spritu pro snížení počtu stahovaných souborů.

Alternativní text

Problém tohoto přístupu s prázdným elementem je v absenci alternativního textového obsahu.

To jde vyřešit různě:

Atributem aria-label.
Umístěním textu do loga a jeho následným skrytím.
Umístěním textu do loga a následným překrytím absolutně posicovaným obrázkem přes původní text, tzv. image replacement. To je asi nejlepší řešení, které obstojně funguje i při nenačtení obrázků.

Textové logo

Vůbec nejpohodlnější pro následné vytváření responsivního loga je textovou část nakreslit v CSS.

Obyčejnému textu jde v CSS přidat řadu efektů, aby vypadal atraktivně:

Text v obrázku: Vzhled textu v CSS

Tento postup jde použít ale jen v případě, že logo sestává z nějakého symbolu + textu napsaného běžným fontem.

Realisovat logo pomocí font ikony a načítat kvůli němu zvláštní font přes @font-face by ale už možná bylo zbytečné.

Textové logo má navíc další výhodu v tom, že z něj jde snadno kopírovat text – například název webu.

SVG

Pro většinu log se hodí použít vektorový formát SVG. Ten zajišťuje perfektní ostrost loga nezávisle na jeho rozměrech a často i nízkou datovou náročnost.

V závislosti na způsobu vložení může jít SVG logo i snadno přebarvovat (stejně jako textové logo).