Responsive Website – Inhalte flexibler darstellen

  • Website-Optimierung für mobile Geräte
  • Mobile Darstellung und Bearbeitung inklusive

Mobile Website erstellen und optimieren

Geräte mit mobilem Internet-Zugang stellen das Design jeder Website auf die Probe. Können Texte, Bilder oder Videos auf dem Smartphone oder Tablet genauso gut dargestellt werden wie auf dem PC-Monitor? Zum einen besteht die Möglichkeit, mit dem STRATO Homepage-Baukasten mobile Websites zu erstellen. Zum anderen ermöglicht das sogenannte Responsive Webdesign die automatische Anpassung an die Bildschirmgröße und die Auflösung eines mobilen Endgeräts. Wer mit seinem Internetauftritt auch im mobilen Netz erfolgreich sein möchte, sollte diesen deshalb für Mobilgeräte optimieren.

Mit STRATO passen Sie Ihre Webseiten an die Ansprüche mobiler Nutzer an, erhöhen so den Traffic auf Ihrer Homepage und akquirieren einen größeren Leser- oder Kundenkreis. Insbesondere E-Shops erzielen eine deutlich bessere Customer Journey und höhere Conversion-Rates, wenn sie das mobile Publikum mit einbeziehen. Bei STRATO stehen Ihnen dazu gleich zwei Varianten zur Verfügung: Responsive-Design-Layouts und mobile Webseiten.

  • Optimale Darstellung Ihrer Homepage auf Tablet, Smartphone und Co.
  • Mobile Webseiten mit STRATO per Mausklick erstellen
  • Große Auswahl an Responsive-Design-Templates
  • Kürzere Ladezeiten auf mobilen Endgeräten
  • Individuelle Anpassung Ihrer mobilen Startseite

Was ist eine Responsive Website?

Eine Responsive Website kommt im Responsive Design daher. Und das bedeutet nicht nur, Bilder und Texte für die Anzeige auf verschieden großen Bildschirmen bzw. Displays zu optimieren, sondern die gesamte Gestaltung möglichst „flüssig“ und gut nutzbar umzusetzen. Im Idealfall reagiert (engl.: „to respond“) die Website also auf das konkrete Endgerät des Nutzers, passt sich an dieses an. Das Ziel ist eine gleichbleibend benutzerfreundliche Oberfläche, egal ob man per Desktop-Computer, Tablet oder Smartphone darauf zugreift. Dies ist auch ein Kostenvorteil: Statt mehrerer Auftritte, jeweils für PC und Mobile-Gerät, brauchen Sie nur noch eine Website zu pflegen.


Responsive Websites mit dem STRATO Homepage-Baukasten

Damit Einsteiger und kleine Unternehmen beim Responsive Design ihrer Website alles richtig machen, erstellen sie diese am besten mit dem STRATO Homepage-Baukasten. Sehr viele der frei verfügbaren Designs sind gleich von vornherein „responsiv“ ausgelegt.

Wenn Sie eine Website über STRATO kaufen und den Homepage-Baukasten zur Gestaltung nutzen, profitieren Sie von seinem benutzerfreundlichen System: Das Prinzip des Homepage-Baukastens ermöglicht Ihnen, Ihre Website ganz einfach und ohne Programmierkenntnisse zu erstellen. Dafür steht Ihnen eine Vielzahl attraktiver Website-Templates zur Verfügung, die an die Bedürfnisse verschiedener Branchen angepasst sind. Mit der Web-Design-Software von STRATO installieren und individualisieren Sie die Templates. Eigene Bilder und Texte sowie Multimedia-Inhalte lassen sich ganz nach Ihren Vorstellungen gestalten und einbinden. Auch höheren Ansprüchen an das Homepage-Design werden Sie mit dem Expertenmodus gerecht, bei dem sich einzelne Schriftarten und Schriftfarben flexibler individualisieren lassen. Der große Vorteil der STRATO Design-Templates: Viele der Vorlagen sind durch ein responsives Design automatisch für die mobile Internetnutzung optimiert. Aber auch bei allen anderen Layouts können Sie eine separate Mobile-Version Ihrer Homepage erstellen.


Responsive Layouts bei STRATO

Um das ganze Potenzial einer Responsive Website nutzen zu können, müssen zuvor Inhalte und Layout voneinander getrennt werden. Im Resultat bedeutet dies ein Mehr an Flexibilität: Schriftgröße und Bilder werden dann frei skalierbar, das heißt: variabel in Höhe und Breite. Auch das Bildformat ist freier: Je nach Mobil-Gerät können Fotos und Grafiken im Hoch- oder Querformat dargestellt werden. Ebenfalls möglich: die Priorisierung von Inhalten. Ist der Bildschirm zu klein für alle Inhalte, z. B. für die Produktpalette in Ihrem E-Commerce-Shop, oder würde die Benutzerfreundlichkeit unter einem zu kleinen Display leiden, lassen sich auch bestimmte Inhalte ausblenden. Im Fachjargon spricht man bei Responsive Websites von einem „fluid“ oder „elastic“ Layout, im Gegensatz zum „fixed“ Layout von normalen Websites für die Anzeige auf Computerbildschirmen.


Responsive Design

So funktionieren Responsive Templates

Responsive-Website-Layouts reagieren automatisch auf unterschiedliche Displaygrößen und passen sich entsprechend dem Bildschirmformat und verfügbarem Darstellungsplatz im Browser an. Die ursprüngliche Desktop-Website wird mobilen Internetnutzern dann browserfreundlich und in der für das jeweilige Display optimalen Bildschirmauflösung angezeigt, wofür sogenannte „Media Queries“ bei HTML5 und CSS3 verantwortlich sind. Das sind gewissermaßen Abfragen mit dem Zwecke der Bestimmung, um welches Gerät mit welcher Bildschirmgröße es sich handelt. In der technischen Umsetzung bietet das den Vorteil, dass für so erstellte mobile Webseiten keine User-Agent-Weiterleitungen eingerichtet werden müssen. Die Webseite ist im mobilen Netz und auf dem Desktop über dieselbe URL erreichbar. Da es sich um eine angepasste Ansicht der Desktop-Webseite handelt, wird der Content einheitlich visualisiert.


Mobile Webseiten von STRATO

Responsive Design für die eigene STRATO-Website

Layouts mit Responsive Design kennzeichnet STRATO in der Template-Beschreibung. Wenn Sie Ihre Website für das Smartphone- oder Tablet-Format optimieren möchten, klicken Sie auf die Responsive-Layout-Vorlagen. Schon passt sich die Desktop-Ansicht Ihrer Homepage an die Displaygröße des entsprechenden Geräts an.


Mobile-Website-Design: Die mobile Version Ihrer Homepage

Die andere Hälfte der Layout-Vorlagen im STRATO Homepage-Baukasten zeichnet sich zwar nicht durch das innovative Responsive Design aus. Alternativ lässt sich jedoch auch bei diesen Templates für jede Unterseite Ihrer Homepage eine mobile Webseiten-Version erstellen, die ebenfalls für den Zugriff mittels Mobilgeräten optimiert ist.


Mobile Website programmieren

Mobile Webseiten per Mausklick

Im Gegensatz zum Responsive Design handelt es sich beim sogenannten „Mobile-Website-Design“ nicht einfach nur um eine mobile Ansicht Ihrer Homepage, die mit der Desktop-Website identisch ist. Stattdessen wird über den STRATO Homepage-Baukasten parallel zur regulären Desktop-Website eine mobile Version für die Nutzung mit Smartphones und Tablets erzeugt.


Mobile Websit erstellen

So erstellen Sie mobile Versionen Ihrer Webseiten

Um eine mobile Webseite zu erstellen, setzen Sie in den allgemeinen Einstellungen Ihres STRATO Homepage-Baukastens ein Häkchen bei „Meine Webseite soll zusätzlich in einer für Smartphones optimierten mobilen Version erstellt werden“. Eigener Programmieraufwand muss nicht betrieben werden. Stattdessen wählen Sie bequem im Menü, welche Seiten im Einzelnen auf mobilen Geräten in einer optimierten Version angezeigt werden sollen.


Mobile Website erstellen

Was enthält die Mobile-Website?

Die mobile Version einer Internetseite enthält eine komprimierte Darstellung von deren Inhalten, die für mobile Nutzer nach speziellen Schwerpunkten aufbereitet werden. Den Besuchern der Mobile-Website wird nicht der volle Umfang der Desktop-Website zur Verfügung gestellt, sondern nur die Inhalte, die idealerweise die Informationen beinhalten, auf die Nutzer von Mobilgeräten unterwegs schnell zuzugreifen wünschen.


Responsive Design

Wie greifen Nutzer auf mobile Websites zu?

Eine Mobile-Website läuft unter einer eigenen URL. Sollte die Desktop-Website über Smartphone oder Tablet aufgerufen werden, gelangen mobile Nutzer per User-Agent-Weiterleitung automatisch auf die mobile Website-Version.


Responsive Webauftritt Startseite

Die eigene Startseite bei der mobilen Website

Zusätzlich haben Sie die Möglichkeit, per Mausklick eine gesonderte Startseite für Ihre mobile Website zu erstellen. Diese zeigt je nach Wunsch zusätzliche Informationen zu Ihrem Service an. Bauen Sie beispielsweise einen „Anrufen“- oder „E-Mail“-Button ein, über den Kunden und Besucher schnell Kontakt mit Ihnen aufnehmen können. Mit dem „Facebook“-Button verstärken Sie Ihre Präsenz auf der beliebten Social-Media-Plattform. Oder Sie zeigen Ihren Handy- und Tablet-Besuchern Ihren Standort an, indem Sie einen „Karte“-Button gut sichtbar auf der Startseite Ihrer mobilen Website einfügen.


Responsive Website wählen oder mobile Website erstellen?

Bei beiden Ansätzen der Optimierung von Webseiten für den mobilen Zugriff wird das Nutzererlebnis großgeschrieben. Während bei einer Responsive Website eine gute Umsetzung des Corporate Designs im Vordergrund steht, nimmt bei mobilen Webseiten die Benutzerfreundlichkeit einen noch höheren Stellenwert ein. Die verschiedenen Vorteile bemessen sich nach dem Zweck, den eine für Mobile-Nutzung optimierte Website erfüllen soll. So wird eine mobile Website zumeist für Onlineshops erstellt, weil sie sich leichter an den Bedürfnissen mobiler Nutzer ausrichten lässt. Responsive Layouts sind demgegenüber vor allem für Websites mit informativen Inhalten attraktiv. Bei STRATO steht es Ihnen frei, die Layout-Vorlagen zu wählen, die Ihrem Webprojekt am ehesten gerecht werden.

Tipp: Sie können Ihre Website mit STRATO und dem Homepage-Baukasten nicht nur für mobile Geräte optimieren, sondern auch von mobilen Geräten aus bearbeiten und gestalten. Dafür bietet der Homepage-Baukasten verschiedene Funktionen, damit Sie kleine Änderungen oder Aktualisierungen auch schnell von unterwegs erledigen können. Zudem legen Sie mit STRATO als Webhoster den Grundstein für eine nachhaltige Website.


Fazit

  • Dank flexibler Designmöglichkeiten passen Sie Ihren Webauftritt automatisch mobilen Geräten an.
  • Der Homepage-Baukasten von STRATO stellt zahlreiche Vorlagen im Responsive Design zur Verfügung.
  • Parallel zur regulären Desktop-Website lassen sich mit dem Homepage-Baukasten mobile Versionen einzelner Unterseiten erstellen.
  • Mit STRATO können Sie Ihre Website nicht nur für Smartphones und Tablets optimieren, sondern auch von mobilen Geräten aus auf die Homepage zugreifen und diese bearbeiten.

Zum Homepage-Baukasten