#

WAS IST RESPONSIVE WEBDESIGN?

Hier geht es weniger um die technische Umsetzung, als viel mehr um den Nutzen und Mehrwert einer Website die sich optimal auf allen mobilen Endger?ten darstellt, sowie eine Erkl?rung, wo beim Responsive Webdesign (Aus gestalterischer und vor allem konzeptioneller Sicht) die Schwerpunkte, bzw. der Mehraufwand im Vergleich zu dem Webdesign einer normalen Desktop-Website liegen.

Worin liegt der Unterschied zwischen einer Desktop-Website und Responsive Website auf meinem Smartphone, bzw. meinem Tablet?:

Man kennt das: ?ffne eine Website in deinem Smartphone oder Tablet Browser und sie sieht wie eine Miniatur-Anwendung der Version die ich sonst auf Laptops oder PC Monitoren sehe. Um ?berhaupt etwas erkennen zu k?nnen, wird hineingezoomt und herumgescrollt, bis man den gew?nschten Inhalt findet. Benutzerfreundlichkeit sieht anders aus. Und genau hier liegt der Hauptgrund warum wir eine Website responsive erstellen sollten: Die Gew?hrleistung der gleichbleibenden Benutzerfreundlichkeit auf allen Endger?ten, egal ob Desktop, Tablet oder Smartphone > Das ist responsive Webdesign.

Wie hoch soll ich den Aufwand eines Responsive Konzeption, bzw. eine Responsive Desgins einsch?tzen?
Gehen wir davon aus, deine schicke neue Desktop-Website ist nun endlich online und funktioniert genau nach deinen Vorstellungen. Um diese Website nun optimal auf mobile Endger?ten anzeigen zu lassen, werden wir alle Seiten (oder zumindest einen Gro?teil) deiner Desktop Version ?neu? layouten. Dabei legen wir exakt fest, wie die Seite auf welcher Gr??e (dazu sp?ter mehr) aussieht z.B.:

- Wohin ?f?llt? welches Element?
- Wie ver?ndern sich Bilder und Texte in proportion zu einander (auf dem jew. Endger?t)
- Welche Elemente verschwinden ggf. welche kommen hinzu?
- Wie ist die Navigation aufgebaut?
- Auf welche Elemente m?ssen wir ggf. aus Gr?nden der Daten?bertragung/Ladezeiten verzichten?

Diese und viele andere Punkte fallen unter das Thema ?Konzeption? – zumindest setzt eine professionelle Responsive Website vorraus, das sich der Designer hierbei Gedanken macht und die Dinge nicht dem Zufall ?berl?sst. Nachdem wir jede Seite deiner Webiste nach mindestens den obigen Kriterias durchdacht haben, ist es an der Zeit diese Konzeption in brauchbare Photoshop-Daten um zu wandeln. D.h. Wir erstellen (ggf. sogar eine Vielzahl) neue Photoshop-Daten aus denen klar hervorgeht wie der Programmierer die jew. Seite f?r das jew. Endger?t umsetzen soll. Steht das Desktop Design bereits und haben wir Zugriff auf die Psd Daten (falls wir sie nicht selber designt haben) k?nnte man den Mehraufwand der hier genannten Arbeit (ohne Programmierung/Umsetzung) auf ca. 50-60% der Desktop-Website festlegen (Nat?rlich im Detail immer abh?ngig vom Projekt).

Iphone S5, Sony Xperia, Apple iPad, HTC one Mini, Samsung Tablet – Muss ich f?r alle Ger?te optimieren?
Mobile Devices

Ja und Nein. Die endlose Anzahl und (neuen) mobilen Ger?ten und die st?ndig wachsende Aufl?sung macht es den Entwicklern und Designern nicht gerade einfach. Wichtig ist folgender Punkt: Die angegebene Maximal Aufl?sung deine Smartphones steht nicht f?r die Browseraufl?sung deines Smartphones. Kurzum: Dein Smartphone mag hochaufl?sende Bilder und Videos zeigen, dein Browser aber nicht.  Die eigentliche Browseraufl?sung f?llt also immer (deutlich) geringer aus, als die angegebene maximal Aufl?sung. Diese Browseraufl?sungen sind zwar ebenfalls recht unterschiedlich, allerdings lassen sich Seiten recht vern?nftig optimieren – da wir uns auf eine bestimmte Anzahl und Aufl?sungen konzentrieren k?nnen, um einen Gro?teil aller mobilen Endger?te bedienen zu k?nnen:

Zusammengefasst: Der Aufwand einer Responsive Optimierung basiert nicht auf einem bestimmten Hersteller/Endger?t (kann allerdings, wenn aus welchen Gr?nden auch immer gew?nscht) sondern auf der Anzahl der Aufl?sungen, f?r die wir optimieren. Im Grunde designen und Konzipieren f?r spezielle, sog. ?Breakingpoints? (Punkte an denen der Browser die Information an die Website weitergibt ?jetzt umbrechen, jetzt diese und jede Version anzeigen?) Um eine Website vern?nftig dar zu stellen und damit einen Gro?teil aller Endger?te ab zu decken sollten wir die Website also (mindestens) f?r folgende Breakingpoints designen und konzipieren (Breitenangaben): 768px > 480px > 320px (ggf. noch 1024px und 960px bei sehr gro?en Desktop Versionen). Spezielle Ger?te sind ggf. mit h?heren Browseraufl?sungen versehen (eine optimale Ausrichtung f?r ALLE Endger?te ist daher unheimlich schwer und steht nur selten in einem sinnvollen Preis/Leistungsverh?ltnis). Ausnahmen k?nnen sein (Stand Sept. 2013):

Bsp. Tablets: Google Nexus 7 (7? Mini Tablet) – Beworbene Aufl?sung: 1200?1920 Eigentliche Browseraufl?sung (Landscape): 960x441px

Bsp. Smartphone: Apple iPhone 5 – Beworbene Aufl?sung: 1136?64 Eigentliche Browseraufl?sung (Landscape): 568?196

Beide Ger?te w?rden bei einer Auflistung aller aktuellen Ger?te mit Ihren Aufl?sungen mehr oder weniger aus der Reihe fallen. Die Gr?nde hierf?r k?nnen unterschiedlich sein: Bessere Bedienbarkeit f?r Apps oder andere Anwendungen (Stellte z.B. das iPhone 4 mit der Browseraufl?sung und noch keine Ausnahme dar, hat sich das mit dem iPhone 5 schon ge?ndert). Ich pers?nlich empfehle sich auf die oben genannten Aufl?sungen zu beschr?nken. Dennoch sind spezielle und pixelgenaue Anpassungen an bestimmte Endger?te durchaus machbar und mit dem entsprechenden Budget auch umsetzbar.

Und how much is the fish?

Finden wir es heraus! Ob Einsteiger oder erfahrener Webdesigner, es gibt f?r jedes Budget die passende L?sung:

  • Keine Angaben
  • 1.500 - 2.500?
  • 2.500 - 4.000?
  • 4.000 - 6.000?
  • 6.000 - 8.000?
  • ?ber 10.000?