kulturbanause Blog

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

Tools


Responsive Webdesign & CSS3 Media Queries

Das so genannte "Responsive Webdesign" und die CSS3-Technologie "Media Queries" gehören aktuell zu den heißesten Trends der Webentwicklung. Beide Begriffe beschreiben die Möglichkeit das Layout einer Website für mobile Endgeräte wie Smartphones und Tablet-Computer anzupassen. Wenn ihr euch umfassend über mobiles Webdesign informieren wollt, seid ihr hier genau richtig. Auf dieser Seite findet ihr eine inhaltlich aufbereitete und strukturierte Zusammenfassung aller Beiträge die ich zu diesem Thema veröffentlicht habe.

Wenn ihr Fragen zum responsive Webdesign habt die hier nicht geklärt werden können, schreibt mir einfach eine Mail (info@kulturbanause.de) oder nutzt die Kommentarfunktion. Ich werde schnellstmöglich antworten oder einen Beitrag zu diesem Thema veröffentlichen.

Was ist responsive Webdesign?

Unter responsive Webdesign versteht man die optische Anpassung einer Website an verschiedene Ausgabemedien. Moderne Websites werden längst nicht mehr nur für die Bildschirmansicht erstellt - die Darstellung muss auch auf iPad, iPhone und Co. übersichtlich und benutzerfreundlich bleiben. Nun gibt es unterschiedliche Ansätze eine Website für verschiedene Endgeräte zu optimieren. Eine dieser Möglichkeiten ist die CSS3-Technologie Media Queries die lediglich die Darstellung einer Website anpasst, aber die identischen Inhalte nutzt. Der große Vorteil dieser Variante ist, dass alle Versionen auf einen technologischen Kern zugreifen und daher auch nur an einer Stelle gepflegt werden müssen. Das ist einfach und spart Zeit.

Zwei Beispiele für Responsive Webdesign

Es gibt auch andere Lösungen wie native Apps oder "echte" mobile Websites. Diese Lösungen werden meist dann gewählt, wenn die mobile Version gänzlich andere Inhalte bieten soll als die eigentliche Website oder auf die Hardware-Funktionen des Endgeräts (beispielsweise GPS oder die Kamera) zugegriffen werden soll. Beide zuletzt genannten Varianten sind in der Regel eigenständige Projekte die unabhängig von der eigentlichen Website funktionieren, häufig technologisch völlig anders umgesetzt sind und separat gepflegt werden müssen.

Auf dieser Seite wird das Thema responsive Web behandelt. Einen guten Einstieg in die Materie bieten euch die folgenden Beiträge.

Getting started: Media Queries & Responsive Webdesign

Der folgende Artikel erklärt anhand eines in sich abgeschlossenen Mini-Tutorials die Verwendung von Media Queries.

Dieser Artikel ist schon einige Zeit älter, ergänzt das Thema in meinen Augen allerdings trotzdem gut, da ein konkretes Endgerät - in diesem Fall ein iPhone - angesprochen werden soll. Neben der reinen Darstellung werden auch gerätespezifische Eigenschaften (z.B. der Zoom) angesprochen.


Tools, Frameworks und Hilfsmittel

Es existieren eine Menge Tools um die Arbeit mit mobilen Websites zu vereinfachen. Folgende Tools habe ich bereits vorgestellt.


Häufige Probleme im responsive Design lösen und vermeiden

Sobald ihr die erste mobile Website online gestellt habt, werdet ihr schnell merken, dass bestimmte Inhaltstypen oder Browser besonders gerne Ärger machen. Zu diesem Zweck findet ihr hier ein paar praxisnahe Tipps um auch anspruchsvolle Inhalte und den Internet Explorer "responsive" zu halten.


Inspiration

Zuletzt noch ein wenig Inspiration für eigene Projekte. Der Media-Queries-Showcase zeigt beeindruckende Beispiele aus dem responsive Web.

Responsive Layouts online testen: responsivepx

Ich habe euch ja bereits einige Tools zum Live-Testing von responsive Webdesigns vorgestellt. Mit responsivepx möchte ich diese Sammlung nun um einen weiteren Dienst ergänzen. Grundsätzlich funktioniert das Tool ähnlich wie die konkurrierenden Angebote auch: Ihr gebt eine URL ein und könnt das Design auf verschiedenen Viewports testen. Der Vorteil von responsivepx besteht allerdings darin, dass ihr eine Website sowohl in der Höhe als auch in der Breite flexibel testen könnt.

Beitrag zu Ende lesen

Bessere Bildkompression mit Kraken

Performance-Optimierung zählt zu den wichtigsten Arbeitsbereichen eines Webdesigners. Es ist zwar manchmal etwas lästig die Website zu optimieren, vernachlässigen sollte man es deswegen aber nicht. Eine Möglichkeit die Ladezeit der Website zu verringern, ist die stärkere Kompression von Bildern. Vielleicht erinnert ihr euch noch daran, dass ich die Online-Komprimierungsdienste JPEG Mini, Smush It und Puny PNG verglichen habe. Nun möchte ich euch auf ein weiteres Tool aufmerksam machen: Kraken.

Beitrag zu Ende lesen

Website-Typografie per Drag and Drop testen: Font Dragr

Wenn ihr schnell und intuitiv testen möchtet wie gut sich eine Schriftart für eine Website eignet, lohnt sich ein Blick auf Font Dragr. Das Online-Tool arbeitet mit jeder beliebigen Schriftart und bindet sie mit der CSS-Eigenschaft @font-face in die Website ein. Font Dragr wird zunächst als Bookmarklet in die Favoriten gezogen. Anschließend könnt ihr das Tool als Overlay aktivieren und eine Schriftart zum Test auswählen. Wenn ihr einen Font testen möchtet, der nicht Bestandteil der Galerie ist, könnt ihr per Drag and Drop eine Schrift vom eigenen Computer hinzufügen.

Beitrag zu Ende lesen

Web-Dienste automatisieren und verknüpfen mit ifttt. Lass das Web für dich arbeiten.

Mitte September habe ich in Bremerhaven einen Vortrag zum Thema "Selfmarketing im Web" gehalten und dort auch den Online-Dienst ifttt vorgestellt. Mit ifttt (if this then that) lassen sich Arbeitsabläufe im Web perfekt automatisieren, und zwar in einer komplexen und zugleich benutzerfreundlichen Art und Weise, die ich so von keinem anderen Dienst kenne.
Im Anschluss an meinen Vortrag wollte ich das Tool natürlich auch hier im Blog vorstellen, habe es zeitlich jedoch nicht geschafft den Artikel zu schreiben. Irgendwann hatte das Thema an Aktualität verloren und ich dachte, der Dienst wäre mittlerweile hinreichend bekannt. In den letzten Tagen habe ich mehrmals erfahren, dass ich mich offenbar geirrt habe und ifttt längst nicht so bekannt ist wie ich glaubte und wie es das Tool verdient hat. Aus diesem Grund möchte ich den Artikel heute nachholen - in der Hoffnung euch die Arbeit zu erleichtern.

Beitrag zu Ende lesen

Responsive Webdesigns testen

Ich habe in der Vergangenheit bereits über verschiedene Tools geschrieben mit denen Ihr die Darstellung einer Website auf verschiedenen Endgeräten simulieren könnt. Nun möchte ich euch ein weiteres Tool für diesen Zweck vorstellen - es ist immer schön Alternativen zu kennen. Der Responsive Design Tester simuliert verschiedene Viewports und zeigt die mittels CSS3 Media Queries optimierten Layouts parallel an.

Beitrag zu Ende lesen

HTML5 und CSS3 in der Praxis – welche Features lassen sich heute schon nutzen – caniuse.com

Wenn ihr HTML5 und CSS3 in aktuellen Projekten einsetzen möchtet, stellt sich häufig folgende Frage: In welchem Browser wird Funktion X oder Eigenschaft Y denn nun eigentlich schon unterstützt? Genau das ist ein Kernproblem bei der Nutzung der modernen Techniken und führt zu einiger Verunsicherung. Damit ihr die zukünftigen Standards ohne Kompatibilitätsprobleme verwenden könnt, solltet ihr unbedingt einen Blick auf die Website "Can I Use" werfen. Über eine Suchmaske könnt ihr nach HTML5-, CSS3- und SVG-Befehlen suchen und erhaltet als Ergebnis eine detaillierte Auflistung über die jeweilige Browser-Kompatibilität. Absolute Praxisempfehlung.

Beitrag zu Ende lesen