Freitag, September 23

 

Wie findet man Farben die zueinander passen?

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.

Mittwoch, September 14

 

UTF-8 was und warum?

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 (232=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.

Sonntag, September 11

 

Hover Button optimiert

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.

Samstag, September 10

 

Wie setzt man eigentlich Redezeichen korrekt?

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.

Donnerstag, September 8

 

Internet Explorer hasLayout?

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.

Dienstag, September 6

 

Welche Schriftarten kann man verwenden?

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.
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.
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.

Sonntag, September 4

 

Warum Framesets böse sind

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") ?>

Samstag, September 3

 

Das Zentrierproblem

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.

Donnerstag, September 1

 

Die erste Woche

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.
 

Vergiss individuelle Scrollbars

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.