Ramschkasten.de

Alles was so hängen bleibt

moo.fx – Tut für Dummies

Das schicke und leichte Script vom moo.fx, welches auch im neuen Design von praegnanz Anwendung findet, wurde jetzt mit einen kleinen Tutorial von Avinash Vora versehen um es auch wirklich allen begreifbar zu machen.

Anders als bei F-LOG-GE bemerkt, kann man es sehr wohl ausdrucken. Einfach alle Container ausklappen und drucken. Sieht zwar nicht sehr hübsch aus aber die Informationen sind da.

Link zum Tutorial: http://www.avinashv.net/tutorials/moofx/
Und ein pdf für alle bei denen das Drucken nicht funktioniert. hier: moo.fx tutorial

Aufräumen im CSS-File

Beim lesen des Artikels „Efficient CSS with shorthand properties“ bestätigte sich meine Arbeitsweise zur Verhinderung von übermäßigen Inhalten im CSS-File. Die Gefahr bei der Optimierung von Webseiten besteht meistens darin, die Beschreibungen des Seitencode aus der Webseite in die CSS-Datei zu verlagern. So tritt man zwar dem Ladevolumen der Seiten entgegen doch die CSS-Dateien blähen sich künstlich auf.

Zusammenfassend richtet sich das Augenmerk darauf die Eigenschaften von background, border, border-color, border-style, border sides, border-width, font, list-style, margin, outline, und padding in einer Zeile zu beschreiben, als eine Zeile für jede Eigenschaft. Ein paar Bytes zusätzlich lassen sich dann auch noch einsparen, wenn man in den Farbeigenschaften statt drei Paaren von hexadezimalen Zahlen nur je eine davon übergibt. So wird aus #000000 #000 oder #336699 #369.

Hilfreich fand ich den Hinweis bei der Beschreibung der Seitenelementen wie top, right, bottom, left. Durch eine Eselsbrücke soll man sich eine Uhr vorstellen bei der die 12=top, die 3=right, die 6=bottom und die 9=left anzeigt. Easy! Bsp: statt margin-top:1em; margin-right:0; margin-bottom:2em; margin-left:0.5em; gibt man margin:1em 0 2em 0.5em an.

Weniger Code ergibt mehr Übersicht. Wer mehr Informationen benötigt findet in den folgende Büchern weitere Hilfe:

  • CSS-Praxis
  • Professionelles Webdesign mit (X)HTML und CSS.
  • Eric Meyer on CSS. Mastering the language of  Web Design
 

Mach Dich nackig! – für Web 2.0

Am 5.April startet der „First Annual Naked Day“. Zeig deine Webseiten ohne Design – also einfach nacksch. Der Hintergrund: Webseiten sollten in einem guten Markup geschrieben sein, eben ohne viel Firlefanz. Entwicklern und Designern von Webseiten wird so bewusst gemacht, dass es nicht nur auf das Aussehen von Webseiten ankommt sondern auch auf deren Lesbarkeit. Da es User gibt die ohne Design auskommen müssen sollte eine Webseite gänzlich ohne Design funktionell und navigierbar sein.

Gentlemens, Start your Engines! Laßt es rocken. Geht rann und bereitet Eure Webseiten auf diesen Tag vor.

Ausgelöst wurde diese Initiative von Dustin Diaz. Übrigens läßt sich diese CSS-freie Ansicht via FF über Strg+Umschalt+S auslösen.