webdesign in kleinen happen

Wie findet man Farben die zueinander passen?

2005-09-23T16:28:00.000+02:00

So, die Matheklausuren sind rum, vielleicht hab ich jetzt wieder mehr Zeit. Aber Urlaub muss ja auch mal noch sein. Aber um mal wieder was hier reinzuschreiben: Wie suche ich mir Farbschemata aus? Man braucht ja immer 2 oder 3 Farben die zueinander passen. Aber welche Farben passen denn zueinander?

Die einfachste Möglichkeit sind Komplementärfarben. Wenn man sich einen Farbkreis anschaut, sind gegenüberliegende Farben komplementär. Blau-Gelb oder Grün-Lila sind solche Kombinationen. Diese lassen sich eigentlich immer verwenden. Man muss vielleicht noch etwas an der Helligkeit der Sättigung herumprobieren.

Eine andere Möglicheit ist es, einen Farbbereich zu nehmen. Also zum Beispiel Rot-Orange-Gelb. Durch viele feinere Abstufungen sieht das dann wie aus einem Guss aus. Allerdings könnte etwas Kontrast das Ganze wieder etwas aufpeppen. Wenn man natürlich einen geschäftlich-seriösen Eindruck machen will: Einfarbig.

Manche Websites brauchen mehrere Farben, um zum Beispiel Bereiche zu kennzeichnen. Hier ist es ratsam, keine satten Farben zu verwenden. Dunkelrot oder Pastellrot ist ok, aber knallrot normalerweise nicht. Natürlich gibt es Ausnahmen und manche Seiten wollen einfach auffallen.

UTF-8 was und warum?

2005-09-14T22:53:00.000+02:00

UTF-8 oder Unicode Transformation Format in 8 Bit ist ein Unicode Format um Text zu übertragen. Es ist das Standardformat für XHTML und deswegen für Webdesigner wichtig.

Früher einmal war ein Buchstabe durch 8 Bit, also 1 Byte, codiert. Heutzutage will man aber mehr als 256 Zeichen verwenden. Die Chinesen würden nichtmal ihr Alphabet da drin unterbringen. Sonderzeichen, wie zum Beispiele viele verschiedene Landeswährungen ( € ¥ $ £ ), müssen ja auch noch rein. UTF-8 erlaubt deswegen bis zu 4 Byte pro Zeichen (2³²=4.294.967.296 Zeichen). Die Ersten 128 sind identisch mit dem alten ASCII Zeichensatz, so dass Unicode abwärtskompatibel ist.

Was bedeutet es nun, dass UTF-8 Standard für XHTML ist? Zum Beispiel, dass es eigentlich unnötig ist, HTML Entities wie Uuml und szlig zu verwenden. UTF-8 hat alle diese Zeichen im Zeichensatz, also ist eine zusätzliche Kodierung sinnlos.

Probleme gibt es nur, wenn der Browser oder andere Empfänger es nicht als Unicode erkennen. Das kann passieren, wenn der Webserver Mist baut oder falls der Editor des Webdesigners die Dateien nicht als UTF-8 abspeichert. In Deutschland kommt oft iso-8895-1 alias Latin-1 zum Zuge, aber Vorteile zu UTF-8 gibt es eigentlich keine. Leider gibt aus auch noch keine Betriebssystem, das Unicode bis zum letzten Winkel integriert hat. OSX und Ubuntu sollen am nächsten dran sein.

Zusammenfassend: Keine Angst Sonderzeichen direkt zu schreiben und immer Alles (HTML, CSS und Co) in UTF-8 abspeichern.

Hover Button optimiert

2005-09-11T20:27:00.000+02:00

Es gibt viele Anleitungen, wie man mit CSS animierte Buttons macht. Diese Methode hat einen kleinen Nachteil. Wenn der Besucher zum ersten Mal über so einen Knopf fährt, braucht der Browser einen Moment, bis das zweite Bild nachgeladen ist. Das kann man verbessern.

Der Trick ist die beiden Knöpfe in ein Bild zu packen und dann das Bild zurecht zu schieben.Das ist ein Bild mit den zwei Knöpfen. 42 Pixel hoch, also 21 Pixel pro Knopf.

#nav a {height: 21px; background: url("doublebutton.gif") 0px 0px no-repeat;}
#nav a:hover {background-position: 0px -21px;}

Der Trick ist pink markiert. Die Grafik beginnt nun sozusagen 21 Pixel über dem Knopf, wird aber nur im Knopf angezeigt. Also sieht man nur die untere Hälfte. Es ist auch wichtig die Höhe (height) anzugeben, damit nicht aus Versehen etwas abgeschnitten oder zuviel angezeigt wird.

Übrigens sollte man noch width: 108px, padding-left: 20px; display: block; angeben, damit es wirklich richtig angezeigt wird.

Wie setzt man eigentlich Redezeichen korrekt?

2005-09-10T15:14:00.000+02:00

In der Schule lernt man, dass direkte Rede mit "Gänsefüßchen unten" anfängt und mit "Gänsefüßchen oben" aufhört. Sobald man dann mit Computern zu tun hat und irgendwelchen Code schreibt, gibt es nur noch "Doppelte Anführungszeichen oben" vorne und hinten und überall. Das ist amerikanisch und unsere deutsche Sprache ist eigentlich vielseitiger in dieser Beziehung. Also wie macht man es denn korrekt mit dieser Typografie?

Nun im Deutschen gibt es zwei Arten von Anführungszeichen »spitze Guillemets« und „normale Gänsefüßchen”. Welchen von beiden Stilen man verwendet, ist egal. Angeblich ist spitz eher im Buchdruck und normal eher in Zeitungen zu finden. Soweit es Regeln gibt, stehen die natürlich im Duden.

Zu diesen doppelten, gibts es jeweils noch eine ›einfache‹ oder ‚halbe’ Variante. Die verwendet man, wenn »Zitate in ›Zitaten‹« vorkommen. Auch bei Definitionen oder Namen kommen eher die einfache Varianten zum Zug.

Für die Anführungszeichen oben gibt es die 99-66 Eselsbrücke. Der dickere Teil der Anführungsstriche muss nach unten zeigen bei uns in Deutschland.

Was folgen da nun für Konsequenzen für den Webauthor? HTML benutzen und den Layouter den Rest machen lassen. Layout macht man mit CSS, aber wie macht man Anführungszeichen mit CSS?

q {quotes: "»" "«" "›" "‹";}

Die Browser sind dem Ganzen leider noch etwas hinterher. Firefox zeigt nur die erste Variante, ohne die Verschachtelungstiefe zu beachten. Der Internet Explorer kann es überhaupt nicht.

Man kann das natürlich noch genauer einstellen. Wenn ich zum Beispiel eine Klasse von Elementen rote Anführungszeichen verpassen will geht das mit Pseudo-elementen:

.quote {quote: "\00BB" "\00AB" "\203A" "\2039";}
.quote:before {content: open-quote; color: red;}
.quote:after {content: close-quote; color: red;}

Die Anführungszeichen sind hier codiert, weil das sicherer ist, falls die CSS Datei nicht als UTF-8 ausgeliefert wird. Die Zahl ist der Hexwert.

Internet Explorer hasLayout?

2005-09-08T07:18:00.000+02:00

Bei Entwicklung des IE7 kommt einiges an internen Vorgängen des Internet Explorers ans Licht. Dadurch werden ein paar Anzeigebugs klarer. In der nächsten Version werden diese wohl endlich gefixed sein. Hier nun eine kurze Beschreibung was beim Internet Explorer "hasLayout" bedeutet.

Der Internet Explorer unterscheidet zwischen zwei Arten von Elementen. Es gibt Tags wie p, die haben keine feste Form, sondern umfliessen zum Beispiel gefloatete Elemente. Und es gibt Blockelemente (body, img, input, table, td, iframe, hr) die immer rechteckig sind. So ein Element mit fester, rechteckiger Form "hasLayout".

Es gibt im Internet Explorer öfter Anzeigefehler wenn ein float-Element innerhalb eines Elements ist, das kein "hasLayout" ist (oder hat?). Dagegen gibt es zum Beispiel den Holly Hack, der damals noch gar nichts von "hasLayout" wusste.

Es gibt einen längeren Artikel von Microsoft direkt: what is "hasLayout" and why is it important?

Was kann man also dagegen machen, wenn der Internet Explorer mal wieder Probleme macht? Nun eine Element kann "Layout" bekommen, wenn man ihm per CSS Eigenschaften wie width, height, display: inline-block, float oder position gibt. Dabei reicht es, eine Eigenschaft zu setzen und dann gleich wieder zu nehmen, denn einmal "hasLayout" immer "hasLayout".

div {display: inline-block; ... } /* jetzt hat es "Layout" */
div {display: inline;} /* jetzt immer noch, obwohl die Anzeige wieder auf Standardeinstellung ist */

Noch etwas tiefergehend: Eine Element das "hasLayout" ist, ist quasi selbst dafür zuständig seinen Inhalt zu zeichnen. Da führt zu Anzeigefehlern bei langen Wörtern und macht es unmöglich CSS Eigenschaften wir min-width zu implementieren.

Welche Schriftarten kann man verwenden?

2005-09-06T19:11:00.000+02:00

Die Wahl der Schriftart ist für Designer ein wichtiges Thema. Im Internet ist man leider etwas beschnitten. Da nicht jeder dieselben Schriftarten auf seinem System installiert hat. Linux und OS X Benutzer haben teilweise ganz andere Schriften.

1996 hat Microsoft die Web CoreFonts freigegeben.

Andale Mono
Trebuchet
Georgia
Verdana
Comic Sans
Arial
Arial Black
Impact
Times New Roman
Courier New

Diese sind frei benutzbar wo immer man will und wurden im Truetype Format und für den Mac als BinHex veröffentlicht. Seit 2002 sind diese Fonts nicht mehr bei Microsoft verfügbar. Woanders schon. Diese Schriftarten sind nun relativ verbreitet und können als kleinster gemeinsamer Nenner gelten.

Falls man dem Besucher nicht vorschreiben will, in welcher Schrift er die Seite betrachten soll, gibt es noch ein paar Standardnamen um grob zu sagen wie die Schrift denn aussehen soll.

sans-serif (Arial, Verdana) normalerweise
serif (Times New Roman, Georgia) beim Ausdrucken
monospace (Courier New) für Codebeispiele etc
fantasy (Impact) Überschriften
script (Comic Sans) Überschriften

Im Browser kann jeder einstellen, welche Schriftart es dann wirklich wird. Wer wirklich um jeden Preis abgedrehte Schriften verwenden will, kann sich noch sIFR ansehen.

Warum Framesets böse sind

2005-09-04T14:19:00.000+02:00

Jeder Webdesigner lernt früher oder später das Frames meistens nicht der richtige Weg sind. Ich will mal versuchen die Argumente zu sammeln, warum Frames schlecht sind.

Die Browser haben inzwischen gelernt mit vielen der Probleme umzugehen. "Back" und "Refresh" Button sind kein Problem mehr in modernen Browsern. Was nicht bedeutet, dass jeder einen modernen Browser hat.

Bookmarks funktionierten nicht mehr. Es wird die Defaultseite des Framesets angezeigt, nicht die Seite, wo der User zu dem Moment war. Dasselbe Problem hat man, wenn man die URL einem Freund weitergeben will. Das Konzept des Web basiert auf dem Konzept, dass eine URL einen Inhalt repräsentiert. Hier repräsentiert sie allerdings eine Gruppe von Inhalten. Das verkompliziert so Einiges.

Suchmaschinen verweisen auf den Frameinhalt, nicht auf das Frameset. Wenn man also per Google auf eine Seite kommt, wo jegliche Navigation fehlt, wird die Seite wohl normalerweise in einem Frameset angezeigt.

Scrollbars mitten auf der Seite, weil das Browserfenster zu klein ist? Das kann man natürlich per CSS umgehen, aber dann ist vielleicht ein Teil der Navigation gar nicht erreichbar.

Was passiert wohl, wenn ein Handy-Browser oder Screenreader auf ein Frameset stoßen? Ich weiß es nicht. Jedenfalls kann es da sehr leicht zu Problemen kommen.

Einige dieser Probleme kann man durch den Einsatz von Javascript beheben. Aber auf Javascript angewiesen zu sein ist auch keine saubere Sache. Außerdem hebt das den vermeintlichen Vorteil den Framesets versprechen, nämlich geringe Ladezeiten, wieder auf.

Viele benutzen ein Frameset, weil man dann die Navigation in einer einzigen Datei hat und leicht ändern kann. In Zeiten, wo man PHP Hosting schon kostenlos bekommt ist meine Empfehlung genau einen PHP Befehl zu lernen, der das Gleiche möglich macht:
<?php include("navigation.html") ?>

Das Zentrierproblem

2005-09-03T19:19:00.000+02:00

Diesmal gibts ein Rätsel. Ich hab keine Ahnung ob es eine Lösung gibt. Es geht um ein Layout, und wie man das mit CSS hindeichselt. Die Frage wurde im SelfHTML Forum gestellt.

Hier mal eine Skizze:
Das Grün schraffierte ist der Inhalt, das Rote die Navigation. Der Inhalt soll zentriert auf der Seite stehen (grüne Pfeile). Die Navigation am Inhalt kleben. Der Inhalt ist fest eingestellt auf 500px Breite.

Problem: Wenn man nun die Schriftgröße ändert, dehnt sich die Navigation aus. Sie soll sich nach links und unten (rote Pfeile) ausbreiten. Der Inhalt soll zentriert bleiben.

Ich hab es ~~probiert~~ geschafft und bin zu einer Lösung gekommen.

Die erste Woche

2005-09-01T18:36:00.000+02:00

So, dieses Blog gibt es jetzt seit einer Woche. Heute gabs nur einen kurzen Tip, da ich vor allem mal gerne etwas Feedback hätte. Ich habe noch ein paar Themen, aber mich würde natürlich interessieren, was die Zielgruppe so denkt.

Wozu wüsstest du gerne mal meine Meinung?
Für welches Thema bist du selbst zu faul zu recherchieren?
Was sollte unbedingt mal hier gesagt werden?
Was sollte sich ändern?

Vergiss individuelle Scrollbars

2005-09-01T17:40:00.000+02:00

Im Internet Explorer ist es möglich mit scrollbar-base-color und ähnlichen CSS Eigenschaften die Scrollbars von Fenster oder Frames zu verändern. Im Opera 7+ funktioniert es wohl auch (teilweise), allerdings nicht mit Firefox/Netscape oder Konqueror/Safari.

Es nicht Teil des offiziellen Standards, aber eben doch recht beliebt inzwischen. Meiner Meinung nach ist der Standard wichtiger. Um das zu bekräftigen, kann ich sogar ein Expertenmeinung einholen. Dieser Jakob Nielsen ist DER Usability Guru. Angeblich hat er den Begriff erfunden.

Er sagt zum Thema Scrollbars unter anderem, dass man sich nach den Erwartungen des Users richten soll. Wenn ein User Windows benutzt, sollten aus Usabilitygründen die Scrollbars aussehen, wie in seinem Windows.

Das Schöne ist, das macht der Browser automatisch. Einfach Finger weg von scrollbar-irgendwas und schon bekommt man Usability Bonuspunkte. Das war ja einfach.

Warum XHTML doch (noch) nicht XML ist

2005-08-31T19:26:00.000+02:00

Deine Seite ist wunderbares valides XHTML? Vermutlich interessiert das den Browser aber überhaupt nicht. Er wird den HTML Parser hervorkramen und die Seite als HTML verarbeiten. Eigentlich wäre ein XML Parser effizienter, aber solange der Webserver als Content-Type: text/html angibt, wird kein Browser es als XML behandeln.

Versteh mich nicht falsch! Es ist nicht falsch XHTML als text/html auszuliefern. Der Validator bestätigt das. Um mal den Wortlaut der RFCs zu übersetzen:

HTML sollte (should) als text/html ausgeliefert werden
XHTML 1.0 kann (may) als text/html, sollte (should) aber als application/xhtml+xml ausgezeichnet werden
XHTML 1.1 sollte nicht (should not) als text/html ausgeliefert werden
XHTML 2.0 darf vermutlich nicht (must not) mehr als text/html gesendet werden

Statt application/xhtml+xml ist auch application/xml oder text/xml möglich.

Das Problem bisher ist, dass die Browser es noch nicht so ganz ordentlich unterstützen. Auch sollte man bedenken, dass bei einem XML Fehler (Tag nicht geschlossen etc) der Browser normalerweise komplett abbricht und eine Fehlermeldung anzeigt, statt den Fehler zu korrigieren. Wer Lust hat, kann seinen Browser ja mal testen.

Wie wird man Webdesigner?

2005-08-30T15:00:00.000+02:00

Was tun in diesem Fall? Nun, es gibt einiges zu Lernen, mein junger Padawan. Ich werde dir drei Links geben. Dazu noch üben, üben und üben. Und schon bist du ein Webdesigner.

Wer gerade mal weiß, dass es HTML ist, was er schreiben will. Der sollte sich erstmal mit SelfHTML beschäftigen. Alle Grundlagen stehen dort drin und es bleibt auch eine gute Referenz. Ich benutze SelfHTML immer noch. Es ist eigentlich das Nachschlagewerk Nummer eins in deutsch.

Nachdem man nun schon die ersten Seiten gebastelt hat, sollte man sich Dr Web mal ansehen. Während SelfHTML sich auf das Handwerkliche konzentriert kann Dr Web auch viel zu Themen wie Usability bieten. Das Weblog ist auch sehr interessant und bietet immer wieder gute Ideen.

Den dritten Link habe ich selbst erst vor kurzer Zeit entdeckt. Auf jeden Fall empfehle ich für die echten Profis A List Apart. Hier wird schon philosphisch und nachdenklich. Die Herausgeber haben sich die Vorgabe gesetzt, Nichts zu veröffentlichen, was es schon irgendwo anders gibt, also sind alle CSS Tricks dort auch wirklich neu. Leider gibt es in diesen Sphären nichts Deutsches mehr. Ein Hoffnung bieten da vielleicht die kürzlich ins Leben gerufenen Webkrauts, aber wer vorne dran sein will, wird ohne Englisch nicht auskommen.

Natürlich ist das Lesen alleine nicht der Trick. Anwenden, Ausprobieren, Herumspielen, Kreativ sein! Das ist wichtiger. Auch hilft es sehr, wenn man andere Leute kennt, die das Gleiche machen.

Wieviele Farben sollte eine Website haben?

2005-08-29T16:00:00.000+02:00

2 vielleicht auch 3. Das ist die schnelle Antwort.

Das hört sich nach ziemlich wenig an, aber man muss diese Aussage etwas relativieren. Schwarz und Weiß zählen nicht als Farben. Sie sind unbunt. Auch verschiedene Helligkeitsabstufungen gelten jetzt mal als die selbe Farbe, auch wenn das für einen Computer nicht so ist. Der Hintergrund des Titelbilds ist in diesem Sinne einfach nur blau.

Es geht hier auch nicht darum, alle anderen Farben auszublenden. Sobald ein Foto auf einer Seite ist, hat man sowieso fast alle Farben. Es geht darum ein Farbschema zu entwickeln. das die Seite dominiert. Dadurch bekommt eine Seite Charakter und es gibt einen Wiedererkennungseffekt.

Webdesign in kleinen Happen benutzt zum Beispiel die beiden Farben Blau und Rot-Orange (genauer dodgerblue und redorange). Web.de benutzt Blau und Gelb.

Diese Farben sollten subversiv eine Bedeutung haben. Hier sind Titel blau und Links orange. Deswegen ist auch das Titellogo blau und die Links in der Navigation werden ebenfalls blau, wenn man mit der Maus drüber fährt.

Diese Regel mit den 2 oder 3 Farben kann man relativ problemlos brechen. Zum Beispiel ist es recht beliebt Unterkategorien einer Seite mit verschiedenen Farbtönen zu kennzeichnen. Der Spiegel macht das zum Beispiel. Politik ist rot, Wirtschaft blau und Sport grün. Oder man setzt voll auf bunt, so wie eine gewisse Suchmaschine. Trotzdem heißt die eiserne Regel für Designer, dass man nur Regeln brechen sollte, die man beherrscht. Also lieber erstmal bei 2 oder 3 Farben bleiben, auch damit kann man coole Seiten bauen. Selbst eine Farbe reicht eigentlich.

Das Titellogo bricht die Regel, da es ja auch Grün und Gelb beinhaltet. Das ist ok, weil dieser "Happen" mit Traube und Käse (Na wer hats erkannt?), als Bild zählen kann. Außerdem wollte ich, dass die Seite bunt und nach designerischer Vielfalt aussieht, nicht einfarbig, stromlinienförmig im Business-style.

Welche Vorteile hat XHTML?

2005-08-28T15:40:00.000+02:00

Warum sollte man XHTML schreiben, statt das gute alte HTML? Es funktioniert doch. Und warum muss es validieren? Wenn mein Browser es richtig anzeigt, ist das doch ok. Nein, ist es nicht und hier die zwei Argumente:

XHTML 1.0 ist sehr gut abwärtskompatibel und es ist einfach ein HTML Dokument zu überarbeiten (Wir haben ja noch nicht über Design ohne Tabellen geredet).
XHTML ist echtes XML

Das erste Argument ist wohl recht einleuchtend, aber kein guter Grund. Das Zweite will ich noch etwas erklären. XML bedeutet eXtensible Markup Language und aus irgendeinem Grund muss es heutzutage überall drin sein. Ich finde nicht, dass XML so toll ist, aber es ist für das Web nicht so schlecht wie z.B. SGML. XML wird in vielen Anderen Dingen verwendet: RSS/Atom Feeds, Word und OpenOffice.org Dokumente, RPCs, Jabber IM, ...

Welche Vorteil hat nun XML? Zum einen ist es ineinander einbaubar. Man kann problemlos XHTML in einen Atom Feed einbauen, wenn man den entsprechenden type und namespace angibt. Wenn man das mit HTML versucht, kann das zu einem Fehler führen.

Ein XML Parser ist einfacher zu programmieren als ein HTML Parser. Das bringt einem Webdesigner nichts, aber es erleichtert den Browser Programmierern die Arbeit und das wiederum bedeutet eine zuverlässigere Darstellung. Für Fortgeschrittene: HTML ist SGML und das lässt sich nicht in einer EBNF darstellen, weil es nicht "kontextfrei" ist. (Was das bedeutet, lernt man zum Beispiel im ersten Semester Informatik)

Was bedeutet nun "validieren"? Ein XML Dokument das valide ist, ist syntaktisch fehlerfrei. Wenn ein XHTML Dokument nicht validiert, bedeutet es, der Browser muss eine Fehlerkorrektur durchführen. Das kann bei unterschiedlichen Browsern zu unterschiedlichen Ergebnissen führen. Ein Validator hilft einem also Fehler zu finden die woanders zu Anzeigefehlern oder gar Abstürzen führen könnten. Deswegen ist es keine Schikane, einen XHTML Validator zu benutzen, sondern eine Hilfe. Außerdem bin ich cooler, wenn meine Seite validiert und deine nicht.

Falls einem das nach viel Arbeit aussieht - das ist es nicht. Man gewöhnt sich daran und das XHTML, das ich schreibe ist meistens auf Anhieb valide. Man vergisst vielleicht mal das abschliessende "/" in einem img Tag, aber das ist schnell korrigiert.

Falls du das ganze technische Gebrabbel nicht verstanden hast, reicht es diese einfache Regel zu befolgen: Schreib ordentliches XHTML! Ob es ordentlich ist, sagt dir ein Validator.

ASCII Art für Überschriften

2005-08-27T17:48:00.000+02:00

Ein Freund wollte coole Überschriften, die so aussehen:
--//Überschrift//---->>
Nun ist es aber blöde, sowas Jedesmal in den h3 Tag mit reinzuschreiben und auch irgendwie "unsemantisch". Eigentlich ist das ja Layout, also wie macht man sowas denn mit CSS?

Erste Idee für Überschriften ist immer ein Hintergrundbild (background: url(...);) für das h3 Tag. In diesem Fall funktioniert das aber nicht, denn das Bild kann sich nicht an verschieden lange Überschriften anpassen.

Die Lösung sind zwei CSS Pseudo-elements: h3:before und h3:after, denen man mit der Eigenschaft content den gewünschen ASCII Code eingibt. Im CSS sieht das dann so aus:

h3:before {
content: "--//";
}
h3:after {
content: "//---->>";
}

Bewundern kann man das in seinem Blog d135-1r43.

width ist im Internet Explorer anders

2005-08-27T11:19:00.000+02:00

Eine der nervigen Angewohnheiten des Internet Explorers* ist es, die Breite von Boxen (div und Co) falsch zu berechnen. Nehmen wir an wir haben eine div-Box mit einem Innenabstand (padding) und einem Rand (border) von 5 Pixeln. Das sind ingesamt 20 Pixel die in der Breite dazu kommen. (jeweils links und rechts 10 Pixel).

Wenn wir dieser Box nun die Breite (width) 100 Pixel geben. Sind das nach Standard 120 Pixel Breite. Der Internet Explorer* wird die Box allerdings 100 Pixel breit machen und den Inhalt um 20 Pixel zusammenstauchen.

Dies ist einer der häufigsten Gründe warum man sein CSS mit unschönen Hacks verunstalten muss. Die Lösung für diesen Box Model Bug ist als Boxmodel Hack von Tantek Çelik bekannt.

Man schreibt die width für den Internet Explorer. Dann baut man seltsames CSS Zeug ein, was den Internet Explorer* verwirrt, so dass er alles was danach kommt zu ignorieren. Nun kommt die echte width, die dann den alten Wert überschreibt. Jetzt gibt es aber noch Browser (Opera 7+), die ebenfalls verwirrt werden. Für diese muss man nochmal extra CSS Code einfügen der ebenfalls vom Internet Explorer (ohne Sternchen!) ignoriert wird.

div.content {
width:440px; /* für den Internet Explorer */
padding:10px;
border:solid 10px #009; /* 40 Pixel Unterschied wären das nun */
voice-family: "\"}\""; /* Internet Explorer* verwirren */
voice-family:inherit; /* ordentlichen Wert für voice-family setzen */
width:400px; /* echter Wert */
}
html>body .content { /* Das versteht der Internet Explorer nicht */
width:400px;
}

So sieht dass dann aus. Ist es da nicht verständlich, wenn man als Webdesigner den Internet Explorer hasst? Es wären 5 statt 11 Zeilen CSS Code.

* bedeutet der Internet Explorer unter Windows außer Internet Explorer 6.0 im Standard Mode

Welches CMS ist das Beste?

2005-08-27T08:36:00.000+02:00

Die Diskussion ist hitzig. "Typo3 ist auf Industrieniveau", "Mambo ist viel leichter zu lernen", "ezPublish ist wirklich cool". Die wirklich Antwort ist natürlich, dass man für jedes Projekt jeweils das passende CMS auswählt. Und da gibt es im Internet einige Hilfen dazu.

Ich nehme mal an, zu Beginn eines Projekts erstellt man eine Liste mit allen Features, die die neue Seite haben soll. Davon interessieren uns erstmal nur die technischen Details für die Wahl des CMS. Die Liste könnte so aussehen:

WYSIWYG Editor
Kalender
Caching
Bildergalerie
News mit RSS Feed

Erste Frage: Ist das Alles oder könnte da leicht in noch ein oder zwei Features dazukommen in der nächsten Zeit? Man sollte sich klar machen, ob man Wachstumspotential mit einkalkuliert oder nicht.

Jetzt geht auf cmsmatrix.org zur Suche und klickt einfach alle gewünschten Features an. Mit der Liste oben gibt es zuviele Ergebnisse, deswegen wünschen wir uns einfach noch ein paar Kleinigkeiten dazu: friendly-urls, Developer Community, XHTML compliant, GPL licence, ...

So kann man die Suche normalerweise ganz gut auf 3-5 potentielle Systeme eingrenzen. Jetzt gehts zu opensourcecms.com, um diese paar CMS auszuprobieren. Die Seite bietet frische Installationen von praktisch allen Open Source CMS an, die alle 2 Stunden gelöscht und neu installiert werden. Man hat vollen Zugriff auf alle Administratorfunktionen und kann ungeniert ausprobieren.

Vielleicht auch noch eine gute Idee ist, auf Technorati danach zu suchen. So findet man ein paar persönliche Meinungen über die verschiedenen System. Mein Geheimtip ist bei dieser Gelegenheit Website Baker 2.

name, class, id? Was denn nu?

2005-08-26T15:24:00.000+02:00

Es gibt drei Attribute mit denen man Namen in Elemente vergeben kann. Aber wann benutzt man nun id und wann class? Und wann gar name?

In Kurzform:

id für einmalige CSS Definitionen
class für Gruppen von CSS Definitionen
~~name für Javascript DOM~~

Wenn man es bildlich ausdrücken will, gibt es da ein img-tag. Die Polizei kann es "eindeutig" an der id identifizieren und es kann außerdem zu einer ganze class von img-tags gehören.

Um ein paar Beispiele zu machen. Die grundlegende Seitenstruktur kann man mit ids auszeichnen. Also so ein <div id="navigation">. Im Inhalt verwendet man meistens nur class, also zum Beispiel ein <div class="blogpost">.

Im CSS benutzt man dann "#" für ids und "." für classes

#navigation {border: 4px solid orange}
div.blogpost {background-color: #ccc;}

~~In dem ein oder anderen Browser kann man im Javascript auch die id verwenden. Verlassen würd ich nicht darauf.~~ Das hier war wirklich kompletter Blödsinn. getElementById ist die richtige Methode. Peinlich peinlich. Danke Dunkelstern für den Hinweis...

HTML Grundlage

2005-08-25T18:42:00.000+02:00

Für eine neue Seite fange ich normalerweise bei Null an. Also mit einer leeren HTML Seite. Der Grundlegende Aufbau ist immer derselbe. Dieses Problem der grundlegenden Struktur einer Website kann man einmal und für immer lösen.

Eine Seite besteht grundlegend aus vier Elementen.

Header
Content
Navigation
Footer

Und zwar in dieser Reihenfolge! Meistens will man die Navigation über oder links vom Inhalt haben, aber das ist Layout nicht Inhalt. Für Blinde oder Textbrowser ist es sehr viel angenehmer, wenn erstmal der Inhalt kommt. Per CSS kann man die Navigation dann immer noch positionieren, wo wann man will. Aus demselben Grund sollte man auch den Header so schlank wie möglich halten. Titel und Untertitel sollten meistens reichen.

Deswegen besteht die Grundseite aus vier div-Containern:

<body>

<div class="header">
beza1e1 on line
</div>

<div class="content">
blablabla
</div>

<div class="navigation">
<ul>
<li><a href="start">Startseite</a></li>
<li><a href="blog">Blog</a></li>
</ul>
</div>

<div class="footer">
by beza1e1
</div>

</body>

Layout wird mit CSS realisiert. Unser HTML soll semantisch sein. Das bedeutet: Wir schreiben es entsprechend der Bedeutung, nicht nach dem Aussehens.

Nun kann man mit etwas CSS das ganze ins klassische Layout bringen, mit der Navigation auf der linken Seite.

#content { margin-left: 200px }
#navigation {width: 190px; position: absolute; top: 20px; left: 5px; }

Warum die Navigation als Liste markiert ist? Naja, es ist eine Liste von Links, oder? Per CSS kann man die bullets verschwinden lassen, dann merkt's keiner. Ein weiterer Vorteil zeigt sich, wenn man ganze Hierarchien von Links anzeigt. Eine Liste in einer Liste wird ordentlich eingerückt. Das ist allerdings vor allem für CMS interessant und nicht für kleine Websites.

Header und Footer sind natürlich mehr oder weniger optional. Aber bisher habe ich eigentlich auf jeder Website beide gebraucht.

Ich habe auf anderen Seiten auch von Dingen wie subnavigation und subcontent gehört, aber bisher habe ich das nicht gebraucht. Elemente wie ein Suchfeld, Blogroll, Shoutbox und Ähnliches sollte man in einen der vier Container packen. Das macht für die Positionierung am meisten Sinn.

Webdesign in kleinen Happen

2005-08-25T09:32:00.000+02:00

In diesem Blog will ich mal so mit der Zeit sammeln, was ich vom Webdesign verstehe. Immer in kleinen, leicht verdaubaren Häppchen, so dass ein kleine Sammlung von netten HowTos entsteht.

Thematisch solls um Webdesign in allen Facetten gehen. Vor allem ums Layout, also zum Beispiel CSS, Wahrnehmungspsychologie, AJAX oder Farben. Aber ich werde mir wohl kaum den ein oder anderen Ausflug ins Technische nehmen lassen. Ein paar Tritte gegen den IE und ein paar Kommentar zu verschiedenen CMS.

Was ich versuchen will hier raus zu halten sind Programmiersprachen (Python, Lisp, Ruby) oder Open Source Ideologie. Aber das wird wohl nicht so einfach ... wir werden sehen.