Responsive Webdesign einfach erklärt

1: Responsives Webdesign einfach erklärt

Heutzutage greifen immer mehr Nutzer mit ganz unterschiedlichen Geräten auf Webseiten zu: unterschiedliche Smartphones, Tabletts, Laptops, PCs. Die Zeit des Stand-PC ist längst vorbei.

Die große Herausforderung für Webdesigner: Jeder Nutzer will das bestmögliche Erlebnis!

• Kleine Bildschirme oder große Bildschirme
• Touchscreens oder Maus
• vertikale Ausrichtung oder horizontale Haltung

Alles muss bedacht sein! Denn ein Webseiten Besucher ist schneller wieder weg als man denkt, wenn er erst mühselig scrollen, zoomen und suchen muss, sich durch unzählige Menüs klickt oder den Button gar nicht trifft, weil der Daumen einfach zu groß ist, um darauf zu drücken.

Responsives Webdesign reagiert auf das Endgerät und passt das Webseiten Layout automatisch an!

Willst auch du deine Seite für alle Endgeräte fit machen und hast noch keine Ahnung wie man die Schnittstellen dafür schafft?
Kein Problem! Ich erkläre dir in diesem Artikel erst einmal die Grundlagen für ein allgemeines Verständnis des Begriffs.

Im letzten Kapitel führe ich dich in Kürze ein, wie Responsives Design im Konkreten funktioniert.

Demnächst schreibe ich eine ausführlichere Anleitung mit den ersten Schritten für Responsives Design und wichtige Tipps in einem weiteren Artikel.

Wenn du schon fortgeschritten bist oder dich gar nicht erst mit mühseligen Programmierungen beschäftigen möchtest, kannst du dich hier kostenlos bei mir melden: Ich schaue mir gern dein Projekt an und kann dir die passenden Tipps geben.

Ich habe schon hunderte Responsive Webseiten gebaut und möchte mein Wissen mit dir teilen.

2: Die Vorteile von Responsiver Optimierung

Will man seine Webseite für Mobilgeräte und Desktops anbieten, gibt es im Grunde zwei Möglichkeiten:
Entweder man entwickelt zwei getrennte Versionen. Eine für Smartphones und eine für den Desktop. Oder aber man baut an einer einzigen Weblösung, die sauber für jedes Endgerät skaliert.

Zwei getrennte Webseiten haben ganz klare Nachteile:

1. Es entsteht ein erhöhter Pflegeaufwand für Content und Bildmaterial. Denn diese muss für jede Version durchgeführt werden.
2. Möglicherweise muss die Webseite bei zukünftigen Smartphones überarbeitet werden, sodass man eine dritte, vielleicht auch eine vierte Layoutvariante benötigt.

Responsives Design, dass dem Endgerät entsprechend skaliert, kostet erst einmal mehr Zeit, das heißt Geld und benötigt eine gut geplante Umsetzung.

Wenn du jedoch von Anfang an deine Webseite responsiv aufbaust, sparst du dir letztlich viel Mühe bei der Umstellung einer bereits fertigen Desktopvariante auf Responsive Designs. Am Ende lohnt sich die Mühe aber:

1. Alle Endgeräte benutzen den gleichen Quellcode und dasselbe Design. Das bedeutet viel weniger Arbeit bei der Wartung und Pflege der Seite.
2. Das Design wird nicht in mehrere Versionen getrennt. Das vermeidet Fehler, da kleine Anpassungen gleichzeitig auf allen Varianten durchgeführt werden.
3. Deine Webseite profitiert an Qualität und Persistenz
4. Auch sind Zwischenschritte mit geringen Auswirkungen denkbar, ohne die gesamte Seit neuaufzusetzen.

Vom 3 Zoll Smartphone bis zu Monitoren mit 27 Zoll und mehr erlebt jeder Nutzer eine gleichwertige Erfahrung. Es kommt kein Gefühl auf, nur eine Zwischenlösung präsentiert zu bekommen.

Eine gleichwertige Erfahrung für alle Geräte ohne Responsives Design ist nur unter großen Kosten und Zeitaufwand möglich.
Zudem müsste in jedem Fall das Endgerät erkannt werden, was nicht zuverlässig möglich ist.

Stattdessen nutzt Responsive Design die Größe des Browserfensters, um das Layout anzupassen. Teste einmal selbst auf einigen Seiten, wie sich die Seite verhält, wenn du dein Browserfenster vergrößerst oder verkleinerst.

3: Die wichtigsten Unterschiede von Smartphones und Desktopcomputer

Der Unterschied, welcher wohl am offensichtlichsten ist, ist die Displaygröße. Wird eine Seite nicht angepasst, muss der Nutzer der Seite wahrscheinlich zoomen, um den Text lesen zu können. Vielleicht kennst du noch das Gefühl, auf einer Seite einen Button anklicken zu müssen, der zu klein für den Finger ist.

Andere Unterschiede sind:

• Das horizontale und vertikale Format
• Die Touchscreen Funktion
• Die Pixeldichte
• Die Breitbandrate
• Der Zugriff auf spezielle Apps

4: Ein Beispiel von guten Webdesign gegenüber schlechtem Design

Wahrscheinlich wird dir das folgende Beispiel bekannt vorkommen. Denn fast jeder hat einmal eine ähnliche Situation erlebt.
Stell dir eine Webseite vor, es ist eigentlich egal welche. Du bist unterwegs und möchtest die Telefonnummer herausfinden. Vielleicht ein Handwerker, ein Hotel oder was auch immer.

Nachdem die Seite ewig geladen hat und endlich die Seitenelemente auftauchen, versuchst du dutzende Male die Navigationsleiste durch zu Zoomen, zu vergrößern und nach zwanzig Klicks auf ‚Kontakt‘ findest du heraus, dass dort nur ein Kontaktformular hinterlegt ist.

Dasselbe Spiel beginnt mit dem Impressum und dort findest du eine Telefonnummer, die nicht anklickbar ist. Also musst du Browser-App und Telefon-App ständig wechseln, um die Telefonnummer abzutippen. Sowas kann mitunter bei einer schlechten Datenrate bis zu 10 Minuten dauern.

Im Gegensatz dazu zeigt eine Responsive Seite viel schneller die Inhalte an. Gleich auf der Startseite findest du nach kurzem Scrollen eine anklickbare Telefonnummer und in weniger als einer halben Minute ist der Anruf getätigt.

Das ist ein ganz realistisches Beispiel wie es mir selbst passiert ist als ich die Rezeption eines Hotels erreichen wollte und vor Wut mein Telefon hätte aus dem Auto werfen können.

Als Webseiten-Betreiber sollte es dir bewusst sein, wie viele spontane Ideen potentiellen Kunden unterwegs einfallen, die bis nach Hause längst wieder vergessen sind. Wenn die Webseite zu lange lädt, ist der Nutzer längst abgesprungen und hat seine Idee eventuell schon wieder verworfen.

5: Überblick über verschiedene Geräte

Von Groß nach Klein gestaffelt muss deine Webseite auf die folgenden Geräte vorbereitet sein:

• Fernsehgeräte – SmartTVs aber auch Videospielkonsolen mit Displays von 30 bis 70 Zoll
• Desktop PCs mit Bildschirmen von 17 bis 27 Zoll
• Laptops, Notebooks von kleinen 10 Zoll Geräten bis 17 Zoll
• Tablet Geräte, die meist 7 Zoll bis 12 Zoll haben und Hoch- bzw. Querformat haben
• Smartphones und ähnliche Geräte wie IPods mit Displays unter 5 Zoll, die ebenfalls im Hoch- sowie Querformat gehalten werden können.

Responsive Webdesign bedeutet Arbeit im Detail

Bisher ist klar geworden – Wir Webdesigner müssen heutzutage auf unzählige Eventualitäten vorbereitet sein.
Daraus folgt prinzipiell, dass unsere Designs flexibel und agil sein müssen. Fertige Design-Masters gibt es heute nicht mehr. Stattdessen müssen die Entwicklung und Planung einer Webseite ganz flexibel ablaufen.

Jedes Detail muss aussehen als wäre es genau für diese eine Auflösung entwickelt worden. Es bedarf genauer Einschätzungen, welche Elemente das Design stören oder nicht mehr funktionieren.

Regelmäßige Überprüfungen und Tests der Seite sind unerlässlich. Eine gute Absprache zwischen Entwicklern und Designern ist entscheidend und die richtigen Responsive Design Tools mit entsprechendem Verständnis sind unverzichtbar.

6: Responsive oder Adaptive? Gibt es einen Unterschied?

Manche Designer sprechen hin und wieder auch von Adaptive Design. Lass dich nicht verwirren. In vielen Fällen ist tatsächlich das Gleiche mit beiden Begriffen gemeint.

Neben Responsive Design versteht man allerdings unter Adaptive Design manchmal auch Progressive Enhancement, RESS oder auch Device Detection.

Sollte tatsächlich letzteres gemeint sein, bedeutet Adaptive Design stattdessen das oben beschriebene Gegenteil von Responsivem Design, nämlich die Existenz mehrerer Versionen der Webseite.

Durch Device Detection, also Geräteerkennung wird dem jeweiligen Gerät eine spezielle Version der Webseite zugeordnet.

7: Responsive Webdesign ist wichtig für Suchmaschinenoptimierung

Jeder Webdesigner weiß, Google rankt Webseiten bei der Google-Suche nach einem geheimen Algorithmus. Die Frage ist berechtigt: Inwieweit hat das Responsive Design Einfluss auf das Webseiten-Ranking?

Auch wenn im Einzelnen nicht bekannt ist, wie Google Seiten bemisst, ist allem voran eine Regel klar und deutlich: Auch Google will dem Nutzer den bestmöglichen Content und größtmöglichen Komfort bieten.

Ein Faktor der Berechnung ist dabei die Absprungrate von Nutzern. Klickt ein Benutzer die Seite an und danach sofort wieder zurück, wird dies als negatives Ergebnis bewertet. Entsprechend fällt das Ranking.

Weiter oben hatte ich bereits erklärt, dass ein Verzicht auf Responsives Design dazu führt, dass Ladezeiten größer werden, die Anklickbarkeit der Elemente schlechter wird und vieles mehr. All dies führt zu mehr Abspringern.

Ein weiterer Aspekt: Google analysiert ebenfalls, ob eine Webseite eine mobile Variante besitzt und bewertet das positiv. Mit responsivem Design hast du zwar keine mobile Version deiner Webseite, weil du ja nur eine einzige Variante für alle Geräte hast, aber auch das trackt Google positiv. Durch responsives Design entsteht also demnach kein Nachteil.

Auch interne Links lassen sich aus SEO-Sicht besser nutzen. Jeder Link auf einer Responsiven Seite linkt gleichzeitig auf alle Versionen deiner Webseite, was das Ranking aller Versionen gleichzeitig erhöht.

8: Responsive Webdesign – Wie funktioniert es nun eigentlich?

Sicherlich weißt du, dass Webseiten zumeist auf HTML5 und CSS3 basieren.

Anstatt nun mehrere Versionen mit verschiedenem Aufbau für jedes Gerät anzulegen, verfährt man bei responsivem Design anders:
Der gleiche Inhalt und Aufbau wird verwendet: Das heißt dein Content und die HTML5 Struktur sind für jede Variante der Darstellung identisch.

Das einzige, was sich für die Geräte unterscheidet ist die Darstellung mit verschiedenen Formatierungsbefehlen durch CSS3.
Mit CSS3 Media Queries legt man Formatierungsbefehle fest. Media Queries fragen ab, welches Gerät auf die Seite zugreift und verweisen dann auf die passende Darstellungsform für eine bestimmte Bildschirmgröße.

Man kann nun beispielsweiße drei unterschiedliche Layouts konfigurieren. Eine Konfiguration für Smartphones, also kleine Bildschirme, für mittlere Geräte wie Tablets, Notebooks und Laptops und eine Breite für große Geräte wie Desktop PCs und Fernsehgeräte.

Natürlich haben nicht alle Smartphones und Monitore eine einheitliche Größe. Die gewählten Layout-Breiten sollten daher flexibel sein und als Richtwerte dienen.

Eventuell hat deine Webseite drei Spalten. Für Desktop und Tablets mag sich eine Anzeige nebeneinander empfehlen. Für Smartphones wäre die Darstellung aber vielleicht zu eng. Dann sollten die Formatierungsbefehle für Smartphones die Spalten untereinander anzeigen.

In diese Formatierungsbefehle nimmst du weitere Darstellungsformen auf. Beispielsweise beinhaltet dein Aufbau eine Box mit einer Telefonnummer. Für Desktopgeräte und Laptops wird die Formatierung gewählt, die Box auszublenden, sodass diese nur auf Smartphones angezeigt wird.

Ich hoffe, ich finde bald die Zeit, dir einen Artikel über verschiedene einfache Formatierungsbefehle zu bieten mit Tipps und Lösungen für diverse responsive Designs.

Agentur für Responsive Webdesign

Wir sind eine Fullservice WordPress Agentur und bieten dir gerne ein professionelles Responsive Webdesign

Falls du eine spezielle Frage hast, nimm gerne Kontakt zu mir auf.