kulturbanause Blog

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

CSS-Hack für den Internet Explorer 10 (IE10)

Der Internet Explorer von Microsoft ist bekannt für die fehlerhafte Interpretation von CSS-Eigenschaften. Um das Problem zu lösen, greift man häufig auf Conditional Comments zurück, um gezielt einzelne Versionen des Internet Explorers anzusprechen und die Fehler zu korrigieren. Für den IE10+ existieren leider keine Conditional Comments mehr und ihr bekommt Schwierigkeiten, falls ihr speziell für diesen Browser Elemente gesondert ansprechen wollt. Doch mit einem CSS-Hack lässt sich das Problem lösen.
Beitrag zu Ende lesen

Responsive »Pinterest-Style« Layout mit CSS3

Responsive Pinterest Grid

Layouts in versetzter Kachel-Optik (Pinterest-Style) sind aktuell sehr beliebt. Insbesondere für die Bilddarstellung eignet sich dieser Layouttyp sehr gut. Wenn ihr selbst ein Design in diesem Stil umsetzen möchtet, werdet ihr merken, dass es ein paar Hindernisse gibt. Insbesondere wenn das Gestaltungsraster flüssig und mit unterschiedlich vielen Spalten auf den verschiedenen Gerätetypen aufgebaut sein soll scheiden einige Hilfsmittel aus.
In diesem Beitrag archiviere ich den Code für ein flexibles »Pinterest-Style« Layout ohne den Einsatz von JavaScript. Mit Media Queries verändern wir die Anzahl der Spalten.

Beitrag zu Ende lesen

Mobile First + Progressive Enhancement

Das mobile Internet hat die Art und Weise wie wir Websites entwickeln grundlegend verändert. Vor einiger Zeit habe ich einen Artikel über den veränderten Workflow im Responsive Design veröffentlicht und erklärt, warum wir umdenken müssen, mit welchen Herausforderungen wir uns konfrontiert sehen und welche Lösungsansätze es gibt.
Doch nicht nur die Erstellung eines flexiblen Layouts ist wichtig. Auch die Performance-Optimierung, die Browserkompatibilität und die Informationsarchitektur sind entscheidend für den späteren Erfolg der Website.
In diesem Artikel möchte ich beschreiben, inwiefern sich die Sichtweise bei der Konzeption und Entwicklung von Websites verändert hat.

Beitrag zu Ende lesen

Retina Media Queries / Media Query

Retina Media Queries

Wenn ihr die Gestaltung eurer Website für hochauflösende Displays optimieren möchtet, führt einer der unkompliziertesten Wege über spezielle Media Queries. Zunächst fragt ihr mit Hilfe des entsprechenden Media Query die Displayauflösung ab, anschließend werden hochauflösende Grafiken nachgeladen. Leider ist der Syntax für Android und iOS nicht einheitlich. Aus diesem Grund archiviere ich in diesem Beitrag die notwendigen Code-Snippets.

Beitrag zu Ende lesen

Adaptive Website vs. Responsive Website

Es gibt verschiedene Ansätze eine Website mit Hilfe von Media Queries für verschiedene Displaygrößen zu optimieren. Einmal steht das Ausgabegerät im Vordergrund, einmal das Design bzw. die Information. Ich möchte erklären was der Unterschied zwischen »responsive« und »adaptive« ist, welche Missverständnisse es in diesem Zusammenhang gibt und welche welche Vor- und Nachteile die Varianten haben.

Beitrag zu Ende lesen

Media Queries in der Admin-Bar anzeigen: WordPress Media Queries Monitor

Wenn Ihr für eine WordPress-Website ein „responsive“ Theme entwickelt, werdet ihr in der Coding-Phase wahrscheinlich ähnlich vorgehen wie ich. Zunächst entwickelt ihr die Desktop-Version der Website oder alternativ die mobile Variante – je nachdem welchem Prinzip ihr folgt. Anschließend wird die Seite für die anderen Bildschirmgrößen adaptiert. Ihr fügt nach und nach neue Media Queries hinzu und wechselt permanent zwischen dem Browser und dem Code-Editor. Den Browser zieht ihr dabei manuell groß und klein und testet so die verschiedenen Ansichten. Leider erkennt man in dieser Vorgehensweise nicht ohne weiteres welcher Media Querie gerade aktiv ist und wo Anpassungen am Code vorgenommen werden müssen. Insbesondere wenn ihr mit sehr vielen verschiedenen Breakpoints arbeitet kann das lästig sein.

Beitrag zu Ende lesen