Die Zeiten in denen es genügte eine Font-Family in seinem Stylesheet zu deklarieren sind vorbei. Früher waren Systeme wie z.B. Linux oder sogar Apple nur als verschwindend kleinen Prozentsatz bei den Besuchern einer Webseite vertreten. Da aber Open-Source Software und freie Betriebssysteme immer besser und Apple Computer immer beliebter werden und auf diesen nicht zwangsläufig die gängigen Websafefonts einer Windowsinstallation installiert sind muss man im Stylesheet Alternativen deklarieren. Dies geschieht ganz einfach in dem man im “Font-Family:” Tag einfach mehrere “Families” per Komma getrennt hintereinander deklariert. Der Browser wählt dann immer die erste Familie aus, die auf dem Computer gerade installiert ist. Anbei nun eine Liste mit den (Windows) Schriftarten und den dazu gehörigen Pendants für Mac und Linux:
Ich habe ein ganz wunderbares Script gefunden welches ermöglicht verschiedene Stylesheets für je nach Bildschirmgrößen zu laden. Dadurch kann man zum Beispiel ein seperates Stylesheet für Iphone und ähnliche mobile Geräte zur Verfügung stellen
<code>
<script type=”text/javascript”>
function getcss(cssfile){
loadcss = document.createElement(’link’)
loadcss.setAttribute(”rel”, “stylesheet”)
loadcss.setAttribute(”type”, “text/css”)
loadcss.setAttribute(”href”, cssfile)
document.getElementsByTagName(”head”)[0].appendChild(loadcss)
}
if(screen.width <= ‘480′)
// Stylesheet für mobile Geräte wie zB Iphone mit Bildschirmauflösung kleiner gleich 480 Pixel)
{
getcss(’css/style_iphone.css’)
}
else if(screen.width > ‘800′ && screen.width < ‘1280′)
// Stylesheet für Bildschirmauflösungen zwischen 800 Pixel und 1280 Pixel
{
getcss(’css/style_normal.css’)
}
else
{
getcss(’css/style_wide.css’)
//Für alle Bildschirme größer als 1280 Pixel breite
}
</script>
</code>
Das ganze kommt natürlich in den Head bereich der Webseite – die Stylesheets liegen im Verzeichnis /css
Animierte Favicons sind eine feine Sache – gerade für Surfer, die etliche Tabs gleichzeitig offen haben (so wie ich).
Da verliert man schnell mal die Übersicht – gerade wenn eine Seite gar kein Favicon einsetzt.
Mit Hilfe von animierten Favicons kann man die eigene Seite noch etwas deutlicher im Browser hervorstechen lassen. Das Ganze lässt sich eigentlich ganz einfach realisieren. Man erstellt zunächst ein statisches Favicon mit Hilfe eines Online Favicon Generators – zusätzlich erstellt man ein animiertes Gif names “animiertes_favicon.gif” oder so ähnlich – welches die Animation beinhalten soll.
Nun läd man beide Dateien in den Wurzelordner der Webseite und fügt dem Headerbereich folgende HTML-Tags hinzu
Ab und an kommt man einfach nicht drum herum Flash zu benutzen. Möchten man zum Beispiel einen kleinen Film auf seine Webseite tun dann ist es einfach sehr viel praktischer dies eben mit Flash zu machen als gleich einen ganzen Player und so weiter in sein Webdesign zu integrieren. Ebenfalls gibt es mit Flash auch ein paar hübsche Möglichkeiten, die man mit anderen Scriptssprachen wie zum Beispiel Jquery nur mit sehr viel mehr Aufwand hinbekommt.
Flash ist aber ein großes und kompliziertes Programm. Nicht zuletzt kostet es auch ne ganze Stange Geld und findet sich sicher nicht in Originalversion auf dem Computer eines jeden Webdesigners.
Hier kommt der FX Free Flash Effect Generator ins Spiel.
Mit diesem Online Tool lassen sich ganz leicht einfache Effekte, Filmsequencen, Fotos, Lauftexte, usw in eine Webseite integrieren. Das ganze kostet nichts und macht dazu noch wirklich Spaß! Das Programm ist einfach zu bedienen und ist wirklich wert dass man es sich mal anschaut! Ich habe in 2 Sekunden eine wunderbare Typewriter Demo für WebdesignHamburg.net erstellt.
