Jak vytvořit web od základů asi víte, ale ty spousty malých drobností okolo je dobré si nechat někým připomenout.

V tomhle článku nechci psát o tom, jak začít s tvorbou vlastního webu. Trochu jsem o tom už něco napsala v článku 5 věcí, které promyslet, když chcete nový web, a v budoucnu chystám další články na podobné téma. Tenhle článek ale předpokládá, že svůj web už vytváříte anebo máte, a že řešíte, nebo možná budete řešit, drobné, ale přesto důležité detaily. Žádné složité zbytečnosti na efekt, ale funkce každodenní potřeby – třeba mapy.

1. Přidání Google mapy v HTML

O existenci API klíčů u Google Maps asi víte. Mají počítat požadavky ze strany prohlížeče, a od určitého počtu je zpoplatnit. Požadavek je například i pouhé zobrazení mapy u kontaktu (je započítán v případě, že návštěvník webu stránku s mapou zobrazí). Pro někoho, pro koho není práce s API klíči rutinní, může být vygenerování vlastního klíče k mapě nesrozumitelné a časově náročné. A  žádný plugin už mapu bez klíče nezobrazí. Proto je tu varianta, kterou Google zatím stále nezakázal, a to je vložení mapy ve formě HTML, který lze najít u ní samotné. Zapomeňte na pluginy a ukázněte mapu pěkně po staru, přes textový editor.

Návod krok za krokem: 1. Zadejte do Google Maps v počítači požadovanou adresu. 2. Vyhledejte. 3. V nově otevřeném levém panelu zvolte „Sdílet“. 4. Zvolte „Vložení mapy“. 5. Okopírujte HTML kód. 6. Vložte ho do textového editoru na místo, kde chcete mapu zobrazit.

2. Univerzální mobilní padding

Když chcete zarovnat text do rámečku (například) tak nějak hezky doprostřed, aby nebyl ani moc vysoko, ani moc u krajů, nastavujete vnější a vnitřní padding, zpravidla v pixelech. Na desktopu z backendu nastavíte, aktualizujete nebo dáte náhledový režim, a prohlédnete. Většina builderů ale nemá možnost mobilního náhledu. A neustálé aktualizace a prohlížení si zarovnání v mobilu je často zdlouhavé a nezábavné. Proto se hodí vědět, že když nepotřebujete rovnat do mobilní verze nějakou složitou kompozici prvků, nejlíp vychází padding 20 px ze všech čtyř stran.

3. Otevření obrázku v novém okně místo v lightboxu

S lightboxy je někdy kříž a kdo nepotřebuje detailní plynulou prezentaci svých obrázků, ale chce otevřít jednu jedinou věc na celém webu ve vyskakovacím okně (například zvětšit svůj diplom na stránce O mně) a netrávit tím hodně času, může to vyřešit odkazem. Jak? Obrázek nahraje do knihovny a umístí ho na stránce na místo, kam patří. Potom jde do knihovny médií, a u toho samého obrázku si zkopíruje jeho URL (ta bude začínat stejně, jako adresa webu a pokračovat bude třeba složkou, kde je obrázek umístěn, např. www.mujweb.cz/wp-content/uploads/2018/nazev-obrazku.jpg). Tuto URL je třeba vložit jako odkaz obrázku, a zvolit, aby se otevíral v novém okně. Takhle snadno nahrajete nejen obrázky, ale třeba i často tolik potřebná PDF ke stažení.

4. Nastavení trvalých odkazů u příspěvků v blogu

Způsob, jakým se vytváří trvalé odkazy u příspěvků, si většinou lze vybrat. Dejte proto pozor, aby vám nastavení vyhovovalo. Odkaz s datem, bez něj, číselný, jeden si s rozmyslem vyberte, a toho se pak držte. Jednak proto, že když to změníte, přestanou fungovat všechny prokliky na příspěvek tam, kde jste je dřív sdíleli. A co hůř, pokud používáte plugin na sdílení na sociálních sítích, ztratíte počty sdílení. Pluginy většinou započítávají počet sdílení jedné konkrétní URL. Když jí změníte, plugin nebude mít k příspěvku žádné záznamy a začne počítat zase od nuly.

5. Zmenšení objemu fotek

Možná teď budu vypadat, že říkám úplně jasnou a samozřejmou věc. Já se ale setkala se spoustou lidí, kteří to neví – na web není dobré nahrávat příliš objemné fotografie a obrázky. Velké objemy bajtů totiž výrazně zpomalují načítání stránek. Já se snažím nechodit přes 200 kB. Takže na závěr, jestli se vám web pomalu načítá, koukněte v první řadě na obrázky. Víc vám k rychlosti vašeho webu řekne třeba tenhle test.