Was ist Responsive Design?

Responsive bedeutet übersetzt etwa „reagierend, reaktionsfähig“. Der Begriff bezieht sich auf das Layout von Webseiten. Normalerweise sieht es immer gleich aus: Schaut man mit einem Smartphone die Seite an, sieht man dieselbe Aufteilung wie auf dem Desktop-Computer. Damit alles auf den kleinen Bildschirm drauf passt, verkleinert das Smartphone einfach alles.

Inhalte lesbar machen

Im Responsive Design wird Layout der Webseite flexibel angelegt. Die Inhalte passen sich automatisch an das Gerät an, mit dem die Seite aufgerufen wird. Alle Texte und Bilder werden so präsentiert, dass sie auf Anhieb gut lesbar sind.
Die Inhalte werden nicht verkleinert dargestellt, sondern der Code erkennt, mit welchem Gerät der Besucher unterwegs ist und liefert eine passende Darstellung aus. Die Webseite ist so mit allen Endgeräten gut lesbar und bedienbar.

Weiterlesen →

Drei nützliche Online-Tools für Webdesigner

JPEG- und PNG-Dateien komprimieren

Die meisten Bildbearbeitungsprogramme geben Bilder in relativ großen Dateigrößen aus, trotz bereits eingebauter Kompression. Eine eine gute Bildkompression – und damit eine möglichst kleine Dateigröße – ist aber entscheidend für die Ladezeiten einer Webseite. Gleichzeitig soll man den Bildern die Kompression möglichst nicht ansehen.

Mit diesen beiden Online-Tools findet man ganz schnell den idealen Kompromiss zwischen guter Darstellung und Dateigröße:

Weiterlesen →

Media Queries: device-width & width – wo ist der Unterschied?

Über Media Queries kann man die Breite des Browserfensters (= width) und die des gesamten Bildschirms (= device-width) abfragen. Wobei in der Praxis meist nicht zwischen diesen beiden Werten unterschieden wird, sie werden in einen Topf geworfen.
Dazu trägt man im Viewport-Metatag im head der Seite folgendes ein:

meta name="viewport" content="width=device-with"

Diese Anweisung ist weit verbreitet, auch wir schreiben das so in unsere Themes. Aber genau genommen ist das ein Workaround: Nur wenn width=device-with dasteht, können Android-Geräte die Anweisung device-width überhaupt verstehen. Aber diese Methode hat auch ihre Nachteile. Weiterlesen →

Responsive Design: CSS für den Internet-Explorer 7 und 8

Zurzeit teste ich ein neues WordPress-Theme mit einem Responsive Design in verschiedenen Browsern. Bei diesem Theme arbeite ich mit HTML5, CSS3 und Media Queries. Moderne Browser können diese Angaben lesen, ältere IE-Versionen aber haben damit Probleme. IE7 und IE8 können weder HTML5-Syntax noch Media Queries interpretieren.

Nun kann man darüber streiten, ob man diese betagten Browser überhaupt noch berücksichtigen muss. Der Anteil des IE7 ist inzwischen verschwindend klein, auch der IE8 ist auf dem Rückzug. Da Windows zusammen mit System-Updates automatisch und ungefragt den Browser aktualisiert, dürfte es nicht mehr viele User geben, die mit dem IE8 oder gar dem IE7 unterwegs sind.

Aber immerhin, es gibt sie. Und je nach Thema und Inhalt der Website kann es wichtig sein, alle mitzunehmen. Auch diejenigen, die mit älteren Rechnern im Web surfen.

Weiterlesen →

Stylesheet mit enqueue_style einbinden

Laut WordPress-Codex ist es best practice, nicht nur Scripts, sondern auch Stylesheets über die Funktion wp_enqueue_style einzubinden. Das Stylesheet wird also nicht mehr klassisch per Link in den head-Bereich des HTML-Dokuments geschrieben, sondern über einen Hook in der functions.php geladen.

Ich habe mich gefragt: Wozu ist das gut? Was ist der Vorteil von enqueue_style, an welcher Stelle hat die Link-Methode Nachteile?
An der klassischen Link-Methode ist zunächst mal nichts verkehrt. Kommt das Theme mit einem einzelnen Stylesheet aus, spricht nichts dagegen, den Links zur Datei style.css direkt in die header.php einzutragen.
UPDATE: Das hat sich inzwischen geändert. Laut Codex soll ein Stylesheet nicht länger über einen Link in den head eingebaut werden, sondern über enqueue_script.

Weiterlesen →

Was ist eigentlich Modernizr?

Für Responsive Design-Projekte setzen wir ein paar Hilfsmittel ein, um das Responsive Design über alle Browser hinweg zugänglich zu machen. Eines davon ist Modernizr.
Modernizr ist eine JavaScript-Bibliothek, mit deren Hilfe man HTML5/CSS3 einsetzen kann ohne in Kauf nehmen zu müssen, dass die Website in älteren Browsern nicht richtig funktioniert.

Modernizr überprüft jeden anfragenden Browser gezielt danach, was er leisten kann und was nicht. Das Ergebnis dieser Prüfung wird in einem eigens erzeugten JavaScript-Objekt gespeichert.
Zusätzlich ergänzt Modernizr das HTML-Element um Klassen, die erklären, welche Features unterstützt werden und welche nicht.

Weiterlesen →

„Mobile First“ – Responsive Design von unten

Normalerweise geht der Weg andersherum: An die fertige Website wird eine mobile Version „angedockt“. Rein technisch ist das machbar und in vielen Fällen auch die einzig gangbare Lösung – wenn eine Website nur angepasst werden soll und kein komplettes Redesign bekommen soll.

Wenn aber tatsächlich ein Relaunch geplant ist und man die Chance hat, ganz von vorn anzufangen, ist die „Mobile-First“-Methode der richtige Weg.
Weiterlesen →

Über das Für und Wider von Dropdown-Menüs

Viele WordPress-Themes kommen heute mit dieser Funktion und Kunden wie Designer sind fasziniert von dieser Technik. Man kann sie sehr schön in einen Entwurf integrieren, Dropdowns sind optisch dezent und elegant und brauchen wenig Platz. 

Was ist ein Dropdown-Menu?

Ein Dropdown-Menü ist etwas in dieser Art:

Das heisst, beim Klick auf den Menüpunkt „Leistungen“ klappt ein Untermenü heraus, auf dem dann alle Unterseiten zu sehen sind. Es gibt noch eine zweite Verainte, Fly-Out genannt. Hier klappt das Zusatzmenü zur Seite und nicht nach unten auf.

Was sind die Vorteile?

  • Mit einem ausklappbaren Menü kann man die Navigation sehr „aufgeräumt“ darstellen.
    Auch und gerade dann, wenn sich sehr viele und verschachtelte Inhalte auf den Ebenen dahinter verbergen.
  • Im aufgeklappten Bereich sieht man alle Unterseiten auf einen Blick
    Weiterlesen →

5 schöne Effekte mit der CSS-Eigenschaft „text-shadow“

Mit der CSS-Eigenschaft „text-shadow“ kann man sehr reizvolle Akzente setzen, wenn man den Effekt sparsam und gezielt einsetzt. In diesem Artikel stelle ich fünf Beispiele dazu vor.

Der Code ist relativ einfach aufgebaut:

[css]text-shadow: 1px 2px 3px #999[/css]

Der erste Wert bezeichnet den horizontalen Versatz, der zweite Wert gibt den vertikalen Versatz an. Man kann mit positiven und negativen Werten arbeiten.
Der dritte Wert bestimmt den Grad der Weichzeichnung. Je höher dieser Wert ist, desto weicher und breiter ist die Kante des Schattens. Der vierte Wert ist die Farbe des Schattens. Weiterlesen →