Nutzerfreundlichkeit im Web dank Responsive Webdesign

responsiveTitleWenn man sich mit mobilen Geräten durch das Web bewegt, fällt eine zunehmende Zweiklassengesellschaft unter den Webseiten ins Auge. Responsive oder nicht responsive – das ist hier die Frage. Im ersten Fall passen sich Layout und Inhalt der Web-Anwendung der Bildschirm-Auflösung des jeweiligen Gerätes dynamisch an. Im zweiten Fall hilft nur dass althergebrachte Zoomen, da sich das Layout der Website verhält wie in Beton gegossen. Auch OneNote.com (ehemals OneNote Web App) reagiert daher auf diesen Trend und rüstet auf.

Auch wenn man es OneNote nicht immer auf den ersten Blick angesehen hat, so war OneNote im Vergleich zur Konkurrenz technisch häufig einen wesentlichen Schritt voraus. Um mit gemeinschaftlicher Bearbeitung von Notizen im Browser (Web Co-authoring) und einer ausgefeilten Multi-Device-Strategie (Apps für Android, iOS, Windows 8, etc.) nur zwei Beispiele zu nennen.

Das Verhalten wird bereits auf der Startseite von OneNote.com sichtbar und dies auf allen Browsern. Ziel ist grundsätzlich das Vermeiden von horizontalem Scrollen (links nach rechts). Der Screenshot macht deutlich, wie Resonsive Design im Wesentlichen funktioniert. Eine Gitterstruktur (sog. Grid) reagiert dynamisch auf die Breite des Browserfensters und klappt Elemente von der rechten Seiten nach unten, bzw. blendet diese aus oder stellt die Elemente deutlich kompakter dar – je nachdem was vom Designer zu Gunsten einer guten User Experience (UX) gewünscht ist. Wenn man genau hinsieht, dann hat das Responsive Design sogar Einfluss auf die Schriftgröße.

responsiveExample1

Sinn und Zweck der ganzen Übung ist die weitere Verbesserung der Nutzerfreundlichkeit. So wird es dem Nutzer ermöglicht, auf jedem Gerät, mit jedem Browser mit allen Eingabegeräten (Maus/Tastatur, Stift, Finger) in angenehmer Wesie zu arbeiten und zu navigieren. Kontroll-Elemente, die nur Zeitweise benötigt werden (Seitenauswahl, etc.), werden kontextsensitiv ausgeblendet.

Im Detail betrachtet sind im web-basierten Notizbuch, bei entsprechender Fensterbreite, sämtliche Elemente der grafischen Oberfläche zu sehen. Reduziert man die Breite etwas (bzw. nutzt mobile Geräte), reduziert sich das Auswahlmenü für Abschnitte und Seiten zu einem Button. Dieser Button zeigt sofern gewünscht das Auswahlmenü vorübergehend an. Auch die sogenannte Brotkrümelnavigation fällt der Dynamik des Designs zum Opfer und wird sogar komplett ausgeblendet, statt durch eine kompaktere Darstellung ersetzt zu werden.

responsiveExample2

Grundsätzlich ist Responsive Webdesign nachträglich nur relativ aufwendig umzusetzen und sollte daher bereits bei der Planung einer eigenen Website, bzw. Webanwendung frühzeitig mit einbezogen werden. Im Wesentlichen braucht es nicht viel mehr als ein wenig Know-How in den Bereichen HTML, CSS und JavaScript. Für das Herantasten an diese noch relativ neue Thematik kann ich Bootstrap 3 grundsätzlich sehr empfehlen, da sich mit Hilfe dieser Gestaltungsvorlagen ein Resonsive Webdesign bereits mit wenigen Zeilen Code umsetzen lässt, ohne das Rad neu erfinden zu müssen.

Autor: Karsten Ulferts

Related sites:

Dokumentation Responsive Webdesign (MSDN)

Get Bootstrap

This entry was posted in News and tagged , , . Bookmark the permalink.

One Response to Nutzerfreundlichkeit im Web dank Responsive Webdesign

  1. Anja says:

    Ein sehr guter und wichtiger Schritt, an dem sich Viele ein Beispiel nehmen könnten. Gefällt mir.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s