Das SVG-Format erfreut sich aufgrund kleiner Dateigrößen, verlustfreier Skalierung und Animationsmöglichkeiten großer Beliebtheit. Doch wie kann man SVGs am besten in HTML-Dokumente bzw. Websites eingefügen? In diesem Beitrag beschreiben wir die verschiedenen Möglichkeiten jeweils mit ihren Vor- und Nachteilen.
Das Hamburger-Icon hat sich als Kennzeichnung für Menüs und Navigationselemente durchgesetzt. Auch wenn das Icon kritisiert wird und nicht in allen Anwendungsfällen gut funktioniert ist es doch in den meisten responsiven Websites anzutreffen. Besonders beliebt sind animierte Hamburger-Icons die per Klick in ein Schließen-Icon überführt werden. In diesem Beitrag archivieren wir ein Code-Snippet das dieses Verhalten herstellt.
Umfangreiche Navigationen stellen insbesondere auf großen Touchscreens eine Herausforderung dar. Da Mouse-Over-Effekte nicht funktionieren, werden tiefer liegende Navigationsebenen häufig durch einen Klick auf das unverlinkte Elternelement geöffnet. Wenn ein anderes Elternelement angeklickt wird, soll das zuvor geöffnete Untermenü geschlossen und das neue Menü geöffnet werden. In diesem Beitrag archivieren wir ein Snippet, dass diese Aufgabe erledigt.
Doppelte Inhalte (Duplicate Content) auf einer Website kann sich negativ auf das Suchmaschinen-Ranking auswirken. Der Grund dafür ist, dass Suchmaschinen wie Google identischen Inhalt auf mehreren Seiten als Betrugsversuch bewerten können und die betreffende Seite abstrafen. Der Einsatz des sog. Canonical Tag im <head>-Element eurer Website kann das Downranking verhindern. Was es in diesem Zusammenhang zu beachten gibt, zeigen wir euch in diesem Beitrag. Beitrag zu Ende lesen
Wenn ein Anwender direkt auf der Website Inhalte oder Stile verändern kann, dann ist i.d.R. JavaScript im Spiel. Mit dem HTML-Attribut contenteditable, können HTML-Inhalte und CSS-Angaben auch ohne JavaScript editiert werden. Die Einsatzmöglichkeiten sind vielfältig und der Browser-Support ausgezeichnet.
Beitrag zu Ende lesen
Guter HTML-Code zeichnet sich u.a. dadurch aus, dass er semantisch wertvoll aufgebaut ist. Wenn das der Fall ist, finden sich sehbehinderte Menschen und Suchmaschinen gut auf der Website zurecht. WAI-ARIA kommt auf Webseiten immer dann zum Einsatz, wenn die normale HTML-Semantik an ihre Grenzen stößt. In diesem Beitrag erfahrt ihr, wie mit der Zuweisung des role-Attributs eine semantische Erweiterung von HTML-Elementen geschaffen werden kann.
Wenn wir mit dem Smartphone eine Telefonnummer auf einer Website suchen, dann möchten wir häufig auch direkt anrufen. Es bietet sich daher an, die Telefonnummer entsprechend zu verlinken um dem Anwender die Bedienung zu erleichtern. Wie ihr solche Links zu verschiedenen Diensten und Apps herstellt, habe ich im Blog bereits behandelt.
Einige mobile Betriebssysteme erkennen Telefonnummern sogar selbstständig und wandeln die Zahlenkette automatisch in einen Link mit Anruf-Funktion um. Lästig nur, wenn der Automatismus auch andere Zahlenketten als Telefonnummern interpretiert. In diesem Fall sollte man die Funktion deaktivieren.