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


Gratis NewsAboNews­abo Tipps: Als Danke­schön er­hal­ten Sie die PDF-Reporte „Alles was Sie über die Verlin­kung wissen müssen“ und „Wie Sie mit meiner Hilfe Tools finden, mit denen Ihre Web­site effektiver wird“ gra­tis!

„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-Marke­ting Manager und Re­dak­tor. Er half frü­her Unter­neh­mern 100% mehr aus Ihrer Web­site heraus­zuholen. Er hat KMU in Bezug auf deren Web­auf­tritt be­raten und sich auf die Web­site-Pflege, Web­site-Opti­mie­rung und das Online-Mar­ke­ting mit Online-Tools spe­ziali­siert. In­zwi­schen arbei­tet er ex­klusiv für dieses Maga­zin.
„Sie dürfen ihn gerne kontak­tie­ren!“

nach oben