Schlagwort-Archive: Webdesign

Schöne Fonts fürs Web

webDev, ,


Bislang war es nicht ohne weiteres möglich auf Webseiten eigene Fonts zu verwenden. Webbrowser verwenden lediglich die auf dem System installieren Fonts zum Anzeigen von Webseiten. Damit war es, außer über den eher aufwendigen Umweg einer Grafik, oder dem kaum praktizierten bereitstellen eines eigenen Fonts auf dem Server, nicht möglich spezielle Schriftarten zu verwenden.
Auf der diesjährigen Google I/O Konferenz hat Google ihre Google font api vorgestellt. Darüber werden Schriftarten bereitgestellt und können ganz einfach im HTML-Header einer Website eingebunden werden. Die Schrift kann dann einfach per CSS eingebunden und formatiert werden. Aktuelle Browser unterstützen eingebundene Fonts. Google stellt einige Lizenzfreie Fonts zur Verfügung, z.B. Lobster (siehe Screenshot rock ’n roll!). Eine Übersicht gibt es im Google font directory. Es können auch weitere Fonts anderer Web-Font Provider eingebunden werden. Derzeit wir nur der kostenpflichtige Provider Typekit genannt.
Folgende Code-Schnipsel werden zum Einbinden des Lobster Fonts benötigt. Im HTML-Header:

<link href='http://fonts.googleapis.com/css?family=Lobster'  rel='stylesheet' type='text/css'>

Die Formatierung der Schrift mit CSS:

<span style="font-family: 'Lobster', arial, serif; font-size: 30px;">rock 'n roll!</span>

Vor allem im Bezug auf Überschriften und Teaser finde ich die Fonts eine schöne Option. Ich bin gespannt ob diese Möglichkeit angenommen wird und sich etabliert. Die Designer dürften sich jedenfalls freuen.

YAML Builder: per Mausklick zum neuen Layout

Software, webDev, , , , ,

Dirk Jesse hat ein Preview des YAML Builder in der Version 0.3 veröffentlicht. YAML steht für „Yet Another Multicolumn Layout“ und ist ein Framework zur Erstellung moderner und flexibler XHTML & CSS Layouts für Webseiten. Ich habe den Builder selbst noch nicht getestet, er sieht aber auf den ersten Blick sehr gut aus. Mit solch einer einfachen Möglichkeit ein Grundkonzept zusammenzuklicken, dürften sich einige Anwender vielleicht eher für YAML als YUI entscheiden.

Freibier bei Dr. Web

webworld, , , ,

Dr. Web LogoLiebe Blogger, ihr habt euch sicherlich schon gefragt wie ihr eure ganzen Besucher einmal dazu bekommen könntet sich freiwillig mit einem Kommentar zu verewigen? Schließlich fragt man sich wer sich denn wirklich hinter der regelmäßig analysierten Statistik verbirgt. Dr. Web macht es vor, ganz einfach. Eine simple Verlosung von ein paar gelben Tassen im Blog, und schon bekommt man 250 Kommentare in weniger als 24h. Als Nebeneffekt noch einiges an PR-Rummel und schließlich 30 Tassen mit Firmenlogo deutschlandweit in diversen Büros verteilt.

Früher konnte man sie kaufen, heute gibt es sie nur noch für glückliche Gewinner. Die sonnengelben glücklichen Dr. Web Kaffeebecher.

Man könnte mutmaßen, daß die Becher sich nicht wirklich gut verkauft haben. Aber mit diesem billigen Trick ist das Geld garantiert besser angelegt. Natürlich habe ich mich auch geoutet und bestellt kommentiert.
– Und vielleicht hätte ich meine restlichen afrikanischen Armbänder doch hier verschenken sollen, hm…

Relevant Blogs?

m.zung.us, webworld, , , , ,

Seit einigen Tagen ist die Blogcommunity Relevant Blogs online:

RelevantBlogs ist ein neues DESIGN82 INTERACTIVE Projekt, das es sich zum Ziel gemacht hat gute christliche Blogs zu einem Netzwerk zusammenzufügen und christlichen Autoren eine Plattform für ihre Ideen, Anregungen, Gedanken usw. zur Verfügung zu stellen.

Relevant Blogs SiteÜber das Blog von Peter Unruh bin ich auf die junge Web- und Grafikdesign Agentur Design82 gestoßen. Ihre Charity-Aktion, mit der sie jedes Jahr eine christliche Organisation unterstützen, hat mir gleich mal gefallen und ich habe sie sofort intern weitergeleitet. Vermutlich ist die queue aber recht lang ;-).
Nach einer Anfrage von Peter ist mein Blog (m.zung.us) auf Relevant Blogs gelistet. Derzeit gibt es erst sieben Blogs und ich fühle mich etwas einsam. RB befindet sich derzeit im Aufbau und es werden weitere Christenblogger gesucht. Ich bin selbst gespannt wie die Aktion ankommt. Vielleicht lassen sich noch noch paar, IMHO Relevant Blogger wie storch und haso einladen?

YAML Layout-Framework

webDev, , ,

Moderne Webseiten basieren auf XHTML und einem durch CSS gesteuertem Design. Die meisten Seiten verwenden dabei ein zwei oder drei Spalten Layout (Nadja erklärt warum das so ist). YAML (Yet Another Multicolumn Layout) ist ein Framework mit dessen Hilfe auf einfache Art standardkonforme Layouts als Grundlage für eine eigene Anpassung erstellt werden können.

„Yet Another Multicolumn Layout“ ist ein Framework zur Erstellung moderner und flexibler Layouts auf Grundlage von float-Umgebungen. Dabei stehen ein möglichst hohes Maß an Flexibilität und Zugänglichkeit im Vordergrund. Innerhalb eines Tutorials wird die Funktionsweise der einzelnen Bausteine erläutert.

Die Erstellung komplexer Designs mit floatenden Layoutbereichen ist normalerweise recht trickreich, vor allem wenn die Seiten in allen Browsern gleich aussehen sollen. Das sollte ja selbstverständlich sein, doch leider gibt es immernoch viele Browser-Bugs und nicht standardkonformes Verhalten der Browser. Mit YAML erstellte Layouts unterstützen eine große Zahl moderner Browser diverser Betiebssysteme. YAML ist ein Framework, das ich selbst sicherlich öfters einsetzen werde.
[via BS]

Einstieg in die Positionierung von HTML-Elementen mit CSS

whatever,

Peter Müller hat einen übersichtlichen Artikel zur Positionierung von HTML-Elementen geschrieben. Er erklärt, wie sich die HTML-Elemente natürlicherweise im „document flow“ verhalten und wie sie mit Hilfe von CSS aus diesem natürlichen Flow heraus positioniert werden können. Ein Artikel mit wichtigen Grundlagen für jeden Webdesigner und perfekt als Einstieg ins Thema.
Hier ein Auszug:

  1. Flow: Zum normalen „Fluss“ gehören nicht positionierte Block- und Inline-Elemente sowie Boxen mit relativer Positionierung (position:relative).
  2. Absolute Positionierung: Absolut positionierte Elemente werden aus dem Fluss herausgehoben und sind für die anderen Elemente nicht sichtbar. Dazu zählen position:absolute und position:fixed.
  3. Float: Schwebende, gefloateteElemente sind ein Zwischending. Zuerst wird die Box im normalen Fluss positioniert, dann wird sie aus dem Fluss herausgehoben und schwebt so weit wie möglich nach rechts oder links.

Zur Positionierung ebenfalls sehr empfehlenswert ist dieser Überblick von Patrick Fitzgerald.
[via WebdevBits]