Die Entwicklung von Webseiten und Anwendungen für Mobilgeräte stellt andere Herausforderungen als die Entwicklung einer Webseite für Desktop-Webbrowser dar. Die folgenden Vorgehensweisen können Ihnen dabei helfen, eine effektive Webanwendung für Android und andere Mobilgeräte bereitzustellen.
- Leiten Sie Mobilgeräte zu einer dedizierten mobilen Version Ihrer Website weiter. Dafür gibt es mehrere Möglichkeiten mit serverseitigen Weiterleitungen. Eine gängige Methode ist das „Sniffen“ des vom Webbrowser bereitgestellten User-Agent-Strings. Wenn du feststellen möchtest, ob eine mobile Version deiner Website bereitgestellt werden soll, suche im User-Agent nach dem String „mobile“.
- Verwenden Sie HTML5 für Mobilgeräte. HTML5 ist die gängigste Auszeichnungssprache für mobile Websites.
Dieser Standard fördert die Mobile-First-Entwicklung, damit Websites auf einer Vielzahl von Geräten funktionieren. Im Gegensatz zu früheren Websprachen werden in HTML5 einfachere
<DOCTYPE>
- undcharset
-Deklarationen verwendet:<!DOCTYPE html> ... <meta charset="UTF-8">
- Verwenden Sie Darstellungsbereich-Metadaten, um die Größe Ihrer Webseite richtig anzupassen. Stellen Sie in Ihrem Dokument
<head>
Metadaten bereit, die angeben, wie der Darstellungsbereich des Browsers Ihre Webseite rendern soll. In den Metadaten des Darstellungsbereichs können beispielsweise die Höhe und Breite für den Darstellungsbereich des Browsers, die anfängliche Seitenskalierung und die Zielbildschirmdichte angegeben werden.Das folgende Beispiel zeigt, wie Metadaten für den Darstellungsbereich festgelegt werden:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Weitere Informationen zur Verwendung von Darstellungsbereich-Metadaten für Android-Geräte finden Sie unter Unterstützung verschiedener Bildschirme in Web-Apps.
- Verwenden Sie ein vertikales lineares Layout. Nutzer müssen beim Navigieren auf Ihrer Seite nicht nach links und rechts scrollen. Das Scrollen nach oben und unten ist für den Nutzer einfacher und Ihre Seite einfacher.
- Legen Sie Höhe und Breite des Layouts auf
match_parent
fest. Wenn Sie die Höhe und Breite desWebView
-Objekts aufmatch_parent
festlegen, wird dafür gesorgt, dass die Ansichten Ihrer App die richtige Größe haben. Wir raten davon ab, die Höhe aufwrap_content
festzulegen, da dies zu falschen Größen führt. Ebenso wird das Festlegen der Layoutbreite aufwrap_content
nicht unterstützt und führt dazu, dass dasWebView
stattdessen die Breite des übergeordneten Elements verwendet. Aufgrund dieses Verhaltens muss für keines der übergeordneten Layoutobjekte desWebView
-Objekts die Höhe und Breite aufwrap_content
festgelegt werden. - Vermeiden Sie mehrere Dateianfragen. Da die Verbindungsgeschwindigkeit von Mobilgeräten in der Regel langsamer ist als bei Desktop-Computern, sollte Ihre Seite so schnell wie möglich geladen werden. Eine Möglichkeit, den Vorgang zu beschleunigen, besteht darin, das Laden zusätzlicher Dateien wie Stylesheets und Skriptdateien im
<head>
zu vermeiden. Sie können auch mit PageSpeed Insights von Google eine Analyse für Mobilgeräte durchführen, um detaillierte Optimierungsvorschläge für Ihre App zu erhalten.
Weitere Informationen
- Pixelperfekte Benutzeroberfläche in WebView
- Responsives Design erlernen
- Bilder mit hohem DPI-Wert für variable Pixeldichten
- Best Practices für das mobile Web
- Schnelleres Web