Wie kann ich eine Website für Mobiltelefone entwerfen

StackOverflow https://stackoverflow.com/questions/624262

  •  05-07-2019
  •  | 
  •  

Frage

Wie kann ich die Entwicklung einer Website starten, die von Mobiltelefonen zu sehen sind? Zum Beispiel, wenn Sie Google Mail-Website von einem iPhone zu sehen sucht der Website unterscheidet sich von der normalen Seite. Sie haben zwei differents Websites zu gestalten, dies zu tun? Wie kann ich wissen, ob die Website von einem mobilen Browser zugegriffen wird?

War es hilfreich?

Lösung

Sie haben nicht zwei verschiedene Websites zu entwerfen, aber Sie wahrscheinlich wollen, wenn es wichtig ist, mobile Nutzer auf Ihre Website zugreifen zu lassen.

Es gibt ein paar Möglichkeiten, mit diesem Problem, die jeweils mit Vor-und Nachteilen umgehen. Ich gehe davon aus, dass Ihre Website seine Informationen in einer Datenbank hat, und veröffentlicht diese Daten eine Reihe von Vorlagen? (Wie eine Ruby on Rails oder Django-Website, eine PHP-Website, ein Blog, etc.). Wenn Sie haben handcodierte eine Reihe von statischen HTML-Seiten, dies für Sie viel mehr arbeitsintensiv sein wird

1: Same HTML, verschiedene Stylesheets für SCREEN und MOBILE

Die Idee: Sie liefern die gleiche HTML-Struktur auf alle Anfragen. Sie erstellen ein Stylesheet für SCREEN und eine für MOBILE.

Gut: Für Sie, der Programmierer. Es ist einfacher für Sie 2 Sheets zu halten, als es zwei völlig getrennte Vorlagen-Websites zu pflegen ist.

Bad: Für die Benutzer. Eine Website, die auf einem mobilen Gerät zu verwenden, in der Regel einfach ist, ist ineffizient für einen normalen Browser; und Websites für einen Desktop / Laptop optimiert oft kläglich auf einem mobilen Gerät. Offensichtlich es hängt davon ab, wie Sie Ihre Seiten codieren, aber in den meisten Fällen wird Ihre normale Website zu einem mobilen Browser drängen schlecht für die Nutzer. (Siehe http://www.useit.com/alertbox/mobile-usability.html für eine Zusammenfassung der aktuellen Usability-Forschung auf mobile Websites von Jakob Nielsen).

2: Pflegen separate Sites

(Gmail unterhält sogar mehr als zwei Systeme Sie haben grundsätzlich verschiedene Container-Anwendungen / Vorlagen, die die gleichen Daten verarbeiten: die volle AJAX Browser-Version, die einfache HTML-Browser-Version, eine grundlegende Handy-Version, eine native Blackberry-Anwendung und einen native iPhone-Anwendung.)

Dies ist der sich abzeichnende Standard für Websites, die einen mobilen und Desktop sowohl darüber, dass Präsenz wirklich. Es ist mehr Arbeit für Sie, aber es ist viel besser für die Benutzer im Allgemeinen.

Auf der anderen Seite, können Sie wahrscheinlich eine abgespeckte reine HTML-Seite erstellen, die für die mobile funktionieren und wirkt als Rückfall für den seltenen Web-Benutzer, die JavaScript nicht haben oder die großen Fragen der Zugänglichkeit hat, die sie daran hindern die „voll“ Website.

Auch abhängig von Ihrer Nutzerbasis: in den USA, haben die Menschen im allgemeinen Zugang zu einem Desktop / Laptop und ihre mobilen Geräte für Hilfszugang nutzen. Zum Beispiel, buche ich meine Flugtickets und Mietwagen meinem Desktop-Computer, aber ich möchte, dass meine Reservierung Code auf meinem Handy suchen. In vielen Fällen können Sie mit Einschränkung der Funktionalität wegzukommen, die Sie auf der mobilen Website zur Verfügung stellen, und erfordern den vollständigen Computer ungewöhnlich Anwendungsfälle durchzuführen.

Die grundsätzliche Vorgehensweise:

  1. Design & bauen UIs für mobile und Bildschirm.
  2. Starten Sie die Websites, auf zwei verschiedenen URLs; die Schwellen Konvention ist www.yoursite.com für die Desktop-Version und m.yoursite.com für die mobile Version. (Dies ermöglicht es Benutzern, m.yoursite.com direkt zu durchsuchen, wenn sie von der Konvention kennen.)
  3. Ein www.yoursite.com, schnüffeln den User-Agent und Test, um zu sehen, ob der Browser des Benutzers mobil ist. Wenn ja, leitet die Benutzer auf m.yoursite.com.
    1. Es gibt Sniffer in verschiedenen Server-Sprachen geschrieben (PHP, Perl, was auch immer), die Sie wahrscheinlich verwenden können. Überprüfen Sie die Lizenzen. Hier ist ein Beispiel für einen Sniffer in php geschrieben.
    2. Wikipedia Artikel über User-Agent-Sniffing : „Websites speziell auf Mobiltelefone ausgerichtet, wie NTT DoCoMo I-Mode oder Vodafone Vodafone Live! Portale, stützen sich oft stark von User-Agent-Sniffing, da mobile Browser oft stark voneinander unterscheiden. viele Entwicklungen in Mobile Browsing gemacht wurden in den letzten Jahren, während viele ältere Telefone, die tun nicht diese neue Tech besitzengien sind noch stark genutzt. Daher werden mobile Web-Portale erzeugen oft ganz anderen Markup-Code abhängig von dem Mobiltelefon verwendet, um sie zu suchen. Diese Unterschiede können klein sein (zum Beispiel Ändern der Größe bestimmter Bilder kleinere Bildschirme passen), oder recht umfangreich (z Darstellung der Seite in WML statt XHTML). "
  4. Ein m.yoursite.com, einen Link zurück zu www.yoursite.com. Benutzer, die auf diesen Link klicken sollte nicht auf die mobile Website umgeleitet zurück sein, und wie Sie erreichen dies hängt von der jeweiligen Implementierung.

Sie möchten folgen Quirksmode für seine Schwellen Artikel über mobilen Test.

3: Templates Ausgang unterschiedliche Datenabschnitte in Abhängigkeit von dem Benutzer-Agenten und Wartung separate Sheets

Wie (2), das erfordert, dass Sie den User-Agenten schnuppern. Im Gegensatz zu (2), verwenden Sie immer noch alle die gleiche Seite Logik und nicht zwei separate Websites pflegen müssen. Dies könnte in Ordnung sein, wenn Sie nur mit einem Blog oder eine Website handelt, die vor allem über das Lesen von Daten ist.

Ihre Template-Code, können Sie sagen Dinge wie 

if( $useragentType != mobile ) {
    echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}

Auf diese Weise können Sie meist einen Satz von Vorlagendateien beizubehalten. Sie können auch die Seiten optimieren, dass Sie Ihre Handy-Nutzer versenden, so dass sie keine große aufgebläht Seite bekommen, wenn sie wollte nur Ihre Blog-Post lesen oder was auch immer.

Andere Tipps

Die Mehrheit der mobilen Geräte in diesen Tagen Unterstützung „mobile Sheets“, die einfach alternativen Stylesheets sind die Dinge einfacher angezeigt werden soll. Sie können ein mobiles Sheet auf Ihrer Website in gewohnter Weise hinzufügen und das media="handheld" Attribut: 

<link rel="stylesheet" type="text/css" href="/mobile.css" media="handheld" />

Dann werden diese Stile zu Handys gelten.

Das einzige Problem bei dieser Methode ist, wenn Ihr HTML sperrig ist, kann es eine Weile dauern, bis die Seite zu laden, da die meisten mobilen Browser langsamer sind (außer Opera Mini). Deshalb sind die größeren Websites wie flickr und digg Verwendung getrennten Standorten.

Zusätzliche Hinweise:

  • Sperrige HTML hat keinen Einfluss auf Opera Mini so viel, weil es einen Proxy verwendet, die die Wiedergabe von außen tut dann ein spezielles „Bild“ sendet das Gerät an.
  • Verwenden Sie einfache, saubere HTML dann können Sie das gleiche zu normalen Browsern und mobilen Geräten senden
  • Sie müssen auf den Kombinationen von Stylesheets mit media Attribute überprüfen. IIRC Zugabe der obigen Code-Browser die erste Sheet ignorieren machen. Wenn Sie media="all" zum ersten hinzufügen, werden beide verwendet werden (und Sie können somit die ursprünglichen Arten, anstatt beginnen außer Kraft setzen neu).

Für die Überprüfung, wie ein weppage in einem Einsatz mobiler Browser sieht Opera Mini Emulator

Schauen Sie sich die WURFL Projekt. Seine Absicht ist es, Entwickler zielen mehrere Telefon Browser zu helfen, und begann Weg zurück, bevor es Mobile Safari, zurück in den Tagen HDML-, WAP und XHTML-MP war. Es ist up-to-date jedoch Möglichkeiten moderner Geräte wie iPhone zu speichern. Es hat Daten über mehr als 400 Geräte und verfügt über Bibliotheken in Java, PHP, Perl, Ruby, Python, .NET, C ++. Je nachdem, wie breit Sie Ihr Handy-App Ziel ist es etwas zu sehen. Hier eine Liste von Websites, die WURFL verwenden.

Ein weiteres verwandtes Projekt geschrieben von Luca Passani (Mitbegründer und Betreuer des WURFL) ist Switcher . Sie können diese verwenden, um automatisch auf die mobile Version Ihrer Website zu umleiten.

Keep it simple, denken Opera Mini und Sie werden es richtig machen. (IPhone hat mehr weg einen normalen Browser ...)

  1. Fokus auf Inhalt

  2. Vermeiden Plugins

  3. Folgen Sie den Web-Standards

  4. Separate Inhalt von Layout / Design, die Verwendung CSS so viel wie posible.

  5. Mit Text und Bildern.

Fügen Sie den Rest der Glocken und Trillerpfeifen, wenn müssen Sie, aber stellen Sie sicher, dass die die Website: Inhalt ist immer verfügbar, auch wenn die Glocken und Trillerpfeifen sind ausgeschaltet. Wenn Sie die Seite mit einem einfachen Browser wie Luchs und normalen Browser wie Firefox surfen können, dann sind Sie auf dem richtigen Weg.

Für weitere Informationen fühlen sich frei, die jede Browser-Kampagne

besuchen

Edit: Falls es nicht offensichtlich ist, dass Sie mit verschiedenen CSS arbeiten für verschiedene Arten von Browsern, aber immer den gleichen Inhalt verwenden. Besuchen Sie die CSS Zen Garden für eine schöne Demo.

Update: Hinzufügen eines Links zu CSS-Medientypen, und wie bereits von anderen erwähnt ist die Handheld-Option, die interessant ist.

  

Sie haben zwei differents Websites zu gestalten, dies zu tun?

Ja

  

Wie kann ich wissen, ob die Website von einem mobilen Browser zugegriffen wird?

Ihre Programmiersprache hat wahrscheinlich eine Art der Betrachtung durch die Informationen des Kunden. PHP, zum Beispiel, hat eine superglobalen Variable $_SERVER, die alle Arten von Informationen sowohl dem Serving-Server hat, und der Besuch Client. In diesem Fall würden Sie im Wert von $_SERVER['HTTP_USER_AGENT'] interessiert sein, die folgende Ergebnis geben würde, soll ich eine Seite besuchen: 

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_6; en-us) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16

Das sagt Ihnen, dass ich Mac OS X 10.5.6 renne, mit Safari 4.0. Es gibt bekannte Keywords für verschiedenen mobilen Browser. Eine Version von iPhone-Browser, zum Beispiel, hat den folgenden User-Agenten: 

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

das „iPhone“ bereits gibt es weg, aber wird durch die Schlüsselwörter „Mobile“ und „Safari“

bestätigt

Die meisten Websites haben eine etwas andere Sub-Domain für mobile Websites (die meisten Gebrauch „m“). z.B. flickr verwendet m.flickr.com

(es gibt eine Empfehlung zu verwenden, um den .mobi TLD aber ich habe nie dass verwendet) zu sehen

Machen Sie das Design super einfach, nicht zu viele Grafiken verwenden, wo man sie so klein wie möglich zu halten brauchen. Diese für das Design könnte hilfreich sein.

Ich würde wahrscheinlich einen anderen Satz von Seiten für mobile Anwender konstruieren, die Verwendung der gleichen Geschäftsobjekte zu machen usw., wie Sie für die Haupt-Website verwenden.

Wenn die Unterschiede zwischen der Gestaltung der beiden Sehenswürdigkeiten nicht zu groß sind, können Sie in der Lage sein, einen Weg zu bekommen mit nur separaten CSS-Dateien dienen?

Ihre Website sollte auf das Mobiltelefon limiited, die auf maximalen Anforderungen unterstützen kann. Sie können nicht einmal alle Handy unterhalten.

Ihre Website sollte anderen Satz von CSS-Stil hat, und HTTP-Agent muss den Client-Typen überprüft Antrag Css Auswahl nach stattfinden soll.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top