Responsive Webdesign am Beispiel der Steuerberatung Pfeffer

Transkript

1 Responsive Webdesign am Beispiel der Steuerberatung Pfeffer Seit 2012 erstellen wir fast ausschließlich Webseiten im Responsive Design. Denn die Anpassungsfähigkeit von Internetseiten ist längst kein Nischenthema mehr. Responsive Webdesign (RWD) ist Standard geworden und für die Homepages vieler Unternehmen und Firmen unverzichtbar. Warum das so ist, zeigen wir hier an einem unserer zahlreichen Arbeitsbeispiele, der Webseite für die Steuerberatung Pfeffer. Responsive Webdesign: immer das passende Menü Ein großes Thema im Responsive Webdesign ist die Menüführung logisch! Die zwei Hauptunterschiede die sich ergeben, wenn man eine Website auf dem Heimcomputer und auf einem Smartphone ansieht, sind: erstens ein kleineres Display auf dem Smartphone und damit weniger Fläche zur Darstellung der Inhalte, und zweitens die Bedienung mit dem Finger auf dem Touchscreen statt mit Maus und Cursor am Monitor. Wegen der unterschiedlichen Bildschirmgrößen lautet die oberste Devise bei der Optimierung einer Website für kleine Endgeräte: intelligent Platz sparen! Bei der Steuerberatung Pfeffer wurden die Hauptmenüpunkte für den großen Monitor mit ansprechenden Icons gestaltet, die bei Klick die jeweiligen Unterpunkte als Dropdown-Funktion ausklappen. Das sieht schön aus, sorgt für eine einfache Orientierung des Besuchers und für Lust am Stöbern auf der Seite.

2 Sobald die Navigation mit der Maus allerdings durch die Navigation mit dem Finger ersetzt wird, wie es bei Touchscreens der Fall ist, wird es schwieriger. Unsere Finger sind längst nicht so grazil und präzise wie der Mauszeiger. Es darf auf kleinen Displays nicht zum Geduldsspiel werden, den richtigen Menüpunkt zu treffen und auszuwählen. Ergo steht auf kleinen Bildschirmen weniger Platz für die Inhalte zur Verfügung und gleichzeitig müssen verlinkte und anwählbare Punkte großflächiger angelegt werden, damit sie mühelos mit Zeigefinger oder Daumen getroffen werden. Ein Konflikt für den das Responsive Webdesign Lösungen schafft. Bei der Homepage der Steuerberatung Pfeffer ist gut zu sehen, wie auf die besonderen Bedingungen der Touchscreen-Bedienung eingegangen wird. Das Menü mit den großen Icons wird auf Tablets und Smartphones als einzelner Button (in der Abbildung durch einen grauen Kreis markiert) angezeigt.

3 Beim Auswählen des Menü-Buttons klappt sich das Menü nach unten aus. Die Menüpunkte sind nicht nebeneinander, sondern untereinander angeordnet. Das schafft Platz und die Klickfläche kann groß genug angelegt werden, dass sogar ein Daumen sein Ziel sicher trifft. Intelligent Platz sparen bei den Inhalten Durch das Menü, das sich automatisch anpasst, trifft im Idealfall also auch der Seitenbesucher mit dem dicksten Daumen auf dem kleinsten Bildschirm den gewünschten Navigationspunkt. Aber damit eine Seite auf Tablets und Smartphones gut zu bedienen und zu nutzen ist, müssen auch die Texte, Bilder und sonstigen Seiteninhalte entsprechend der Bildschirmgröße verändert werden. Wer eine Website auf einem kleinen Smartphone ansieht, möchte sich trotzdem nicht mit kleiner Schrift abmühen. Im Gegenteil, gerade die mobilen Smartphones mit den kleinen Displays werden unterwegs genutzt, beim Laufen, in der U-Bahn, bei ungünstigen Lichtbedingungen usw. Der Besucher muss ohne große Mühe mit einem flüchtigen Blick die wichtigsten Informationen der Homepage erfassen können. Bis zu einer gewissen Bildschirmgröße schaffen intelligente Zeilenumbrüche Abhilfe. Die Fläche, die ein Text einnimmt wird schmaler und verlängert sich dafür nach unten. Die Schriftgröße bleibt gleich. Bilder können beschnitten oder bis zu einem gewissen Grad verkleinert werden, solange der Inhalt noch deutlich erkennbar bleibt. Problematisch wird es auf Smartphone-Displays mit Text- und Bildelementen, die nebeneinander angeordnet sind.

4 Im Responsive Webdesign darf der Mensch Gewohnheitstier bleiben Die Inhalte einer Website müssen umstrukturiert und teilweise anders angeordnet werden. Manchmal entfallen geringer priorisierte Content-Elemente ganz. Bei all diesen Inhaltsanpassungen wird Rücksicht auf das gewohnte User-Verhalten genommen. Zoomen und Swipen wird vor allem bei kleinen Touchscreens eher als unangenehm empfunden. Zum Zoomen sind meist zwei Finger nötig und damit beide Hände des Users. Denn eine Hand muss das Gerät halten, während die andere zoomt. Das ist vergleichsweise umständlich.

5 Viel vertrauter ist der Smartphone-User mit der Scroll-Bewegung des Daumens, der den angezeigten Inhalt einfach nach oben streicht, damit das Gelesene den Bildschirm oben verlässt und unten neuer Inhalt auf dem Display erscheint. Das ist der Grund, warum beim Responsive Webdesign die Inhalte für Tablets und Smartphones meist untereinander angeordnet werden. Das Wichtigste muss natürlich oben stehen. Der Rest kann durch bequemes nach oben Streichen des Daumens nach und nach in den Sichtbereich gescrollt werden. Fazit Intelligentes Platzsparen und durchdachte Menü-Anpassungen sind nur zwei der vielen Vorteile des anpassungs- und reaktionsfähigen Designs. Fakt ist: Wer seinen Seitenbesuchern eine zeitgemäße Homepage zur Verfügung stellen möchte, die sich intuitiv bedienen lässt und auf allen Bildschirmgrößen schön und funktional ist, der sollte auf Responsive Webdesign setzen.