0211 5579112

Responsive Webdesign

Aug 15, 2017 | Webdesign

Responsive Webdesign Mobile Friendly by eyelikeit – visual solutions

Kurze Geschichte

Am 09. Januar stellte Steve Jobs das erste iPhone vor. Nach dem Markterfolg des iPhones folgen weitere Smartphones, mit der anschließenden schnellen Verbreitung von iPads und weiteren  Tablets hat sich Responsive Webdesign unglaublich schnell durchgesetzt. Im Jahr 2010 taucht der Begriff das erste mal im Online-Magazin A List Apart in einem Artikel von Ethan Marcotte auf. Seit 2012 bis 2013 gehört heute Quasi zu den Entwicklungsstandards.

Mobile Geräte wie Smartphones und Tablets sind für das Surfen im Internet seit der Erfindung des iPhones ständig wichtiger geworden. Ein Webdesign, das einmal für einen größeren Bildschirm entworfen und entwickelt wurde, funktioniert insbesondere auf kleineren Smartphone-Bildschirmen oft nicht so gut.

Die Inhaberin und Geschäftsführerin von Traumkleid – Braut- und Abendmoden hat sich bereits 2012 dieser Herausforderung gestellt. Laut Web-Statistik hatten bereits damals mehr als ein Viertel der Besucher ihrer Website die Seiten auf mobilen Geräten aufgerufen – das waren mehr als 1.600 Besuche im Monat! 1.600 Gründe, das Webdesign für mobile Geräte, insbesondere die iOS-Familie zu optimieren!

Das ist lange her.

Statistik: Anteil der mobilen Internetnutzer nach Altersgruppen in Deutschland im Jahr 2019 | Statista
Mehr Statistiken finden Sie bei Statista

Google Loves Mobile

Seit Jahren bereits ist es schon bei Google ein Kriterium, ob eine Website für die mobile Nutzung geeignet ist. Google liefert seit Jahren bereits unterschiedliche Suchergebnisse aus, je nachdem, ob die Suche von einem Desktop-Rechner oder von einem mobilen Gerät gestartet wird. Für das Ranking, also den Listenplatz, auf den Suchergebnisseiten (SERP) für mobile Geräte ist es ein entscheidendes Kriterium, ob eine Webseite Mobile Friendly ist. Webseiten, die für Mobile Geräte nicht optimiert sind, werden viel später berücksichtigt.

Ab März 2021 geht es dann richtig rund: Google hat angekündigt, dass das Kriterium „Mobile Friendly“ dann nicht nur den Listenplatz für mobile Geräte beeinflußt sondern auch den Listenplatz für Desktop-Computer. Mit „Gehaltvollem Inhalt“ und Ladegeschwindigkeit (Pagespeed) hat sich das Responsive Webdesign zu einem Hauptkriterium für die Google Algorithmen entwickelt.

 

Wie geht Responsive Webdesign?

1. Entwerfen der Layouts.

Genauso, wie der Webdesigner mit dem Unternehmer überlegen muss, welche Inhalte der Kunde sehen muss, um so einfach wie möglich zu erkennen, dass sie oder er hier genau das bekommt, was sie braucht, muss überlegt werden, wie die Inhalte von den mobilen Besucherinnen und Benutzernkonsumiert werden. Daraus wird ein Konzept entwickelt, wie die jeweiligen Seiten am Besten auf den jeweiligen Bildschirmen darzustellen sind – dies ist die verantwortungsvollste Aufgabe dabei.

Hier haben wir eigene Layouts für mobile Endgeräte entwickelt (die funktionieren natürlich auch auf den Android- und Windows-basierenden Smartphones):

  1. iPhone Hochformat
  2. iPhone Querformat
  3. iPad Hochformat
  4. iPad Querformat

2. Umsetzung und Funktionalität.

Die Layouts werden so programmiert, dass automatisch erkannt wird, von welchem Gerät die Webseite aufgerufen wird und wie das Gerät gehalten wird – im Hoch- oder Querformat. Die Website wird dann automatisch im passenden Layout bereitgestellt.

FAQ – Häufig gestellte Fragen

Was ist Responsive Webdesign?

Responsive Webdesign beschreibt einen Webdesign-Ansatz, mit dem Websites und Webseiten auf allen Geräten und Bildschirmgrößen in einer benutzerfreundlichen Weise angezeigt (oder gerendert) werden können. Das Layout passt sich automatisch an die Bildschirmgröße an, unabhängig davon, ob es sich um einen Desktop, einen Laptop, ein Tablet oder ein Smartphone handelt.

Wie funktioniert Responsive Webdesign?

Responsive Webdesign arbeitet mit Cascading Style Sheets (CSS) und verwendet verschiedene Einstellungen, um je nach Bildschirmgröße, Ausrichtung, Auflösung, Farbfähigkeit und anderen Eigenschaften des benutzten Gerätes unterschiedliche Stileigenschaften bereitzustellen. Einige Beispiele für CSS-Eigenschaften im Zusammenhang mit responsivem Webdesign sind das automatische Abfragen der Bildschirmgröße und Medienart.

Ist meine Website responsive?

In Ihrem Webbrowser können Sie schnell feststellen, ob eine Website responsive ist oder nicht. Öffnen Sie den Webbrowser Google Chrome. Öffnen Sie Ihre Website. Drücken Sie Strg + Umschalt + I, um Chrome DevTools zu öffnen. Drücken Sie Strg + Umschalt + M, um die Gerätesymbolleiste umzuschalten- Zeigen Sie Ihre Seite in einer Smartphone-, Tablet- oder Desktop-Perspektive an. Sie können auch den kostenlosen Mobile-Friendly Test von Google verwenden, um festzustellen, ob die Seiten Ihrer Website für Smartphones geeignet sind – ob sie Mobile Friendly sind. Sie können auch mit anderen Designansätzen wie dem "adaptiven Design" eine mobile Benutzerfreundlichkeit erzielen. Der Responsive Webdesign Ansatz wird aufgrund seiner Vorteile am häufigsten von Webdesignern eingesetzt und ist am verbreitetsten.

Warum ist Responsive Webdesign für Webdesigner wie für Unternehmer wichtig?

Eine Site für jedes Gerät: Ob auf einem 27-Zoll-iMac oder auf dem Bildschirm eines kleinen Android-Telefons: die Website wird für eine optimale Ansicht des Benutzers konfiguriert. Optimales Design für das Gerät: Mit dem Responsive Webdesign-Ansatz werden alle Bilder, Schriftarten und anderen HTML-Elemente entsprechend skaliert, um die Bildschirmgröße für Benutzers optimal zu nutzen. Keine Weiterleitungen erforderlich: Für andere Ansätze des Webdesign für mehrere Geräte müssen Weiterleitungen verwendet werden, um den Benutzer an die entsprechende Version einer Webseite zu senden. Ohne Weiterleitungen bekommt der Benutzer die Inhalte schneller angezeigt. Responsive Webdesign ist auch in der Pflege günstiger, da Sie es auch einfacher verwalten und aktualisieren können. Jede Seite gibt es nur einmal statt in mehreren Ausführungen und Änderungen brauchen nur einmal statt mehrfach ausgeführt werden. https://serviceeyelike.com