Ihre Website schnell und sicher mit cPanel Hosting!

 

Responsive Webseite — Inhalte flexibel für mobile Ansichten erstellen

Home > Website Builder > Responsive Webseite — Inhalte flexibel für mobile Ansichten erstellen
 

Vielleicht erinnern Sie sich noch daran, dass kaum eine Webseite mobil dargestellt wurde. Es gab zwar vereinzelte WAP-Seiten, aber das war noch lange kein Standard. Mittlerweile gehört eine mobile Ansicht zum Standard und durch ein Responsive Webdesign wird das auch einfach möglich gemacht. Das Ziel ist es, dass jede mobile Ansicht genauso gut ist wie die Ansicht auf einem PC-Bildschirm.

Wer mit seinem Internetauftritt erfolgreich sein möchte, sollte sorge dafür tragen, dass Texte, Bilder und Videos korrekt dargestellt werden und nicht über den Bildschirmrand hinausragen. Sie erhöhen damit den Traffic auf Ihre Webseite, denn heutzutage ist das Smartphone ein beliebtes Mittel um ins Internet zu gehen. Bei einem Online-Shop profitieren Sie von einer erhöhten Conversion-Rate. Auf Website.de erhalten Sie im Website Builder eine Auswahl an knapp 200 Designvorlagen, welche auf Responsive Webdesign angepasst sind.

  • Optimale Darstellung auf jedem Endgerät
  • Auswahl aus über 200 kostenlosen Templates
  • Kürzere Ladezeiten auf dem Handy und Tablets
  • Individuelle Anpassung möglich
  • Positives Ranking-Faktor bei Google & Co5

 

Was ist eine Responsive Webseite?

Responsive Webdesign bedeutet, dass Bilder, Texte und Videos für die Anzeige auf unterschiedlichen Bildschirmgrößen und Bildschirmauflösungen ausgerichtet sind. Wichtig ist dabei, dass die Schrift gut lesbar ist und alle Inhalte korrekt dargestellt werden. Eine gleichbleibende und benutzerfreundliche Oberfläche wird dafür in jedem Fall geschaffen —, ob nun von einem Computer, Smartphone oder einem Tablet. Wir reden hier auch von einem Kostenvorteil, denn anstatt zwei oder mehrere Webseiten oder Darstellungen müssen Sie nur noch eine Version anpassen beziehungsweise pflegen.

Responsive Webseite mit unserem Website Builder

Privatpersonen und Unternehmen haben bei unserem Website Builder die Möglichkeit eine eigene Website zu erstellen. Dabei stehen zu Beginn knapp 200 Designvorlagen zur Verfügung, die bereits automatisch auf jedem Gerät ideal angezeigt werden. Im Webbaukasten-System ist auch jederzeit eine Vorschau auf den unterschiedlichen Gerätetypen möglich.

Das Prinzip des Homepage Baukasten ist sehr benutzerfreundlich und intuitiv. Sie können damit in wenigen Augenblicken eine eigene Homepage erstellen. Dafür stehen eine Vielzahl an attraktiven Webdesigns zur Verfügung, welche allesamt nochmals in Kategorien unterteilt sind. So findet wirklich jeder ein passendes Design zum eigenen Vorhaben. Bilder lassen sich durch Verschieben an die richtige Stelle platzieren und erfordern keine Kenntnisse in HTML oder CSS.

Responsive Webdesigns bei Website.de

Durch die Möglichkeiten des Responsive Webdesign sind Designs intelligenter und flexibler denn je. Es lassen sich Bilder frei skalieren und auch die Schriftgröße jeweils ändern. Im Prinzip bedeutet das: variabel in der Breit und Höhe. Je nach Größte des Bildschirm können Bilder auch im Hoch- oder Querformat angezeigt werden oder direkt ausgeblendet werden durch eine entsprechende Priorisierung. Dieser Schritt wird häufig im E-Commerce getan, weil die Benutzerfreundlichkeit sonst unter den großen Bildern leiden würde. Der Webdesigner spricht hier von einem „Fluid“ oder „elastic“ Layout. Bei einem „Fixed“ Layout handelt es sich um die Darstellung auf PC-Bildschirmen.

Die Funktionsweise

Die Responsive Webseite reagiert automatisch auf die jeweilige Displaygröße und passt sich den Sichtverhältnissen an. Das Design wird dem Nutzer so anschließend benutzerfreundlich präsentiert, anstatt dass dieser umständlich erstmal in die Menüführung zoomen muss. Verantwortlich für diese Technik sind die „Media Queries“ bei HTML5 und CSS3. Innerhalb der technischen Umsetzung hat das den Vorteil, dass keine User-Agent-Weiterleitung eingerichtet werden muss. Die Webseite ist bei einem Responsive Webdesign immer unter derselben URL erreichbar. Kurzum: Damit lässt sich jede bestehende Webseite mobil machen.

Früher war das anders. Noch bis 2015 waren überwiegend mobile Versionen im Trend, die in der URL noch einen Zusatz wie „mobil“ oder „m“ hatten. Zudem erkannte jeder Nutzer dies anhand eines anders aussehenden Designs. Die Menüführung war plötzlich ganz woanders und jeder musste sich erstmal zurechtfinden.

Support

Immer hier, um Ihnen bei Fragen zum VPS-Hosting zu helfen.

Erhalten Sie Tag und Nacht schnellen Webhosting-Support von unseren erfahrenen und freundlichen Support-Mitarbeitern, unabhängig davon, wie komplex Ihr Anfrage ist.

Stellen Sie Website.de® Ihre Frage.

 

Mobile Version statt Responsive Webseite

Einige Anbieter haben auch die Möglichkeit, dass anstatt einem Responsive Webdesign nur eine mobile Version ausgespielt wird. Im Grunde handelt es sich weiterhin um ein benutzerfreundliches Vorgehen, allerdings handelt es sich dabei eher um einen Kompromiss. 

Die Webseite wird dabei nicht im vollen Umfang dargestellt, sondern nur die wichtigsten Informationen, sodass ein Nutzer unterwegs schnell zugreifen kann. Der mobile Nutzer ruft dabei die gewöhnliche URL ab, allerdings geschieht eine User-Agent-Weiterleitung. Das System erkennt den Gerätetyp und dadurch wird Ihnen automatisch die richtige Darstellung angezeigt.

Der Nachteil ist, dass Widgets in der Regel nicht angezeigt werden. So müssen Sie Ihren Content entsprechend besser ausrichten, damit Informationen wie Öffnungszeiten oder ein Schnellanfrage-Formular erhalten bleiben. Es gibt bei mobile Versionen auch die Möglichkeit eine eigene Startseite einzurichten und mit einem Button wie „Jetzt anrufen“ zu versehen.

 

App statt mobile Webseite

Eine weitere Möglichkeit ist wiederum die Erstellung einer eigenen App. Es gibt mittlerweile einige Dienste, die sich genau hierauf spezialisiert haben. Bei einem WordPress-Blog ist genau jener Service einfacher, weil die meisten Webseiten auf Basis von WordPress laufen. Diese sind aber demnach auch sehr unflexibel. Am besten ist es, wenn Sie in jedem Falle einen speziellen Dienstleister beauftragen.

Eine App für iOS und Android hat den Vorteil, dass Sie Ihre Kunden über eine Push-Benachrichtigung erreichen können. Das ist zum Beispiel sinnvoll, wenn ein Event ansteht oder ein neuer Beitrag veröffentlicht wurde.

 

Responsive Webseite, mobile Version oder doch eine App?

Eine App steht sowohl mit Responsive Webdesign als auch mit einer mobilen Version nicht in Konkurrenz, sondern ist lediglich eine Ergänzung. In allen drei Lösungen steht die Optimierung der Webseite für mobile Nutzer im Fokus und beides hat seine Vor- und Nachteile.

Eine Responsive Webseite ist ideal für Firmen, denn die Umsetzung hinsichtlich Corporate Identity gelingt hier ideal und steht im Vordergrund. Eine mobile Version ist deutlich benutzerfreundlicher, da nur die ausgewählten Inhalte ausgespielt werden. Das verhindert aber auch, dass Nutzer den gesamten Umfang betrachten können. Außerdem ist das wiederum eine zweite Baustelle die regelmäßig gewartet werden muss.

Schon oft haben Sie sicherlich selbst erlebt, dass eine Homepage nicht gerade aktuell aussieht. Meistens ist es dann auch so, dass die Desktop-Version einen Relaunch erlebt hat, während die Ansicht für mobile Nutzer gänzlich vergessen wurde.

 

Mobile Ansichten als Ranking-Faktor

Die Mobile Benutzerfreundlichkeit wurde im Jahr 2015 als wichtiger SEO Rankingfaktor. Das ist eine interessante Entwicklung, denn noch im Jahr 2011 war der Anteil an Mobile Besuchern kaum von Bedeutung. Mittlerweile sind Mobile Nutzer in der Überzahl. 

So kam es auch, dass für Google die mobile Suche umso wichtiger wurde. Ende 2014 kam das Label „Für Mobilgeräte“ hinzu, welches in den Suchergebnissen unter der jeweiligen URL angezeigt wurde. In den Webmaster Tools gab es daraufhin weitere Indizien, die darauf hindeuteten, dass Google vermehrt Funktionen hierfür anbieten wird.

Zugleich wurden von Google auch neue Regeln aufgestellt. Es dürfen nach wie vor keine Flash-Inhalte dargestellt werden, denn die kann und möchte auch der Google-Bot nicht einlesen. Auf ein simples Design wird ebenfalls Wert gelegt, damit der User nicht ständig scrollen muss. Eine klare Struktur ist wichtig, damit sich jeder schnell zurechtfinden kann — im besten Falle auch ohne Zoomen.

Die Ladezeiten sind auch in der Desktop-Version eine sehr wichtige Angelegenheit. Sollte die Ladezeit nicht gering sein, dann könnte es passieren, dass der Nutzer direkt wieder abspringt. Die Toleranz liegt bei fünf Sekunden. Die Ladezeit kann beschränkt werden durch ein Cache-System, wenigen Bildern und Videos und wenig extern geladenen Funktionen.

Bei mobilen Landingpages ist es auch zu Ihrem Vorteil, dass eine Kontaktmöglichkeit auch direkt abgerufen werden kann. Es kann sich auch einfach nur um eine wählbare Telefonnummer handeln oder um ein Kontaktformular. 

 

Google AMP

Google hat kürzlich mit AMP eine weitere Möglichkeit geliefert, um die Ladezeiten zu minimieren. Für diese neue Funktion gibt es schon zahlreiche Plugins für WordPress, Magento oder Typo3. Sofern die Webseite als AMP-Seite erkannt wird, wird diese Homepage direkt auf einem Proxyserver im Content Delivery Network (CDN) gesichert.

Der Vorteil: Weltweit können darüber alle Seiten blitzschnell erreichbar gemacht werden. Bei einer Suchanfrage werden diese Seiten erneut gekennzeichnet, und zwar mit dem Schriftzug „AMP“ und einem „Blitz“-Icon. 

In Ländern oder Gebieten mit einer schwachen Breitbandverbindung (E oder 2G) ist ein Service wie AMP ein Segen. Internetseiten lassen sich in der Regel in unter einer Sekunde abrufen. Die optimierte Ladegeschwindigkeit und die damit verbundene geringe Absprungrate verbessern so die SEO-Metriken. Nachrichtenseiten profitieren bei AMP zusätzlich vom „Top Story Karussell“, welche zusätzlichen Traffic auf die Webseite bringen können. Fähig um hier zu landen sind aber nur Websites mit einer erfolgreichen Google News-Eintragung.

Für den User ergibt es den Vorteil, dass weniger Datenvolumen benötigt wird. Das ergibt sich aus dem sehr schlanken HTML-Grundgerüst und auf den Verzicht von einer direkten Einbindung von JavaScript. Die Werbung ist ebenfalls kein Störfaktor mehr, da insbesondere auf nutzerfreundliche Werbeformate aus Google AdSense wertgelegt wird.

Fazit

Eine mobile Homepage ist zu jedem Zweck erforderlich und sollte nicht vernachlässigt werden. Insbesondere weil „Smartphone tauglich“ ein Ranking-Faktor darstellt. Für welche Art Sie sich entscheiden, liegt ganz bei Ihnen. Die einfachste Möglichkeit ist die Benutzung unseres Website Builders in Verbindung mit den vorgefertigten Texten oder ein Web Hosting mit WordPress bei uns mit entsprechenden Plugins.