Infobox: 2 stĺpce — formát, pravidlá a príklady

Dvojstĺpcový infobox rozdeľuje jednu myšlienku na presne dva paralelné body, takže čitateľ pochopí vzťah na prvý pohľad. Použite ho, keď je dvojica užitočnejšia vedľa seba ako zahĺbená v odseku: dve zodpovednosti, dve fázy, dva pohľady alebo dve doplňujúce sa časti jednej odpovede.

Tento vykreslený príklad je jeden infobox, jeden zdieľaný názov a presne dve položky. Obe položky odpovedajú na rovnaký typ otázky v porovnateľnej hĺbke. Prvok netvrdí, že tieto dve potreby sú protiklady; ukazuje, že užitočný brief musí zohľadňovať obe.

Prečo na tomto prvku záleží

Hustá próza núti čitateľov rekonštruovať vzťahy. Vo vete ako „Obsahový brief musí slúžiť čitateľovi vyriešením úlohy a slúžiť podnikaniu podporou kvalifikovanej akcie“ existujú dve zodpovednosti, ale ich hranice sú nejasné. Dvojstĺpcový infobox zviditeľní zdieľaný subjekt raz a dá každej zodpovednosti pomenovanú oblasť. Čitatelia môžu skenovať oba nadpisy, vybrať si, kde začať, a porovnať množstvo a typ detailov bez opätovného čítania zloženej vety.

Psychologický prínos spočíva v chunkovaní: zoskupovaní súvisiacich informácií do ohraničených jednotiek. Zdieľaný názov hovorí čitateľovi, čo zostáva konštantné, zatiaľ čo názvy položiek ukazujú, čo sa mení. Táto hierarchia je obzvlášť užitočná, keď by nemal dominovať ani jeden bod. Bežná próza prirodzene dáva prvému bodu väčšiu výraznosť a môže spôsobiť, že druhý vyznie ako dodatočná myšlienka; vyvážené stĺpce signalizujú rovnakú redakčnú váhu.

Strojová extrahovateľnosť je schopnosť softvéru izolovať jednotku obsahu pri zachovaní jej významu. Typovaný infobox odhaľuje nadradenú tému a dve explicitné podradené položky. Vyhľadávací systém môže zachovať zdieľaný názov, názvy položiek, telo textu a poradie zdroja namiesto hádania, kde končí jedna veta a začína druhá. Každá položka musí byť stále sebestačná: „Obchodná požiadavka je dôkaz podporujúci kvalifikovanú akciu“ prežije extrakciu, zatiaľ čo „Druhá strana“ nie.

Štruktúra nezachráni slabé myslenie. Ak zdroj obsahuje jeden rozpracovaný bod a jednu vetu pridanú kvôli symetrii, renderer len zvýrazní nerovnováhu. Aplikujte pravidlá písania prvkov : najprv napíšte plné odôvodnenie, potom vyberte tento prvok len vtedy, keď hotová myšlienka skutočne má dve paralelné časti. Pravidlá špecifické pre prvok na tejto stránke majú prednosť tam, kde definujú jeho presné mapovanie položiek a limity.

Kedy ho použiť

Použite dvojstĺpcový infobox, keď sú splnené všetky štyri podmienky:

1. Existuje jedna jasná nadradená myšlienka, ktorá môže pomenovať celý box.
2. Nadradená myšlienka sa prirodzene delí na presne dve položky.
3. Obe položky vykonávajú rovnakú informačnú úlohu, napríklad vysvetlenie zodpovednosti, fázy, perspektívy publika alebo dimenzie.
4. Každá položka je zrozumiteľná zhruba v 30 – 90 slovách bez vnorenej štruktúry.

Dobré použitia zahŕňajú „Pred spustením / Po spustení“, „Signál čitateľa / Signál podnikania“, „Čo sa mení / Čo zostáva rovnaké“ a „Zodpovednosť vlastníka / Zodpovednosť recenzenta“. Označenia by mali odhaliť skutočný vzťah. Ak čitateľ nedokáže dokončiť vetu „Tieto patria k sebe, pretože…“, zoskupenie je pravdepodobne dekoratívne.

Prípady tesného neúspechu sú dôležité, pretože dvojstĺpcové rozloženie môže spraviť takmer každý pár zámerným. Nepoužívajte ho na rozdelenie jednej myšlienky v ľubovoľnom zlome vety. Nemenite zoznam štyroch položiek na dva dlhé stĺpce len kvôli úspore vertikálneho miesta; poradie zdroja a skenovanie sa stávajú nejednoznačnými. Nepoužívajte ho na detailné porovnanie produktov s viacerými kritériami, pretože porovnávacia tabuľka dáva každému kritériu explicitný riadok. Nepoužívajte ho na výhody a nevýhody, keď sa počet bodov líši alebo keď čitatelia musia zvážiť viacero kompromisov. Nespárujte definíciu s propagačnou výzvou na akciu: tieto bloky vykonávajú rôzne úlohy a nezaslúžia si rovnaké zaobchádzanie.

Najsilnejším varovným signálom je označenie ako „Iné“, „Ďalšie“ alebo „Dodatočné informácie“. Tieto označenia odhaľujú, že rozdelenie nasleduje dostupné miesto, nie význam. Vráťte obsah do prózy alebo nájdite skutočné rozlíšenie pred použitím prvku.

Kam ho umiestniť

Umiestnite infobox hneď za odsek, ktorý uvádza zdieľanú myšlienku. Čitateľ potrebuje jednu vetu kontextu predtým, než narazí na rozdelenie, ale nemal by musieť prejsť cez nesúvisiace dôkazy alebo inú podsekciu, aby sa k nemu dostal. Po boxe pokračujte analýzou, príkladmi alebo inštrukciami, ktoré sa vzťahujú na obe položky.

Môže byť umiestnený priamo pod H2, keď samotné H2 poskytuje nadradenú myšlienku a infobox má svoj vlastný konkrétnejší názov. Môže tiež nasledovať po krátkej definícii, keď dve položky vysvetľujú dimenzie tejto definície. Nesmie sa objaviť medzi tvrdením a jeho citáciou, medzi krokom a podmienkou potrebnou na dokončenie tohto kroku ani vo vnútri položky zoradeného zoznamu. Tieto pozície narúšajú vzťahy, ktoré by mali zostať súvislé.

Neumiestňujte ho vedľa iného dvojstĺpcového infoboxu, porovnávacej tabuľky, sady kariet alebo bloku výhod a nevýhod. Susedné paralelné štruktúry nútia čitateľa rozhodnúť sa, ktorý vizuálny vzťah je dôležitý, a na širokých obrazovkách môžu vytvoriť štyri zdanlivé stĺpce. Vložte vysvetľujúcu prózu medzi odlišné štruktúry alebo skombinujte materiál do jednej vhodnejšej tabuľky či sekcie. Vyhnite sa umiestneniu bezprostredne pred alebo za dvojstĺpcovou výzvou na akciu; identická geometria môže spôsobiť, že redakčné vysvetlenie bude vyzerať propagačne.

Použite maximálne jeden dvojstĺpcový infobox v krátkej sekcii. Opakovanie mení užitočný kontrast na nábytok stránky. Keď dlhý článok obsahuje niekoľko skutočných párov, oddeľte ich pod rôznymi nadpismi a potvrďte, že každý pár má odlišnú nadradenú myšlienku.

Anatómia

Anatómia obsahuje jednu nadradenú oblasť a dve opakujúce sa podradené oblasti. Screenshot by mal označovať sémantické časti, nie výplň alebo farebné tokeny, aby špecifikácia zostala užitočná, ak sa vizuálny systém zmení.

1. Vonkajšia hranica: Zoskupuje nadradený názov a obe položky ako jednu redakčnú jednotku.
2. Zdieľaný názov: Pomenúva myšlienku, ktorú obe položky vysvetľujú. Nie je to tretí bod.
3. Názov a telo prvej položky: Uvádza prvého člena dvojice v úplnom, extrahovateľnom jazyku.
4. Názov a telo druhej položky: Odpovedá na rovnaký typ otázky so zodpovedajúcou hĺbkou.
5. Vzťah rozloženia: Používa stĺpce rovnakej šírky, keď to priestor umožňuje, a na úzkych obrazovkách ukladá prvú položku pred druhú.

Okraje, pozadie, medzery, zaoblenie, veľkosť písma a breakpoint patria do renderera. Autori kontrolujú hierarchiu obsahu a poradie, nie vizuálne tokeny.

Príklady dizajnu

Existuje jeden sémantický prvok so štyrmi podporovanými variantmi obsahu a zobrazenia. Varianty menia prácu s názvom alebo responzívnu prezentáciu; nikdy nemenia požiadavku na presne dve položky.

Predvolený variant s názvom: Preferovaný pre samostatné použitie. Zdieľaný názov pomenúva nadradenú myšlienku a obe podradené položky majú výstižné názvy.

Variant s kontextovým názvom: Bezprostredne predchádzajúce H2 môže slúžiť ako zdieľaný názov. Je to povolené len vtedy, keď žiadny odsek alebo komponent neoddeľuje H2 od boxu a infobox má prístupný názov odvodený z tohto nadpisu.

Kompaktný variant: Použite pre dve krátke definície alebo zodpovednosti. Každé telo stále tvorí úplnú vetu; rozloženie sa nestáva dvojicou taglines.

Variant pre úzke zobrazenie: Položky sa ukladajú vertikálne. Poradie zostáva zmysluplné bez odkazov na „vľavo“, „vpravo“, „nad“ alebo „vedľa“.

Ikony nie sú variantom obsahu. Ak dizajnový systém pridá dekoratívne ikony, používajú prázdny alternatívny text a nenahrádzajú názvy položiek. Ak každá položka potrebuje informatívny obrázok, použite prvok orientovaný na obrázok namiesto rozširovania tohto kontraktu infoboxu.

Parametre

Kontrakt parametrov zabraňuje tomu, aby sa prvok posunul do generickej mriežky. Hodnoty, ktoré opisujú význam, patria do autorského obsahu; responzívne rozloženie zostáva v rendereri.

Názov je povinný, pokiaľ bezprostredne predchádzajúci nadpis dokumentu neposkytuje rovnakú nadradenú tému a nevie programovo označiť kontajner. Telá položiek umožňujú dôraz, inline kód a jeden užitočný odkaz. Neumožňujú vnorené nadpisy, tabuľky, médiá, accordiony, formuláre, výzvy na akciu ani ďalší infobox.

Syntax a príklady kódu

Všetky tri zápisy zachovávajú rovnaký nadradený názov, dve zoradené položky, názvy položiek a telá položiek. Prenosná Markdown direktíva je kanonický zdroj. Formuláre Hugo a WordPress sú adaptérové kontrakty; ich renderery musia produkovať ekvivalentné sémantické HTML a responzívne poradie.

Prenosná Markdown direktíva

:::infobox-2-columns
## Užitočný obsahový brief odpovedá na dve otázky

::item
### Čo potrebuje čitateľ?

Uveďte otázku, rozhodnutie alebo úlohu, ktorú musí stránka vyriešiť, vrátane kontextu, ktorý mení odpoveď.
::

::item
### Čo potrebuje podnikanie?

Uveďte kvalifikovanú akciu, ktorú má stránka podporiť, spolu s dôkazmi potrebnými na dosiahnutie tejto akcie.
::
:::

Prvý nadradený nadpis sa mapuje na title. Každý ::item mapuje svoj prvý nadpis na item.title a zostávajúce telo na item.content. Toto presné mapovanie dvoch položiek nahrádza všeobecné povolenie opakovateľných položiek v základných pravidlách.

Hugo shortcode

{{< infobox-2-columns title="A useful content brief answers two questions" >}}
  {{< infobox-item title="What does the reader need?" >}}
  State the question, decision, or task the page must resolve, including the context that changes the answer.
  {{< /infobox-item >}}
  {{< infobox-item title="What does the business need?" >}}
  State the qualified action the page should support, along with the evidence required to earn that action.
  {{< /infobox-item >}}
{{< /infobox-2-columns >}}

Adaptér používa iba pomenované parametre. Musí odmietnuť tretiu položku namiesto tichého zabalenia a musí zachovať autorské poradie položiek, keď sa rozloženie poskladá.

WordPress block

<!-- wp:amicited/infobox-2-columns {"title":"A useful content brief answers two questions"} -->
  <!-- wp:amicited/infobox-item {"title":"What does the reader need?"} -->
  <p>State the question, decision, or task the page must resolve, including the context that changes the answer.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"What does the business need?"} -->
  <p>State the qualified action the page should support, along with the evidence required to earn that action.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-2-columns -->

WordPress by mal vystaviť dve pevné pozície položiek namiesto neobmedzenej oblasti „pridať blok“. Editori môžu preusporiadať dve položky, ale nemôžu medzi ne vložiť nesúvisiaci blok ani pridať tretí stĺpec.

Príklady

Dobrý príklad

Toto funguje, pretože zdieľaný názov stanovuje jednu myšlienku, časová hranica vytvára skutočný pár a oba stĺpce špecifikujú porovnateľnú meraciu prácu. Každá položka zostáva zmysluplná pri poskladaní alebo extrahovaní nezávisle.

Zlý príklad

Zlepšite svoj obsah

Píšte dobre: Vytvárajte užitočný, autoritatívny a pútavý obsah, ktorý vaše publikum zbožňuje a vyhľadávače odmenia.

Iné veci: SEO zahŕňa aj technickú prácu, odkazy, dizajn konverzií, analytiku, budovanie značky, distribúciu, údržbu a mnoho ďalších dôležitých aktivít.

Toto zlyháva, pretože pár je umelý. „Píšte dobre“ je vágny pokyn, „Iné veci“ je rôznorodá kategória a druhá položka obsahuje oveľa viac rozsahu ako prvá. Box implikuje rovnaké, paralelné koncepty tam, kde neexistujú. Nahraďte ho prózou, ktorá definuje skutočný obsahový cieľ, potom použite zoznam alebo samostatné sekcie pre odlišné pracovné oblasti.

Značkovanie Schema a prístupnosť

Dvojstĺpcový infobox nemá vyhradený typ Schema.org a nevytvára samostatné štruktúrované dáta. Jeho text zostáva súčasťou obklopujúceho Article, TechArticle alebo WebPage, keď stránka spĺňa podmienky pre toto značkovanie. Neoznačujte dve položky ako ItemList len preto, že sú dve; prvok predstavuje vzťah, nie nevyhnutne zoradený alebo úplný zoznam. Ak položka nezávisle obsahuje fakt používaný inde v štruktúrovaných dátach, riadi ho politika schema na úrovni stránky.

Sémantické HTML by malo vyjadriť jeden označený kontajner s dvoma podriadenými sekciami. Použite aside len vtedy, keď je dvojica doplňujúca k okolitému rozprávaniu; použite section, keď je súčasťou hlavného argumentu. Dajte kontajneru prístupný názov prostredníctvom jeho viditeľného názvu a aria-labelledby. Každý podriadený názov musí byť skutočný nadpis na správnej úrovni, nie len tučný text vybraný kvôli vzhľadu.

Poradie zdroja je poradie prístupnosti. Klávesová navigácia, čítačky obrazovky, kopírovanie a vkladanie a úzke obrazovky musia naraziť na prvú položku pred druhou. CSS môže vytvárať stĺpce, ale nesmie ich vizuálne obrátiť. Nikdy neodkazujte na „ľavý box“ alebo „pravý box“, pretože tieto pozície pri poskladaní zmiznú. Farba, tvar ikony a pozadie nemôžu byť jediným spôsobom rozlíšenia položiek. Dizajn musí podporovať priblíženie textu bez orezania, horizontálneho posúvania alebo prekrývania stĺpcov.

Pravidlá písania

Začnite napísaním nadradenej vety: „Táto myšlienka má dve časti: X a Y.“ Ak je táto veta nepresná, prvok nepoužívajte. Dajte obom názvom položiek rovnaký gramatický tvar — dve podstatné mená, dve otázky alebo dva časové údaje — pretože paralelný jazyk robí vzťah okamžite čitateľným.

Použite presne dve položky. Každý názov udržujte na 2 – 7 slovách a každé telo na 30 – 90 slovách, kde je to možné, s absolútnym maximom 120 slov. Rozdiel jednej vety je prijateľný; 35-slovná položka vedľa 110-slovnej položky vyžaduje úpravu alebo inú štruktúru. Každé telo by malo odpovedať na rovnakú implicitnú otázku a používať porovnateľnú hĺbku dôkazov. Zodpovedajúca hĺbka neznamená vypĺňanie krátkej odpovede výplňou.

Používajte priamy, neutrálny jazyk. Uveďte rozlíšenie v názvoch a vysvetlite jeho dôsledky v telách. Uprednostnite „Pred spustením / Po spustení“ pred „Prvý / Druhý“, pretože zmysluplné označenia prežijú extrakciu. Vyhnite sa „buď/alebo“, pokiaľ možnosti nie sú skutočne vzájomne sa vylučujúce, a vyhnite sa „verzus“, keď sú položky doplňujúce.

Nikdy nedávajte dovnútra prvku:

• Tretiu položku, aj keby ju renderer vedel zabaliť.
• Viackrokový postup, dlhý zoznam odrážok, dátovú tabuľku, cenník, formulár, svedectvo alebo propagačný banner.
• Nezávislé sekcie H2, vnorené infoboxy, karty, accordiony, video alebo galérie obrázkov.
• Povinný právny text, bezpečnostné varovania, zoznamy zdrojov alebo kvalifikácie, ktoré sa vzťahujú len na jednu vetu mimo boxu.
• Dva nesúvisiace odkazy navrhnuté tak, aby pripomínali konkurenčné výzvy na akciu.

Ak niektorá položka potrebuje podnadpisy alebo viac ako dva odseky, presuňte obe položky do bežných sekcií stránky. Ak si čitatelia musia vybrať medzi položkami, pridajte rozhodovacie kritériá v próze alebo použite porovnávací či rozhodovací prvok; vizuálna symetria sama osebe nevysvetľuje výber.

Typy príspevkov, ktoré ho používajú

Pole frontmatter postTypes je zdrojom pre túto množinu použití. Každý uvedený formát má prirodzený dvojdielny vzťah, ale žiadny by nemal obsahovať prvok štandardne, keď obsah netvorí skutočný pár.

Kontrolný zoznam QA

• Jedna nadradená myšlienka: Box má jeden jasný zdieľaný subjekt, ktorý vysvetľuje, prečo obe položky patria k sebe.
• Presne dve položky: Zdroj a vykreslený výstup obsahujú dve podradené položky — nikdy jednu, tri alebo prázdne miesto.
• Skutočný paralelizmus: Obe položky odpovedajú na rovnaký typ otázky a používajú názvy s paralelnou gramatikou.
• Zodpovedajúca hĺbka: Ani jedna položka nie je symbolickým protiváhou alebo rôznorodým zberačom; detaily a dôkazy sú porovnateľné.
• Užitočné umiestnenie: Box nasleduje svoj uvádzajúci kontext a neoddeľuje tvrdenie od dôkazu ani krok od jeho požiadavky.
• Bezpeční susedia: Nie je susedom inej paralelnej mriežky, porovnávacieho komponentu alebo dvojstĺpcovej CTA.
• Extrahovateľná formulácia: Nadradený a položkové názvy pomenúvajú svoje subjekty a telá nezávisia od „vľavo“, „vpravo“ ani blízkych zámen.
• Responzívne poradie: Úzke rozloženia ukladajú prvú položku pred druhú bez orezania, horizontálneho posúvania alebo vizuálneho preusporiadania.
• Prístupná štruktúra: Kontajner má viditeľný programový štítok, podriadené názvy sú skutočné nadpisy a farba alebo ikony nenesú význam samostatne.
• Limity obsahu: Každé telo zostáva v rámci dvoch odsekov a neobsahuje vnorený komplexný komponent, postup ani propagačný ovládací prvok.
• Parita zápisu: Prenosný Markdown, Hugo a WordPress zachovávajú rovnaký názov, dve položky, telá a poradie.
• Zdržanlivosť Schema: Žiadne značkovanie zoznamu alebo porovnania sa nepridáva, pokiaľ naň obsah stránky nezávisle nespĺňa podmienky.

Recenzent by mal prvok odmietnuť, keď zlyhá ktorákoľvek z prvých štyroch kontrol. Tieto zlyhania indikujú koncepčný problém, nie defekt štýlu, a zmena šírky alebo dekorácie ho nemôže napraviť.

FAQ

Položky FAQ v frontmatter odpovedajú na opakujúce sa implementačné otázky: počet položiek je pevne stanovený na dve, hĺbka je dôležitejšia ako identické počty slov, detailné porovnania vyžadujú tabuľku, mobil zachováva poradie zdroja a prvok negeneruje značkovanie schema. Uchovávanie týchto odpovedí v štruktúrovanom frontmatter umožňuje akadémiovej šablóne vykresliť schválené spracovanie FAQ bez duplikovania obsahu v tele.