Formulare im Internet sind der Schlüssel zur Kommunikation und Interaktion. Kaum eine Webseite kommt ohne sie aus, und nicht selten werden Formulare zur ersten Kontaktaufnahme genutzt. Es ist jedoch so, dass die Internetnutzer eigentlich keine Lust haben, Formulare auszufüllen. Es wird als lästig empfunden, und die Aufgabe eines Webdesigners sollte es sein, das Formular so einfach und ansprechend wie möglich zu halten. Doch wie erstellt man ein gutes Formular? Was sollte vermieden werden? Wie machen wir es dem Benutzer so leicht wie möglich?
SHIFT Weblog
Dieses Blog ist ein Online-Magazin für erfahrene Website-Entwickler und Webdesigner, die PHP und Webdesign lieben.
Kategorie: Webdesign
This is not sexy: PHP-Template-Engines á la Smarty
Nachdem ich mich in der Vergangenheit über das Zend Framework, Flash und CSS Frameworks ausgelassen habe, ist es mal wieder an der Zeit, den Buhmann zu spielen und möchte mich hier nun über einige PHP-Template-Engines aussprechen. Stellvertretend für viele dieser Projekte werde ich im laufe des Artikels “Smarty” nennen – ich glaube, dass dieser Name vielen PHP-Entwicklern ein Begriff ist.
Der Grundgedanke ist nicht verkehrt: Bei der Erstellung von (PHP-)Applikationen sollte darauf geachtet werden, die Programmlogik vom Design und der Ausgabe zu trennen. Unter Beachtung der Model-View-Controller-Struktur sollte dieses Vorhaben auch keine Hexerei sein. Doch wie könnte man den PHP-Code vom Design (der XHTML-Datei) trennen? Ganz einfach: Mit einer Template-Engine. Sie kümmert sich um die Zuweisung von Variablen innerhalb des Controllers und um die Ausgabe der in der View-Datei. Eine simple View-Datei unter Beachtung des MVC-Prinzips könnte nun also so aussehen:
<!DOCTYPE html>
<html>
<head>
<title><?php echo $titel; ?></title>
</head>
<body>
<h1>Hallo <?php $username; ?></h1>
<?php echo $usercontent; ?>
</body>
</html>
Doch Halt! Eigentlich wollten wir doch den PHP-Code vom Design trennen, oder? In unserer View-Datei ist nun aber trotzdem PHP-Code zu sehen. Was können wir tun, damit der Designer nicht am, *räusper*, hochsensiblen PHP-Code werkeln muss? PHP-Template-Engines wie Smarty verwenden für die Lösung des Problems eine Metasprache, die auch ohne PHP-Code die Ausgabe und Formatierung von Variablen übernimmt.
7 Dinge, die professionellen Webdesignern nicht passieren dürfen
Ich schreibe diesen Artikel, weil unser neuer Klient unzufrieden mit den Entwürfen mehrerer Mitbewerber war. Ich dachte zunächst, dass er das Design der anderen nicht mochte. Nach einem Gespräch stellte sich aber heraus, dass der Klient glücklicherweise schon einmal in der HTML/CSS-Materie Fuß gefasst hat und sich bereits im Vorfeld über gängige Webdesignpraktiken informiert hat. Ihm gefiel an den Entwürfen der anderen nicht, dass sie nicht nach bestem Wissen erstellt wurden.
Ich bin immer wieder erschrocken, was (auch etablierte) Firmen, die sich auf’s Webdesign spezialisiert haben, an Arbeit abliefern. Niemand ist perfekt – aber wer eine Dienstleistung anbietet, sollte schon alles wichtige über seine Tätigkeit wissen. Wir bringen unser Auto ja auch nicht in die Werkstatt, um nachher vom Meister eine qualitiv schlechte Arbeit zu erhalten.
The Magic of CSS3: Sexy Buttons
CSS3 ist seit langem in der Entwicklung, auf viele Elemente kann man aber jetzt schon zählen – jedenfalls wenn es nach dem W3-Konsortium geht. Der Internet Explorer wird wohl leider erst ab Version 9 die CSS3-Elemente untersützen. Da wir den Internet Explorer aber sowieso nicht mögen und auch andere beliebte Browser einen Großteil der CSS3-Elemente kennen, können wir ruhigen Gewissens mit CSS3 arbeiten. Dabei dürfen wir natürlich nicht vergessen, die Seite auch für Nutzer älterer Browser verfügbar zu machen. Ein schönes Beispiel, um CSS3 mit progressive Enhancement zu demonstrieren, ist ein simpler Button. Ohne CSS ist es ein normaler Link – mit CSS2 wird er aufgepeppt und mit CSS3 wird er zu dem, was moderne Buttons im Web auszeichnet: Nicht zu dick aufgetragen, elegant aber mit subtilen Details. Dazu gehört:
- Ein dezenter Schatten um die Schaltfläche
- Eine stilvolle Button-Schriftart
- Die Nutzung von (alpha-)Transparenz an einigen Stellen
- Ein sanfter Farbverlauf als Hintergrund
- Einen Schatten für die Buttonbeschriftung
- Eine deutliche Hervorhebung für einen aktivierten Knopf
Alle Punkte lassen sich mehr oder weniger Problemlos mit CSS3 realisieren. Für die ungeduldigen: Auf dieser Demoseite seht ihr das fertige Endergebnis. Doch wir fangen erst einmal langsam an – mit dem HTML-Code: Weiterlesen ›
Der IE 9 wird unsere Probleme nicht lösen
Jahrelang hat Microsoft dem Internet Explorer keine große Beachtung geschenkt – das möchte man jedenfalls glauben, wenn man die Unterstützung des IE’s für (angehende) Webstandards betrachtet. Sowohl CSS3 als auch HTML5 waren auch dem Internet Explorer 8 unbekannt. Da der Internet Explorer recht verbreitet ist, kann man neue Techniken wie CSS3-Transistions oder Web Sockets (HTML 5) höchstens mittels Progressive Enhancement nutzen. Entwickler benötigen wertvolle Zeit, um die Seite dem Internet Explorer anzupassen. Besonders die Anpassung für den IE 6 kostet oft Nerven – aber das muss ich ja keinem erzählen.
Und jetzt scheint es, als könnte Microsoft es gar nicht schnell genug gehen: Die Beta für den Internet Explorer 9 soll offiziellen Angaben zufolge bereits in knapp vier Wochen, also am 15. September, erscheinen. Microsoft verspricht, mit dem Internet Explorer 9 CSS3 und HTML5 zu unterstützen – also Techniken, die andere Browser teilweise schon vor Jahren unterstützt haben. Im Zusammenhang mit der aufwendingen Präsentation der Beta spricht das Unternehmen aus Redmond gar von “Beauty of the Web”. Wird mit dem Internet Explorer 9 nun alles besser?