Webdesign-Tutorial: Echte Transparenz auf der Homepage?

Transparenz ist im Webdesign ein recht komplexes Thema. Es gibt viele verschiedene Ansätze. Die Einfachen sind häufig gestalterisch nicht befriedigend, die Komplexeren wegen dem Aufwand und wegen den häufig für Suchmaschinen negativen Auswirkungen nicht ratsam. Ist es möglich, transparente Bereiche einer Homepage einfach, zu jedem Browser kompatibel und suchmaschinengerecht darzustellen? Diese Anleitung erfordert Vorkenntnisse auf zahlreichen Webdesign-Gebieten. Daher richtet sich dieser Webdesigner-Workshop vor allem an Profis.

Lösungsansätze Zuerst betrachten wir die verschiedenen Lösungsansätze für Transparenz im Webdesign. Als erstes wäre da das Grafikformat GIF zu nennen. GIFs haben maximal 256 Farben. Es können transparente Bereiche dargestellt werden. Transparente Bereiche im Format GIF sind immer 100% transparent, d.h. es gibt keine Farbe, die halbtransparent ist. Daraus ergibt sich häufig ein gestalterisches Manko.

Transparenz im GIF Stellen Sie sich ein Quadrat und einen Kreis im Format GIF vor, angenommene Größe 20 Pixel. Um die Objekte soll jeweils ein transparenter Bereich in der Grafik beinhaltet sein. Das Rechteck hat gerade Kanten. Der Kreis wird im Normalfall mit Antialiasing erstellt, d.h. es werden zur Kantenglättung Mischfarben aus Vordergrund- und Hintergrundfarbe eingesetzt. Die Kanten wirken dann bei Rundungen nicht mehr so eckig. Das bedeutet, dass man bei GIFs mit transparenten Bereichen und runden Kanten immer wissen muss, welche Farbe als Hintergrund hinter diesem GIF verwendet werden soll. Man kann GIFs mit Rundungen und Transparenz nicht vor beliebigen Hintergründen verwenden. Betrachten Sie dazu folgende auf 200% skalierte Grafikbeispiele:

• Die blauen Quadrate haben gerade Kanten. Es wird kein Antialiasing verwendet, deswegen können sie mit einem transparenten Umgebungsbereich vor jeder beliebigen Hintergrundfarbe verwendet werden.
• Der erste Kreis wurde ohne Antialiasing erstellt. Seine Kanten wirken unsauber, aber auch er kann mit transparenter Umgebung vor jeder beliebigen Hintergrundfarbe verwendet werden.
• Bei den folgenden Kreisen wurde Antialiasing verwendet. Ihre Begrenzungen wirken deshalb sauber, sie sind aber auch nicht mehr vor jedem beliebigem Hintergrund verwendbar. Würde man die Umgebung des blauen Kreises vor einem roten Hintergrund bei Verwendung von Antialiasing entfernen (=Transparenz), so könnte man diesen auch nur vor einem roten Hintergrund einsetzen. Setzt man diese Grafik vor einem anderen Hintergrund ein, erhält man ein Ergebnis wie in der letzten Grafik: Blau geht an der Rundung in Rot über, dieses schlagartig in Gelb.

Fazit: Das Format GIF bietet nur sehr beschränkte Möglichkeiten, Transparenz im Webdesign einzusetzen. Bei rechteckigen Formen ist akzeptabel, bei runden Formen muss die Hintergrundfarbe der Website schon vorher bekannt sein. Es ist nicht möglich, einzelne Farben halbtransparent zu schalten.

Flash und Transparenz Ein sehr ausgereiftes Mittel zum Erstellen echter Transparenz ist Flash. In Flash ist es möglich, jeder einzelnen Form einen Transparenzwert zuzuweisen: ein voll deckender blauer Kreis wird von einem halbtransparenten grünen Ellipse überlagert. Dank des Vektorformats erscheinen die Kanten immer sauber. Jedoch hat Flash neben den gestalterischen Vorteilen auch technische Nachteile.
Erstens dauert das erstellen einer analog einer HTML-Seite gestalteten Flashseite normalerweise deutlich länger. Der wichtigste Nachteil ist jedoch die Irrelevanz von Flash für Suchmaschinen. Wenn Sie eine Homepage einzig und allein in Flash erstellen, so wird Sie in keiner Suchmaschine gelistet werden. Flash kann sollte also nur in Teilbereichen eingesetzt werden, und dort auch nur, wenn grafische Inhalte aufwendig präsentiert werden sollen. Vermeiden Sie stets die Verwendung von Flash für Textinhalte!

Transparenz mit PNG Somit bleibt für das Erstellen echter Transparenz im Webdesign nur noch ein Mittel übrig. Jeder Webdesigner kennt die Grafikformate GIF und JPG. Das dritte Format, das jeder Browser darstellen kann ist PNG. Es führt seit Jahren ein Schattendasein im Webdesign. Es vereinigt die Vorteile von GIF und JPG: es komprimiert verlustfrei und kann 16,8 Millionen Farben verwenden. Das für uns wichtigste Detail von PNG ist jedoch, dass zusätzlich zu jeder Farbe ein Alpha-Wert gespeichert wird. Der Alpha-Wert ist das Maß der Transparenz. Jede Farbe kann somit in beliebigem Grad transparent geschaltet werden. Alles wäre ganz wunderbar einfach, würde sich Microsoft nicht nach der beinahe-Vernichtung sämtlicher anderer Browser so gnadenlos auf seinen Lorbeeren ausruhen. Der Internet Explorer wurde seit 1998 nicht mehr wirklich weiterentwickelt. Einige der Grundprinzipien (DOM, CSS-Implementation) sind zwar immer noch als vorbildlich zu bezeichnen, jedoch ändert dies nichts an der Tatsache, dass die Entwicklung seit der Vernichtung der Konkurrenz vollkommen stillsteht. Abgesehen vom Stopfen der dringlichsten Sicherheitslücken geschieht seit Jahren nichts.

PNG im Internet Explorer Dabei gäbe es viel zu tun, z.B. sich um eine korrekte Darstellung von PNG-Grafiken zu kümmern. Nehmen wir folgendes Beispiel: eine halbtransparente orange Grafik soll vor einem zweifarbigen Hintergrund erscheinen. Alle Browser ab Version 4 – außer dem Internet Explorer – stellen diese Grafik richtig wie links abgebildet dar. Nur der Internet Explorer kennt bei PNG keine echte Transparenz: er mischt einfach 50% Weiß zum angegeben Farbton, wie im rechten Bild dargestellt.

PNG 50% Transparenz – alle Browser außer IE

PNG 50% Transparenz – Internet Explorer

Echte Transparenz Es gibt jedoch einige Tricks, mit denen man echte Transparenz im Webdesign in allen Browsern korrekt darstellen lassen kann. Hierzu muss man eine Art Fallunterscheidung Internet Explorer und anderen Browser verwenden. Betrachten wir zunächst alle guten Browser wie Opera, Netscape, Mozilla Firefox. Sie stellen ohne jeglichen Tricks PNG wie im linken Bild gezeigt korrekt dar. Im Internet Explorer jedoch müssen wir das halbtransparente PNG anders einbinden, da es sonst falsch dargestellt werden würde. Zuerst definieren wir uns eine beliebige CSS-Klasse, in der wir vorerst nur eine Schriftart angeben. Dann legen wir für die gleiche Klasse eine weitere Attributsdefinition an. Solche Klassen mit Attribut werden von allen Browsern außer dem IE dargestellt, der Internet Explorer ignoriert diese Klassen mit Attribut vollständig.

.orange {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.orange[class] {
background-image:url(orange.png);
}

Bei Anwendung der Klasse .orange auf einen bestimmten Bereich Ihrer Webseite wird also in allen Browsern außer dem Internet Explorer der betreffende Bereich mit einem halbtransparenten orangen Hintergrund dargestellt. Die Darstellung im Internet Explorer wird dank dem Konstrukt des CSS-Attributs [class] umgangen. Für den Internet Explorer brauchen wir eine andere Art der Grafikeinbindung für echte Transparenz. Hierbei bedienen wir uns der CSS-Filter, welche nur der Internet Explorer und kein anderer Browser unterstützt. Ergänzen Sie die Klasse .orange in Ihrer CSS-Datei um folgenden Eintrag:

.orange {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale src=’orange.png’);
}

Das Resultat diese Eintrags ist, dass auch im Internet Explorer der Hintergrund des betreffenden HTML-Tags halb transparent erscheint. Das Beispiel ist getestet und funktioniert wirklich in allen Browsern ab der Version 4.

AlphaImageLoader Fehler Es gilt allerdings noch einen folgenschweren Fehler des Internet Explorers bei Verwendung des Filters AlphaImageLoader zu umgehen. Verwenden Sie nämlich Links vor einem Hintergrund, den Sie mittels dieses Filters geladen haben, so sind diese nicht mehr benutzbar. Der Internet Explorer zeigt diese Links als normalen Text an, man kann sie nicht mehr klicken. Dieser Fehler lässt sich durch die Verwendung eines anderen Bildformats für die halbtransparente Hintrergrundgrafik umgehen: benutzen Sie am besten ausschließlich Grafiken mit einer Größe von einem mal einem Pixel. Eine genaue Abhandlung zu diesem Fehler finden sie im Internet unter daltonlp.com.

AlphaOpacity Der Vollständigkeit halber möchte ich noch anmerken, dass es noch eine weitere Möglichkeit gibt, halbtransparente Bereiche im Internet Explorer zu erstellen. Der Effekt lässt sich auch mit folgendem Microsoft-CSS-Filter erreichen: filter:Alpha(opacity=80). Die Verwendung dieses Konstrukts hat jedoch den Nachteil, dass sich die Transparenz an untergeordnete HTML-Tags vererbt. Das bedeutet, wenn sie beispielsweise eine <DIV> mittels des Filters Alpha transparent schalten, auch alle Tags innerhalb dieser <DIV> maximal die Deckkraft dieser DIV haben. Es ist nicht möglich, innerhalb dieser <DIV> einen voll deckenden Text zu verwenden. Beachten Sie hierzu die Homepage von Olaf Bosch zum Thema Transparenz . Weitere Tips für Transparente PNG finden Sie unter alistapart.com/articles/pngopacity/.

Hat Ihnen diese Webdesign-Anleitung weitergeholfen? Wir hoffen, Ihnen mit diesem Workshop bei den Arbeiten rund um Ihre eigene Homepage weitergeholfen zu haben. Sie haben noch Fragen oder Anregungen zu diesem Webdesigner-Tutorial? Mailen Sie uns Ihren Kommentar! Falls Sie trotz dem Tutorial mit Ihrer Homepage nicht mehr weiterkommen sollten, freuen wir uns natürlich über jeden Webdesign-Auftrag.

Webdesign-Angebot HGR : Grafisches Redesign Ihrer Homepage

Unser Preis: ab 450 €522,00 € incl. MwSt.

Für wen? Ihre Homepage gefällt Ihnen nicht mehr, aber die Inhalte sollen bleiben.

Auftrag erteilen

Die ff-webdesigner geben Ihrer Homepage ein neues Layout, das für Ihre Firma spricht, begeistert und Benutzer unaufdringlich durch Ihr Webangebot leitet. Das Webdesign-Angebot GRH beinhaltet:

• Erstellung eines neuen einfachen Layouts für Ihre Homepage in Photoshop inclusive Korrekturen nach ihren Wünschen.
• Platzierung aller nötigen Logos und Layoutgrafiken
• Slicen (unterteilen) des Entwurfs in weboptimierte Grafiken
• Umsetzung des Entwurfs in ein HTML-Mastertemplate
• Erstellen aller Seiten und einfügen der alten Inhalte Ihrer Homepage

Sie erhalten das Redesign Ihrer Homepage als fertige HTML-Seite mit allen nötigen Grafiken als .zip per Email. Zusätzlich erhalten Sie die dem Redesign zugrundeliegende Photoshop psd-Datei. Aufwendigere Redesigns mit mehr grafischen Bestandteilen gegen Aufpreis.

Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]

Webdesign-Angebot HPK : Komplette Homepage-Erstellung mit Layout, 10 Seiten

Unser Preis: 900 € 1.044,00 € incl. MwSt.

Für wen? Sie wünschen eine kleine Homepage inclusive aller dafür nötigen Webdesign-Leistungen.

Auftrag erteilen

Komplettangebot aus den unter WDEpro, WEAund HUTaufgeführten Leistungen plus Suchmaschinenanmeldung plus Emailkonfiguration – Sparen Sie bis zu 450 € gegenüber den Einzelpaketen!

• Installation eines guten Redaktionssystems wie z.B. WordPress auf Ihrem Server. Grudlegende Konfiguration
• Erstellen eines einfachen semantisch korrekten individuellen Templates / Layouts in HTML
• Erstellen und formatieren von Seiten incl. Impressum und Kontakt
• Bis zu 5 Stunden Layouterstellung und Änderung nach Ihren Wünschen
• Individuelles überzeugendes Layout mit Ihrem Firmenlogo
• Semantisch korrekte und benutzerfreundliche Navigation als Grundlage für gute SEO ihrer Webseite
• Einbau bis zu vier vom Auftraggeber zu liefernde Bilder pro Seite
• Saubere Suchmaschinenoptimierung auf relevante Keywords
• Layouttest in alle gängigen aktuellen Browsern + alter Versionen Internet Explorer
• Anmeldung bei den wichtigsten Suchmaschinen
• Einrichtung aller Email-Adressen

Bei mehr als 3h Layouterstellung fallen Mehrkosten an, über die Sie rechtzeitig vorab informiert werden. Mehrkosten werden zum aktuell gültigen Stundensatz für Webdesign berechnet.

Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]

Webdesign-Angebot WDEpro : Webdesign-Entwurf + HTML

Unser Preis: ab 540 €626,40 € incl. MwSt.

Für wen? Sie wünschen ein professionelles Webdesign-Layout nebst Umsetzung des Entwurfes in HTML, die einzelnen Seiten der Homepage aber selbst mit Texten und Bildern bestücken.

Auftrag erteilen

Angebot wie oben WDE, zusätzlich noch 2h Umsetzung des Webdesign-Entwurfes in HTML, incl:

• saubere Umsetzung des grafischen Entwurfs in HTML
• semantisch korrekter HTML-Code, W3C-valide, barrierefrei
• CSS-Definitionen für Schriften, Hintergründe und Links und alle weiteren Seitenelemente
• Anordnung Dummy-Überschriften / Texte / Bilder
• Fertige Navigation incl. 1 Beispielnavigation für 2. Ebene
• ausgeführte Meta-Angaben für Eingangsseite
• Layouttest in alle gängigen aktuellen Browsern und alten Internet-Explorer-Versionen
• Übergabe des Masterlayouts mit allen nötigen Dateien als .zip per Email

Das Angebote WDEpro beinhaltet keine Bilderrecherche im Internet: Alle Texte, Grafiken und Logos müssen in ausreichender Qualität und üblicher Form durch den Auftraggeber bereitgestellt werden.

Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]