Responsive
Webdesign
361° erklärt Responsive Webdesign.

Wie funktioniert
Responsive Design?

Hallo! Wir von 361° KOMMUNIKATION erklären hier alles rund ums Thema Responsive Webdesign.

Dazu gibt's schon oft was zu lesen, aber mit Sicherheit nicht so einfach erklärt wie von uns.

Auf geht's, scrollen!

Tipp: Drücke F um den Vollbildmodus zu aktivieren!

Früher
war
alles
so Einfach.

Wer früher etwas zu erzählen hatte, tat das auf einer festen Größe. Zum Beispiel auf einer Zeitungsseite, einem Blatt Papier, auf einem Poster oder Etikett.

Die Fläche war begrenzt und klar definiert. Nicht umsonst ist DIN A4 auf der ganzen Welt gleich groß.

DOCH DANN KAM DAS INTERNET.
UND viele neue Geräte.

1

Schöne neue Welt.
Zahlreiche Endgeräte und noch mehr Bildschirmgrößen. Und überall müssen Websites, Shops und Konsorten bedienbar sein, gut aussehen und schnell laden.

DAMIT STEHT ERSTMAL FEST:

jetzt kommt‘s
auf die Grösse an.

WIE VORHIN SCHON ERWÄHNT:

Mit all den neuen Endgeräten gibt es nun zahlreiche Anzeigegrößen. Dazu kommt, dass die Geräte meistens auch noch unterschiedliche Auflösungen haben, also mal mehr, mal weniger Bildpunkte darstellen.

Auf einem Smartphone gibt‘s weniger Platz am Bildschirm und zudem auch keine Maus zum Bedienen.

Und das ist noch nicht alles.

2

So Sieht‘s dann
NACHHER aus.

Verschiedene Geräte, Größen und Auflösungen haben wir also schon.

Doch was ist mit den verschiedenen Internetbrowsern,
Zusatzleisten - z.B. für Lesezeichen - und vor allem den Benutzern?

Manche mögen Vollbild, andere nicht. Manche haben mehrere Browserfenster nebeneinander geöffnet, andere nicht.

Somit verändert sich der Sichtbereich für die Website ein weiteres Mal.

ALSO NOCHMAL ANDERS.
UND WIE GEHEN WIR JETZT VOR?

3

Laufen muss
es überall.

Und als ob das noch nicht kompliziert genug wäre, gibt es noch ein weiteres Problem:

Nicht jeder Anwender verwendet das gleiche System. Ihr wisst schon - Mac oder PC, iPhone oder Android.

Dazu kommen verschiedene Internet-Browser, wodurch das Ganze noch viel bunter wird.

Internet Explorer, Safari, Firefox, Chrome, Opera, Dolphin u.v.m. - die Liste ist hier noch nicht zu Ende.

NOCH MEHR VARIABLEN.
NOCH MEHR ZU BEACHTEN.

4

Wie man sieht, gibt's einiges zu bedenken
und viele Faktoren.

Auf geht's
Wir suchen eine Lösung.

Wir wollen eine Website auf allen Geräten, Systemen, Internetbrowsern und Displaygrößen funktional, passend und dazu noch schön machen.

DAFÜR GEHEN WIR NEUE WEGE.

5

VORAUSSETZUNGEN GEKLÄRT, BEDÜRFNISSE GECHECKT
UND RICHTIG NACHGEDACHT.

Wir bleiben
immer flexibel.

Zuerst bedenken wir das Wichtigste: den Inhalt. Erst danach kümmern wir uns um die Darstellung und das Verhalten der Website auf verschiedenen Systemen und Geräten.

Wenn geklärt ist, welcher Inhalt sich wo und vor allem wie befinden muss, geht‘s an das Aussehen und die Kompatibilität.

Denn ohne intuitive Bedienung bringt die schönste Website nichts.

SOWEIT, SO GUt.
ABER WIE SIEHT‘S DANN IN DER PRAXIS AUS?

6

Der ANsatz stimmt.
Jetzt geht's in die Praxis.

Alles hat
seinen Platz.

Wir passen alle Inhalte, alle Flächen, Schriften und Grafiken individuell dem jeweiligen Bildschirm und Sichtbereich an.

Inhalte ordnen sich neu an oder fallen weg und fügen sich so in die neuen Platzverhältnisse ein.

DENN:

Unterwegs in der Bahn hat niemand Lust, sich auf dem Smartphone durch die gleiche Menge Text, Buttons und Menüs zu tippen, wie an einem normalen Rechner. Da muss es schnell und intuitiv gehen.

Unsere Websites sind intelligent. Sie erkennen das Gerät, die Bildschirmgröße und die Auflösung. Sie zeigen immer das an, was gerade gefragt ist und Sinn macht.

DAS NENNT MAN
RESPONSIVE WEBDESIGN.
TOLL, ODER?

7

Na, neugierig?

Dann nichts wie los und
uns auf die probe stellen.