Neuigkeiten aus der Designwelt

Neues von der Design-Front

Es gibt wieder Neuigkeiten aus der Design-Branche, und ein paar Tipps haben wir natürlich auch auf Lager. Dieses Mal geht es um die Erkennung von Mobilgeräten per PHP, um das Erstellen von Formularen im Bootstrap-Markup, die 17 Design-Prinzipien bei Google Android und CSS-Layouts per Flexbox.

Mobilgeräte einfach per PHP-Class erkennen

Screenshot Mobile Detect

Screenshot Mobile Detect

Webseitenstyles per CSS an mobile Endgeräte anzupassen, ist relativ einfach; dabei helfen Media Queries. Etwas problematisch wird es aber, wenn man ein großes Portal (mit viel Markup und großen Bildern) optimieren will. Denn dann kann man zwar per CSS DIVs ausblenden und die Bilder auf 100 Prozent begrenzen, aber das Markup bleibt bestehen und die Dateigröße der Bilder auch. Um diesen unnötigen Overhead zu vermeiden, kann man die PHP-Class Mobile Detect nutzen. So wird schon PHP-seitig die Ausgabe bestimmter Bereiche der Webseite verhindert, Bilder werden direkt in kleineren Größen ausgeliefert oder es wird sogar ein anderes Template genutzt.

Formulare im Bootstrap-Markup

Letztes Mal ging es darum, wie man komplette Webseitenlayouts per drag-and-drop zusammenklicken kann. Dafür haben wir LayoutIt vorgestellt. Heute geht es um Formulare. Mit dem Bootstrap Form Builder kann man Formulare im Bootstrap-Markup zusammenklicken. Wer also das nächste Mal ein Formular in einem Projekt, das Bootstrap nutzt, erstellen will, kann sich mit diesem Tool so einiges an Erstellungs- und Bugfixarbeit sparen.

Google Androids 17 Design-Prinzipien

Screenshot http://developer.android.com/design/get-started/principles.html

Screenshot http://developer.android.com/design/get-started/principles.html

Bei der letzten Google-I/O-Konferenz haben die beiden Chefdesignerinnen Rachel Garb und Helena Roeber ihren Ansatz für ein erfolgreiches UX/UI-Design vorgestellt. Die beiden stellen 17 Prinzipien auf, die sie anschaulich erklären. So soll Design mit Usability und Komfort verknüpft werden. Anschauen kann man sich das Video direkt bei Google, nachzulesen sind die Prinzipien, die Tipps wie „Delight me in surprising ways“ oder „Get to know me“ enthalten, unter Principles.

Flexin’ mit Flexbox

Screenshot http://caniuse.com/#search=flex

Screenshot http://caniuse.com/#search=flex

Wer mit CSS Layouts designt, hat es nicht immer leicht. Besonders, wenn kein Framework genutzt wird, kommt es zu nervigem Floating und Clearfixen, prozentuale Größen werden durch Padding und Margin zerstört, und wer das Layout für mobile Geräte anpassen will, der hat seine Mühe damit, die Reihenfolge der Elemente entsprechend anzupassen. Sehr viel einfacher geht das Layouten mit dem Flex-Box-Design, das mit CSS 3 eingeführt wurde. Damit ist das Anordnen von Zeilen und Spalten super einfach. Wer Flexbox nutzen will, sollte aber unbedingt den aktuellen Browser-Support beachten. IE 8 und 9 unterstützen Flexbox beispielsweise noch nicht.

Interessant wäre natürlich, ob Bootstrap dieses Feature demnächst in ihr Framework einbaut. Bisher ist da noch nichts bekannt, wir halten euch aber auf dem Laufenden.