Archief voor de categorie 'XHTML'

Tabulaire data of een list?

17 April 2008, geplaatst in XHTML door Davy

Johan (Wolfr) heeft het nieuwe design van zijn blog Wolf’s Little Store deze week gelanceerd. Vriend Dieter heeft hierop al zijn mening geventileerd. De conversaties over dat nieuwe design zijn jammer genoeg verspreid, maar ik wou toch nog even inpikken op een conversatie op Twitter gisterenavond.

Wolf zegt dat de inhoudtafel op de homepage tabulaire data is. Ik ben het daar niet helemaal mee eens.

Waaruit bestaat zijn homepage? Uit een overzicht van alle artikels die op zijn blog zijn gepost. Technisch gesproken kan je dat wel in tabelvorm gieten, maar volgens mij kan je het eleganter oplossen.

Zo ziet de huidige markup eruit:

<table cellspacing="0" cellpadding="0" id="grid">
  <tr>
    <td class="date"><p>April 16, 2008</p></td>
    <td class="category">
      <ul class="post-categories">
        <li><a href="" title="" rel="category tag"></a></li>
      </ul>
    </td>
    <td><h2><a href="" rel="bookmark" title=""></a></h2></td>

    </tr>
</table>

Eerste bedenkingen:

  • Waarom zou je de datum in <p> tag plaatsen?
  • Waarom categorieën in <ul> als je maar 1 categorie telkens gaat gebruiken?
  • Waarom een tabel?

Waarom geen tabel?

Wanneer ik de CSS uitschakel en ik de broncode lineair overloop, dan krijg ik nu:

  1. datum
  2. categorie
  3. titel

Dit voelt niet goed aan. De titel is belangrijker dan de datum en de categorie, en dus zou die eerst moeten komen.

Een andere bedenking die ik me maak is: hoe zal de homepage zal weergegeven worden op mobile devices. Tabelrendering lijkt me door de kleine schermen minder evident.

Daarom zou ik met deze oplossing op de proppen komen:

<ul id="articles">
  <li>
    <h2><a href="" rel="bookmark" title=""></a></h2>
    <p class="meta">
      On <span class="date">April 16, 2008</span> in
      <a href="" rel="category tag">Category</a>
    </p>
  </li>
</ul>

Via negatieve text-indent, en absolute positionering van de date en link, kan je de woorden ‘on’ en ‘in’ verbergen op de frontend.
Je zou zelfs een <ol> (ordered list) kunnen gebruiken, omdat het kan beschouwd worden als een numerieke opsomming van de artikels.

Een andere mogelijkheid is via een definition list, waarbij er een relatie bestaat tussen de titel van het artikel en de meta data:

<dl id="articles">
  <dt><h2><a href="" rel="bookmark" title=""></a></h2></dt>
  <dd class="date">April 16, 2008</dd>
  <dd class="category">
    <a href="" title="" rel="category tag">inspiration</a>
  </dd>
</dl>

Niet alleen wordt de markup compacter, ook wanneer je CSS uitschakelt, leest het iets natuurlijker.
Via CSS kan je dan uiteraard identiek dezelfde visuele tabel creëren.

In HTML kan je meestal een probleem op verschillende manieren benaderen. Het is alleen kwestie van alle opties te overwegen en uitmaken wat een goeie manier is en wat de betere manier.

Minimal design is 1 ding, minimale markup iets anders.