Dead-Pixel.de - Webdesign Weblog » CSS

CSS Naked Day 2009

Moritz — Wed, 08 Apr 2009 16:30:43 +0000

Tja, was ist mit dieser Seite momentan los? Es ist wieder CSS Naked Day. Das erklärt am besten ein Zitat der dazugehörigen Website.

Die Idee hinter dieser Veranstaltung ist die Förderung von Web-Standards. Schlicht und einfach. Dies umfasst die ordnungsgemäße Verwendung von (X)HTML, semantisches Markup, eine gute Struktur-Hierarchie, und natürlich, ein gutes Spiel mit Worten. Es ist an der Zeit, Ihren zu zeigen.

Deshalb werden jetzt für 48 Stunden alle Styles auf dieser Seite deaktiviert.

Ein paar Links

Moritz — Sun, 15 Mar 2009 10:21:44 +0000

Jetzt fang ich auch schon damit an. Links bloggen ist eigentlich nicht meine Art. Nun tu ich es einfach, mal schaun wie es sich danach anfühlt. Bitte kommentieren ob es nützlich war, oder ich das den gefühlten drei Milliarden anderen Linkbloggern überlassen sollte.

Matrix Layouts von Jonathan Snook beschreibt die Idee für ein interessantes neues CSS Layoutmodell. Dazu gibt es gleich auch noch eine Spezifikation welche die Wirkungsweise seines Matrix Modells beschreibt.
Firefox 3.1 Beta 3 hab ich kurz angetestet. Firefox 3.1 wird letztendlich, aufgrund der vielen Neuerungen 3.5 heißen. Ich habe mir nur zwei dieser Neuerungen explizit angeschaut. Das Private Browsing speichert keinen Verlauf, Cookies usw. Die neue JavaScript Engine TraceMonkey ist einen guten Zacken schneller als die alte, muss allerdings erst über about:config aktiviert werden. Insgesamt wirkt Firefox 3.1 schneller als 3.0. Mein Eindruck könnte aber auch gut durch die Inkompatilität einiger Add-ons (die dadurch deaktiviert waren) verfälscht worden sein.
Technikwürze, der deutsche Webdesign Podcast, hat ein wirklich schönes Redesign hingelegt. Die Inhalte sind jetzt wesentlich besser strukturiert und die Startseite bietet jetzt einen tollen Einstieg in alle Bereiche der Website.
Donnerwetter, nein nur Regenwetter gibt es zu sehen auf http://www.devthought.com. Die im Header umherschwebenden Wolken wurden mit Hilfe des Mootools JavaScript Frameworks animiert und können mit dem Mauszeiger angefasst und verschoben werden. Einerseits nur eine nette Spielerei, andererseits eine Demonstration, was mit JavaScript alles angestellt werden kann, und sei es noch so unnütz.

So das war mein erster Linkpost, eventuell folgen weitere. Ich durfte ihn übrigens zwei Mal schreiben, weil WordPress beim ersten Speichern meinte, ich es würden für diese Aktion irgendwelche Berechtigungen fehlen. Komische Sache.

Redesign Teil3: Experimente mit Struktur und Farben

Moritz — Thu, 12 Feb 2009 21:00:01 +0000

Es geht weiter. Ja ich habe wieder ein paar Minuten Zeit gefunden, nochmal an meinem neuen Design zu basteln. Eine wichtige Entscheidung ist jetzt gefallen: Ich werde mich mal an einem “flexiblen Zoomlayout” versuchen. Bei diesem Layoutmodell umschließt ein Wrapper-Bereich mit em Breitenangabe mehrere floatende Bereiche deren Breite mit Prozentangaben festgelegt werden. Das hat den Effekt, dass beim Zoom des Textes auch die Größe des gesamten Layouts mitzoomt. Die Variante finde ich momentan recht spannend, auch wenn der Pagezoom, bei dem alle Elemente einer Website gezoomt werden, mittlerweile schon fast Standard ist.

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.

Redesign Teil2: CSS Reset, Besinnung auf das Wesentliche

Moritz — Sun, 04 Jan 2009 17:40:00 +0000

So nun hat es also begonnen. Das Layout des Redesigns ist erstmal zerschossen, sieht nach viel Mist aus und die Inhalte fehlen momentan, weil irgendwas mit den Template-Tags falsch läuft. Egal, ich halte jetzt hier mal die ersten Schritte fest, die bis jetzt durchgeführt wurden.

Momentan bin ich noch dabei alles leer zu machen. Unnötige Template Dateien, wie z.B. 404 Fehlerseite, Archive usw. wurden einfach gelöscht. Zum korrekten Betrieb eines WordPress Templates sind nämlich nur header, footer, sidebar, comments, und index.php nötig. Die Funktionalität ist dann allerdings sehr eingeschränkt. Inhaltsseiten und einzelne Blogseiten sind in meiner momentanen Konfiguration so nicht möglich. Für das grobe Layout sind sie aber auch noch nicht erforderlich. In meiner CSS-Datei steht bis jetzt nur der Eric Meyer CSS Reset, der das Standard-CSS des Browsers zurücksetzt, damit man mit dem Design auch wirklich von Null beginnen kann.

Die Dateien bearbeite ich grundsätzlich direkt auf dem Server. Nein ich benutze nicht die Editierfunktion von WordPress, da müsste ich jedesmal die Editierseite neu laden. Mein Weg geht über mein FTP-Programm Filezilla, in dem man die Seiten vom Server direkt im Editor seiner Wahl laden kann. Existiert lokal eine aktuellere Version der Datei als auf dem Server, so wird die alte Datei auf dem Server direkt durch die neue ersetzt.

Der nächste Schritt wird das Anlegen einer groben Inhaltsstruktur sein. Eventuell werde ich dann auch noch etwas mit Farben experimentieren. Die ersten grafischen Entwürfe stehen, wurden aber schon wieder mehrfach umgeworfen. Der eine zu detaillos, der andere nicht professionell genug. Es gibt für mich immer etwas dran auszusetzen. Deswegen dauert das Redesign bei meinen eigenen Seiten auch immer so lange. Alles wird 1000 mal beleuchtet, optimiert, wieder verworfen und so weiter.

Dieses Design ist zu Klischee-zweinullig! (9)
Wordpress und das PHP Memory Limit (7)
CSS Naked Day 2009 (0)
Ein paar Links (4)

Beginn des Redesigns

Moritz — Sat, 27 Dec 2008 11:08:22 +0000

Nachdem ich viel Feedback zu meiner Idee, mein Redesign in aller Öffentlichkeit stattfinden zu lassen, bekommen habe, nun der Start des Redesigns. In der Sidebar rechts unten findet ihr eine Auswahlbox, in der ihr das gewünschte Theme auswählen könnt. “theme” ist das aktuelle Theme, das sich während des Redesignprozesses nicht ändern wird. “alpha 2008″ ist das neue Theme, das zuerst mal auf dem alten basieren wird, aber hin und wieder auch den einen oder anderen Darstellungsfehler enthalten kann, da ja ständig daran gearbeitet wird.

Eine Kleinigkeit gibt es bei dem Theme-Wechsler noch zu beachten. Das verwendete Plugin setzt bei jedem Wechsel des Themes ein Cookie, welches sich das aktuelle Theme “merkt”. Soll heißen, wenn ihr in ein paar Tagen nochmal hierher kommt, wird das zuletzt ausgewählte Theme angezeigt.

Der Erste Schritt wird jetzt sein, das momentane Design von allem Müll zu befreien und mal komplett zu strippen. Soll heißen ich werde alle Layoutgrafiken, einen Teil des CSS und das gesamte Javascript einfach ohne Rücksicht auf Verluste rausschmeißen, egal wie wild das aussehen mag. Ziel ist es, zu der Codebasis zu kommen, die wirklich notwendig ist.

Die Formatierung der Zahl in geordneten Listen
bei :first-line

Moritz — Mon, 10 Nov 2008 19:48:52 +0000

Man sollte ja meinen, dass die vorangestellte Zahl, oder sonstige Ordnungseinheit einer geordneten Liste in (X)HTML zur ersten Zeile der Liste dazugehört, doch weit gefehlt. Beim Einsatz der Pseudoklasse :first-line angewandt auf ein Listenelement

einer geordneten Liste

Angenommen man hat folgenden Code:

ol li:first-line { font-weight:bold; }

Der Firefox 3 und Safari 3.1 (Windows) stellen die vorangestellte Zahl so dar, als ob keine Formatierung vorhanden wäre. Die Internet Explorer 6 und 7, sowie der Opera 9.5 stellen die Zahl fett dar. Was ist nun richtig, bzw. wie lautet der vorgegebene Standard dafür? Ich habe mich auf den Seiten des W3C umgesehen, aber diesbezüglich keine Spezifikation finden können. Sofern das hier ein absoluter Hardcore Standards Liebhaber lesen sollte, der eine Antwort weiß, soll es mich wissen lassen. Ich bin nach wie vor der Meinung, dass in diesem Spezialfall die IEs und Opera recht haben und aus meiner Sicht korrekterweise die Zahl mitformatieren.

Dieses Design ist zu Klischee-zweinullig!

Moritz — Tue, 28 Oct 2008 20:57:57 +0000

Ja, ich muss heute mal Selbstkritik üben. Ich bin mit meinem Blogdesign absolut nicht mehr zufrieden. Zuerst einmal entspricht es extrem vielen Web-zweinull Design Klischees:

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!

CSS Snippet – Listenpunkte mit Überschrift

Moritz — Sat, 08 Mar 2008 10:50:47 +0000

Bei der Erstellung meiner Equipment-Seite stieß ich auf das Problem, einer HTML-Liste (in diesem Fall

mit entsprechender CSS Formatierung gelegt. Viel zu kompliziert und zuviel Aufwand!

Lösung:
Völlig vergessen hatte ich, dass es doch eine schöne CSS Pseudoklasse gibt, namens :first-line. Also frisch ans Werk und eine Klasse für die Liste geschrieben, die jedem Listenpunkt eine fette, andersfarbige erste Zeile zuweist. Die Klasse wird dem



        Inhalt, der fett sein soll 


      Inhalt, der nicht extra formatiert wird

Der CSS Code der dafür Notwendig ist ist eine CSS Klasse die mit li:first-line immer die erste Zeile der Liste anspricht.

.liste li:first-line { font-weight:bold; color:#deba1e; }

Ein Beispiel wie das aussehen kann gibt es hier.

Update (17.03.2008)
Leider sind sich die verschiedenen Browser noch nicht darüber einig, wie das dann in der Darstellung aussehen sollte. Unterschiede ergeben sich in der Darstellung der Zahl bei einer geordneten Liste. Diese wird entweder genauso formatiert wie die erste Zeile (IE 7, Opera 9), oder so formatiert wie der übrige Text (Firefox 2, Safari). Wäre mal eine Diskussion wert, ob der Listenpunkt zur ersten Zeile gehört, oder nicht.