HTML

HTML5 (Hypertext Markup Language) ist eine Auszeichnungssprache, mit der die Inhalte eines Dokuments strukturiert und semantisch ausgezeichnet werden. Typische Elemente sind Überschriften, Textabsätze, Links, Listen, Bilder etc. HTML5 ist eine vom W3C noch nicht fertiggestellte Weiterentwicklung von HTML 4.01 und XHTML. Die Sprache wird dennoch bereits produktiv genutzt; in diesem Zusammenhang ist von einem „offenen Standard“ die Rede. Die verschiedenen Elemente eines HTML-Dokuments werden mit CSS gestaltet.

Touchscreen optimierte DropDown-Navigation mit jQuery

Zuletzt aktualisiert am 16. Juni 2016 • 2 Kommentare • Themen: , , , , ,

navi-touch

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.

Beitrag zu Ende lesen

Das Canonical Tag und seine Bedeutung für die Suchmaschinenoptimierung (SEO)

Zuletzt aktualisiert am 29. März 2016 • 1 Kommentar • Themen: ,

Canonical Tag und SEO

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

contenteditable=“true“ – HTML- & CSS live und ohne JavaScript editieren

Zuletzt aktualisiert am 15. Januar 2015 • 2 Kommentare • Themen: , ,

content-editable

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

Automatische Verlinkung von Nummern verhindern

Zuletzt aktualisiert am 8. Dezember 2014 • 7 Kommentare • Themen: , ,

iban

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.

Beitrag zu Ende lesen

Gestaltungsraster (CSS-Grids) im Web Design

Zuletzt aktualisiert am 9. August 2015 • 17 Kommentare • Themen: , , ,

CSS Grids

Eine moderne Website basiert i.d.R. auf einem sog. CSS-Grid System - einem Gestaltungsraster. Das Raster hat dabei verschiedene Aufgaben: Einerseits trägt es zu einem strukturierten Layout bei und sorgt dafür, dass eine Website professionell wirkt, andererseits unterstützt das Raster auch den Web Designer bei der Entwicklung, indem es vordefinierte CSS-Klassen bereitstellt.
In diesem Beitrag möchte ich das Thema Gestaltungsraster im Web ausführlich beleuchten. Ich gehe detailliert auf Responsive Grid Systeme ein, und erkläre die Funktionsweise an verschiedenen Beispielen.

Beitrag zu Ende lesen

Responsive Images – <picture>, srcset, sizes & Co.

Zuletzt aktualisiert am 9. August 2015 • 50 Kommentare • Themen: , , , ,

responsiveimages

Flexible Bilder sind ein wichtiger Bestandteil von responsiven Websites. Doch leider stellte genau dieses Thema Web Designer in den vergangenen Jahren vor enorme Herausforderungen. Ohne Scripte war es bisher nicht möglich Bilder ohne Performance- oder Qualitätsverluste auf allen Displaygrößen darzustellen. Und selbst mit der Unterstützung von Scripten waren einige Änderungen – z. B. die Veränderung des Bildausschnitts – eine mehr als lästige Aufgabe. Mit <picture>, srcset & sizes sind neue HTML-Elemente und -Attribute in die Spezifikation gewandert, mit deren Hilfe sich viele Probleme bald lösen werden.

Beitrag zu Ende lesen

Content Choreography mit caption-side: bottom;

Zuletzt aktualisiert am 27. März 2014 • 5 Kommentare • Themen: , , ,

caption-side-css

Das HTML-Element <caption> beschreibt den Inhalt einer Tabelle. Leider wird das dazugehörige align-Attribut in HTML5 nicht länger unterstützt. Doch wir haben mit CSS die Möglichkeit einem HTML-Element das Verhalten bestimmter Tabellen-Elemente zuzuweisen. Im Umfeld von Content Choreography ist hier die Eigenschaft caption-side interessant. Mit ihr können zwei aufeinander folgende Inhalte getauscht werden – und das funktioniert in allen relevanten Browsern funktioniert in allen modernen Browsern, außer dem Internet Explorer.

Beitrag zu Ende lesen