Eine der wichtigsten Bestandteile von Antville sind die zahlreichen Formulare. Bisher bestehen sie aus Tabellen, die schwierig mit CSS zu beeinflussen sind. In Zukunft werden sie allerdings durch ein <div>-basiertes Layout ersetzt.

Grundsätzlich habe ich bisher 2 Formulartypen definiert. Zum einen gibt es Label-Input-Formulare. Sie bestehen zum Großteil aus Textlabels und simplen Texteingabefeldern. Am Ende findet sich noch ein Submit-Button zum Absenden. Jede Zeile wird in ein <div> mit der CSS-Klasse „row“ verpackt. Innerhalb der Zeile wird mit Hilfe von CSS das Label-Element linksbündig ausgerichtet mit einer fixen Breite. Über die Klassen „w140“, „w160“, „w200“, usw. werden die Breiten der Labels definiert. Dies kann bei besonders kurzen bzw. langen Labels notwendig sein. Interessant ist diese Formatierung für die unterschiedlichen Sprachversionen, da durch eine kleine Änderung im Standardlayout die Breiten an die Textlängen angepasst werden können. Hier ein Beispiel:

<form id="myDemoForm" method="post" action="myAction">
<div class="form">
   <div class="row">
      <label for="myFormField">
         <% gettext "Label for the input field" suffix=":" %>
      </label>
      <input type="text" name="myFormField" id="myFormField" />
   </div>
    
   <!-- some more rows with input fields... -->
    
   <div class="row">
      <button type="submit" id="submit" name="register" value="1">
         <% gettext Register %>
      </button>
   </div> 
</div>
</form>

/** CSS-Auszug **/ .form .row label:first-child { width: 160px; display: inline-block; }

.form .row .col { display: inline-block; }

.w100 { width: 100px; }

Der zweite Typ sind Listenansichten mit mehreren verbunden Aktionen. Ein Beispiel: Eine Liste aller Fotos inkl. der Aktionen „Bearbeiten“, „Umbenennen“ und „Löschen“ auf der rechten Seite. Hier gibt es ein <hr /> zum Trennen der einzelnen Listeneinträge, danach folgt ein <div class="details"> mit allen Informationen zum Eintrag und darauf folgt eine Liste mit den zur Verfügung stehenden Optionen. Damit sollte auch die Zugänglichkeit für Screenreader etc. deutlich verbessert werden.

<hr class="listSeparator" />
<div class="listNavigationItem">
   <div class="details">
      <h2><% membership.name %></h2>
      <p><em><% membership.role %></em></p>
      <p><% membership.user.url | link %></p>
   </div>

   <ul>       <li>Editieren</li>       <li>Bearbeiten</li>       <li>Löschen</li>    </ul> </div>

Da ich noch nicht alle Skins und Formulare überarbeitet habe, können sich noch weitere Typen heraus kristallisieren. Allerdings scheinen diese beiden Varianten die am häufigsten vorkommenden zu sein und damit ein Großteil der Formulare auf Antville abdecken.

Die letzten Monate hat sich eine neue Denkweise in die Webdesignwelt eingenistet. Vor der bunten Web 2.0 Bewegung galt häufig Graceful Degration als das Ziel allen Strebens. Dabei wurde jedes Feature so umgesetzt, dass es auch einen sinnvollen Fallback für ältere Browsergenerationen gab. Mit den häufigen Update und automatischen Aktualisierungen hat sich dieses Problem aber – ausgenommen Microsofts Internet Explorer – mehr oder weniger in Luft aufgelöst. Daher musste ein neuer Ansatz gefunden werden.

Progressive Enhancement versucht alle neuen Features von Browsern bestmöglich einzusetzen. Statt sich auf den kleinsten gemeinsamen Nenner zwischen den Browsern zu einigen, versucht man nun eine Basisversion direkt im Browser so weit wie möglich zu verbessern. Ein bekanntes Beispiel sind runde Ecken und Schattenwürfe. Statt mit Hintergrundgrafiken und anderen Tricks zu arbeiten, bietet man für ältere Browser ein einfaches CSS an, inkludiert aber gleichzeitig auch die neuen CSS3-Eigenschaften. Da das CSS3 von älteren Browsern ignoriert wird, erhalten sie nur die Basisversion. Neuere Browser wenden allerdings die Regeln korrekt an und erhalten so eine aufgehübschte Webseite.

.rounded-corners {
   border: 1px solid black;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
}

Was mit CSS-Mitteln funktioniert, kann auch auf die clientseitige JavaScript-Programmierung umgelegt werden. Browser, die bestimmte Features nicht unterstützen, bekommen diese einfach nicht mit alten Mitteln zur Verfügung gestellt und müssen mit der Basisvariante der Webseite auskommen.