Archiv der Kategorie HTML 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.
CSS3 Dropdown-Menü ohne Javascript
In jedem Premium-WordPress-Theme ist ein Dropdown-Menu eingebaut.
Der Grund ist einfach: Ganz gleich, wie viele Unterseiten der User ineinanderschachtelt, das Menü sieht immer gut aus. Denn die Unterseiten erscheinen ja erst, wenn man auf einen Menüpunkt klickt.
Meistens sind diese Menüs mit Javascript animiert. Falls etwas nicht funktioniert oder wenn man etwas an der Optik verändern will, ist Suchen angesagt.
Vor einiger Zeit bin ich bei designmodo.com auf eine schöne Lösung gestoßen, bei der der Dropdown-Effekt mit reinem CSS erzeugt wird. Kein Javascript. Nur ein paar Zeilen CSS.
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.
Neue Ideen zu Breakpoints im Responsive Web Design
Wer sich mit Responsive Web Design beschäftigt landet früher oder später bei der Frage: Mit welchen Breakpoints soll ich arbeiten? In der Regel orientieren man sich dabei an den Geräten, auf denen die Website dargestellt werden soll. Die Bildschirme von Smartphones und Tablets sind soundso breit, also nehmen wir diese Werte als Breakpoints.
Aber welche Geräte von welchen Herstellern wählen wir dafür aus? Nach welchen Kriterien gehen wir vor? Und was passiert, wenn neue Geräte auf den Markt kommen? Schreiben wir dann wieder neue Breakpoints ins Stylesheet?
In diesem Artikel möchte ich alte und neue Methoden betrachten, mit denen man die “richtigen” Breakpoints für ein Responsive Web Design zu finden.
Was sind Breakpoints?
(Wer schon weiß, wie das mit den Breakpoints funktioniert, darf die nächsten zwei Absätze überspringen und weiter unten weiterlesen).
Breakpoints definieren die Stellen, an denen sich das Layout einer Website ändert, wenn die Inhalte auf Geräten mit unterschiedlich großen Displays dargestellt werden. Das Layout einer Website im Responsive Design passt sich automatisch der Größe des Displays an. Guckt der Besucher mit einem Smartphone, bekommt er die Website anders ausgeliefert als wenn er vor dem Desktop-Rechner sitzt.
Arbeitet man mit einem festen Layout, verkleinert der mobile Browser die Website im Ganzen auf die Größe des jeweiligen Bildschirms. Ziemlich bald wären alle Texte unleserlich und die winzigen Links wären über einen Touchscreen nicht mehr bedienbar. (weiterlesen …)
LINKTIPP: SASS für Einsteiger
Getting started with Sass and Compass
Ich bin zwar nach wie vor skeptisch, ob sich das in meinen Workflow integrieren lässt, aber jetzt will ich es doch mal mit SASS und Compass versuchen.
Bei thinkvitamin.com gibt es eine Video-Einführung zum Thema SASS.Update: Schade, der Link zum Video funktioniert nicht.
Eine Anleitung, wie man die ganze Kompiliererei in einen WordPress-Theme-Entwicklungsablauf integriert, gibt es hier:
Upgrade your WordPress theme CSS with Sass and Compass
Man sollte allerdings als Mac-User keine Angst vorm Terminal haben. ;o)
“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 …)
