Was ist ein responsives Layout?

Online-Marketing: Responsives Webdesign

Das responsive Layout (Sy­no­nyme: Responsive Webdesign, Responsive Design) ba­siert auf flexiblen Lay­outs. Die­se dynami­schen Layouts passen sich an die ver­fügbare Bild­schirm­auf­lösung an. Der Inhalt eines kompletten Web­auf­tritts wird dement­sprechend ska­liert (also alle Texte, Fotos und die Navi­gation). Das Web­design rea­giert auf die Res­sour­cen des End­geräts und liefert ein ange­passtes Seiten­layout aus. So können Sie einen Web­auftritt auf einem grossen Bild­schirm als auf einem Smart­phone be­trach­ten.

Informationen gemäss Stand vom 8.4.2023

Bild: Patrick Skrbinjek auf Pixabay.com

Inhaltsverzeichnis: Responsives Lay­out

• Regeln
• Wertvolle Informationen
• Wie kann ich responsives Lay­out testen?
• Wie kann ich mobile Websites optimieren?

Responsives Webdesign soll man nicht verwechseln mit einer mobi­len Website! Die mobile Web­site ist ein zu­sätz­licher, spezieller Webauftritt, der automatisch ge­laden wird, wenn jemand mit dem Smartphone auf die Website ge­langt.

Eine für respon­sives Webdesign we­sent­liche Voraus­setzung sind Media Queries, ein CSS3-Sys­tem, welches unter­schiedliche Design­vorlagen des Ausgabe­mediums erlaubt. Ab dem 21.04.2015 war es für das Google-Ran­king wichtig, dass der eigene Webauf­tritt den Regeln der res­pon­siven Layouts unter­steht.

Bild: swisscom.ch

Diese responsiven Layouts sind für CMS wie zum Beispiel Word­Press verfügbar.

Regeln

Für die mobile Benutzer­freundlichkeit müssen die Berührungs-Elemente die richtige Grösse und aus­reichenden Ab­stand unter­ein­ander haben.

Standard ist bei den Besuchern das Icon-Element wie Burger-Menü.

Leider ist Mouseover eine Des­ktop-Funktion, die auf mobilen Devices entfällt.

Wertvolle Infor­ma­tio­nen

• Browser
  Im Firefox können Sie mit der Tasten­kombination CTRL SHIFT M diverse Bild­schirm­modi simu­lieren. Im Google Chro­me rufen Sie die Entwick­ler­tools per Taste F12 auf.
• Be-responsive
  Viele Details zu Theorie und Praxis er­halten Sie auf der Website von be-responsive.de.
• Bootstrap
  Bootstrap ist das beliebteste Framework mit HTML, CSS und JS für die Ent­wick­lung von anpas­sungs­fähigen Pro­jek­ten für das moderne Web.
  Egal, wie gut Sie sich aus­kennen, damit können Sie einfacher und schneller kleine wie grosse Projekte ent­wickeln, die auf Geräten in allen erdenk­lichen Formen funk­tionieren.
  holdirbootstrap.de
• PureCSS (E)
  Hier finden Interessierte einzelne respon­sive Website-Ele­mente, wie zum Beispiel Formu­lare, Seiten­vorlagen, Lan­de­seiten, Bilder­galerie, Buttons, Tabellen und Menüs. Man erhält den ganzen Code und kann diesen ein­fach in eigenen Projek­ten verwenden.
  purecss.io
• Responsive Layout Examples (E)
  Bei diesem Server kann man den Code für diverse Layouts herunterladen und für eigene Projekte verwenden!
  responsivegridsystem.com/layouts/
• Screensizes (E)
  Auf Screensizes finden Sie die Ab­mes­sungen, Pixelwerte und Pixel­dichten aller gängigen Handy, Smart­phones, Tablets und Desk­top-Bild­schirme. Die Tabelle hilft bei der Optimie­rung einer Website für spe­zielle Display­grössen oder Auflö­sun­gen.
  screensiz.es/phone

Wie kann ich res­pon­si­ves Layout tes­ten?

Dafür gibt es viele Tools im Web. Einige werden hier vorgestellt.

• Fit fürs mobile Internet?
  Beitrag von Google zu diesem Thema. Beinhaltet
  ➤ Sehen Sie, wie Ihre Website auf einem Mobiltelefon aus­sieht.
  ➤ Informieren Sie sich über Entwickler von mobilen Web­sites.
  ➤ Erfahren Sie, welche Vor­teile mobile Websites haben.
  google.com/webmasters/
• Mobile Phone Emulator
  Simuliert diverse Geräte von Apple, HTC, Samsung, RIM und LG.
  mobilephoneemulator.com
• Am I Responsive?
  Testet das Design auf ver­schiedenen Viewports (1600 x 992px; 1280 x 802px; 768 x 1024px; 320 x 480px).
  ami.responsivedesign.is
• Designmodo
  Damit lässt sich das eigene Design schnell mit verschiedenen Bild­schirm­grössen testen.
  designmodo.com/responsive-test/
• Testsize
  Nützlich für einen schnellen Test. URL eingeben, gewünschte Fenstergrösse wählen und schon weiss man Be­scheid.
  testsize.com
• iPhone Simulator
  Wie sieht meine Website beim iPhone aus?
  testiphone.com
• Responsive Design Viewer
  URL eingeben, Endge­räte aus­wählen und die Website wird so angezeigt, wie sie der Besucher in der Realität se­hen würde.
  responsive-design.active-value.de
• Pixeltuner
  URL eingeben und testen. Die ange­gebene Web­seite wird in fünf Grössen, von 320 x 480 bis 1280 x 800 ange­zeigt.
  responsive.pixeltuner.de
• Weitere Tools
  rund um responsives Webdesign.

Wie kann ich mo­bile Websites op­ti­mie­ren?

Um mobil Suchenden bessere Ergeb­nisse zu liefern, werden reine Desk­top­varianten ab März 2021 von Google nicht mehr berück­sichtigt. Google wird keine Desk­top-Inhal­te mehr in den Sucher­gebnissen auflis­ten.

Um den Webauf­tritt zu optimieren, müssen wir zuerst wissen, wo die Pro­bleme sind. Helfen können folgende drei On­li­ne-Tools:

• Die Google Search Console
• Test auf Optimierung für Mo­bilgeräte
• Google PageSpeed Insight

Autor: Walter B. Walser, kundennutzen.ch