web.develop

Wer als Webdesigner mal Firebug für Firefox benutzt hat, möchte dieses schweizer Taschenmesser nicht mehr missen. Dann die Seiten für den IE zu debuggen, ähnelte einem Wechsel von einer S-Klasse in einen VW Käfer. Nun hat Microsoft mit dem “Internet Explorer Developer Toolbar” eine Erweiterung veröffentlicht, die Abhilfe schaffen soll. Die komplette Struktur des geladenen Dokuments kann im Detail analysiert werden, alle Attribute und das Styling sind übersichtlich dargestellt. Einzelne Elemente oder alleElemente eines Typs lassen sich in der dargestellten Seite hervorheben, die Ausführung von Scripts und die Verwendung von CSS mit einem Klick ausschalten.

Auch wenn Firebug mehr kann, ist das Tool in jedem Falle hilfreich, wenn es darum geht zu verstehen, warum etwas im IE anders aussieht als es sollte.

via pixelgangster

Sie ist eine der “alten Damen” unter den Schriftarten, und wir alle haben sie schon tausende Male gesehen beziehungsweise in ihr gesetzte Texte gelesen: Helvetica. Wie ist der ungebrochene Erfolg, den diese Schrift genießt, zu erklären?

“Sie ist dauerhaft. Sie basiert auf natürlichen Formen. Sie drückt keine spezielle Mode aus. Sie hat sehr klare Linien und Buchstaben, sie sieht nach einer sehr seriösen Schriftart aus”.

Das sagt Frank Wildenberg, Geschäftsführer der Firma Linotype, die die Rechte an Helvetica hält. Mehr zur Erfolgsgeschichte der Schrift ist bei BBC News nachzulesen.

Eine ausführliche Einführung in die Gestaltung von Schrift und Text mit CSS. Von der Festlegung der Grundschriftart für eine Webseite bis zur Textdarstellung bildet dieser Artikel einen guten Startpunkt für Entwickler, die noch nicht mit allen CSS-Feinheiten vertraut sind.

via CSS Beauty

Kaum noch eine Website, die ohne sie auskommt: Farbverläufe in Hintergrundgrafiken. Wer Zeit sparen und diese nicht immer neu mit dem Grafikprogramm der Wahl erstellen möchte, findet bei A List Apart eine Methode, diese (fast) nur mit CSS und (X)HTML zu erzeugen. Bereits angekündigt ist ein zweiter Artikel, der dann erklären soll, wie diese Technik in der Praxis beim Erstellen von vollständigen Weblayouts genutzt werden kann.

Ist es noch nötig, den Gedanken der Web Standards weiter in die Welt hinauszutragen, oder hat die Entwicklergemeinde schon alle Informationen dazu aufgesogen und gestaltet und programmiert Webseiten entsprechend?

Roger Johansson sagt dazu auf Vitamin seine Meinung, und die ist eindeutig: erst ein sehr kleiner Teil der Webschaffenden folgt bisher den Richtlinien, und das Problem besteht darin, dass der Rest über Blogs und Webseiten nur schwer zu erreichen ist oder gar kein Interesse zeigt. Also müssen andere Strategien her, um auch diese Entwickler zu erreichen.

Auch Robert Nyman beklagt in seinem Artikel The web standards war is far from over, dass nach wie vor nur wenige Webdesigner den Gedanken der Web Standards verinnerlicht haben und es noch enormen Nachholbedarf gibt, diese mit ins Boot zu holen.

In der Layout Gala wird gezeigt, wie man aus dem gleichen, einfachen HTML-Markup nur mit Hilfe von CSS vierzig verschiedene Layouts machen kann. Die Demo-Webseite besteht aus fünf verschiedenen Bereichen (Kopf, Inhalt, Navigation, Extra, Fuß), die auf immer neue Weise angeordnet werden.

Zur Positionierung der Elemente werden floats und in den meisten Fällen negative Ränder verwendet und kommen ohne Hacks aus. Alle Layouts funktionieren in IE 5-7, Firefox 1.5, Opera 8.5 sowie Safari 2 und können entweder online betrachtet oder als Zip heruntergeladen werden.

(via CSS Beauty)

Die Sliding Doors-Technik ist inzwischen sehr beliebt bei der ansprechenden grafischen Darstellung von Tabs auf Webseiten. Allerdings ist die Anzahl und Benennung normalerweise statisch und wird bereits serverseitig generiert.

Mr. Havoc zeigt nun in einem Tutorial, wie man mit Hilfe von JavaScript clientseitig neue Tabs hinzufügen und auch wieder entfernen kann. Dabei wird der den Tabs zugeordnete Inhalt dynamisch nachgeladen.

• Easy to implement Dynamic CSS Tabs. The user can add and remove tabs (and content) without refreshing the page.
• The ability to specify default open tabs
• The ability for the website owner to specify which tabs can and cannot be closed after they are opened
• The ability to assign a different color to each tab. This makes it easier to ‘group’ tabs with similar content.
• Ajax Preloading Goodness. When a tab is opened, the contents of the tab’s panel are loaded with ajax. You can open a tab while the user is focused on a different tab. The newly opened tab will preload it’s content in the background and wait for the user to click the new tab when he or she is ready to.
• Tab Events. Each tab can have it’s own javascript code that will be triggered when a certain event happens. Such as Open, Close, Blur and Focus.
• Tested to work with Firefox 1.0, 1.5 and IE 6

(via Jens Grochtdreis)

Die Website des UX Magazine ist ein schönes Beispiel für ein gelungenes CSS-basiertes Design, wie ich finde. Viel Inhalt, aber trotzdem übersichtlich und nett anzuschauen. Und das Thema ist auch noch interessant, es dreht sich alles rund um “User Experience”.

Die Site befindet sich zur Zeit noch im Beta-Stadium, wie dort angemerkt wird. Interessant, kannte ich bisher eher nur von Webanwendungen.