Meine ersten Schritte mit LESS

Es ist noch gar nicht lange her, da konnte ich mir nicht vorstellen, mit einem Preprozessor wie LESS zu arbeiten. Aber inzwischen bin ich auf den Geschmack gekommen.

Was LESS ist habe ich in diesem Artikel erklärt. Im Prinzip ist es eine Erweiterung der CSS-Syntax. LESS bietet das, was man sich von der nächsten CSS-Version wünschen würde: Man kann wiederverwendbare Variablen definieren, Styles verschachteln und Vieles mehr.

Der Haken dabei: Die Syntax von LESS muss per Compiler in CSS umgeschrieben werden, denn sonst kann der Browser die Angaben nicht lesen. Das heisst, wer daran gewöhnt ist, Anpassungen und Korrekturen in der CSS-Datei per FTP auf dem Server zu machen, muss sich umorientieren. Denn das funktioniert dann nicht mehr.

Änderungen macht man ausschließlich im less-File, die CSS-Datei ist nur noch eine Art Ausgabeformat, das automatisch erzeugt wird. Die CSS-Datei fasst man gar nicht mehr an.
Weiterlesen →

Was ist eigentlich ein Hook?

Wenn man mit WordPress-Themes und PlugIns arbeitet, begegnet man man früher oder später dem Stichwort „Hook“. Was verbirgt sich dahinter und was kann man damit tun?

Über einen Hook kann man eigene Funktionen an einer definierten Stelle im WordPress-Code „einhaken“. Baut man seine Erweiterungen an diesen Punkten ein, dann überstehen die Modifikationen das nächste Update ohne Schaden.
Die Hook-Funktionen werden in die functions.php-Datei im Theme-Ordner eingetragen oder gleich in ein PlugIn gepackt, das im Verzeichnis PlugIns wohnt. Dort sind sie separat vom WordPress-Core-Code gespeichert.

Die Alternative wäre, direkt im WordPress-Code herumzubasteln. Das empfiehlt sich aber ganz und gar nicht, denn beim nächsten Update wäre die ganze Arbeit futsch.
Weiterlesen →

7 Prinzipien für eine wirkungsvollere Website

Ich bin ja ein erklärter Fan von Susan Weinschenk. Ihr Buch 100 Dinge, die jeder Designer über Menschen wissen muss kann ich jedem Webdesigner wärmstens empfehlen.

Ich finde es eindrucksvoll, wie sehr wir unter dem Einfluß unseres „old brain“ stehen. Das ist der Teil des Gehirns, der entwicklungsgeschichtlich am ältesten ist und eigentlich am wenigsten zu unserer modernen Welt passt.
Und dennoch steuert dieses uralte System praktisch alle wichtigen Entscheidungen. Und zwar sehr viel wirkungsvoller als wir denken.

Code-Beispiele in WordPress mit dem pre-Tag darstellen

In vielen unserer Artikel kommen Code-Beispiele vor. Damit diese Code-Schnipsel auch richtig dargestellt werden, muss man WordPress ein paar Anweisungen mitgeben. Sonst werden die Code-Beispiele nämlich gnadenlos entfernt. Wo gestern noch ein PHP-Beispiel stand, gähnt morgen ein Loch im Artikel.

Aber was passiert da eigentlich? WordPress bewertet alles, was ganz bestimmte Sonderzeichen enthält – wie z.B. die spitzen Klammern – als „ausführbaren“ Code. Und der hat in einem Text nichts zu suchen. Potenziell ist so ein Code nämlich gefährlich, könnte er doch Malware und ähnlich finstere Dinge enthalten. WordPress reagiert jedenfalls damit, dass es solche Code-Zeilen ganz oder in Teilen löscht.

Weiterlesen →

Usability im Alltag Corporate Design

Gestern bekam ich einen Anruf von einer netten Dame. Sie arbeitet für eine Bank, bei der ich kürzlich ein Konto eröffnet habe. Sie fragte nach, wie mir der Prozess der Kontoeröffnung gefallen hat, ob mir noch etwas fehlt und ob ich Fragen habe.
Im Großen und Ganzen bin ich ein zufriedener Kunde meiner neuen Bank. Allerdings hatte mich die Flut der Unterlagen ein wenig überfordert.

So konnte ich die Frage, ob denn alle Zugangsdaten inzwischen angekommen wären und ob mein Konto schon einsatzfähig sei, nicht beantworten. Das war mir dann doch ein bisschen peinlich.

Dabei ist das Material, das die Bank mir geschickt hat, überhaupt nicht schlecht gemacht. Im Gegenteil. Das Design ist hochprofessionell und geschmackvoll, das Layout übersichtlich und klar.

Warum also konnte ich die Frage der Dame nach dem Stand der Dinge nicht beantworten?
Weiterlesen →

Eine Testumgebung für den Internet-Explorer auf dem Mac

Meine Standardtools zum Entwickeln von Webdesigns sind Chrome (Browser), MAMP (lokaler Server) und Transmit (FTP-Client).
Schaue ich mir die Webseite mit anderen Browsern an, so tauchen bei Firefox und Safari in der Regel nur kleine Darstellungsfehler auf. Spannend wird es bekanntermaßen beim Internet Explorer. Microsoft’s Interpretationen von HTML und CSS sind ebenso unberechenbar wie kreativ.

In der Google-Analytics-Statistik zu diesem Blog liegt der Internet-Explorer inzwischen unter 8%.  Fast die Hälfte der Besucher surft mit Firefox, auf dem zweiten Platz liegt Chrome, gefolgt von Safari.

Bei anderen Webseiten sieht das Bild sicher anders aus.  In der Browser-Statistik der W3schools vom Mai 2012 liegt Chrome inzwischen vorn (39%), gefolgt von Firefox  (35%) und Internet-Explorer mit 18%. Der Explorer ist also nach wie vor ein Größe, mit der man rechnen muss.

Da ich auf dem Mac arbeite, habe ich drei Möglichkeiten, wenn ich ein Design im Internet-Explorer testen möchte.

  • Einen PC kaufen
  • Mit Online-Tools testen
  • Einen virtuellen Windows-Rechner auf dem Mac installieren

Weiterlesen →

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.
Weiterlesen →

eReader-Vergleich: Kobo Touch und Amazon Kindle Touch

Da ich viel am Bildschirm arbeite, sind meine Augen abends müde. Zu müde, um Bücher in normaler Schriftgröße zu lesen. So wurde der Stapel der ungelesenen Bücher neben meinem Bett immer höher.

Also musste ein eReader her. Und weil der/das Kindle so hässlich ist, wurde es ein Kobo Touch. Inzwischen hat mich der Kobo Touch wieder verlassen. Und auf meinem Nachttisch liegt – ein Amazon Kindle Touch.

Weiterlesen →

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. Weiterlesen →