Navrhovat web ve Photoshopu je špatný nápad, ale když váš grafik s ničím jiným neumí dělat, nemáte na výběr. V takovém případě ale existuje řada věcí, kterým by se měl grafik vyhnout nebo je naopak vzít v úvahu, aby bylo možné jeho práci použít pro vytvoření webové stránky.

Antialiasing

Photoshop ve výchozím nastavení provádí antialiasing textů, vektorových objektů a zvětšených obrázků. Ve výsledku pak stránka vypadá skvěle.

Webové prohlížeče ale nic takového neumí, takže po převedení do webové stránky může stránka vypadat úplně jinak (mnohem hůře), ale na vině není kodér, ale grafik, který nevzal v úvahu možnosti prohlížeče.

Proto je potřeba při návrhu webu přepnout Antialiasing na None nebo Windows LCD, které mnohem více odpovídá zobrazení stránky v prohlížeči.

Více o antialiasingu ve Photoshopu viz článek Problém s rozmazaným nebo nečitelným písmem.

Písmo

Photoshop obsahuje spoustu písem, pomocí kterých může grafik vytvořit pěkný design přesně na míru zákazníka.

Většina písem ve Photoshopu ale není volně dostupná pro použití na webu a buď není vůbec možné je použít nebo jejich použití stojí $1000 i více za každou stránku.

Při návrhu webu je tedy potřeba buď používat písma volně dostupná v operačních systémech (např. Arial, Helvetica, Verdana, Geneva, apod.; pozor na to, že Windows, Linux a MacOS obsahují jiné sady písem!) nebo použít písma přímo pro web navržená a licencovaná (např. Open Sans).

Doporučený zdroj písem je Google Fonts, odkud se dají písma jak stáhnout do Photoshopu, tak i přímo vložit do webu přes CDN.

Více použitelných písmech viz článek Problém s rozmazaným nebo nečitelným písmem.

Responzivita

Dávno pryč jsou 90. léta a 600px/900px široké weby. V 21. století je potřeba počítat s tím, že vaši stránku si uživatelé zobrazí na nejrůznějších zařízeních a displejích (od malých 320x480px až po UHD 3840 × 2160). V Japonsku již zhruba od roku 2015 testují televizní vysílání v 8K!

Při návrhu tedy nestačí vytvořit jeden „screenshot“ na výchozím rozlišení (které je často navržené v centimetrech na velikost papíru místo v pixelech na monitor), ale je potřeba se zamyslet nad tím, jak se všechny prvky vejdou na malý display telefonu nebo jak velké a čitelné naopak budou na velkých obrazovkách.

Doporučené velikosti pro web jsou 320×480 nebo 360×640 (telefony), 768×1024 a 1024×768 (tablety) a nakonec 1920×1080 a 3840×2160 (desktop, TV, apod.). Pamatujte na to, že telefony, tablety i některé monitory se dají otáčet, takže je potřeba vymyslet layout pro zobrazení na šířku i na výšku.

Také pamatujte na to, že na displeji může být zobrazeno i něco jiného než vaše stránka (např. 1px okraj prohlížeče), takže dělat layout přesně napasovaný na šířku nebo výšku určitého displeje je špatné. Vždy je lepší, když má stránka nějaké okraje a má tak rezervu pro případ, kdy se prvky na stránku přesně nevejdou.

Kodér musí (měl by) udělat stránku tak, aby byla použitelná na libovolném rozlišení (např. 635×528), ale vytvořením grafických návrhů pro uvedená rozlišení mu pomůžete určit, jak se musí jednotlivé prvky po stránce pohybovat a jak se mají zvětšovat, a hlavně pak zákazník nebude překvapen, jak jeho web vypadá na telefonu, tabletu nebo velké obrazovce až poté, co je dokončen (a on za něj zaplatil).

Pixel Perfect

Většina pouček o Photoshopu zdůrazňuje to, že si grafik musí ověřit, že mu všechny prvky přesně sedí a nikde neujíždí. Ve Photoshopu to také není žádný problém, stačí si do návrhu natahat vodící linky a podle nich všechno zarovnat.

U responzivního webu to ale není tak úplně jednoduché, protože prvky se po stránce posouvají a ne vždy je možné zajistit, že se všechny budou posouvat stejně. Některé prvky se totiž posouvají nebo zvětšují vhledem k aktuální šířce stránky (procentuálně, např. šířka odstavce) a jiné zůstávají statické a mění polohu a velikost jen na základě breakpointů (např. velikost písma).

Neříkám, že není možné vytvořit responzivní pixel perfect web, ale vyžaduje to čas, velkou zkušenost a spolupráci mezi grafikem a kodérem, aby si grafik navrhl jen to, co je na webu možné a přijatelné (bez doplňování desítek obalovacích DIVů kvůli zarovnání) a kodér prvky implementoval tak, jak si grafik představuje, že budou na sebe pasovat.

Lepší než dělat pixel perfect layout, je udělat takovou stránku, u které zase tolik nevadí, když prvky nebudou pasovat na sebe a sem tam se některý z nich posune trochu jinam nebo se jinak zvětší.

Responzivní obrázky

Webová stránka se bude zobrazovat na celé řadě zařízení, z nichž některé mají vysoké rozlišení, ale malý rozměr (tzv. retina displeje). Z toho důvodu používají prohlížeče tzv. DPR (device-pixel-ratio), které určuje, kolik skutečných (fyzických) pixelů zobrazuje jeden (CSS) pixel obrázku.

Pokud tedy máte ikonu 32x32px a zařízení s DPR 3 (Samsung S9, iPhone X, apod.), znamená to, že každý pixel ikony bude zobrazen na 9 pixelech displeje a celá ikona zabere plochu 96x96px. V důsledku toho se pak může ikona zdát čtverečkovaná.

Proto by měl grafik vždy všechny ikony a fotky vkládat v trojnásobném rozlišení (ideálně 4x větší, protože některé hi-end telefony mají DPR 3.5 až 4), aby pak bylo možno je v PSD vytáhnout a použít na webu. U fotek bez velkých detailů obvykle stačí 2x větší rozlišení. Úplně nejlepší je kromě PSD poskytnout i zdrojové obrázky (JPG nebo PNG) v dostatečném rozlišení, aby nebylo potřeba je z PSD vytahovat.

Pokud grafik vezme ikonu 32×32 a roztáhne ji na 48×48, aby se mu vešla do designu, Photoshop ikonu rozmaže antialiasingem a vypadá dobře. Nelze ale očekávat, že bude stejně dobře vypadat, až ji telefon zobrazí ve velikosti 144x144px bez antialiasingu.

Náhodné velikosti prvků

Grafik často stránku navrhuje tak, že napíše očekávaný text (v horším případě použije Lorem Ipsum), pak k němu natahá ikony a obrázky a vše myší přemístí a zvětší tak, aby to vypadalo co nejlépe.

Ve výsledku je pak třeba fotka velká 317x431px a text má výšku 16.83px. Nejenže se takové velikosti pak špatně zapisují do stylů, ale mohou se zaokrouhlit a vytvořit pak neočekávané mezery nebo rozdíly ve velikosti.

Rozměry na webu je často potřeba zadávat v procentech či jiných relativních velikostech, které se budou špatně přepočítávat z pixelů a mohou pokaždé vrátit jiný výsledek (některé prohlížeče zaokrouhlují na pixely nebo půl-pixely, jiné desetinná místa prostě oříznou).

Např. obrázek navržený na 315px bude zadán jako 98,4% šířky 320px telefonu, ale prohlížeč velikost „zaokrouhlí“ na 314px aby získal 3 pixely na každé straně. Když pak pod něj dáte tři stejně velké obrázky (32,8% z 320px), budou dohromady dávat 315px a nebudou pasovat na obrázek velký 314px.

Průhledné výřezy fotek

S responzivitou souvisí to, že prvky se musí po stránce přesouvat a skládat se z obrázků a textů v různých vrstvách (podobně jako vrstvy ve Photoshopu).

Často grafik provede to, že z jedné fotky část vyřízne (např. osobu) a vloží ji na jinou fotku (např. továrna). Problém pak nastává v tom, jak dané fotky vložit na web.

Je možno obě fotky sloučit do jedné, ale pokud se pak taková fotka např. vloží na pozadí stránky nebo bloku, může vyříznutá část (osoba) částečně opustit stránku nebo vyhrazený prostor, což je nežádoucí.

Druhou možností je uložit obě fotky samostatně a do webu je složit stejně jako ve Photoshopu – pak se vrchní vyříznutá fotka může volně pohybovat po pozadí v závislosti na rozlišení. Problém je ale v tom, že pro kompatibilitu se všemi prohlížeči je potřeba použít GIF, JPG nebo PNG obrázky.

Nejběžnější formát JPG nepodporuje průhlednost, takže je v tomto případě nepoužitelný. GIF sice podporuje průhlednost, ale malé velikosti souboru dosahuje tím, že ukládá jen 256 barev (z nichž jedna je průhledná), takže pro fotky je nevhodný. A nakonec PNG sice dokáže uložit fotku v plné kvalitě a s průhledností, ale podporuje pouze ZIP kompresi, která je pro ukládání fotek nevhodná. Výsledná fotka pak má často několik megabajtů a na pomalejším připojení (2G/3G, ADSL, apod.) se bude stahovat dlouhou dobu (až několik minut).

Výřezy je tedy lepší buď vůbec nepoužívat nebo se zamyslet nad tím, jak velkou část vyřezáváte a jak velký bude výsledný obrázek. Např. pokud je průhledný výřez jen šikmý přechod mezi dvěma fotkami, lze fotky rozdělit na 3 části, kde průhledná (PNG) bude jen ta prostřední s přechodem a krajní části budou neprůhledné JPG.

Pro představu stačí na danou vrstvu kliknout ve Photoshopu pravým tlačítkem, zvolit Exportovat jako… a zvolit PNG. Velikost výsledného obrázku se zobrazí ve sloupci vlevo. Dobu stažení pak lze snadno odhadnout tak, že každých 100kB zabere 1 až 5 sekund. Obrázek o velikosti 1MB se tak bude stahovat 10 sekund až 1 minutu. A je potřeba počítat s tím, že stránka neobsahuje jediný obrázek a samotná stránka (texty, styly, apod.) zabere několik dalších stovek kB.

Vyplnění prostoru textem a fotkami

Spousta prezentačních stránek (popis firmy, stránka s výrobkem, atd.) obsahuje kombinaci textu a obrázků. Grafik může v takovém případě uspořádat text a fotky tak, aby zcela vyplňovali prázdný prostor a velikost fotek navrhne přesně tak, aby do prostoru pasovali.

Představte si layout, kde máte nahoře logo firmy, v levé polovině text o přesně dané délce a druhou polovinu stránky vyplníte 9 fotkami (3×3 s mezerami mezi nimi), jejichž velikost grafik navrhne tak, aby byly stejně široké jako polovina loga a stejně vysoké jako text. Jako layout ve Photoshopu to vypadá nádherně.

Když se ale takový layout převede do webu a velikosti se nastaví částečně automaticky (podle textu), částečně v absolutních jednotkách (mezery mezi obrázky) a zbytek v relativních jednotkách (33% z 50% šířky stránky), tak najednou zjistíte, že je nemožné zajistit, aby obrázky přesně vyplnily prostor a byly stejně velké jako okolní prvky.

Je to proto, že obrázek musí na jednu stranu reagovat na změny rozměrů stránky a na druhou stranu musí zachovat svůj poměr stran (který je v takovém případě většinou zcela náhodný podle původního návrhu). Když se pak zmenší šířka stránky, zmenší se i šířka obrázků což znamená, že se zmenší i jejich výška. Text se v takovém případě ale chová obráceně, protože když se zmenší šířka, text se zalomí na více řádek a zvětší se jeho výška.

V případě kombinace textu a obrázků je tedy potřeba navrhnout takový layout, ve které nebude vadit, že text a fotky přesně nelícují a mohou se (třeba o pár pixelů) posunou na libovolnou stranu.

Logo a ikony v SVG

Pro loga, ikony a podobné jednoduché grafiky je nejlepší je uložit jako SVG a přímo použít na webu. Správně uložené SVG se totiž dokáže v prohlížeči zvětšit na libovolnou velikost a nevzniká tak problém s pixelovatostí a potřebou mít obrázky ve větším rozlišení.

Při exportu SVG je ale potřeba dávat pozor na dvě věci:

Za prvé, pokud logo nebo ikona obsahuje text, bude jako text uložen i do SVG. Pokud ale používá nějaké speciální písmo, nebude pravděpodobně prohlížeč schopen toto písmo použít na SVG a logo se změní. Před exportem do SVG je tedy potřeba všechny texty převést na vektorové objekty, aby se zachoval jejich tvar.

Za druhé, pokud se v grafice vyskytuje nějaký rastrový obrázek nebo byla nějaká vrstva převedena na rastr (např. kvůli stínu, rozmazání, apod.), uloží se do SVG jako binárně (Base64) zakódovaný PNG obrázek. Nejenže bude v takovém případě obrázek o 30% větší, než kdyby byl uložen přímo jako PNG, ale navíc ztratí schopnost se libovolně zvětšovat a ve větších rozměrech bude rozmazaný.

Pokud tedy chcete grafiku exportovat do SVG, je potřeba zajistit, aby všechny její části byly vektorová grafika nebo písmo. Pozor na to, že i písmo může být rastrové!

Pozor na to, že i když prohlížeče (od IE9) umí SVG zobrazit, nedokáží toho tolik jako editory typu Photoshop nebo Inkscape. Pokud tedy použijete nějakou speciální vlastnost editoru (např. barevný přechod, oříznutí textu, apod.) nemusí prohlížeč danou vrstvu zobrazit nebo může obrázek úplně zahodit (a považovat ho za chybné SVG).

V tomto případě ani nepomůže SVG zobrazit v prohlížeči, protože při vykreslení samotného obrázku se může prohlížeč chovat trochu jinak než když ten samý obrázek kreslí do webové stránky!

Texty (překlady)

Při návrhu se většinou používají texty v angličtině nebo v jazyce zákazníka. Pokud nejsou dopředu známi, použije se Lorem Ipsum.

To ale není příliš dobré, protože nepřináší představu o tom, jak dlouhé texty budou v jiných jazycích.

Pro příklad si vezměme přihlašovací tlačítko. Když na něj grafik napíše „Login“, stačí mi 80px široké tlačítko a dá se vecpat kamkoliv (třeba vedle 200px loga při 320px šířce). Pokud ale stránku vytvoříte v češtině, budete tam muset napsat „Přihlášení“ a už bude potřeba 150px a do 320px se vám nevejde (vedle loga). A to nemluvím o němčině, kde je to „Mitglieder Login“ a je to 4x delší než v angličtině.

Pak bude kodér nařknut z toho, že tlačítko vyteklo ven nebo skočilo na další řádek, i když za to vůbec nemůže, protože prostě není možné do daného návrhu nacpat text o dané délce. Kodér často ani nemá možnost tohle odhalit, protože překlady se většinou dělají až poté, co je stránka hotová.

Při vkládání hlavně kratších textů je zkuste párkrát zopakovat a podívat se, jak se to na layoutu projeví. Když tedy do přihlašovacího tlačítka napíšete „Login Login Login“, nemělo by se vám stát, že vás překvapí delší překlad.

U němčiny také pamatujte na to, že obsahuje spoustu slovních složenin, které není možné zalomit tak jako v angličtině. Pokud tedy navrhujete text, který je v malém prostoru zalomená na několik řádek, zkuste několik slov spojit dohromady a podívat se jestli nevytečou ven.

Např. místo „Musíte souhlasit s našimi podmínkami ochrany osobních údajů.“ zkuste „Musíte souhlasit s našimi podmínkamiochranyosobníchúdajů.“. Nepřekvapí vás pak německý překlad „Sie müssen unsere Datenschutzbestimmungen einhalten.„