Mehrspaltige Layouts mit Javascript und CSS3
geschrieben am 25. März 2010
Was in Zeitungen und Zeitschirften oft der Standard ist macht im Internet nur ab und zu Sinn – Mehrspaltiger Textfluss.
Normalerweise wird ein Text in einer Spalte dargestellt, damit der Leser nicht ständig runter und dann wieder hoch scrollen muss, wenn er am Ende einer Textspalte angekommen ist.
In seltenen Fällen (wenn ein Textabschnitt sowieso ganz auf 1 Seite (ohne Scrollen passt) ist es wünschenswert einen mehrspaltigen Text darstellen zu können.
Der W3C arbeitet nun an einem Mehrspalten-Modul, welches mithilfe von CSS3 und Javascript mehrspaltige Layouts erlaubt.
Anbei ein paar interessante Links zu diesem Thema:
Ein Beispiel
List Apart über Multicolumn Layouts
W3C – Artikel über mehrspaltige Layouts
Cufón – endlich mehr Schriftarten fürs Webdesign
geschrieben am 2. September 2009
Webdesigner hatten es jahrelang schwer mit Schriftarten – eigentlich gab es nur 2 Möglichkeiten – man hielt sich an die Standardschriftarten wie Verdana, Arial, Times, etc oder man musste auf Grafiken zurückgreifen, wenn man etwas ausgefalleneres oder hübscheres verwenden wollte. Das Problem mit Grafiken ist natürlich immer die Maschinenlesbarkeit – Text der in Grafiken vorkommt wird nicht von Suchmaschinen als Textinhalt erfasst – so gehen oft wichtige Suchbegriffe flöten (auch wenn Computer selbstverständlich in der Lage wären Texte aus Grafiken zu extrahieren).
Nun möchte ich Ihnen hier eine andere Möglichkeit vorstellen, das Problem zu lösen. Cufón – ein Ansatz, Schriften die im Quelltext vorkommen, per Javascript in eine Grafik zu übersetzen. Der Vorteil hiervon ist, dass der Inhalt der Schrift für den Browser zunächst in maschinenlesbarer Form vorliegt und anschließend vom Browser in eine Grafik umgewandelt wird. So kann man sein Webdesign völlig flexibel gestalten und auch ausgefallene Schriftarten verwenden ohne sich gleich im Suchmaschinenranking schaden zu müssen.
Das ganze funktioniert indem man seine eigene Schriftart mit dem Generator auf der Cufón Webseite in eine “Javascript Schrift” umwandelt und die dort generierte Datei in den Header seines HTML-Dokuments einbaut –
hier ein Beispiel mit der schönen Schrift vom Lockengeloet:
Das Ergebnis sieht wie folgt aus:
Cufon – HTML TEXT TO IMAGE TTF – Schriftdesign Carsten Trill
Mehr Informationen darüber gibt es hier – Cufón Webseite
Jquery anstatt Flash für das eigene Webdesign
geschrieben am 28. August 2009
Noch vor nicht alzulanger Zeit war die einzige Möglichkeit eine Webseite mit Animationen und hübschen Effekten zu versehen die Verwendung von Flash. Flash hat wie man mitlerweile allerdings weiß einige eklatante Nachteile, so sind Flash Webseiten nicht besonders gut geeignet um ein gutes Ranking in den Suchmaschinen zu erreichen, desweiteren muss der Besucher der Seite das Flash Plugin installiert haben, der Entwickler muss das teure Programm von Adobe besitzen, usw.
Heute kann man getrost eine der gängigen Javascript Libraries wie zum Beispiel Jquery einsetzen, da fast jeder Surfer im Netz Javascript aktiviert hat und die mitlerweile kein Problem mehr darstellen sollte. Jquery ist schnell und schick und bietet dem Entwickler die Möglichkeit mit wenig Code viel zu erreichen – dies drückt sich auch in der Jquery Philosophie aus: “write less do more”.
Es existieren eine Vielzahl von “Plugins” die man frei für eigene Zwecke verweden kann und den eigenen Webauftritt so mit modernem Design und schicken Effekten aufpeppen kann – so zum Beispiel der hübsche Slide Effekt im Header von www.liloskochbuch.de.
Weitere Informationen über Jquery können direkt auf der Jquery-Webseite gefunden werden.
Auf diesen Seiten findet man eine Reihe schöner Demonstrationen was man alles mit Jquery erreichen kann.
Tags:hamburg, jquery, webdesign —
StockExchange – ein rießiges Fotoarchiv
geschrieben am 11. Mai 2008
Sie suchen Bilder und Fotos für Ihren Internetauftritt? Sie wollen nicht unbedingt einen Fotografen beauftragen, um stimmungsvolle Bilder für Ihre Webseiten zu erwerben?
Stock.Xchng ist ein immens großes Fotoarchiv auf dem es eine Vielzahl freier Fotos aus fast allen Themenbereichen gibt, die sie umsonst für ihre Projekt verwenden können. Ebenso gibt es einen “Experten-Bereich” auf dem man Fotos käuflich erwerben kann. Die Preise sind nach Bildgröße gestaffelt. Die kleinste Bildgröße gibt es bereits für einen Dollar zu erwerben.
Die kostenlose Anmeldung lohnt sich für alle, die auf der Suche nach guten Fotos sind.
Hier gehts direkt zur Seite von Stock.Xchng
Css for Everyone!
geschrieben am 29. April 2008
Iron Myers hat eine sehr schöne Zusammenstellung von frei erhältlichen CSS Layouts auf seiner Seite zur Verfügung gestellt. Wer sich selbst einmal im Webdesign versuchen möchte findet hier garantiert die richtige Grundlage für den Start. Ebenso bietet diese Seite eine schöne Übersicht über klassische Layouts, die einfach funktionieren. Unentschlossenen kann hier die nötige Inspiration verschafft werden, wie man seine Webseite gestalten und aufbauen kann.
hier gehts zur Seite von Iron Meyers
Tags:css, layout, stylesheet, webdesign —
33 wunderbare Fotogalerien
geschrieben am 28. April 2008
Sie möchten gerne auf Ihren Seiten ihren Besuchern eine Fotogalerie präsentieren? Auf der Seite von vivaLogo gibt es eine sehr schöne Sammlung von freien Galerien, die diesen Zweck erfüllen. Diese Galerien basieren entweder auf der Scriptsprache JavaScript oder auf Flash. Um Fotos in Ihre Galerie einzubinden wird meist das XML Format verwendet.
Sehen Sie hier eine dieser Fotogalerien in Aktion.
Tags:gallerie scripte —
