Und Tschüss, unschöne Scrollbalken: So “streckst” du ein Formularfeld

29. Oktober 2015 von Sebastian Maier

Mit diesem neuen JavaScript streckt sich das Formularfeld ohne unschönem Scrollbalken

Das Thema Animationen behandeln wir bei uns im Blog häufiger. Es spricht ja auch sehr viel dafür, bei Websites Animationen einzusetzen: Sie sind schön anzusehen, erhöhen die Usability und lassen eine Seite hochwertiger erscheinen. Heute möchten wir euch eine Animation für ein Kontaktformular vorstellen, die nicht nur die Usability erhöht, sondern das gesamte Design enorm aufwertet.

Man kann die Animation rudimentär so beschreiben, dass sie ein Formularfeld streckt – ohne dass unschöne Scrollbalken auftauchen. Aber gehen wir erst noch einmal einen Schritt zurück.

Das Schöne an Webdesign ist, dass es – anders als Printdesign – nicht statisch ist. Es lässt sich immer wieder anpassen. Beim Printdesign muss man sich genauestens Gedanken darüber machen, wie groß ein Feld bei einem Kontaktformular sein muss, damit es gut ausgefüllt werden kann.

Bei einem Webdesign war es bisher kein Problem, wenn mehr Text als geplant eingegeben wurde – zumindest für den Websitebesucher. Für den Designer aber schon – kamen dann doch die hässlichen browsereigenen Scrollbalken zum Vorschein. Durch meine Gespräche mit Kunden weiß ich, dass das ein absoluter Albtraum für Designer ist. Ist so ein Scrollbalken doch ein Schandfleck auf einer durchdachten und bis ins kleinste Detail gestalteten Website.


Neues JavaScript streckt Textfelder

Dies hat mit der Animation, die ich euch heute vorstellen möchte, aber ein Ende! Mit einem neuen JavaScript lassen sich Textfelder nun strecken – das heißt, das Textfeld passt sich dem Inhalt an und die restliche Website wird dadurch nach unten geschoben.

Hier könnt ihr unter “Examples” selbst ausprobieren, wie dieses Script funktioniert: leaverou.github.io/stretchy. Natürlich müsst ihr dafür keine neue Textbox designen, sondern könnt das Script einfach auf einer Linie einsetzen, die den Textbereich definiert. Auf diese Weise haben wir das Script beispielsweise bei einem neuen Webprojekt integriert.

Doch Vorsicht, das bedeutet nicht, dass es immer so einfach ist, mit diesem Script zu arbeiten. Idealerweise sollte man dafür den Code verstehen und diesen auch entsprechend an das eigene Projekt anpassen können. Auch auftretende Bugs müssen behoben werden. Das Skript sollte sich auch mit anderen Skripten “verstehen”. Beispielsweise entstehen sonst unerwartete Effekte wie Flackern, Springen, Ruckeln oder Ausblenden von Content, weil zwei Skripte sich gegenseitig ständig überschreiben.

In dem Webprojekt, von dem ich gerade gesprochen habe, stießen wir konkret auf folgende Herausforderungen:

  • Das Skript sollte nur für ein bestimmtes Textfeld verwendet werden, da es bei allen anderen nicht notwendig war. Da die Dokumentation nicht auf dem aktuellsten Stand war, mussten wir erst einmal suchen, wo man das gewünschte Textfeld genau angeben muss.
  • Die Kompatibilität mit Browsern muss immer getestet werden. Auch dafür warfen wir bei diesem Webprojekt einen Blick in die Dokumentation. Aber erst wenn man das Script einbindet sieht man, ob auch wirklich kein Browser ein Problem damit hat. Bei uns hatte zum Beispiel der iOS- (iPhone/iPad) ein ganz anderes Problem als beispielsweise der Android-Browser. Dies lösten wir durch das Anpassen des Codes.

Wie ihr seht, vereinfachen solche Skripte die Arbeit eines Webentwicklers ungemein, aber es gibt trotzdem meist einiges anzupassen. Es ist einfach keine Website wie die andere. Trotzdem sind solche Script-Neuentdeckungen für uns immer wieder eine Inspiration, wie wir Designer noch besser beim Erstellen einer benutzerfreundlichen, ästhetisch anspruchsvollen Seite unterstützen können.



Hattet ihr in der Vergangenheit auch das Problem mit unschönen Scrollbalken bei den Kontaktformularen? Wie gefällt euch das hier vorgestellte Script?

zurück
comments powered by Disqus