Tipp: Website-Design für mobile Nutzer optimieren (Teil 1)

am 19. Dezember 2015 🖊 von Chris

Bereits seit einiger Zeit hat diese Website ein Design, das sowohl für Nutzer an Desktop-Geräten, d.h. mit großen Bildschirmen, als auch für mobile Nutzer mit eher kleineren Bildschirmen optimiert ist.

Wie man ein existierendes Design entsprechend anpassen kann, dass es auf allen Geräten gut aussieht und die Website einfach benutzbar ist, möchte ich euch hier zeigen. 🙂

Dieser Artikel zeigt erste Grundlagen für eine Optimierung für Mobilgeräte. Viele weitere Anpassungen sind möglich und empfehlenswert, aber dazu mehr irgendwann in einem zweiten Teil. 😉 So, los geht's!

Grundlegende Idee

Die Idee, die den gleich folgenden Anpassungen zugrunde liegt, ist es, den CSS-Code einer Website so anzupassen, dass bestimmte Bereiche nur für bestimmte Bildschirmauflösungen gelten.

Auf diese Weise kann man die Darstellung der Website für kleine Bildschirme bzw. für große Bildschirme ohne großen zusätzlichen Aufwand anpassen.

Screenshots

Links: Design bei großer Bildschirmauflösung, Rechts: Design bei kleiner Bildschirmauflösung

Werbeblocker aktiv?

Vermutlich aufgrund eines Werbeblockers kann an dieser Stelle leider keine Werbung angezeigt werden. Als Blog ist diese Website jedoch darauf angewiesen, um diverse Kosten abdecken zu können. Vielleicht möchtest du Servaholics ja in deinem Werbeblocker als Ausnahme hinzufügen und so unterstützen? 🙂

Quellcode

/* Ensure some elements are displayed as block elements */
header, main, aside, footer {
    display: block; 
}
/* Resetting the margin */
body {
	margin: 0;
}
 
/* For devices with big displays */
@media screen and (min-width: 900px) {
	body {
		font-size: 14px; /* Adjust! */
	}
	main {
		margin: auto;
		width: 900px;
	}
	header {
		margin-bottom: 10px; /* Optionally */
	}
	aside#navigation {
		float: left;
		width: 290px;
		margin-right: 10px; /* Optionally */
	}
	div#content {
		float: left;
		width: 600px;
	}
	div.clear_left {
		clear: left;
	}
	footer {
		margin-top: 10px; /* Optionally */
	}
}
 
/* For devices with small display */
@media screen and (max-width: 899px) {
	body {
		font-size: 16px; /* Adjust! */
	}
}

<html>
<body>
	<header>Screenshot: Red Space</header>
	<main>
		<aside id="navigation">Screenshot: Orange Space</aside>
		<div id="content">Screenshot: Yellow Space</div>
		<div class="clear_left"></div>
	</main>
	<footer>Screenshot: Blue Space</footer>
</body>
</html>

Erklärung

Zu Beginn des CSS-Codes wird sichergestellt, dass einige Elemente als Blockelemente dargestellt werden. Außerdem wird der Abstand des body-Tags zum Rand entfernt - dies macht die danach folgenden Pixel-Berechnungen einfacher. Beide Anpassungen gelten für alle Nutzer.

Anschließend folgen zwei Blöcke: Der erste richtet sich an größere Bildschirme, nämlich solche, die das Browser-Fenster mit mindestens 900 Pixeln Breite anzeigen, der zweite an kleinere Bildschirme mit maximal 899 Pixeln. In diesen Blöcken kann man nun wie gewohnt CSS-Code einfügen, der nur für die jeweilige Fensterbreite gelten soll.

In diesem Beispiel wurde die Website für Desktop-Nutzer auf eine maximale Breite von 900 Pixeln begrenzt und insgesamt zentriert. Danach folgen u.a. die Breite der Navigation plus Abstand nach rechts zum Inhalt, der dann ebenfalls spezifiziert wird. Die Breiten und Abstände ergeben zusammen die maximale Breite (290 + 10 + 600 = 900). Zudem wurden noch optionale Anpassungen eingefügt.

Für mobile Nutzer wurde in diesem Code lediglich die Schriftgröße erhöht, auch hier sind allerdings beliebige Anpassungen möglich. Da es sich bei header, aside, div und footer um Blockelemente handelt (und dies zusätzlich zu Beginn sichergestellt wird), sind für mobile Nutzer prinzipiell keine besonderen Anpassungen notwendig: Alle Blöcke werden wie im Screenshot automatisch untereinander angezeigt.

Fazit

Wie ihr seht, sind relativ wenig Anpassungen notwendig, um ein Design für mobile Geräte und ihre Nutzer zu optimieren. Viel Spaß daher beim Basteln. 🙂

Übrigens: Auch an einem Desktop-System mit großer Bildschirmauflösung lässt sich das "mobile Design" leicht testen - ein Verringern der Fensterbreite des Browser-Tabs genügt. 😉