t3n News Design

Die Basics des Responsive Webdesign [Infografik]

Die Basics des Responsive Webdesign [Infografik]

Je schneller die Zahl der mobilen Internetnutzer steigt, desto dringender wird die Frage, wie sich Website-Inhalte auf verschiedenen Endgeräten optimal darstellen lassen. Ein möglicher Lösungsansatz ist – die wichtigsten Basics zeigt eine neue .

Die Basics des Responsive Webdesign [Infografik]

Responsive Webdesign. (Grafik: Verge)

Responsive Webdesign: Grundvoraussetzung für die mobile Kommunikation

Nach den Analysten von Morgan Stanley wird die Zahl der mobilen Internetnutzer die der Desktop-Surfer noch vor Ende 2014 endgültig übersteigen. Auch in Deutschland ist der Trend eindeutig: Schon 2013 lag die Zahl der Internetnutzer, die von mobilen Endgeräten aus auf das Netz zugreifen, bei 51 Prozent – im Vergleich zu nur 37 Prozent im Vorjahr. In der Altersgruppe der 16–24-Jährigen stieg der Anteil der mobilen Internetnutzer innerhalb eines Jahres sogar von 59 auf 81 Prozent.

Wer das Internet nutzt, um seine Zielgruppen zu erreichen – und dabei nicht nur auf vorhandene Infrastrukturen wie Facebook setzt – sollte auf diese Entwicklung reagieren. Denn eine Seite, die aufgrund langer Ladezeiten und endlosem Scrolling für mobile Nutzer zur Tortur wird, konvertiert nicht – oder zumindest wesentlich schlechter als das Desktop-Pendant.

Einen Ausweg verspricht seit einiger Zeit das Responsive Webdesign, ein Gestaltungsprinzip, mit dessen Hilfe der Inhalt einer Website sich flexibel an die Gegebenheiten des jeweiligen Bildschirms beziehungsweise Endgerätes anpasst.

Infografik zeigt die Basics des Responsive Webdesign auf einen Blick

Einen Überblick darüber, wie genau Responsive Webdesign funktioniert und warum es sinnvoll ist, den eigenen Webauftritt entsprechend zu überarbeiten, liefert die folgende Infografik. Wer sich die wichtigsten Basics schnell noch einmal vor Augen rufen möchte oder einen Kunden oder Geschäftspartner vom Nutzen der Darstellungsform überzeugen muss, findet hier eine anschauliche Hilfestellung.

Zum Vergrößern der Grafik einfach auf den unten stehenden Ausschnitt klicken.

Ihr wollt selbst eine Website in Responsive Webdesign umsetzen? Dann findet ihr in unserer Artikelreihe Responsive Webdesign hilfreiche Tipps.

Responsive_Webdesign_Basics_Ausschnitt
Die Basics des Responsive Webdesign. (Grafik: Verve)

via blog.hubspot.com

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
5 Antworten
  1. von Isaac am 22.09.2014 (13:05 Uhr)

    Wäre hier auch mal eine feine Sache bei etwa 12" Inhalt auf einem 27" Monitor - natürlich links klebend ;)

    Antworten Teilen
  2. von Jan am 22.09.2014 (18:56 Uhr)

    Naja, die Frage ist wieviel Traffic von Smartphones durch Websites im Browser generiert wird ... So einige Statistiken geben ja an, dass auf einem Smartphone eigentlich nur gezockt und Facebook gemacht wird. Natürlich wird dabei mal ne Website im Facebook Website Viewer aufgemacht, aber ob das wirklich rockt und der Responsive Website Views bringt?! Ich bin gespannt, wie das Rennen Site VS App schlussendlich enden wird.

    Jedenfalls kenne ich schon so einige Menschen, die noch nicht einmal wissen, dass ihr Smartphone einen Browser hat :)

    Antworten Teilen
    • von Moe am 23.09.2014 (08:38 Uhr)

      Und was ist mit Apps, die eigentlich komplett in H5 erstellt werden? Ich denke eher, dass sich da was verschmilzt und klar tippt ein Nutzer lieber auf ein Icon, als eine URL eingeben zu müssen(Das ist ja sooo 200x :p )

      Antworten Teilen
      • von jan am 23.09.2014 (16:12 Uhr)

        h5 Apps sind schlussendlich ja auch nur Apps. Wie sieht es da eigentlich aus mit Responsive Apps? Wie läuft das da? Muss jede App nach einen neuem Update angepasst werden? Gibt es da auch Mediaqueries?

        ... Da sieht man auch schon ein Problem bei Apps: Konsole, Tv, Mikrowelle, Wearables: Da muss noch eine standasierter App-Standard her :)

        Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Infografik
Content first: Workflows im Zeitalter von responsive Webdesign
Content first: Workflows im Zeitalter von responsive Webdesign

Auch in diesem Jahr drehte es sich auf der Developer Week um UX- und UI-Design. Im Panel von Patrick Lobacher haben wir uns inspirieren lassen. » weiterlesen

Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite
Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite

Beim Responsive Webdesign können Tools und Test-Werkzeuge viel Zeit sparen. Das einfache Umschalten zwischen Viewport-Größen vereinfacht die Arbeit enorm. Wir stellen euch 18 kostenlose Tools, … » weiterlesen

Responsive Design: Zehn kostenlose Webdesign-Templates
Responsive Design: Zehn kostenlose Webdesign-Templates

Das Web findet längst nicht mehr nur auf dem Desktop statt und so ist es kein Wunder, dass Responsive Design in aller Munde ist. Damit passen sich die Webseiten dem Endgerät des Besuchers an und … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?