1. Startseite »
  2. Magazin »
  3. Anleitungen »
  4. Webvisitenkarte »
  5. So erstellst Du eine responsive Website

Webvisitenkarte: So erstellst Du eine responsive Website

Webvisitenkarte Header Webvisitenkarte Header Webvisitenkarte Header

Eine responsive Webseite ist eine Internetseite, die auf allen Ausgabemedien passend dargestellt wird. Es ist also egal, ob Du sie mit einem hochauflösenden PC-Monitor, auf einem Notebook, einem Tablet oder mit Deinem Smartphone betrachtetst: Das Design der Seite wird immer angepasst. Das heißt aber nicht, dass die Internetseite auf einem Smartphone einfach nur kleiner dargestellt wird. Sie wäre dann kaum noch lesbar und steuern könntest Du sie schon gar nicht. Vielmehr sorgt das responsive Webdesign dafür, dass die Inhalte je nach Bildschirm richtig angeordnet werden.


Ein Beispiel soll das klarer machen: Du betrachtest eine Website ganz normal auf dem PC-Monitor. Es sind dort Bilder zu sehen und daneben stehen Texte. Schaust Du die Website mit einem Smartphone an, wird diese Anordnung bei einer responsiven Website anders sein. Die Bilder werden mehr oder weniger bildschirmfüllend angezeigt und die Texte stehen darunter. In vielen Fällen wird auch die Navigation, die in der Bildschirm-Ansicht immer da ist, auf einem Handy ausgeblendet und kann nur über Berührung aufgerufen werden. Kurz gesagt: Responsives Webdesign sorgt für Les- und Steuerbarkeit Deiner Website auf mobilen und stationären Geräten.


Die Techniken, um eigenständig responsive Webseiten zu erstellen, sind sehr komplex. Du musst dazu HTML5, CSS3 und JavaScript beherrschen. Doch mit Webvisitenkarte.net sind responsive Webseiten kein Problem, da alle Designs diese Anforderung automatisch erfüllen. Um zu überprüfen wie Deine Webseite auf jedem Gerät aussieht, gibt es einen sehr einfachen Weg, den wir Dir in den folgenden Zeilen zeigen.

Ist das mit Webnode möglich?
Ja
Mit Zusatzkosten verbunden?
Nein
Schwierigkeitsgrad
Sehr einfach
Zeitaufwand
1 Minute

Möchtest du allgemeine Informationen zum “Website erstellen” lesen?

Hier findest du einen Leitfaden zum Thema “Website erstellen” und einen Vergleich von Homepage Baukästen, mit dessen Hilfe du im Handumdrehen den passenden Anbieter für dein Website-Vorhaben finden kannst. Einen umfangreichen Testbericht zu Webvisitenkarte gibt es hier.

1 Einloggen und Vorschau wählen

Id 479 Bild 1 Id 479 Bild 1 Id 479 Bild 1

Nachdem Du Dich bei Webvisitenkarte.net eingeloggt hast, klicke oben im Bearbeitungsmenü auf „Vorschau“.


2 Unterschiedliche Bildschirme wählen

Id 479 Bild 2 Id 479 Bild 2 Id 479 Bild 2

Oben Links siehst Du jetzt Symbole. Klickst Du das erste an, dann siehst Du, wie die Website auf einem Monitor aussieht. Das zweite Symbol ist die Ansicht auf einem typischen Tablet im Hochformat, das dritte Symbol das Gleiche im Querformat. Dann folgen noch die Ansichten vom Smartphone im Hoch- und Querformat. Klicke einfach alle durch, um zu schauen, wie das responsive Design die Inhalte in den einzelnen Ausgabemedien darstellt.

Achtung: Die Vorschau auf Webvisitenkarte.net kommt der Darstellung auf den verschiedenen Geräten meist sehr nahe. In der Praxis hängt die Darstellung Deiner Website allerdings auch vom verwendeten Browser (z. B. Internet Explorer, Firefox etc) und vom konkret verwendeten Bildschirm ab. In jedem Fall ist anzuraten, eine Website regelmäßig auf verschiedenen Geräten und mit verschiedenen Browsern zu testen.


Der Autor
Thomas Kirsche Magazin Thomas Kirsche Magazin Thomas Kirsche Magazin
Thomas Kirsche
Meine erste Website entwarf und programmierte ich im Jahr 2001. Damals faszinierten mich HTML und vor allem Flash und natürlich ansprechende Inhalte. Seit 2006 arbeite ich als freier Autor und Journalist. Dabei liebe ich es, unterschiedliche Themenfelder zu bearbeiten. Beim Blick über den Tellerrand sprießen nämlich nur so die Ideen. Schwerpunkte meiner Arbeit sind neben „SEO-Texten“, „Ratgebern“, „Produkttests“ auch „Bloggen“ und „Podcasting“ – ein wieder neu aufflammendes und spannendes Medium.