Einfacher haben Sie es, wenn Sie ein Joomla-CMS oder Wordpress-Blog betreiben: Praktische Erweiterungen sorgen für die korrekte Anzeige auf Mobilgeräten.
Von Jonas Tabellen lassen sich im Responsive Design für kleine Displays optimieren, indem sie mit CSS und/oder JS umstrukturiert oder horizontal gescrolled werden. Aktualisiert am 18. August 2021 Lesezeit ca. 5 Min. 22 Kommentare Wer schon einmal eine Website mit tabellarischen Inhalten für kleine Displays optimieren musste weiß: Tabellen und responsive Webdesign passen nicht gut zusammen. Website für Smartphones optimieren mit CSS3 Media Queries. Wir sprechen hier natürlich nicht von Tabellen die für das Layout eingesetzt wurden (es dürfte klar sein, dass Tabellen NIE im Layout verwendet werden) sondern von Inhalten die in Form eine Tabelle abgebildet werden sollen. Solche Tabellen eignen sich nicht gut für die Darstellung auf einem kleinen Bildschirm und werden recht schnell unübersichtlich. Ich möchte euch in diesem Beitrag verschiedene Lösungsansätze für Tabellen im Responsive Design vorstellen und die jeweiligen Vor- und Nachteile aufzeigen. Kompromisse sind gefragt Tabellen werden in der Regel dazu verwendet umfangreiche Datenmengen übersichtlich abzubilden.
Bereits im November 2014 hat Google im offiziellen Webmaster-Blog darauf hingewiesen, dass es ab sofort in den Suchergebnissen anzeigt, wenn Websites "mobile friendly" sind. Am 21. April wird es dann richtig ernst: die Mobiltauglichkeit der Website wird ab diesem Stichpunkt nicht nur angezeigt, sondern hat auch nachhaltige Auswirkungen auf die Platzierung der Seite in den Suchergebnissen – zumindest wenn von einem mobilen Endgerät gesucht wird. Die Vorgaben von Google, was dort unter einer "mobile friendly" Website verstanden wird sind klar: Keine Software, die nicht auf allen Endgeräten verfügbar ist, z. B. Flash Texte müssen ohne Zoomen lesbar dargestellt werden Die Seitengröße passt sich an die Gerätegröße an, sodass nicht horizontal gescrolled oder gezoomt werden muss Links müssen weit genug auseinander liegen, um gut tap-bar zu sein Wir besprechen nachfolgend die 3 wichtigsten Schritte für die mobile Optimierung der Website, um diesen Anforderungen gerecht zu werden. 1. Die 3 Schritte zur mobilen Optimierung der Website | html5 Referenz und Tutorials | Neuerungen | CSS 3 | Anleitung zum Programmieren von iPhone Apps. META Angaben zur mobilen Optimierung META Viewport Der Viewport sagt dem Endgerät, wie die Seitenbreite gehandhabt werden und wie diese skaliert werden soll.
CSS Media-Queries mit max-width Ein einfaches Mittel, die verfügbare Seitenbreite herauszufinden, um den Content entsprechend anzupassen, ist der Einsatz von Media Queries. Da uns bei der mobilen Optimierung insbesondere die Geräte interssieren, die eine bestimmte Breite nicht überschreiten, dient uns der folgende Codeschnipsel am besten: @media (min-width: 370px) {. myClass{}} Auf diese Weise lässt sich für alle Medien, die eine Mindestbreite von 370 Pixeln haben, die benannte Klasse entsprechend formatiert wird. Quelle: selfhtml MediaQueries User Agent Switch mit mobilem CSS Serverseitig lässt sich in PHP durch den folgenden Code feststellen, ob der Besucher einen mobilen Browser verwendet: $useragent = $_SERVER['HTTP_USER_AGENT']; if (preg_match('/(android|bb\d+|meego). +mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile. So fixen Sie mobile Überschrift-Fonts in Divi mit einem einfachen Schritt – Ezoic. +firefox|netfront|opera m(ob|in)i|palm( os)? |phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.
Im Bereich Content wird nach der Angabe width (engl. Breite) die gewünschte Breite angegeben. In unserem Beispiel 1200 Pixel. Damit besser sichtbar, wurde der Bereich mit Gelb hinterlegt auf unserer Beispielseite unter viewport fix auf 1200 Pixel eingestellt Durch den zu großen Viewport entstehen Löcher im Design. Dort steht kein Text, da die Sätze davor umgebrochen wurden über den HTML-Befehl
. Die Nutzung von 1200 Pixeln für die Breite macht also nicht wirklich Sinn – aber was macht Sinn? Welche Größe haben eigentlich Handy-Displays? Eine Frage, die wir am besten durch eine Website beantworten können, die fleißig die Daten der meisten Handys sammelt: Bildschirmgrößen und deren Popularität Kurz gesagt – eine feste Angabe macht keinerlei Sinn! Die einfache Lösung ist, dass wir dem Gerät sagen, nutze bitte als Breite deine native Breite – sprich die Angabe ist: width=device-width Die Beispielseite ist zu finden unter: Nutzung von width=device-width bei der Angabe des Viewports Wieder ist bei der horizontalen Ausrichtung des Handys sichtbar, dass die Schriftgröße größer ist als bei der anderen Ausrichtung!