bldwin – Reach your customers devices with one beautiful HTML5 user interface

David Washington und Markus Mielke (beide Senior Program Manager bei Microsoft) haben in Ihrem Vortrag über die Gestaltung von skalierbaren User Interfaces gesprochen, die unterschiedliche Bildschirmauflösungen, Hoch- und Querformatigen Bildschirme (inkl. Snapped State) und hochauflösende Monitore unterstützen.

Unterschiedliche Auflösungen

Die Minimumauflösung für Metro-Style Apps beträgt 1024×768. Unterhalb dieser Auflösung wird die Metro-Style App nicht gestartet. Sie empfehlen die Gestaltung in der Auflösung 1366×768 (11.6″) zu beginnen. Natürlich haben die Beiden auch die Grundanforderung an skalierbare User Interfaces gebracht: Um unterschiedliche Auflösungen zu unterstützen ist ein grundsätzlicher Wechsel von festen pixelbasierten Größenangaben zu proportionalen Größenangaben notwendig. Im weiteren ging es im Vortrag dann um diverse HTML5-Elemente – die es ähnlich wie bei WPF-Controls – ermöglichen Oberflächen so zu gestalten, das sie auf unterschiedliche Bildschirmauflösungen dynamisch reagieren. Wichtiger Aspekt in ihrem Vortrag war, dass die Unterstützung von unterschiedlichen Auflösungen bereits bei der Entwicklung getestet werden sollte und mit dem neuen Simulatoren in Visual Studio und Expression Blend auch kann.

Hoch- und Querformat

Alle Metro-Style Apps sollen auch an den Rand des Bildschirms gesnappt werden können. Dazu ist es notwendig einen Style für diesen Snapped State bzw. die Snap View zu erstellen. Die Snap View ist standardmäßig 320px breit und kann vom Anwender angepaßt werden. Die Gestaltung der Snap View sollte sich kontextbezogen auf diese schmale hochformatige Sicht anpassen.
Für die Unterstützung von unterschiedlichen Monitorausrichtungen gibt es in HTML vier CSS-View States (@media Query) mit denen sich für die unterschiedlichen Ausrichtungen jeweils eigene CSS-Eigenschaften laden lassen. Allerdings sind diese View States microsoftspezifisch und funktionieren mit Sicherheit nur in Windows 8 Metro-Style Apps.

Hochauflösende Monitore

Windows 8 unterstützt erstmalig und endlich auch hochauflösende Bildschirme. Dadurch wird das Problem gelöst, dass User Interfaces auf hochauflösenden Monitoren mit zu kleinen Schriften oder Bedienelemente dargestellt werden. Ausgehend von der Basisauflösung von 1366×768 unterstützt Windows die Skalierung in zwei Stufen: 140% und 180%. Die Skalierungsmechanismen berücksichtigen dabei sowohl Schriften als auch Bilder.

Siehe auch

Video zum Vortrag
build windows

War dieser Artikel hilfreich für Dich?

Nach oben scrollen