Responsivní logo

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

  1. Jako obrázek značkou <img>.
  2. Pomocí CSS pozadí (vlastnost background).
  3. 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:

Neexistující

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:

  1. všimnou vyhledávače,
  2. dokáží ho najít nástroje pro sdílení na sociálních sítích,
  3. nezmizí při tisku,
  4. 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:

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ě:

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

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

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.

Responsivní tabulky

Responsivní tabulky

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

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.

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.

Komentáře