Kategorien
Webstandards

Webseiten verlinken (Update)

Wie verlinke ich auf andere Webseiten? Am besten mit dem a-Element. Es ist zwar auch mit JavaScript möglich, aber da lassen wir lieber mal die Finger davon, weil nicht jeder JavaScript aktiviert hat und Google da auch nichts von hat.

Die Zieladresse geben wir mit dem href-Attribut an, das sieht dann so aus: <a href="http://pixelscheucher.de"></a>.

Link-Beschreibung

Mit dem title-Attribut können wir eine kurze Beschreibung hinzufügen, die wird meistens angezeigt, wenn man den Mauszeiger ein wenig über dem Link stehen lässt. Beispiel: <a href="http://pixelscheucher.de" title="Michels Weblog"></a>.

Linktext

Zwischen <a> und </a> schreiben wir den Text der als Link zu sehen sein soll. Bitte dabei drauf achten, dass der Linktext auch soweit wie möglich selbsterklärend bleibt, wenn man sich nur die Links anzeigen/vorlesen lässt. Man kann auch Bilder statt Text einfügen, dabei aber auch auf verständliche alt– und title-Attribute im <img>-Element nicht verzichten. Der Vollständigkeit halber sollte ich noch erwähnen, dass man früher den störenden Linkrahmen um das Bild mit border="0" los wurde. Bitte macht sowas mit CSS, lasst aber trotzdem deutlich werden, dass es sich um einen Link handelt.

Sprachen

Wenn man möchte kann man mittels @hreflang@ auch noch angeben, in welcher Sprache die verlinkte Seite geschrieben ist. Viele Browser senden beim Aufruf einer Webseite eine Zeile Code mit, die dem Webserver sagt, welche Sprache bevorzugt wird. Ist der Webserver entsprechend eingestellt, liefert er an ›deutsche‹ Browser deutschen Text, an ›englische‹ Browser englischen Text. Darum sollte man das hreflang-Attribut öfter mal überprüfen. Auch eine spezielle Stylezuweisung, beispielsweise ein kleines Fähnchen für englischsprachige Links kann sehr nützlich sein und wird mittels a[hreflang='Sprachkürzel'] { Style-Anweisung } eingebunden. Nachtrag vom 28.06.2006: Keine Flaggen benutzen, siehe Sprachwechsel und Flaggen.

Auch der Link selber kann natürlich in einer anderen Sprache geschrieben sein, als die ganze Website (<html lang=“de”>). Deshalb kann das a-Element auch ein lang-Attribut mit entsprechendem Sprachkürzel besitzen.

Neues Fenster? Nein, danke!

Noch eine Bitte: lasst die Finger vom target-Attribut. Lasst den Besucher selber entscheiden ob er die Webseite in einem neuen Fenster öffnen will oder nicht. Gerade bei alten PCs dauert es gerne länger, bis das neue Fenster geöffnet ist, hab’ da Erfahrungen im Praktikum gesammelt.

Kategorien
Webstandards

Vor- und Nachteile von semantischen HTML-Code + CSS

Immer mehr Seiten verwenden sauber strukturiertes, semantisch korrektes Markup. Man verwendet die Tags, die am ehesten das beschreiben, was der Inhalt darstellen soll. Überschriften werden in die Tags h1-@h6@ eingetragen, Menüs werden mit Listen erstellt. Die Formatierung erfolgt ausschließlich mit CSS (Trennung von Design und Inhalt).

Hier ein paar Vor- aber auch Nachteile (meistens für die Neueinsteiger) bei Verwendung von sauberem HTML + CSS:

Vorteile

  • Einheitliche Layouts
  • Schnelle Layout-Änderungen
  • Schnellere Ladezeiten, da das Stylesheet nur einmal geladen wird und dann im Cache liegt
  • weniger Trafficverbrauch, weil Dateien meist sehr viel kleiner ausfallen, was weniger Server-Hardware-Verschleiß und Traffic-Überschreitungen verursacht, Modembenutzer freuen sich
  • unnötiges Markup im HTML-Code verschwindet, da keine verschachtelten Tabellen, &lt;font&gt;-Tags usw. verwendet werden müssen
  • Optimierung für verschiedene Geräte (Druck-Stylesheets, PDA-/Handy) möglich
  • logischer strukturierter Code hilft beim bearbeiten, weil es übersichtlicher ist
  • Lesezeichen/Favoriten zeigen auch wirklich auf die angezeigte Seite und nicht auf das Frameset – Anfängerfreundlich
  • barrierearm, wichtig bei Seiten die der BITV unterliegen oder unterliegen wollen

Nachteile

  • alte Browser verstehen keine oder nur teilweise Stylesheets, daher siehst da nicht hübsch aus – dafür wird die Struktur durch richtig angewendeten Code verdeutlicht
  • der Internet Explorer hat Fehler in der Berechnung von Größen, die mit sogenannten Hacks ausgemerzt werden müssen/können – nicht so schwer, ist man einmal im Thema hat man es bald raus
  • ggü. Frames: aufwendig wenn sich Navigationslinks ändern, kann man aber mit Includes (phase 5, Freeware [frühere Versionen auch für Firmen]) verwalten (daher auch die wichtigkeit von strukturiertem Code)
  • möglich, dass die Einarbeitung lange dauert, besonders mit den IEBugs
  • Man lernt den Internet Explorer zu hassen ;)
Kategorien
Netzwelt Webstandards

Webkrauts – Web Standards jetzt auch in deutsch

Die Webkrauts haben sich zusammen geschlossen, um in Deutschland – und auf deutsch (!) – über Webstandard basiertes Webdesign zu diskutieren, debattieren und Werbung dafür zu machen.

Nachdem es schon reichlich fremdsprachige Projekte ans Licht der Welt brachten, war die Zeit reif für ein deutschsprachiges Projekt (jaja, Wortwiederholung).

Ich frage mich aber gerade, ob ich mich dort anmelden würde und ob ich es überhaupt dürfte. Ich mach ja sowas nicht professionell, was aber eh ein dehnbarer Begriff ist, und professionalität ist nun mal Bedingung. Alternativ kann man auch mitmachen, wenn man Werbung für Standard basiertes Webdesign machen möchte. Ich würd mich in diese Gruppe einordnen. Sollte es einer von den Webkrauts lesen, was hier meine Gedanken dazu sind: kommentieren! ;)

Mehr noch bei ›Dr. Css‹ Björn Seibert

Kategorien
Typographie Webstandards

Schriftgrößen

Björn Seibert haut mal wieder geballtes Fachwissen in die Welt, diesmal geht es um Schriftgrößen.

Er geht darauf ein, dass noch oft gepredigt wird, fixe Schriftgrößenangaben zu verwenden obwohl diese im IE nicht vergrößert werden können und somit sehr benutzerunfreundlich sind.

Außerdem geht es um einen Fehler im IE 5.xx, der mit em-Größenangaben nicht zurecht kommt wenn man bespielsweise die Schriftgrad-Einstellung (Ansicht, Schriftgrad) ändert. Er empfielt Prozentwerte zu verwenden.

Viel Spaß beim lesen.

Kategorien
Software Webstandards

Hier gibts kein nofollow mehr

Hab jetzt endlich mal den Mist entfernt. Links von Kommentatoren hier dürfen nun also von Google verfolgt werden.

Hat das bisher jemandem vom kommentieren abgehalten? War hier jemand geil auf PageRank und hätte ihn nicht bekommen?

Zum Glück laufen hier nicht so viele Pokerspieler und Texaner auf. Noch!

Kategorien
Webstandards

W3C-Validator in neuem Outfit

Der HTML-Validator vom W3C ist seit heute im neuen Dress zu bewundern.

Von mir wahrgenommende Änderungen:

  • feste Breite
  • Die Fußzeile hat auch eine feste Breite, die sehr schmal ausfält
  • dicker, grüner, satter Balken bei erfolgreicher Validierung
  • Auch wenn die Seite valide ist, kann man Einstellungen ändern, war früher nicht so

Viel Spaß beim testen!

Kategorien
Frontend: HTML5, CSS3, jQuery Webstandards

Verwurstetes Stylesheet

Also, mein Stylesheet hier ist derzeit ziemlich … unordentlich, unübersichtlich und ohne Kommentare wenn ich mal was geändert habe.

Deshalb werde ich das kommende Wochenende hoffentlich dazu nutzen können, es aufzuräumen, zu sortieren und so weiter.

Generell müsste ich hier mal an einigem arbeiten, beispielsweise an der Kategorie-Liste, der »Über mich«-Seite und wahrscheinlich noch andere hunderttausenden Dingen.

Ich müsste mich mal auf die Suche nach einem WordPress-Blind-Stylesheet machen, wo alle, wirklich alle Styles in leerer Fassug drin stehen. Ich hab gerade erst gefunden, dass die Kommentare unterschiedliche Hintergrundfarben bekommen können.

Wollte ich nicht sogar mal auf textpattern umsteigen? ;) Wäre das vielleicht sogar besser?

Also, das wird ein WordPress-Hardcore-Wochenende. Und das weiß ich schon am Montag, genial! Aber wer weiß, was schon wieder dazwischen kommt?

Kategorien
Webstandards

Zielsprache bei Links

Hat schon mal jemand was vom HTML-Attribut hreflang gehört? Damit kann man bei Links (<a>) und logischen Beziehungen (<link>) die Sprache des Linkziels angeben. Die Angabe der Sprache erfolgt nach RFC 1766, siehe SelfHTML.

Zum ersten Mal aufgefallen ist mir das im einfach-fuer-alle.de Blog.

Kann man natürlich beim CSSen anwenden. Attributwert auslesen, Fähnchen dranhängen lassen. ;)