Responsive Design: Wandelbare Websites

Der Mensch von heute ist viel unterwegs. Auf seinen Wegen entdeckt er hier und da interessante Informationen, zu denen er gern mehr wissen möchte – zum Beispiel zu Ihrer Marke, dessen Logo er während der Bahnfahrt auf einem Plakat entdeckt hat. Was macht der Mensch? Er zückt sein Smartphone oder Tablet und macht sich auf die Suche.
Eine Webseite in responsivem Design ist jetzt Gold wert, denn stößt der mobile Internetnutzer jetzt auf Bild- und Codesalat, wird er nicht mehr zurückkehren. So viele mobile Endgeräte es auch gibt, so problemlos ist die Adaption dank responsive Design.


Damit er den Browser nicht gleich wieder schließt, weil ihm eine chaotische Website entgegenspringt, ist in der Gestaltung von Internetseiten das responsive Design unabdingbar: Es gewährleistet Benutzerfreundlichkeit und gute Qualität für den mobilen Internetnutzer.

Eine Webseite wird dabei so konzipiert, und gestaltet, dass sie sich mit ihren Inhaltselementen der jeweiligen Displaygröße des mobilen Endgeräts anpasst. Inhalt und Grundgestaltung bleiben immer gleich und müssen nur einmal erstellt bzw. gepflegt werden. Lediglich die Anordnung der Inhalte und gegebenenfalls die Größe der Bilder verändern sich je nach Bildschirmbreite.

Bei der Websitegestaltung ist die Erstellung und Prüfung dreier Größen relevant: eine für den klassischen Desktop-PC und Tablet im Querformat, eine für Tablet hochkant und Smartphone quer sowie die kleinste Größe für die hochformatige Smartphone-Ansichtt. Der Inhalt wird jeweils so strukturiert, dass Schriften und Bilder gut erkennbar sind und alle angebotenen Funktionen sowohl mit Maus und Tastatur als auch via Touchscreen bequem genutzt werden können.

Responsive Webdesign ist nicht mit einer speziellen Optimierung für mobile Endgeräte gleichzusetzen, sondern umfasst die ganzheitliche Verbesserung der Nutzerfreundlichkeit und Darstellung für sämtliche Endgeräte und Displaygrößen. Der Vorteil des responsive Webdesigns liegt darin, dass nur ein Template nötig ist. Es gibt nicht eine zusätzliche mobile Seite, sondern der Inhalt der gleichen Instanz wird zur Erhöhung der Benutzerfreundlichkeit für verschiedene Auflösungen und Gerätegrößen umstrukturiert. Dadurch ist der Aufwand in der Programmierung wesentlich geringer als bei einer echten mobilen Seite. Außerdem lässt sich das responsive Design nicht nur für zwei Größen anwenden, sondern passt sich sämtlichen Zwischengrößen an. Der Nachteil liegt allerdings darin, dass die Ausgaben von der Datenmenge her nicht reduziert werden können und so die mobilen Geräte das gleiche Volumen laden müssen wie ein Computer. Für ältere Smartphones oder Gegenden mit schwacher Internetverbindung kann dies problematisch werden. Abgesehen davon bietet das responsive Design aber viele Vorteile und hilft Ihnen, sich Ihren Kunden auf beliebigen Endgeräten optisch hochwertig zu präsentieren.


Das Beste am Responsive Design: Sie pflegen sämtliche Inhalte nur 1 Mal - den Rest übernehmen
moderne Browser (wie sie auf Smartphones und Tablets vorhanden sind) automatisch.

Responsive Design: Desktops
Desktops
Responsive Design: Notebooks
Laptops
Responsive Design: Tablets
Tablets
Responsive Design: Smartphones
Smartphones

Wie funktioniert Responsive Design?

Moderne Internetseiten und Online-Shops passen sich heute Dank zur Verfügung stehender Frameworks (z.B. Bootstrap) automatisch an unterschiedliche Endgeräte wie Desktop-PCs, Notebooks, Tablets und Smartphones und deren Bildschirmauflösungen an, um dem Besucher das größtmögliche Maß an Usability zu bieten. Dank moderner CSS3-Media-Queries / Anweisungen ist es möglich, auf nahezu jede Bildschirmgröße Einfluss nehmen zu können - wobei wir als Werbeagentur beim Responsive Design die Verwendung von grundsätzlich 3 Darstellungsgrößen empfehlen. Für große Bildschirme, das Tablet im Hochformat sowie das Smartphone im Hochformat. Selbstverständlich ist die Anpassung auch für mehr Bildschirmgrößen möglich, bedeutet auch entsprechend mehr Zeitaufwand bei der Entwicklung und Umsetzung Ihrer Online-Projekte.

Sollten Sie mit dem Gedanken spielen, Ihre Unternehmensseite oder Online-Shop auf Responsive Design umstellen zu wollen, beraten wir Sie gern, denn grundlegend ist nicht jedes Layout für die Darstellung auf mobilen Endgeräten geeignet und erfordert eine saubere Struktur des HTML-Dokuments.

Die Basis einer responsive gestalteten Website ist ein flüssiges Raster. Die Breite der Seite ist durch Prozentwerte definiert und passt sich so in Relation zur Größe der Bildschirmgröße an. Zudem sind die einzelnen Text-Elemente, sowie die Bilder und Videos auf der Responsive-Site flexibel und werden je nach zur Verfügung stehendem Platz größer oder kleiner angezeigt. Im CSS werden außerdem die Breakpointes gesetzt, die bestimmte Auflösungen definieren, an denen das Seitenlayout sich verändert. So kann zum Beispiel eingestellt werden, dass eine seitlich angezeigte Werbung automatisch unter den Haupttext springt sobald die Viewport-Breite kleiner als 500 Pixel wird. Um das für jeden Bildschirm exakt passende Seitenlayout zuzuordnen, fragen sogenannte Media-Queries den Gerätetyp, sowie die spezifischen Eigenschaften eines Gerätes ab.

Zugegeben: Eine Seite im Responsive Webdesign zu entwickeln ist zeitaufwendig und aus diesem Grund auch 30 bis 40 % teurer, als eine herkömmliche Seite, aber Sie ersparen sich die Webentwicklung von Versionen, die für nur für mobile Endgeräte optimiert ist. Es ist derzeit die einzige Möglichkeit, eine Webseite für alle Besucher optimal nutzbar zu machen. Und der Mehraufwand für die Responsive-Site beschränkt sich auf die Entwicklungs- und Einführungsphase. Für die Content-Pflege und spätere Updates und Veränderungen der Webseite ist ein Responsive Webdesign von großem Vorteil. Statt zwei oder mehr Versionen für Desktop- und Mobile-Ansichten zu pflegen, gibt es beim Responsive Webdesign nur eine URL und eine Seite, die bearbeitet werden muss. Das kann eine große Zeitersparnis bedeuten und sorgt für Einheitlichkeit und damit für den Wiedererkennungswert Ihrer Seite auf jedem Anzeigegerät.


Responsive-Design: Eine URL
Eine URL
Responsive-Design: Ein Inhalt
Ein Seiten-Inhalt
Responsive-Design: HTML5
Ein Seiten-Quellcode
Responsive-Design: CSS3
CSS3 Media Queries
Responsive-Design: Diverse Endgeräte
Ausgabe für verschiedene Geräte

Google bewertet unflexible Layouts negativ

Dass die mobile Suche und "mobile-friendly Sites" (Websites welche auf mobilen Endgräten gut les- und bedienbar sind) für Google immer wichtiger werden, zeichnet sich schon seit einigen Jahren ab. So forderte Matt Cutts, der Leiter der Antispam-Abteilung im Hause Google, wiederholt Seiteninhaber, SEO-Experten und Webmaster bei Konferenzen, Fragerunden und online auf, sich um die Mobiltauglichkeit Ihrer Website zu kümmern und kündigte an, dass "mobile-friendly" über kurz oder lang ein Rankingfaktor für Websites werden würde.

Bereits seit Anfang des Jahres belässt es Google nicht mehr bei einer freundlichen Auszeichnung für mobiltaugliche Websites, sondern ergänzt das Zuckerbrot um die Peitsche. Seitenbetreiber erhalten in den Google Webmaster Tools einen Warnhinweis, wenn ihre Website nicht für mobile Geräte optimiert ist. Gleichzeitig wertet ein neuer mobiler Algorithmus offenbar nicht-konforme Websites ab. Zahlreiche Seiteninhaber verzeichneten einen Absturz der Rankings betroffener Seiten in den mobilen Suchergebnissen. Der Sichtbarkeitsverlust beschränkt sich derzeit auf die mobile Suche – Suchergebnisse auf Desktop-Rechnern sind davon nicht betroffen.

Der Hinweis in den Google Webmaster Tools beinhaltet die Nachricht, dass auf allen analysierten Seiten kritische Fehler im Hinblick auf die mobile Usability gefunden worden. Google warnt vor den Konsequenzen für das mobile Ranking und fordert dazu auf, die Mankos zu beseitigen.

Ende Februar hat Google schließlich bekanntgegeben, dass am 21. April 2015 der Such-Algorithmus der mobilen Suche entsprechend verändert wird.

Seit diesem Zeitpunkt wird eine Optimierung für Mobilgeräte im Ranking berücksichtigt.


Ihre Vorteile von Responsive Design auf einen Blick

Sparen Sie Geld
Sparen Sie Geld
Sparen Sie Zeit
Sparen Sie Zeit
Verbessern Sie Ihr Suchmaschinen-Ranking
Verbessern Sie Ihr Suchmaschinen-Ranking
Optimierung der Website-Ladezeiten
Optimierung der Website-Ladezeiten