Das praxisnahe Schweizer Online-Marketing Magazin
Im Ratgeber-Magazin erfahren Leser praxisnahe Tipps zu Online-Marketing mit den Schwerpunkten Webpromotion, Website-Optimierung und Online-Tools!
Im Magazin werden über 2'000 nützliche Links für den Webmaster Bedarf vorgestellt: Gehirn-Stoff für Webmaster und Webverantwortliche.

Gratis NewsAboLaden Sie sich die knackigen PDF-Reporte „Alles was Sie über die Verlinkung wissen müssen“ und „Der Internet-Code“ kostenfrei herunter.

„Was ist ein responsives Layout?“

„Online-Marketing Beitrag: Responsives Webdesign“

Informationen gemäss Stand vom 15.10.2019

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 Internetauftritt 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/Accelerated_Mobile_Pages

Autor: Walter B. Walser, kundennutzen.ch

AutorWalter B. Walser ist Online-Marketing Manager und Redaktor. Er hilft Unternehmern 100% mehr aus Ihrer Website herauszuholen. Er lebt seit 1995 vom Internet, berät KMU in Bezug auf deren Webauftritt und hat sich auf die Website-Pflege, Website-Optimierung und das Online-Marketing mit Online-Tools spezialisiert.
„Sie dürfen ihn gerne kontaktieren!“

nach oben