Was ist ein responsives Layout?

mit Keine Kommentare

Online-Marke­ting-Beitrag: Res­pon­sives Web­de­sign

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 26.7.2022

Responsive LayoutQuelle: 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
Bildquelle: 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.

  • Responsinator
    Testet Webseiten auf einem iPhone.
    responsinator.com
  • 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/
  • Screenfly by QuirkTools
    Testet ein Design auf dem Desktop, einem Tablet, einem Handy und einem Fernseher.
    quirktools.com/screenfly/
  • 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

Walser arbeitet seit 1995 mit dem In­ter­net. Er ist Gründer des pra­xis­na­hen On­li­ne-Mar­ke­ting- und Online-Tools-Ma­ga­zins kundennutzen.ch, Autor und Online-Marketing-Manager. Er half frü­her als Agenturleiter Un­ter­neh­mern 100% mehr aus Ihrer Web­site heraus­zu­holen. Er hat KMU in Bezug auf deren Web­auf­tritt be­raten und sich auf die Web­si­te-Pfle­ge, Web­si­te-Opti­mie­rung und das On­li­ne-Mar­ke­ting mit On­li­ne-Tools spe­zia­li­siert. Spezielle Interessen: Umweltschutz und Geopolitik.