Was ist ein responsives Layout?

mit Keine Kommentare

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

Responsive LayoutBild: Patrick Skrbinjek auf Pixabay.com

Inhaltsverzeichnis: Responsives Lay­out

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.

responsive Webdesign
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:

Autor: Walter B. Walser, kundennutzen.ch

Verfolgen Walter B. Walser:

Online-Mar­ke­ting-Mana­ger

Seit 1995 hat Walter B. Walser Erfahrung im Umgang mit dem Internet. Er gründete 2001 ein Magazin, kundennutzen.ch, das sich auf praktisches Online-Marketing und Online-Werkzeuge konzentrierte. Als Agenturleiter hatte er Unternehmern geholfen, die Effektivität ihrer Website um 100% zu steigern. Ausserdem hatte Walser kleine Unternehmen in Bezug auf ihre Internetpräsenz beraten und war spezialisiert auf die Wartung und Optimierung von Websites. Zu seinen Interessen gehören Umweltschutz und Geopolitik.