Ein solches Layout birgt Herausforderungen, denen ich bisher noch nicht so oft begegnet bin. Deshalb ist das auch ein Grund es mal zu versuchen. Vor allem muss der grafische Entwurf des neuen Designs auch flexibel funktionieren. Noch kurz Fakten: ich habe mich bei der Breite des Wrappers für 60em = 960px (bei der Standardschriftgröße von 16px) entschieden, was momentan dem Standard entspricht und auch mit gängigen Grids funktioniert. Eine feine empfehlenswerte Sache ist in diesem Zusammenhan der px-to-em calculator.

Es bleibt spannend <– blöde Floskel! Spannend ist vor allem, wann ich wieder Zeit finden werde, inspiriert und kreativ an meinem grafischen Entwurf weiter zu Arbeiten. Es fühlt sich aber seltsamerweise gut an, HTML und Screendesign gleichzeitig zu bearbeiten, da sich das auch gegenseitig beeingflusst. Das ist so völlig anders als die Arbeit in der Agentur, wo man meist mit dem HTML erst beginnt, sobald das Screendesign fertig ist.

• Beginn des Redesigns (3)
• Dieses Design ist zu Klischee-zweinullig! (9)
• Redesign Teil4: Es wird ein Relaunch (3)
• CSS Naked Day 2009 (0)

• Streifen
• Runde Ecken
• Glossy Header
• Seltsamer Button mit Zacken

Nein, es wirkt auch nicht sehr rund und kommt wenig durchdacht rüber. Liegt wohl daran, dass ich ewig dran rumgebastelt hab. Da verliert man irgendwann den Fokus fürs Ganze. Auch die Code Basis des Designs basiert noch auf einem uralten WordPress Template, dass vor Divitis nur so strotzt. Also kann die Devise nur sein, von Null anzufangen.

Ein neues Design muss her und ja, Gedanken hab ich mir schon einige darüber gemacht. Bis es allerdings soweit ist wird noch eine Weile vergehen.

Ihr seid dran

Um diese Seite so gut wie möglich zu machen, mache ich jetzt trotz allem was total 2nulliges ;-), ich binde den Nutzer mit in die Neugestaltung der Seite und ihr sorgt für Nutzergenerierten Content. Nehmt euch kurz Zeit um folgende Fragen zu beantworten

• Was fehlt dem aktuellen Design?
• Wo sollte man nachbessern?
• Was darf auf keinen Fall wegfallen?
• Was ist gelungen?
• Was ist absolut überflüssig?
• Sonstige Anregungen, Anmerkungen, Kritik?

Ich bitte um euer konstruktives Feedback im Kommentarbereich!

• Redesign Teil2: CSS Reset, Besinnung auf das Wesentliche (4)
• Redesign Teil3: Experimente mit Struktur und Farben (5)
• (X)HTML Tags und ihre semantische Bedeutung Teil 1: Einführung (2)
• Wordpress und das PHP Memory Limit (7)

Teile der Serie:

1. Einführung
2. Neutrale Elemente <div> und <span>

Das <div> Element

Das <div> (div = division = Bereich) Tag steht semantisch gesehen für einen allgemeinen Bereich, der mit CSS formatiert werden kann. Ein <div> erzeugt, sofern nicht durch eine CSS Angabe verhindert, einen neuen Absatz und ist daher Teil der Blockelemente in HTML. Es darf aber auch andere Blockelemente umschließen. (Erklärung Inline/Block auf Selfhtml).
<div> Elemente werden oft zur Strukturierung und Ausrichtung der groben Seitenbereiche (Rahmen/Kopf/Inhalt/Fuß/Sidebar) eingesetzt.

Einsatzbeispiel <div>

<div class="rahmen">
<div class="header">Inhalt des Kopfes</div>
<div class="content">Eigentlicher Inhalt</div>
<div class="sidebar">Inhalt der Sidebar</div>
<div class="footer">Inhalt des Footers</div>
</div>

Die hier vergebenen Klassen wie z.B. header können per CSS formatiert werden.

Das <span> Element

Das <span> (span = Spanne, Bereich) Element bezeichnet einen allgemeinen inline Bereich, was heißt, dass mit <span> einzelne Teile eines Textes innerhalb eines Blockelements, wie z.B. <p> nochmal extra (mit CSS) formatiert werden können. Ein inline Element wie <span> erzeugt keinen neuen Absatz und kann somit innerhalb von Texten, oder auch für einzelne Buchstaben eingesetzt werden.

Einsatzbeispiel <span>

<span style="color:red">Roter</span> Text,
<span style="color:blue">blauer</span> Text,
<span style="color:green">grüner</span> Text.

Das obige Beispiel sieht folgendermaßen aus:Roter Text, blauer Text, grüner Text.

Im nächsten Teil der Serie werde ich mich mit sematischen Hervorhebungen für Texte beschäftigen.

Diese Serie wird nicht fortgesetzt. Die im Netz frei verfügbaren Referenzen zu HTML sind erschöpfend und eine weitere würde nur Verwirrung stiften. Wer weiterführende Informationen zu HTML-Elementen sucht, dem sei Michael Jendryschiks “Einführung in XHTML und CSS empfohlen.”

• (X)HTML Tags und ihre semantische Bedeutung Teil 1: Einführung (2)
• Do you speak semantic and valid (X)HTML ? (9)
• Redesign Teil3: Experimente mit Struktur und Farben (5)
• jquery Anfänger Screencasts (10)

Teile der Serie:

1. Einführung
2. Neutrale Elemente <div> und <span>

So wie es in der deutschen Grammatik Verben und Nomen gibt, so hat auch HTML Elemente, die für bestimmte Bereiche benutzt werden. In dieser Serie geht es mir hauptsächlich um die Auszeichnungen von Text, da man beim Einbinden eines Bildes, oder Videos semantisch gesehen nicht viel falsch machen kann. Da man ja heutzutage jedes HTML Element per CSS formatieren kann, darf auch das browserspezifische Aussehen eines Elements (fett, groß, klein) nicht mehr Grund für den Einsatz eben dieses Elements sein, sondern nur dessen Bedeutung im Kontext des Inhalts der Seite.

Beispiele zum Verständnis

Um zu verdeutlichen, was Semantik bei HTML überhaupt bedeutet hier ein Beispiel:

Auszeichnung einer Überschrift (böse)

<div class="ersteueberschrift">Überschrift</div>

Auszeichnung einer Überschrift (gut)

<h1>Überschrift</h1>

Warum Semantik?

Manch einer wird sagen, wir brauchen uns doch nicht zu kümmern, mit welchem Element ich meinen Inhalt auszeichne, hauptsache es sieht im Browser richtig aus. Falsch!
Semantisch korrekter Code hat viele Vorteile. Hier mal eine (vielleicht unvollständige) Liste:

1. Lesbarkeit / Wartbarkeit des Codes
   Man kann auf den ersten Blick sehen, welches Element wofür steht und so den Code bei einer Änderung schneller durchschauen und ggf. ändern.
2. Barrierearmut
   Semantisch korrekter Code wird bspw. in einem Screenreader wesentlich verständlicher wiedergegeben als z.B. ein Tabellellayout
3. Suchmaschinenoptimierung / Maschinenlesbarkeit
   Dadurch, dass der Code durch die korrekte Semantik maschinenlesbar wird, sind auch die Ergebnisse der Suchmaschinen besser. Durch die semantische Struktur wird auch die Struktur des Inhalts für die Suchmaschine erkennbar und kann somit die Relevanz aller Teile des Inhalts bestimmen (eine Überschrift wird stärker gewertet als ein Absatz.
4. Wiederverwendbarkeit des Codes
   Der Code kann, da man mittlerweile alleine durch CSS das Design ändern kann, bei einem Redesign leicht wieder benutzt werden.

Mehr Semantik für alle!

Richtige Semantik verbietet Layouttabellen und das font-Tag! Für Webdesigner der “alten Schule” ist ab sofort Umdenken angesagt, denn semantisch korrekter Code hat nur Vorteile und ist auch leichter zu schreiben, lesen und warten. In den folgenden Teilen der Serie werde ich nun einige HTML Elemente und ihren richtigen Platz zeigen, wo man sie einsetzen sollte und wo lieber nicht.

• (X)HTML Tags und ihre semantische Bedeutung: Teil 2 neutrale Elemente div und span (0)
• Dieses Design ist zu Klischee-zweinullig! (9)
• Do you speak semantic and valid (X)HTML ? (9)
• Redesign Teil3: Experimente mit Struktur und Farben (5)

• Nur eins der Unternehmen hatte eine valide Website.
• Mindestens 5 hatten reine Flashseiten
• Nur 2 Seiten waren semantisch annähernd korrekt
• Von den nicht validen Seiten reichte die Fehlerzahl von 3 – 691
• Mehr als die Hälfte der Seiten setzte auf Tabellenlayouts
• 2 Firmen haben überhaupt keine Website

Wie zur Hölle soll ich eine Ausbildung bei einer Firma machen, die grundlegende Regeln des Webs nicht kennt, oder nicht beachtet. Momentan bin ich wirklich enttäuscht von der Medienlandschaft, werde meine Suche dennoch fortsetzen.

• (X)HTML Tags und ihre semantische Bedeutung: Teil 2 neutrale Elemente div und span (0)
• (X)HTML Tags und ihre semantische Bedeutung Teil 1: Einführung (2)
• Praktikumsplatz gesucht! (0)
• Redesign Teil3: Experimente mit Struktur und Farben (5)