Best Practices für Web-Apps

Die Entwicklung von Webseiten und Anwendungen für Mobilgeräte ist mit anderen Herausforderungen verbunden als bis hin zur Entwicklung einer Webseite für Desktop-Webbrowser. Die folgenden Vorgehensweisen können Ihnen dabei helfen, effektivste Webanwendung für Android und andere Mobilgeräte.

  1. Leiten Sie Mobilgeräte auf eine dedizierte mobile Version Ihrer Website weiter. Es gibt mehrere mit serverseitigen Weiterleitungen. Eine gängige Methode ist das „Schnüffeln“, die Vom Webbrowser bereitgestellter User-Agent-String. Um festzustellen, ob eine mobile Version eurer Website bereitgestellt werden soll, im User-Agent.
    2. <ph type="x-smartling-placeholder">
  2. HTML5 verwenden für Mobilgeräte. HTML5 ist die gängigste Auszeichnungssprache für mobile Websites. Dieser Standard fördert die Mobile-First-Entwicklung, um sicherzustellen, dass Websites auf einer Vielzahl von Geräte. Im Gegensatz zu den bisherigen Websprachen werden bei HTML5 einfachere <DOCTYPE>- und charset-Deklarationen: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Verwenden Sie die Metadaten des Darstellungsbereichs, um die Größe Ihrer Webseite korrekt anzupassen. Im Dokument <head>, stellen Sie Metadaten bereit, die festlegen, wie der Darstellungsbereich des Browsers dargestellt werden soll Ihre Webseite zu rendern. In den Metadaten des Darstellungsbereichs können beispielsweise die Höhe und Breite des des Darstellungsbereichs des Browsers, der anfänglichen Seitenskalierung und der Zielbildschirmdichte.

    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. Vertikales lineares Layout verwenden. Vermeiden Sie, dass Nutzende nach links und rechts scrollen müssen, während beim Navigieren auf Ihrer Seite. Das nach oben und unten zu scrollen, ist für den Nutzer einfacher und macht Ihre Seite einfacher.
  5. Legen Sie Höhe und Breite des Layouts auf match_parent fest. Einstellen Ihres WebView-Objekts auf die Höhe und Breite des Objekts in match_parent sorgt dafür, dass die Aufrufe Ihrer App korrekt angepasst werden. Wir raten davon ab, die Höhe auf wrap_content, da dies zu einer falschen Größe führt. Gleichermaßen können Sie Die Layoutbreite auf wrap_content wird nicht unterstützt. Dies führt dazu, dass WebView verwenden Sie stattdessen die Breite des übergeordneten Elements. Aufgrund dieses Verhaltens ist es auch wichtig, sicherzustellen, der übergeordneten Layoutobjekte Ihres WebView-Objekts sind als Höhe und Breite festgelegt auf wrap_content.
  6. Vermeiden Sie mehrere Dateianfragen. Da Mobilgeräte normalerweise eine Verbindungsgeschwindigkeit langsamer als Desktop-Computer ist, sollte Ihre Seite so schnell wie möglich geladen werden. Eine Möglichkeit, ihn zu beschleunigen, Vermeiden Sie es, zusätzliche Dateien wie Stylesheets und Skriptdateien im <head> zu laden. Außerdem sollten Sie Mobile Analysen mit PageSpeed Insights von Google: Hier finden Sie detaillierte Optimierungsvorschläge speziell für Ihre App.

Weitere Informationen