Die Sache mit dem Raster

Das Raster hilft dir nicht nur dabei, deine Ein- und Ausgabeelemente auf deiner Seite zu sortieren und an verschiedene Auflösungen anzupassen, es hilft dir auch dabei diesen Formularen eine ansprechende Form zu geben.
Was ich oft sehe, ist sozusagen eine Zerstückelung der einzelnen Container, durch leere Container erzeugte Abstände und vor allem auch ganz oft sehr unterschiedliche Breiten von Containern. Das Problem dabei ist aber, dass das Auge des Users unterschiedlichen Breiten nicht besonders gut folgen kann und das menschliche Auge auch grundsätzlich total auf Symmetrie steht.
Gleichermaßen muss man aber auch ein bisschen darauf achten, dass die Breite der Eingabeelemente mindestens grob der zu erwartenden Eingabe entspricht. Gebe ich beispielsweise einen String mit 5 Stellen ein, muss die Eingabezeile nicht die volle Breite der Seite einnehmen.

Es ist in eine Jonglage mit fast zu vielen Bällen, aber die Hinweise, die ich euch direkt mitgeben kann, sind:

  1. Lass die Container die volle Breite des Rasters nutzen
  2. um Formulare zu verschmälern, setze lieber die Breite des Rasters mittels CSS (oder die Breite des Tooltips an entsprechender Stelle)
  3. Achte auf eine angenehme Lesbarkeit des Formulars (Abstände am Raster nicht vergessen)
  4. Leere Container sind halt auch irgendwie Unsinn
Wenn du auf einmal bessere Formulare bauen kannst, weil du das Raster ausnutzt

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Hallo! Mein Name ist Marco Friedersdorf und bin Freelancer im Bereich der Software-Entwicklung und IT-Beratung. Mit Artikeln wie diesem möchte ich einen kleinen Einblick in meine Arbeit geben und über die Dinge sprechen, die mich als Informatiker beschäftigen.
tripadvisor flickr americanexpress bandcamp basecamp behance bigcartel bitbucket blogger codepen compropago digg dribbble dropbox ello etsy eventbrite evernote facebook feedly github gitlab goodreads googleplus instagram kickstarter lastfm line linkedin mailchimp mastercard medium meetup messenger mixcloud paypal periscope pinterest quora reddit rss runkeeper shopify signal sinaweibo skype slack snapchat soundcloud sourceforge spotify stackoverflow stripe stumbleupon trello tumblr twitch twitter uber vimeo vine visa vsco wechat whatsapp wheniwork wordpress xero xing yelp youtube zerply zillow px aboutme airbnb amazon pencil envelope bubble magnifier cross menu arrow-up arrow-down arrow-left arrow-right envelope-o caret-down caret-up caret-left caret-right