Web 2.0 Navigation - SEO, XHTML & CSS
Im vergangenen Tutorial Web 2.0 Navigation mit Fireworks zeigte ich Euch, wie Ihr in wenigen und schnellen Schritten eine grafische und moderne Web 2.0 Navigation in Fireworks anfertigt. Das Entwerfen einer Navigation in Adobe Fireworks ist natürlich nur der erste Schritt - das Wichtigste ist die folgende Umsetzung in HTML und CSS. Wie man dabei sogar der Suchmaschinenoptimierung (SEO) gerecht wird, könnt Ihr im Folgenden lesen und erfahren.
Bei der Umsetzung einer grafischen Navigation in HTML und CSS gab es für mich zwei Möglichkeiten:
Entweder, ich werde sie suchmaschinenoptimiert gestalten, wodurch die Optik einen winzigen Abstrich erfährt, oder ich werde sie visuell attraktiver gestalten, wodurch die Suchmaschinenoptimierung einen Abstrich erleiden muss.
Optisch schönere Navigation ohne SEO
Wählt man die Variante, bei der die Navigation am Ende dem Entwurf getreu und damit besser aussieht, so verwendet man bei der Umsetzung in HTML und CSS nur Bilder. Die einzelnen Navigationspunkte sind einzelne Bilder, die bei a:hover bzw. li:hover - also beim scrollen über die Links - ausgetauscht bzw. verschoben werden (letzteres ist die edlere Variante ohne Reload-Problem).
Vorteil: Font-Fetischisten können dabei jeden Font verwenden, den sie mögen und brauchen nicht auf die mehr oder weniger öden Standard-Fonts zurückgreifen.
Nachteile: Suchmaschinen wie Google erkennen den visuellen Text in den verwendeten Grafiken für die Navigation nicht - die Navigation trägt also nicht zur SEO bei. Weiterhin müssten wir für jeden neuen Navigationspunkt eine neue Grafik anfertigen, wodurch wir am Ende auf recht viele Grafiken kommen - die Navigation wird am Ende also traffic-lastiger.
Optisch mit abstrichen, aber SEO gerecht, sparend und einfach zu verwalten
Die zweite Variante, welche ich in diesem Tutorial auch benutze, ist folgende: anstatt für die Navigationspunkte im normalen und im gescrollten Zustand Bilder zu verwenden, benutzen wir insgesamt nur zwei Grafiken für den gescrollten Zustand - diese zwei Grafiken ergeben zusammen den Hintergrund.
Vorteile: Wir verwenden für die gesamte Navigation nur drei kleine Grafiken, nämlich den Hintergrund der gesamten Navigation und den zwei Grafiken für die Hintergrundbilder im gescrollten Zustand. Dadurch können wir die Navigation einfach und beliebig erweitern, da wir für die Links HTML-Text verwenden, was uns zusätzlich noch den SEO Vorteil bringt, da der HTML-Text von Suchmaschinen verwertet werden kann.
Nachteil: Vor allem, wenn wir für die Navigation ausgefallene Fonts benutzen, die sich stark von den Standard-Fonts unterscheiden, wird das Ergebnis enttäuschend vom Original abweichen. Im Falle dieses Tutorials hingegen unterscheidet sich Arial nicht extrem von der verwendeten Schriftart in Fireworks.
HTML unserer Navigation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web 2.0 Navigation - CSS</li>
<div id="navigation">
<ul>
<li><a href="#">BLOG</a></li>
<li><a href="#">FORUM</a></li>
<li><a href="#">STUFF</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">IMPRINT</a></li>
</ul>
</div>
</body>
</html>
Zuerst legen wir das Markup unserer Navigation fest. Innerhalb des div Elements mit der ID “navigation” - dieses block-Element bekommt später mittels CSS den Navigations-Hintergrund zugeschrieben - folgt eine Liste mit den Navigationspunkten. Mehr brauchen wir innerhalb des HTML-Teils nicht mehr zu machen. Wenden wir uns nun dem CSS zu.
CSS unserer Navigation
/* Die Schriftart Arial sieht dem in Fireworks verwendeten Font am ähnlichsten.*/ body { font-family:Arial, Helvetica, sans-serif; } /* Die Navigation erhält ihren Hintergrund. Es ist ein 1px breiter und 45px hoher Streifen, den wir horizontal wiederholen*/ #navigation { background:url(images/navigation_bg.jpg) repeat-x; height:45px; width:600px; } #navigation ul { list-style:none; margin:0; padding:0; } #navigation li a { text-decoration:none; color:#FFF; display:block; padding-left:10px; /* Der linke innere Abstand der Links vom hellblauen Hintergrund.*/ padding-right:10px; /* Der rechte innere Abstand der Links vom hellblauen Hintergrund.*/ } #navigation li { line-height:45px; margin-left:35px; float:left; height:45px; } #navigation li:hover { background:url(images/hover_bg_right.jpg) no-repeat; line-height:50px; } #navigation a:hover { background:url(images/hover_bg_left.jpg) no-repeat; } #navigation li:hover a { color:#000; }
Da die Links unserer Navigation unterschiedliche Längen (Breiten) besitzen und die Abstände zum Hintergrund einheitlich aussehen sollen, können wir kein einzelnes, fixes Hintergrundbild benutzen. Dazu kommt, dass wir auch keinen 1px breiten Streifen benutzen können, der sich innerhalb eines Navigationspunktes wiederholt, da unser Hintergrund links einen Schatten besitzt, den er auf der rechten Seite nicht besitzt.
Wir müssen die Grafik also in zwei Teile aufteilen:
Die linke Seite (hover_bg_left.jpg) weisen wir a:hover zu. Die rechte Seite (hover_bg_right.jpg) weisen wir li:hover zu. Sobald wir nun über einen Navigationspunkt scrollen, werden beide Grafiken sichtbar, doch sie überlappen sich und der Hintergrund sieht aus, als wäre es eine Grafik.
Hey, endlich mal ein Beitrag, bei dem ich auch mitreden kann :p
Prinzipiell könnte man auch beide Ansätze vereinen. Dazu müsste man nur jedem Listenelement (oder Link) eine ID verpassen und so jedem Navigationspunkt ein eigenes Hintergrundbild zuweisen - oder besser noch, man verwendet nur ein Bild (mit beiden Zuständen jedes Linkbildes) und weist jedem Element nur die Hintergrundposition zu. Wäre genau so SEO-gerecht, da Text drin steht (wobei ich jetzt aber nicht weiß, ob ein Bild mit alt-Text tatsächlich schlechter bewertert wird) und es wäre schick. Nachteil wäre aber, dass die zu ladende Grafik größer ist.
Ein Problem an der jetzigen Variante ist auch der IE6, da der :hover nur an Links akzeptiert und nicht an Listenelementen. Da müsste man dann entweder mit JavaScript nachhelfen oder in den Link ein span-Element setzen und dort den linken (oder rechten) Hintergrund angeben.
Kannst ja mal ein bisschen rumprobieren und ggf. einen dritten Teil veröffentlichen
Bei Fragen findest du mich ja sicher im IRC.
Woran liegt das, wenn ich ein Hintergrundbild mit CSS definiere und dann aber der Text sich nicht mittig auf der Grafik ausrichten lässt?
Das kommt ganz darauf an. Ich nehme mal an Du benutzt ein Div (Block-Element) und gibst diesem ein Hintergrundbild und zusätzlich eine feste Höhe und eine feste Breite.
Per CSS gibst Du dem Div dann die Eigenschaft text-align:center; um es horizontal zu zentrieren. Für die vertikale Zentrierung benutzt Du dann line-height, wobei die line-height der Höhe des Divs entsprechen muss.
Vielen Dank! Ich verwende das ganze auf meiner Website
http://usa-roadtrip.pytalhost.com