Was ist ein responsives Layout?

mit Keine Kommentare

Online-Marketing-Beitrag: Responsives Webdesign

Informationen gemäss Stand vom 21.6.2021

Das responsive Layout (Synonyme: Responsive Webdesign, Responsive Design) ba­siert auf flexiblen Layouts. Die­se dynamischen Layouts passen sich an die ver­fügbare Bild­schirm­auf­lösung an. Der Inhalt eines kompletten Web­auf­tritts wird dementsprechend skaliert (also alle Texte, Fotos und die Navi­gation). Das Web­design rea­giert auf die Res­sourcen 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 betrachten.

Responsive Layout

Bildquelle von Patrick Skrbinjek auf Pixabay

Inhaltsverzeichnis: Responsives Layout

Responsives Webdesign soll man nicht verwechseln mit einer mobilen Website! Die mobile Website ist ein zu­sätz­licher, spezieller Webauftritt, der automatisch geladen 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-System, welches unter­schiedliche Design­vorlagen des Ausgabe­mediums erlaubt. Ab dem 21.04.2015 ist es für das Google-Ranking wichtig, dass der eigene Webauf­tritt den Regeln der res­pon­siven Layouts unter­steht. Dazu gehört, dass Sie die Flash-Technik nicht mehr einsetzen.

responsive Webdesign
Foto Quelle: swisscom.ch

Diese responsiven Layouts sind für CMS wie zum Beispiel WordPress verfügbar.

Regeln

Für die mobile Benutzerfreundlichkeit 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 Desktop-Funktion, die auf mobilen Devices entfällt.

Wertvolle Informationen

  • 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 Entwickler­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 auskennen, damit können Sie einfacher und schneller kleine wie grosse Projekte ent­wickeln, die auf Geräten in allen erdenk­lichen Formen funktionieren.
    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ö­sungen.
    screensiz.es/phone

Wie kann ich responsives Layout testen?

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 aussieht.
    ➤ Informieren Sie sich über Entwickler von mobilen Websites.
    ➤ Erfahren Sie, welche Vorteile 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 verschiedenen 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 Bildschirmgrö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 mobile Websites optimieren?

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:

Was ist AMP?

„Accelerated Mobile Pages (AMP) ist ein quelloffenes, platt­form­übergrei­fen­des Framework, mit dessen Hilfe die Lade­geschwin­digkeit mobiler Websites deutlich erhöht werden kann. AMP ba­siert auf der Reduktion von CSS und JavaScript, einem Content Delivery Net­work sowie ange­passtem HTML. Unter­stützt wird das Accelerated Mo­bile Pages Project von Google.“
Quelle: https://de.ryte.com/wiki/

Autor: Walter B. Walser, kundennutzen.ch

Verfolgen Walter B. Walser:

Gründer des pra­xis­na­hen On­li­ne-Mar­ke­ting Ma­ga­zins kundennutzen.ch, Autor und Online-Marketing Manager. Er half frü­her Un­ter­neh­mern 100% mehr aus Ihrer Web­site he­r­au­­s­zu­­­ho­len. 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.

Letzte Einträge von