Das praxisnahe Schweizer Online-Marketing Magazin
Im Ratgeber-Magazin erfahren Leser praxisnahe Tipps zu Online-Marketing mit den Schwerpunkten Webdesign, Website-Optimierung und Online-Tools!
Über 2'000 Links für den Webmasterbedarf: Heisser Stoff für Webmaster und Websiteverantwortliche. RSS   Facebook   Twitter


Gratis NewsAboMehr Tipps per Newsabo. Als Dankeschön erhalten Sie die PDF-Reporte „Alles was Sie über die Verlinkung wissen müssen“ und „Wie Sie mit meiner Hilfe Online-Tools finden, mit denen Ihre Website effektiver wird“ gratis!

„Was ist ein responsives Layout?“

„Online-Marketing Beitrag: Responsives Webdesign“

Informationen gemäss Stand vom 13.8.2020

Responsives WebdesignDas responsive Layout (Synonyme: Responsive Webdesign, Responsive Design) basiert auf flexiblen Layouts. Diese dynamischen Layouts passen sich an die verfügbare Bildschirmauflösung an. Der Inhalt eines kompletten Webauftritts wird dementsprechend skaliert (also alle Texte, Fotos und die Navigation). Das Webdesign reagiert auf die Ressourcen des Endgeräts und liefert ein angepasstes Seitenlayout aus. So können Sie einen Webauftritt auf einem grossen Bildschirm als auf einem Smartphone betrachten.

„Inhaltsverzeichnis: Responsives Layout“

nach oben

Responsives Webdesign soll man nicht verwechseln mit einer mobilen Website! Die mobile Website ist ein zusätzlicher, spezieller Webauftritt, der automatisch geladen wird, wenn jemand mit dem Smartphone auf die Website gelangt.

Eine für responsives Webdesign wesentliche Voraussetzung sind Media Queries, ein CSS3-System, welches unterschiedliche Designvorlagen des Ausgabemediums erlaubt. Ab dem 21.04.2015 ist es für das Google-Ranking wichtig, dass der eigene Webauftritt den Regeln der responsiven Layouts untersteht. Dazu gehört, dass Sie die Flash-Technik nicht mehr einsetzen.

Responsives Layout
Foto Quelle: swisscom.ch

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

nach oben

„Regeln“

Für die mobile Benutzerfreundlichkeit müssen die Berührungs-Elemente die richtige Grösse und ausreichenden Abstand untereinander haben.

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

Leider ist Mouseover eine Desktop-Funktion, die auf mobilen Devices entfällt.

nach oben

„Wertvolle Informationen“


ANZEIGE

Mobile Webseiten

➤ Für Webentwickler mit guten Kenntnissen zu Webtechniken wie HTML, CSS, JavaScript, PHP
➤ Leitfaden für die Konzeption Ihrer mobilen Website
➤ Mit zahlreichen Beispielen, Tipps und Lösungen sowie Hinweisen auf Besonderheiten und Stolperfallen
➤ EXTRA: Mit kostenlosem E-Book

„Direkt zum Sparangebot von Amazon“

nach oben

„Wie kann ich responsives Layout testen?“

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

nach oben

„Was ist AMP?“

„Accelerated Mobile Pages (AMP) ist ein quelloffenes, plattformübergreifendes Framework, mit dessen Hilfe die Ladegeschwindigkeit mobiler Websites deutlich erhöht werden kann. AMP basiert auf der Reduktion von CSS und JavaScript, einem Content Delivery Network sowie angepasstem HTML. Unterstützt wird das Accelerated Mobile Pages Project von Google.“
Quelle: https://de.ryte.com/wiki/

Autor: Walter B. Walser, kundennutzen.ch

AutorWalter B. Walser ist Online-Marketing Manager und Redaktor. Er half früher Unternehmern 100% mehr aus Ihrer Website herauszuholen. Er hat KMU in Bezug auf deren Webauftritt beraten und sich auf die Website-Pflege, Website-Optimierung und das Online-Marketing mit Online-Tools spezialisiert. Inzwischen arbeitet er exklusiv für dieses Magazin.
„Sie dürfen ihn gerne kontaktieren!“

nach oben