Archiv für CSS
Nichts mehr verpassen!
Einmal in der Woche schicken
wir Dir eine Mail mit den neuesten Artikeln.
Wir geben Deine Mailadresse nicht an Dritte weiter und verwenden sie nur für diesen Zweck.
Tools zum Entwerfen von Responsive Web Design-Projekten
Bei Responsive Design ist viel Technik im Spiel. Technik, die nicht selten vom Wesentlichen ablenkt: Struktur und Inhalte.
In diesem Artikel beschreibe ich Methoden und Tools, die mir helfen, mich beim Entwurf einer Website im Responsive Design nicht in den technischen Details zu verlieren.
1. Skizzen
In der Konzeptions-Phase eines Responsive Webdesign-Projekts geht es darum, wie die Inhalte gewichtet werden und was an welcher Stelle bei welcher Bildschirmgröße erscheinen soll.
Der Weg über klassische Wireframes über Fireworks oder Keynote ist für diesen Prozess nicht ganz ideal. Zuviel Energie und Aufmerksamkeit fließt in die akkuraten grauen Kästchen, das Gefühl für die Flexibilität geht verloren.
Ich arbeite deshalb viel mit Papier und Bleistift. Damit ich nicht jedes Mal wieder dieselben schiefen Umrisse zeichne und ich die Proportionen besser erkennen kann, habe ich mir Skizzenblätter gebastelt.
Eines davon gibt’s unten am Ende des Artikels zum Download (als pdf und als Adobe Indesign-Vorlage zum Selber Anpassen).
Mit diesem Blatt arbeite ich, wenn ich mir klar werden möchte, wie sich ein Layout grundsätzlich verhält. Also: Wie verändern sich die Spalten, was steht wo bei welchem Bildschirmgröße? (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?
Richtig oder falsch? Es kommt drauf an
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.
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.
SASS, LESS und der WordPress-Workflow
SASS und LESS sind Erweiterungen der klassischen CSS-Syntax, die CSS-Vielschreibern lästige Tipparbeit ersparen sollen. Mit SASS und LESS wird CSS smarter und leistungsfähiger.
Ich möchte in diesem Artikel herausfinden, welche Konsequenzen das Arbeiten mit CSS-Dateien, die einen Compiler brauchen, auf meinen Arbeitsablauf bei der Entwicklung von WordPress-Themes haben würde.
Eine Warnung vorweg: In diesem Artikel werde ich LESS und SASS fröhlich in einen Topf werfen. Das Prinzip dahinter ist dasselbe, aber mir ist klar, dass sich beide Ansätze voneinander unterscheiden. Eine Gegenüberstellung beider Methoden gibt es bei smashingmagazine.
Eine kurze Einführung in LESS
Die Syntax von LESS (und SASS) unterscheidet sich von der im klassischen CSS. Das muss auch so sein, schließlich bieten die Frameworks Funktionen, die es in CSS nicht gibt und die müssen irgendwie dargestellt werden.
Ein Beispiel: Ich möchte ein bestimmtes Rot definieren, die Hausfarbe der Firma, der die Website gehört. Der Hexcode der Farbe ist: #990000.
Dieses Rot soll auf der Website in verschiedenen Elementen vorkommen. Es gibt rote Überschriften, rote Linien und rote Flächen. Im klassischen CSS bleibt mir nichts anderes übrig, als überall dort, wo das Rot auftauchen soll, den Hexcode der Farbe einzutippen.
Ein Schriftelement bekommt eine color: #990000, eine Fläche eine background-color: #990000 und ein Rahmen die border-color:#990000 und so weiter. (weiterlesen …)
“Mobile First” – Responsive Design von unten
Den Begriff “Mobile First” hat Luke Wroblewski geprägt. Dahinter steht der Gedanke, dass man beim Entwickeln eines Webdesigns mit der mobilen Version anfangen sollte. Einerseits deshalb, weil mobile Geräte immer wichtiger werden und andererseits, weil man dadurch mit dem Kern der Website beginnt.
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 wenig Geld da ist oder die Website aus anderen Gründen kein komplettes Redesign bekommen soll.
Wenn aber tatsächlich ein Relaunch geplant ist und man die Chance hat, ganz von vorn anzufangen, ist der “Mobile-First”-Gedanke ein sehr spannendes und produktives Denkmodell. (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 …)
