Ihre Firmenhomepage auf Smartphone, Tablet & Co. – Mobile Versionen von Websites mit CSS 3

• 12. Juli 2016
• 4270 mal gelesen
• 1
• Twitter Facebook Xing

Wichtiger denn je: die optimale Darstellung Ihrer Website auf mobilen Endgeräten.

Auf einem Smartphone oder einem Tablet wird eine nicht optimierte Seite normalerweise komplett dargestellt, im Miniaturformat, oder nur teilweise.
Man muss also erst die einzelnen Bereiche vergrößern, um den Inhalt lesen zu können. Das ist nicht unbedingt benutzerfreundlich.

Schauen Sie sich zum Vergleich meine Seiten www.klausoppermann.de und www.oppisworld.de an.
Auf diesen Websites habe ich die Stylesheets (CSS) jeweils um spezielle Angaben, sog. Media Queries ergänzt. Sobald sich die Bildschirmauflösung verändert, greift das Mobile-CSS und stellt eine optimierte Version der Website dar.

Die eigentlichen Seiteninhalte bleiben identisch, werden aber anders angeordnet. Hintergrundgrafiken werden ausgetauscht. Fotos / Videos haben die maximale Breite des Bildschirms.

Diese Variante ist für WordPress-Websites sehr gut umsetzbar.

Man kann natürlich auch spezielle Seiten erstellen (was allerdings zusätzlichen Pflegeaufwand zur Folge hat), oder Plugins verwenden (was ich möglichst vermeide, da ich dadurch keinen Einfluss auf den erzeugten Code habe).

Testen Sie, wie Ihre Seite auf verschiedenen “Ausgabegeräten” aussieht: Screenfly by QuirkTools — Test Your Website at Different Screen Resolutions

Lesen Sie auch die interessanten Artikel:

Media Queries: Mobile Versionen von Websites mit CSS 3 erstellen
Websites mit CSS3 Media Queries für iPhone, iPad, Android & Co. optimieren
Setting Breakpoints in Responsive Design

Gerne erstellen wir ein Angebot zur Optimierung Ihrer Homepage für Smartphone und iPhone – sprechen Sie uns an!

Kategorie/n: Webdesign Tags: CSS3, Media Queries, Mobile, Smartphone