06. Dezember 2012

Workflow bei Responsive Design Projekten

Seit wir Webseiten im Responsive Design machen, hat sich unser Workflow verändert. Es ist noch gar nicht lange her, da begann jedes Webprojekt mit Photoshop und Fireworks. Inzwischen kommt die Grafik erst viel später ins Spiel und der Browser spielt eine immer größere Rolle.

Wir haben zunächst das inhaltliche Konzept an den Anfang gestellt, erst danach kommt die Grafik an die Reihe. Der Abstimmungsprozess mit den Kunden ist dadurch einfacher geworden. Wir müssen nicht mehr so viel über Geschmacksfragen diskutieren und können gestalterische Entscheidungen an den Inhalten festmachen. Wir haben dadurch eine bessere Gesprächsbasis mit den Kunden und können uns besser verständlich machen.

Weiterlesen


15. Juni 2012

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


04. Juni 2012

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


20. April 2012

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.

Weiterlesen


05. April 2012

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.

Weiterlesen