Na navigaci | Klávesové zkratky

Translate to English… Ins Deutsche übersetzen…

Jak posílat klientům náhledy webů

Poslyšte příběh: klient si přál učinit svůj web hezčím a tak jsem mu doporučil jednoho z těch mála dobrých tuzemských grafiků. Před pár dny jsme měli schůzku a on se svěřil, že už dostal od grafika návrh a není z něj gór šťastný. Že písmo je moc malé a celé je to jakési kostrbaté. Nějak se mi to nezdálo, poprosil jsem ho, aby návrh otevřel, že se na to podíváme. Dohledal email, odkliknul obrázek a naběhl mu výchozí prohlížeč obrázků ve Windows. A protože obrázek měl větší rozměry, zobrazil se (mírně) zmenšený. A hned bylo jasné, kde je zakopaný pes.

Pokud klient není expert, nemá šanci zjistit, že se dívá na obrázek zdeformovaný zmenšením. Prohlížeč obrázků ve Windows XP nebo Vista na to nijak neupozorní. Ba co víc – i kdyby to zaregistroval, nejspíš se mu nepodaří obrázek zvětšit na plnou velikost. Alespoň kolečkem myši nebo klávesami + - to nejde. Ty obrázek zvětšují/zmenšují o 20 % a hranici 100 % bez zastavení přeskočí. Zobrazit jej v měřítku 1:1 vyžaduje fištróna.

Z příběhu vyplývá velmi cenná a nejspíš překvapivá zkušenost: neposílejte klientům náhledy webů jako obrázek.

Jak tedy náhledy posílat? Nejvhodnější je klientovi poslat URL. Design tak uvidí v kontextu webového prohlížeče a bude mít daleko ucelenější dojem. Ale pozor, pokud byste poslali přímo URL obrázku, prohlížeč by jej opět zmenšil. Je nad ním potřeba vytvořit HTML obálku. Nahrejte proto na web kromě obrázku ještě soubor nahled.php:

<title>Náhled webu</title>
<body style="margin:0; text-align:center">
    <img src="<?php echo htmlSpecialChars($_SERVER['QUERY_STRING']) ?>">
</body>

Potom např. obrázek pala.png bude dostupný pod URL http://example.com/nahled.php?pala.png. Tu pošlete klientovi a učiníte přítrž možným nedorozuměním.

Na závěr ještě tři tipy:

  • udělejte obrázek dostatečně široký a výsoký, nebo vhodně nastavte pozadí, aby nebylo vidět bílé pozadí prohlížeče
  • náhled ukládejte zásadně jako 24bitový PNG
  • ponechte v kódu element img, zobrazením pomocí CSS stylu background zkomplikujete klientovi tisk