Uprava textů pro responzivní web

Nástroje popsané v tomto dokumentu jsou dostupné ve verzi aplikace Alff 5.4.0.

S požadavkem na přizpůsobení webových stránek šířce displeje zařízení na kterém stránky prohlížíme je spojeno několik úskalí. V tomto článku si popíšeme jak využít nástroje redakčního systému aplikace Alff pro nové články, popřípadě jak upravit ty starší, aby bylo vše OK.

Ke dni 10.4. 2020 jsou nejpoužívaněkší rozlišení obrazovky tato:

1.	360x640	10,78 %
2.	1920x1080	10,29 %
3.	1366x768	9,31 %

Zařízení se šířkou displeje větší než 2000px je něco kolem 2%. Mobily a tablety se dnes podílí na návštěvnosti více než z 50%.

Co budeme řešit?

• Šířka textových bloků pro pohodlné čtení.
• Umístění obrázků a videa v textu.
• Používání tabulek.
• Obsahové komponenty.

Layout stránky

Chceme-li se vyhnout možným problémům se zobrazováním na mobilním zařízení, můžeme použí vhodný layout webu, při kterém jsou obrázky a další podobný obsah (např. videa) odděleny od textového obsahu a je jim přiděleno místo a připraven způsob zpracování.

Tato metoda má jednu nevýhodu - netextový obsah (obrázky, video...) mohou být nositeli informací patřících k textu. O tuto informační hodnotu přijdeme pokud oddělíme netextové prvky od textu.

Na obrázku vpravo vidíte umístění textového obsahu a další obsah do pevného layoutu. Takto připravený web řeší většinu níže popisovaných problémů, takže máte-li takovýto web, zbytek článku nemusíte číst.

Sloupcová sazba

Pro pohodlné čtení textu se nabízejí v zásadě dvě možnosti :

• omezit šířku textových bloků
• použít sloupcovou sazbu

Sloupcová sazba je dobrým řešením - při různých šířkách displeje můžeme nastavit různý počet sloupců.

V redakčním systému můžete vložit blok pro sloupcovou sazbu pomocí html šablony doublecolumn, threecolumn, fourcolumn.

Responzivní obrázky

Menu obsahuje příkazy pro vkládání kódu responzivních obrázků - imageflex a responzive. Na responzivní obrázky je kladen jeden základní požadavek - nesmí být větší než obrazovka.

Kromě tohoto základního požadavku jsou zde i další:

• do zařízení nestahovat zbytečně velké obrázky
• umístit obrázek do textu  tak, aby na větších displejích zabíral část okna, na malých okno téměř celé

V redačním systému jsou připraveny nástroje pro vkládání kódů HTML5PICT - příkaz responzive a IFLEX - příkaz imgflex. Najdete je v menu obrázku. Po vyvolání příkazu je kó zkopírován do schránky.

Oba kódy jsou popsány níže.

Současná norma HTML rozšiřuje značku IMG pro obrázek tak, aby vyhovoval uvedeným požadavkům:

‹img src="/puvodni-obrazek.jpg" sizes="(min-width: 600px) calc((100vw - 2*8px) * 0.30), 100vw" srcset="/maly-obrazek.jpg 350w, /vetsi-obrazek.jpg 600w, /maly-obrazek.jpg 800w,/vetsi-obrazek.jpg 1000w" alt="ilustrace"›

Co kód znamená:

srcset uvádí URL obrázků v různých velikostech 

sizes uvádí jakou velikost prohlížeč použije pro různé šířky displeje - zde je to nastaveno tak, že u šířky nad 600px bude obrázek zabírat 30% šířky okna, u menších obrazovek bude obrázek zobrazen přes celou stránku (- padding 8px).

src je uveden proto že je povinný pro značku IMG a také je zde pro prohlížeče, které neumí s srcset pracovat.

Pro jednodušší práci s obrázky jsou v redakčním systému připraveny dva vkládací kódy.

procentoIFLEXidobrazku

V praxi bude kód pro obrázek ID 333 široký 25% okna vypadat takto: 25IFLEX333.

Kód bude na výstupu nahrazen klikacím obrázkem širokým dle čísla procento. V menších zašízeních bude mít 100% šířky.

Tento kód neřeší zarovnání - to můžete udělat tak, že vyberete kód myší a v menu editoru Formáty vyberete třídu rim (do prava), nebo lim (do leva).

HTML5PICTidobrazkuZarovnani

V praxi bude kód pro obrázek ID 333 zarovnaný vpravo vypadat takto: HTML5PICT333R.

Tento kód neřeší velikost - ta je nastavena napevno v konverzní utilitě, zde 33%. Zarovnání může mít hodnoty R, L nebo N(bez zarovnání).

Kód bude na výstupu nahrazen klikacím obrázkem širokým dle nastavení. V menších zašízeních bude mít 100% šířky.

ImgFlex

Pro vkládání vice obrázků vedle sebe je připravena šablona imgflex-33.html, a imgflex-50.html. Tento blok se zmenšuje do nastaveného breakpointu, pak se obrázky umístí pod sebe a pokusí se využít celou šířku okna.

Obrázky v šabloně můžete pochopitelně nahradit, doporučujeme kód IFLEX.

Video

Pokud vložíte do stránky video pomocí běžných nástrojů textového editoru, nebude responzivní.

Proto můžete použít jednu z metod popsaných zde.

Tabulky

Tabulky se nemohou scvrknout na užší šířku a tím pádem způsobí to, že obsah stránky je širší než obrazovka.

Redakční systém nabízí dvě řešení:

1. Skrolovací tabulka

Tabulka (zbavená atributů určujících šířku) je vložena do kontejneru div s třídou scrollable-table. Pro vytvoření tabulky můžete použít html šablonu tablescrollable.html.

2. Transformace tabulky

Tabulka se po zmenšení displeje transformuje do vertikálně orientovaného bloku.

řádek 1	buňka 1	buňka 2	buňka 3	buňka 4	buňka 5	buňka 6
řádek 2	buňka 1	buňka 2	buňka 3	buňka 4	buňka 5	buňka 6

Tabulce jednoduše přiřadíte trídu tableToDiv.

Obsahové komponenty

Karta produktu vložená do textu pomocí kódu Pokud potřebujete vložit do textu strukturovaná data - položku katalogu, kontakt, kartu dokumentu, můžete použít některý z připravených vkládacích kódů.

Pokud vám takový kód chybí, rádi ho připravíme.

Příklad: GODRCRD1234L (R,N) 1234=id položky, L,R,N, zarovnání.