Infoboks: 2 kolonner — Format, regler og eksempler

En to-kolonners infoboks deler én idé i nøyaktig to parallelle punkter, slik at leseren kan forstå sammenhengen på et øyeblikk. Bruk den når paret er mer nyttig side om side enn begravd i et avsnitt: to ansvarsområder, to stadier, to perspektiver, eller to komplementære deler av ett svar.

Det gjengitte eksemplet er én infoboks, én felles tittel og nøyaktig to elementer. Begge elementene svarer på samme type spørsmål med sammenlignbar dybde. Elementet påstår ikke at de to behovene er motsetninger; det viser at en nyttig brief må ta hensyn til begge.

Hvorfor dette elementet er viktig

Tett prosa tvinger lesere til å rekonstruere sammenhenger. I en setning som «En innholdsbrief må tjene leseren ved å løse en oppgave og tjene virksomheten ved å støtte en kvalifisert handling» finnes de to ansvarsområdene, men grensene er svake. En to-kolonners infoboks gjør det felles emnet synlig én gang og gir hvert ansvarsområde en navngitt region. Lesere kan skanne begge overskriftene, velge hvor de vil starte, og sammenligne mengden og typen detaljer uten å lese en sammensatt setning på nytt.

Den psykologiske fordelen kommer fra chunking: å gruppere relatert informasjon i avgrensede enheter. Fellesoverskriften forteller leseren hva som forblir konstant, mens elementoverskriftene viser hva som endrer seg. Dette hierarkiet er spesielt nyttig når ingen av punktene bør dominere. Vanlig prosa gir naturlig nok det første punktet mer fremtredende plass og kan få det andre til å føles som en ettertanke; tilpassede kolonner signaliserer lik redaksjonell vekt.

Maskinuttrekkbarhet er programvares evne til å isolere en innholdsenhet samtidig som betydningen bevares. En typet infoboks eksponerer et overordnet emne og to eksplisitte underelementer. Et gjenfinningssystem kan bevare fellesoverskriften, elementoverskrifter, brødtekst og kildeordning i stedet for å gjette hvor én leddsetning slutter og den andre begynner. Hvert element må fortsatt være selvstendig: «Forretningskravet er bevis som støtter en kvalifisert handling» overlever uttrekk, mens «Den andre siden» ikke gjør det.

Struktur redder ikke svak tenkning. Hvis kilden inneholder ett utviklet punkt og én setning lagt til for symmetri, gjør gjengiveren bare ubalansen mer tydelig. Bruk skrivereglene for elementer : skriv hele resonnementet først, velg deretter dette elementet kun når den ferdige ideen virkelig har to parallelle deler. De elementspesifikke reglene på denne siden har forrang der de definerer elementets eksakte punktkartlegging og begrensninger.

Når du skal bruke det

Bruk en to-kolonners infoboks når alle fire betingelser er oppfylt:

1. Det er én klar overordnet idé som kan titulere hele boksen.
2. Den overordnede ideen deler seg naturlig i nøyaktig to elementer.
3. Begge elementene utfører samme informasjonsjobb, for eksempel å forklare et ansvarsområde, stadium, målgruppeperspektiv eller dimensjon.
4. Hvert element kan forstås på omtrent 30–90 ord uten en nestet struktur.

Gode bruksområder inkluderer «Før lansering / Etter lansering», «Lesersignal / Bedriftssignal», «Hva endres / Hva forblir det samme» og «Eiers ansvar / Anmelders ansvar». Etikettene bør avsløre en reell relasjon. Hvis leseren ikke kan fullføre setningen «Disse hører sammen fordi…», er grupperingen sannsynligvis dekorativ.

Nære bomtilfeller er viktige fordi et to-kolonners oppsett kan få nesten ethvert par til å se tilsiktet ut. Ikke bruk det for én idé delt ved et vilkårlig setningsskille. Ikke gjør en liste med fire elementer om til to lange kolonner bare for å spare vertikal plass; kildeordning og skanning blir tvetydige. Ikke bruk det for en detaljert produktsammenligning med flere kriterier, fordi en sammenligningstabell gir hvert kriterium en eksplisitt rad. Ikke bruk det for fordeler og ulemper når antall punkter er ulikt, eller når lesere må veie flere avveininger. Ikke par en definisjon med en salgsfremmende handlingsoppfordring: disse blokkene utfører forskjellige jobber og fortjener ikke lik behandling.

Det sterkeste varseltegnet er en etikett som «Annet», «Mer» eller «Tilleggsinformasjon». Slike etiketter avslører at todelingen følger tilgjengelig plass snarere enn mening. Returner innholdet til prosa, eller finn den faktiske distinksjonen før du bruker elementet.

Hvor du skal plassere det

Plasser infoboksen umiddelbart etter avsnittet som introduserer den felles ideen. Leseren trenger én setning kontekst før han eller hun møter todelingen, men bør ikke måtte krysse urelatert bevis eller en annen underseksjon for å nå den. Etter boksen fortsetter du med analyse, eksempler eller instruksjoner som gjelder begge elementene.

Den kan plasseres rett under en H2 når H2-en selv leverer den overordnede ideen og infoboksen har sin egen mer spesifikke tittel. Den kan også følge en kort definisjon når de to elementene forklarer dimensjoner av denne definisjonen. Den må ikke plasseres mellom en påstand og dens kildehenvisning, mellom et trinn og betingelsen som kreves for å fullføre dette trinnet, eller inne i et element i en nummerert liste. Disse posisjonene bryter relasjoner som bør forbli sammenhengende.

Ikke plasser den ved siden av en annen to-kolonners infoboks, sammenligningstabell, fanesett eller fordeler-og-ulemper-blokk. Tilstøtende parallelle strukturer tvinger leseren til å bestemme hvilken visuell relasjon som betyr noe, og kan skape tilsynelatende fire kolonner på brede skjermer. Sett inn forklarende prosa mellom distinkte strukturer, eller kombiner materialet til én bedre egnet tabell eller seksjon. Unngå å plassere den rett før eller rett etter en to-kolonners handlingsoppfordring; identisk geometri kan få redaksjonell forklaring til å se salgsfremmende ut.

Bruk maksimalt én to-kolonners infoboks i en kort seksjon. Gjentakelse gjør en nyttig kontrast til sidepynt. Når en lang artikkel inneholder flere genuine par, skill dem under forskjellige overskrifter og bekreft at hvert par har en distinkt overordnet idé.

Anatomi

Anatomi består av én overordnet region og to gjentatte underordnede regioner. Skjermbildet bør merke semantiske deler, ikke utfylling eller fargetokener, slik at spesifikasjonen forblir nyttig hvis det visuelle systemet endres.

1. Ytre avgrensning: Grupperer den overordnede tittelen og begge elementene som én redaksjonell enhet.
2. Felles tittel: Navngir ideen som begge elementene forklarer. Det er ikke et tredje punkt.
3. Første elements tittel og brødtekst: Angir det første medlemmet av paret i fullstendig, uttrekkbart språk.
4. Andre elements tittel og brødtekst: Svarer på samme type spørsmål med tilpasset dybde.
5. Oppsettsrelasjon: Bruker like brede kolonner når plassen tillater det, og stabler element én før element to på smale skjermer.

Grenser, bakgrunn, mellomrom, radius, skala og brytepunkt tilhører gjengiveren. Forfattere kontrollerer innholdshierarkiet og rekkefølgen, ikke visuelle symboler.

Designeksempler

Det er ett semantisk element med fire støttede innholds- og visningsvarianter. Varianter endrer tittelhåndtering eller responsiv presentasjon; de endrer aldri kravet om nøyaktig to elementer.

Standard titulert variant: Foretrukket for frittstående bruk. En felles tittel navngir den overordnede ideen, og begge underelementene har konsise titler.

Kontekstuell tittelvariant: Den umiddelbart foregående H2-en kan fungere som den felles tittelen. Dette er kun tillatt når intet avsnitt eller komponent skiller H2-en fra boksen, og infoboksen har et tilgjengelig navn avledet fra den overskriften.

Kompakt variant: Bruk for to korte definisjoner eller ansvarsområder. Hver brødtekst danner fortsatt en fullstendig setning; oppsettet blir ikke et par slagord.

Smal visningsvariant: Elementene stables vertikalt. Rekkefølgen forblir meningsfull uten referanser til «venstre», «høyre», «over» eller «ved siden av».

Ikoner er ikke en innholdsvariant. Hvis designsystemet legger til dekorative ikoner, bruker de tom alternativtekst og erstatter ikke elementtitler. Hvis hvert element trenger et informativt bilde, bruk et bildeorientert element i stedet for å utvide denne infobokskontrakten.

Parametere

Parameterkontrakten forhindrer at elementet glir over i et generisk rutenett. Verdier som beskriver mening, tilhører forfattet innhold; responsivt oppsett forblir i gjengiveren.

Tittelen er påkrevd med mindre den umiddelbart foregående dokumentoverskriften leverer samme overordnede emne og kan merke beholderen programmatisk. Elementinnholdsblokker tillater vektlegging, innebygd kode og én nyttig lenke. De tillater ikke nestede overskrifter, tabeller, media, akkordioner, skjemaer, handlingsoppfordringer eller en annen infoboks.

Syntaks og kodeeksempler

Alle tre notasjonene bevarer samme overordnede tittel, to ordnede elementer, elementtitler og elementinnholdsblokker. Direktivet for bærbar Markdown er den kanoniske kilden. Hugo- og WordPress-formene er adapterkontrakter; deres gjengivere må produsere ekvivalent semantisk HTML og responsiv rekkefølge.

Bærbar Markdown-direktiv

:::infobox-2-columns
## En nyttig innholdsbrief svarer på to spørsmål

::item
### Hva trenger leseren?

Angi spørsmålet, beslutningen eller oppgaven siden må løse, inkludert konteksten som endrer svaret.
::

::item
### Hva trenger virksomheten?

Angi den kvalifiserte handlingen siden skal støtte, sammen med bevisene som kreves for å oppnå denne handlingen.
::
:::

Den første overordnede overskriften kartlegges til title. Hver ::item kartlegger sin første overskrift til item.title og den gjenværende brødteksten til item.content. Denne eksakte to-element-kartleggingen overstyrer den generelle tillatelsen for gjentakbare elementer i grunnreglene.

Hugo shortcode

{{< infobox-2-columns title="En nyttig innholdsbrief svarer på to spørsmål" >}}
  {{< infobox-item title="Hva trenger leseren?" >}}
  Angi spørsmålet, beslutningen eller oppgaven siden må løse, inkludert konteksten som endrer svaret.
  {{< /infobox-item >}}
  {{< infobox-item title="Hva trenger virksomheten?" >}}
  Angi den kvalifiserte handlingen siden skal støtte, sammen med bevisene som kreves for å oppnå denne handlingen.
  {{< /infobox-item >}}
{{< /infobox-2-columns >}}

Adaptoren bruker kun navngitte parametere. Den må avvise et tredje element i stedet for å pakke det inn i stillhet, og den må bevare den forfattede elementrekkefølgen når oppsettet stables.

WordPress-blokk

<!-- wp:amicited/infobox-2-columns {"title":"En nyttig innholdsbrief svarer på to spørsmål"} -->
  <!-- wp:amicited/infobox-item {"title":"Hva trenger leseren?"} -->
  <p>Angi spørsmålet, beslutningen eller oppgaven siden må løse, inkludert konteksten som endrer svaret.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Hva trenger virksomheten?"} -->
  <p>Angi den kvalifiserte handlingen siden skal støtte, sammen med bevisene som kreves for å oppnå denne handlingen.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-2-columns -->

WordPress bør eksponere to faste elementplasser i stedet for et ubegrenset «legg til blokk»-område. Redaktører kan omorganisere de to elementene, men kan ikke sette inn en urelatert blokk mellom dem eller legge til en tredje kolonne.

Eksempler

Godt eksempel

Dette fungerer fordi fellesoverskriften etablerer én idé, tidsgrensen skaper et genuint par, og begge kolonnene spesifiserer sammenlignbart målearbeid. Hvert element forblir meningsfullt når det stables eller trekkes ut uavhengig.

Dårlig eksempel

Forbedre innholdet ditt

Skriv godt: Lag nyttig, autoritativt og engasjerende innhold som målgruppen din vil elske, og som søkemotorer vil belønne.

Andre ting: SEO inkluderer også teknisk arbeid, lenker, konverteringsdesign, analyse, merkevarebygging, distribusjon, vedlikehold og mange flere viktige aktiviteter.

Dette mislykkes fordi paret er kunstig. «Skriv godt» er en vag instruksjon, «Andre ting» er en diverse kategori, og det andre elementet inneholder langt mer omfang enn det første. Boksen antyder like, parallelle konsepter der ingen eksisterer. Erstatt det med prosa som definerer det faktiske innholdsmålet, og bruk deretter en liste eller separate seksjoner for de distinkte arbeidsstrømmene.

Skjemamerking og tilgjengelighet

En to-kolonners infoboks har ingen dedikert Schema.org-type og oppretter ikke frittstående strukturerte data. Teksten forblir en del av den omsluttende Article, TechArticle eller WebPage når siden kvalifiserer for den merkingen. Ikke merk de to elementene som ItemList bare fordi det er to av dem; elementet representerer en relasjon, ikke nødvendigvis en rangert eller fullstendig liste. Hvis et element uavhengig inneholder et faktum som brukes andre steder i strukturerte data, styrer sidens skjemapolicy det faktumet.

Semantisk HTML bør uttrykke én merket beholder med to underseksjoner. Bruk et aside kun når paret er komplementært til den omkringliggende fortellingen; bruk en section når det er en del av hovedargumentet. Gi beholderen et tilgjengelig navn gjennom sin synlige tittel og aria-labelledby. Hver barneoverskrift må være en reell overskrift på riktig nivå, ikke fet tekst valgt for utseende.

Kildeordning er tilgjengelighetsordning. Tastaturnavigasjon, skjermlesere, kopier-og-lim og smale skjermer må møte element én før element to. CSS kan lage kolonner, men må ikke visuelt reversere dem. Referer aldri til «den venstre boksen» eller «den høyre boksen», fordi disse posisjonene forsvinner når de stables. Farge, ikonform og bakgrunn kan ikke være den eneste måten å skille elementer på. Designet må støtte tekstzoom uten beskjæring, horisontal rulling eller overlappende kolonner.

Skriveregler

Start med å skrive overordnet setning: «Denne ideen har to deler: X og Y.» Hvis den setningen er unøyaktig, ikke bruk elementet. Gi begge elementtitlene samme grammatiske form – to substantiv, to spørsmål eller to tidsuttrykk – fordi parallelt språk gjør relasjonen umiddelbart lesbar.

Bruk nøyaktig to elementer. Hold hver tittel på 2–7 ord og hver brødtekst på 30–90 ord der det er mulig, med et absolutt maksimum på 120 ord. En forskjell på én setning er akseptabelt; et 35-ords element ved siden av et 110-ords element krever redigering eller en annen struktur. Hver brødtekst bør svare på det samme underforståtte spørsmålet og bruke sammenlignbar bevisdybde. Tilpasset dybde betyr ikke å fylle et kort svar med fyllstoff.

Bruk direkte, nøytralt språk. Angi distinksjonen i titlene og forklar konsekvensen i brødtekstene. Foretrekk «Før lansering / Etter lansering» fremfor «Først / Andre», fordi meningsfulle etiketter overlever uttrekk. Unngå «enten/eller» med mindre valgene er virkelig gjensidig utelukkende, og unngå «versus» når elementene er komplementære.

Sett aldri disse inni elementet:

• Et tredje element, selv om gjengiveren kunne pakke det inn.
• En flertrinns prosedyre, lang punktliste, datatabell, priseringsrutenett, skjema, testimonial eller salgsfremmende banner.
• Uavhengige H2-seksjoner, nestede infobokser, faner, akkordioner, video eller bildegallerier.
• Påkrevd juridisk tekst, sikkerhetsadvarsler, kildelister eller kvalifikasjoner som kun gjelder én setning utenfor boksen.
• To urelaterte lenker designet for å ligne konkurrerende handlingsoppfordringer.

Hvis ett av elementene trenger underoverskrifter eller mer enn to avsnitt, oppgrader begge elementene til vanlige sideseksjoner. Hvis lesere må velge mellom elementene, legg til beslutningskriterier i prosa eller bruk et sammenlignings- eller beslutningselement; visuell symmetri alene forklarer ikke et valg.

Innholdstyper som bruker det

Feltet postTypes i front matter er kilden for dette brukssettet. Hver oppførte type har en naturlig todelt relasjon, men ingen bør inkludere elementet som standard når innholdet ikke utgjør et genuint par.

QA-sjekkliste

• Én overordnet idé: Boksen har ett tydelig felles emne som forklarer hvorfor begge elementene hører sammen.
• Nøyaktig to elementer: Kilde og gjengitt utdata inneholder to underelementer – aldri ett, tre eller en tom plass.
• Ekte parallellitet: Begge elementene svarer på samme type spørsmål og bruker titler med parallell grammatikk.
• Tilpasset dybde: Intet element er en symbolsk motvekt eller en diverse samlekategori; detaljer og bevis er sammenlignbare.
• Nyttig plassering: Boksen følger sin introduserende kontekst og skiller ikke en påstand fra bevis eller et trinn fra sitt krav.
• Trygge naboer: Den er ikke ved siden av et annet parallelt rutenett, sammenligningskomponent eller to-kolonners CTA.
• Uttrekkbar ordlyd: Overordnede og elementtitler navngir sine emner, og brødtekster er ikke avhengige av «venstre», «høyre» eller nærliggende pronomen.
• Responsiv rekkefølge: Smale oppsett stabler element én før element to uten beskjæring, horisontal rulling eller visuell omorganisering.
• Tilgjengelig struktur: Beholderen har et synlig programmatisk navn, barneoverskrifter er reelle overskrifter, og farge eller ikoner bærer ikke mening alene.
• Innholdsbegrensninger: Hver brødtekst holder seg innenfor to avsnitt og inneholder ingen nestet kompleks komponent, prosedyre eller salgsfremmende kontroll.
• Notasjonsparitet: Bærbar Markdown, Hugo og WordPress bevarer samme tittel, to elementer, brødtekster og rekkefølge.
• Skjemabegrensning: Ingen liste- eller sammenligningsmerking legges til med mindre sideinnholdet uavhengig kvalifiserer for det.

En anmelder bør avvise elementet når noen av de fire første kontrollene feiler. Disse feilene indikerer et konseptuelt problem, ikke en stildefekt, og endring av bredde eller dekorasjon kan ikke reparere dem.

FAQ

Front matter FAQ-oppføringene svarer på de tilbakevendende implementeringsspørsmålene: elementantallet er fastsatt til to, dybde betyr mer enn identiske ordantall, detaljerte sammenligninger trenger en tabell, mobil bevarer kildeordning, og elementet genererer ikke skjemamerking. Å holde disse svarene i strukturert front matter lar akademimalen gjengi den godkjente FAQ-behandlingen uten å duplisere innholdet i brødteksten.