Tellerrand

Optional war gestern: Wie Responsive Web Design die Smartphone-Nutzung verändert

- w -

Wir schreiben das Jahr 2020. Die roaring 20s sind zurück und damit startet ein neues Zeitalter. Das mobile online Surfen nimmt mit so astronomisch hohem Tempo zu, dass Web Designer kaum die Chance haben mitzuhalten und viele Websites noch immer nicht für mobile Geräte optimiert wurden. Im Gegensatz zu Desktop PCs oder Laptops sind die meisten Smartphones durch die geringere Anzeigegröße eingeschränkt und erfordern einen anderen Ansatz für die Darstellung von Inhalten auf dem Bildschirm. Aber iPhones und Co. sind nur die Spitze des Eisbergs. Mit dem technologischen Fortschritt müssen sich Designer neben dem Web Design für Computer Screens und Smartphones ebenso auf Tablets, Spiele-Konsolen, Fernseher oder Wearable Technology konzentrieren. Dabei gleicht kein Bildschirm dem anderen und diese Entwicklung stellt eine große Herausforderung dar. Bildschirmgrößen und Anforderungen ändern sich ständig, doch dem Enduser ist nur wichtig, dass eine Website im benutzten Browser einfach zu erforschen ist. 

Im Folgenden erklären wir nicht nur, was genau Responsive Webdesign ist und warum es für den Erfolg eines jeden Online-Business essenziell geworden ist, sondern im Besonderen wie Designer mit ständig sich ändernden iPhone-Bildschirmen umgehen.

Ein neues Zeitalter für Mobile Design

In den frühen Tagen des mobilen Webs lösten neue Telefonenthüllungen häufig schnelle und praktische Neu-Kalibrierung von Websites aus. Dass geschah, um sicherzustellen, dass sie auf einem breiteren Bildschirm mit mehr Pixeln ordnungsgemäß angezeigt werden. Als das iPhone 2007 enthüllt wurde, standen die Web Entwickler vor einer ganz neuen Herausforderung. Die Erwartungshaltung der Nutzer hinsichtlich der Darstellung und des Designs einer Website auf einem mobilen Gerät änderte sich mit dem Smartphone drastisch. Websites, die eigens für Desktop Darstellung konzipiert wurden und plötzlich am Smartphone geladen wurden, lieferten ungenügende Bildauflösung oder mussten sich mit überlappenden Text und oder unförmigen Navigationsleisten herumschlagen. Am schlimmsten traf es die Websites, die überhaupt nicht gerendert bzw. angezeigt wurden.

Zu Beginn reagierten die Web Designer indem sie für jedes einzelne Gerät unterschiedliche Versionen derselben Website (z.B. für die besten Casino-Spiele bei Casumo unter https://holymolycasinos.de/casino/casumo-casino-review) erstellten. Es war keine Seltenheit, dass ein Unternehmen neben der Desktop-Website, auch noch eine oder gleich mehrere separate mobile Websites und möglicherweise auch noch eine Tablet-Website hatte. So viele Endgeräte gesondert zu betreuen konnte nicht für lange gerechtfertigt werden. Die Erstellung jeder einzelnen Version benötigte zu viele Arbeitsstunden und war auch finanziell nicht rentabel. Angesichts des Wachstums der Smartphone-Nutzer ist die online Web-Nutzung bemerkenswert gestiegen und es war an der Zeit einen neuen Weg zu finden, um den Entwicklungsprozess zu vereinfachen.

Diverse Statistiken weisen darauf hin, dass Mobilgeräte für jedes Unternehmen oder Marke wesentlich sind, um Benutzer zu erreichen, Bekanntheit zu erlangen und Gewinne zu erhöhen. Auf das Endgerät angepasste Websites sind nicht länger optional. Die folgenden Daten zeigen klar, dass die Erstellung einer Website, die auch nahtlos auf Mobilgeräten funktioniert, von entscheidender Bedeutung ist.

  • Fast 60% des gesamten Internetzugangs wurden 2019 über Mobiltelefone abgewickelt.
  • Über 50% des gesamten eCommerce-Umsatzes wird über das Smartphone erzielt.
  • 2019 wurden 194 Milliarden mobile Apps heruntergeladen.
  • Bis 2025 werden 72% der Internetnutzer ausschließlich das Smartphone zum Surfen im Internet verwenden.
  • 94% der Online-User beurteilen eine Website anhand der Ladezeit und Reaktionsfähigkeit.

Was genau ist Responsive Web Design?

Der Begriff “Responsive Design” wurde bereits 2010 von Ethan Marcotte geprägt. Der Entwickler schlug vor, anstatt von getrennten Designs für eine immer größere Anzahl von Webgeräten, “Facetten derselben Erfahrung” zu schaffen. Um ein optímales Nutzungserlebnis zu erzielen, sollten standardisierte Technologien in das Design eingebettet werden, um sie nicht nur flexibler, sondern auch anpassungsfähiger für die unterschiedlichen Geräte zu machen.

Die Idee hinter Responsive Web Design ist, dass sich das Layout einer Website je nach Größe und Funktionen des Gerätes ändert. Web Designer erklären diesen Ansatz des Web Designs oft mit dem “Wasser-Beispiel”. Wenn Wasser in ein Glas gegossen wird, nimmt es mühelos die Form eines Glases an. Sobald dasselbe Wasser in eine Flasche gegossen wird, passt es sich der Form einer Flasche an. Man kann sich den Inhalt einer Website ähnlich vorstellen. Er passt sich in Echtzeit an die Bildschirmgrößen der verschiedenen Geräte an. Mobile Responsive Web Design ist ein Ansatz, der im Web Design-Prozess weit verbreitet ist und es Websites ermöglicht, sich auf verschiedene Mobilgeräte mit unterschiedlichen Fenster- beziehungsweise Bildschirmgrößen und Auflösungen anzupassen. Am Smartphone werden Benutzern Inhalte beispielsweise in einer einzelnen Spaltenansicht anzeigen, während der gleiche Inhalt am Tablet in zwei Spalten dargestellt wird. Zur weiteren Verdeutlichung kann man sich die Darstellung von Bildern vorstellen. Wenn drei Bilder auf einem Desktop Bildschirm nebeneinander angezeigt werden, rutschen sie auf Mobilgeräten automatisch in eine vertikalen Reihe.

Apple zeigt Größe

Size does matter! Jedenfalls könnte man das denken, wenn man sich die Entwicklung der iPhone Bildschirme über die Jahre genauer ansieht. Mit dem iPhone X präsentierte Apple das bisher größte Display. Die Einführung des neuen Bildschirmformats war für Web Designer wie Endnutzer gleichermaßen aufregend, allerdings musste man sich auch in komplettes Neuland vorwagen, das einige Hindernisse und Herausforderungen beinhaltete. 

Seit dem iPhone X ist im Display oben ein schwarzer, abgerundeter Balken mit den Sensoren angebracht. Das Smartphone von Apple verfügt über eine breitere Kamera für das Face ID-System, wodurch eine Lücke, die sogenannte Kerbe, am oberen Bildschirmrand entsteht. Der Übergang zu dieser Art des eingeschränkten Bildschirms verlief für App- wie Website Designer nicht gerade reibungslos. Die Entwickler der beliebten Kindle eReader App von Amazon brauchten Monate, um den seltsam geformten Bildschirm des iPhone X voll ausnutzen zu können.

Besonderheiten für Web Design beim iPhone

Der längere Bildschirm ermöglicht zusätzliche Inhaltszeilen oder ein Menü, das auf früheren Standard-iPhones zu eng gewesen wäre. Im Landscape Modus oder einfacher ausgedrückt im Querformat, rendert das iPhone seit dem Model X alle Websites mit weißen Balken an beiden Seiten. Sogar Apples eigene Product Page wird mit diesen weißen Balken angezeigt, jedoch ist das durch die passende Hintergrundfarbe nicht direkt ersichtlich. Wenn sich ein Designer nicht dafür entscheidet, die Website an die leeren Bereiche anzupassen, dann wird automatisch die Hintergrundfarbe der Seite genutzt und in diesen Bereichen als feste Hintergrundfarbe festgelegt.

Wenn das Smartphone im Portrait Modus, beziehungsweise im Hochformat, gehalten wird, fallen die oben genannten weißen Streifen nicht so breit aus. Das Ansichtsfenster verläuft beinahe nahtlos über die abgerundeten Ecken an allen vier Seiten. Die Status- und Navigationsleisten nehmen ebenfalls die definierte Hintergrundfarbe der Webseite an.

Grundsätzlich kann festgehalten werden, dass der Inhalt einer anpassungsfähigen Website zentriert und symmetrisch angeordnet sein sollte, damit er in jeder Ausrichtung am iPhone Bildschirm gut aussieht und nicht durch Ecken oder das Sensor-Gehäuse (die oben genannte Kerbe) des Gerätes abgeschnitten oder durch die Anzeige für den Zugriff auf den Startbildschirm verdeckt wird. Weiters sollten die von UIKit festgelegten Sicherheitsbereiche und Layout-Ränder eingehalten werden, um eine angemessene Darstellung basierend auf dem Gerät und dem Kontext zu gewährleisten. Der sichere Bereich verhindert, dass sich Inhalte wie die Statusleiste, die Navigationsleiste, die Symbolleiste oder die Registerkartenleiste überlappen. Apple empfiehlt auch, dass Websites das P3-Farbprofil anstelle von sRGB verwenden, um eine breitere Farbpalette anzubieten. Da bereits beim iPhone X der Home Button entfernt wurde, sind aktuelle Apple-Geräte auf eine Reihe von Gesten angewiesen. Daher sollte beim Entwerfen von Websites das Platzieren von interaktiven Steuerelementen oder Schaltflächen am unteren Bildschirmrand vermieden werden.

Die meisten online Website Builder ermöglichen die Erstellung von Responsive Websites auch ohne große Erfahrung als Web Designer und stellen sicher, dass Design Fehler vermieden werden. Namhafte Domain und Website Firmen wie 101domain haben sich aufgrund der Entwicklungen des letzten Jahrzehnts an die Trends angepasst und bieten einfache Lösungen, um eine Website auch am neuesten iPhone Modell gut aussehen zu lassen. Responsive Web Design legt alles daran, dass auf jeder Bildschirmgröße die beste UX (User Experience) geboten wird. Bis das reibungslos am aktuellen iPhone 11 Bildschirm gewährleistet werden kann, ist jedoch wahrscheinlich schon das nächste iPhone Modell am Markt erschienen. Eine Website lediglich auf ein bestimmtes Gerät zuzuschneiden ist aber ohnehin nicht im Sinne des Erfinders.

Sources:

https://quoracreative.com/article/mobile-marketing-statistics
29+ Smartphone Usage Statistics: Around the World in 2020
https://www.bluecorona.com/blog/mobile-marketing-statistics/
Responsive Website Design: A Flexible Fit For Your Brand

Das könnte dir auch gefallen:

Schreibe einen Kommentar

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