Best Practices für Web-Apps

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.

  1. 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“.
  2. 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>- und charset-Deklarationen verwendet: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. 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.

  4. 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.
  5. Legen Sie Höhe und Breite des Layouts auf match_parent fest. Wenn Sie die Höhe und Breite des WebView-Objekts auf match_parent festlegen, wird dafür gesorgt, dass die Ansichten Ihrer App die richtige Größe haben. Wir raten davon ab, die Höhe auf wrap_content festzulegen, da dies zu falschen Größen führt. Ebenso wird das Festlegen der Layoutbreite auf wrap_content nicht unterstützt und führt dazu, dass das WebView stattdessen die Breite des übergeordneten Elements verwendet. Aufgrund dieses Verhaltens muss für keines der übergeordneten Layoutobjekte des WebView-Objekts die Höhe und Breite auf wrap_content festgelegt werden.
  6. 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