kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …


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

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

CSS Feature Queries – @supports ()

CSS Feature Query

Wenn man herausfinden möchte welche Technologien von einem Browser unterstützt werden, führt der Weg häufig zum Hilfsmittel Modernizr. Das JavaScript-Framework schreibt u.a. CSS-Klassen in den <html>-Tag der Website von denen anschließend moderne Funktionen abhängig gemacht werden können. Diese Vorgehensweise ist im Moment gängige Praxis.
Alternativ zu einer JavaScript-basierten Lösung wie Modernizr könnt ihr auch das CSS Feature Query @supports () einsetzen um in Erfahrung zu bringen, welche CSS- und JavaScript-Techniken im Browser verwendet werden können. In diesem Beitrag möchte ich die CSS-Abfrage anhand zweier anschaulicher Beispiele erklären.

Beitrag zu Ende lesen

Formular-Styling mit CSS – Select-Listen, Radio-Buttons und Checkboxen individuell gestalten

Die Gestaltung von Formularfeldern gehört zu den eher lästigen Aufgaben eines Web-Designers. Insbesondere Select-Listen, Radio-Buttons und Checkboxen ließen sich lange Zeit kaum mit CSS ansprechen, so dass für gewöhnlich mit JavaScript nachgeholfen werden musste, wenn eine individuelle Gestaltung gewünscht war. Mittlerweile lassen sich Formularfelder in modernen Browsern ohne JavaScript individuell gestalten. In diesem Zusammenhang möchte ich einige CSS-Snippets archivieren.

Beitrag zu Ende lesen

CSS Filter-Effekte

Mit Hilfe von CSS-Filter-Effekten können die Elemente einer Website gestalterisch manipuliert werden. Ihr könnt z. B. Bilder in ihrer Farbe verändern, Schatten hinzufügen, die Deckkraft reduzieren oder Bilder und Texte weichzeichnen. In Kombination mit CSS Blend Modes stehen uns somit Photoshop-ähnliche Techniken im Browser zur Verfügung. Da CSS Filter mittlerweile in allen modernen Browser (außer dem IE) zur Verfügung stehen, möchte ich in diesem Beitrag die Funktionsweise kurz zusammenfassen.

Beitrag zu Ende lesen