Tipps & Tricks

Webdesign & Webentwicklung Teil 4

Es geht einfach nicht ohne sie ob als grafisches Element oder in der Textvariante – Hyperlinks. In diesem Teil der Serie “Webdesign & Webentwicklung” versuche ich Euch etwas über Hyperlinks zu erzählen und auch ein paar Beispiele aufzuzeigen, die dann evtl. auch als Inspirationsquelle dienen können.

Webdesign & Webentwicklung Teil 4

Das Aussehen der Hyperlinks ist meines Erachtens nach mindestens genauso wichtig wie die restliche Gestaltung einer Website. Das Eine muss eben auch zum Anderen passen. Hyperlinks verknüpfen den kompletten Content einer Website miteinander und sind somit unerlässlich. Im folgenden Abschnitt seht Ihr die verschiedenen Zustände in denen sich ein Hyperlink befinden kann:

  • a:link – Beschreibt den ‘normalen’ Zustand eines jeden Links.
  • a:visited – Beschreibt wie der Link sich verhalten soll, wenn er schon einmal besucht worden ist.
  • a:hover – Definiert wie sich der Link beim Herüberfahren der Maus verhalten soll.
  • a:active – Verhaltensweise des Links beim aktivieren (Wenn Ihr darauf klickt)
  • a:focus – Verhaltensweise bei der Navigation durch eine Website mit Hilfe der Tabulator Taste

Um Euch das Ganze mal in Aktion zu zeigen, so sieht es in unserem Quelltext aus:

a, a:visited { color:#7f8e91; text-decoration:none; outline:none; }
a:hover {color:#33a8e5; text-decoration:underline; }

Wie es dann letztendlich aussieht, könnt Ihr einfach ausprobieren. Da die unterschiedlichen Browser die Verhaltensweise der Links auf unterschiedliche Art und Weise interpretieren, solltet ihr auf jeden Fall alle Zustände beachten. Nur so könnt Ihr sicher sein, dass Euer Besucher auch wirklich das zu Gesicht bekommt, was Ihr Euch vorher überlegt habt.

Ich gehe einfach mal davon aus, dass Ihr das ‘Aussehen’ Eurer Website in einer externen .css Datei steuert habe ich hier noch einen Auszug der wohl am häufigst verwendeten Definitionen:

  • Color – Definiert die Farbe des Hyperlinks z.B. #ffffff oder bspw. #000000
  • text-decoration – Verschiedene Zustände: underline, none oder overline
  • background-color – Hiermit könnt ihr z.B. zusammen mit dem :hover Befehl die Hintergrundfarbe ändern lassen
  • font-weight – Definiert das ‘Gewicht’ Eures Links. So könnt Ihr z.B. den Link ‘fetter’ hervorheben.
  • border – Beschreibt einen Rahmen um den Hyperlink

Bei der Gestaltung der Links solltet Ihr auf jeden Fall darauf achten, dass diese einheitlich geschieht und nicht von Zeile zu Zeile eine andere Linkfarbe o.Ä. verwendet wird. Ebenso wichtig ist, dass die Links von Euren Besuchern auch sofort als solche zu erkennen sind. Schließlich sind sie der Weg durch Eure Onlinepräsenz.

Mit CSS3 kommen einige neue, schicke Funktionen (siehe ‘Webdesign & Webentwicklung Teil 2&3) die Euch darin unterstützen werden individuelle Navigationen zu ermöglichen. Trotz der vielfältigen Möglichkeiten seine Links zu formatieren sollte man immer bedenken, dass weniger manchmal mehr ist.

Jetzt folgen noch ein paar Screenshots von sehr gelungenen Navigationen.

Webdesign & Webentwicklung Teil 4

Flickr auf eine sehr schlichte und einfache Navigation gesetzt und wie man sieht funktioniert auch das wunderbar. Man findet sofort das, wo nach man gerade sucht. So soll es sein. In diesem Fall wird der Link beim Mouseover jedeglich unterstrichen.

Webdesign & Webentwicklung Teil 4

Vimeo ändert beim Mouseover die Schriftfarbe und lässt gleichzeitig noch ein Dropdown Menü ausklappen.

Webdesign & Webentwicklung Teil 4

Auch bei diesem Beispiel wurden die Link einwandfrei in das Design des Headbereichs integriert.

Ich hoffe es hat Euch gefallen. Morgen geht es mit dem Thema Kontaktformular weiter. Und wie gehabt, wenn Ihr noch irgendwelche Fragen haben solltet, schreibt mir!

Unterstütze diesen Blog

Unser Server, die Domain und die ganze Technik kosten Geld. Du kannst uns helfen, diesen Blog werbefrei zu halten. Wie? Werde UnterstützerIn bei Patreon und erhalte dafür tolle Geschenke, oder trink doch einen Kaffee bei Ko-Fi mit uns - Wir danken dir!

Ein Kommentar

    Antworten

    Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.