Planen und Erstellen einer mobilfähigen Website für Ihre Hauptwebsite [geschlossen]

Question

Wir befinden uns in der ersten Planungsphase für den Aufbau einer mobilen Website für einen unserer Kunden.Diese mobile Website wird eine Ergänzung zur Hauptseite sein, die wir bereits für sie erstellt haben.Wir haben festgelegt, dass der Inhalt einen kleinen Unterabschnitt der Hauptseite darstellen wird und sich an die Hauptzielgruppe richtet, von der erwartet wird, dass sie die Seite nutzt.

Beim Durchsehen einiger mobiler Beispielseiten ist uns aufgefallen, dass es sich bei vielen Seiten, deren URL WAP enthält, eigentlich nur um vereinfachte HTML-Dateien handelt. http://wap.mlb.com ist nicht wirklich WAP-fähig, sondern einfaches HTML.

Meine Frage: Gehört WAP der Vergangenheit an?Müssen wir uns angesichts der Tatsache, dass Smartphones und iPhones die Möglichkeit bieten, Websites unverändert darzustellen, um WML und WAP kümmern, oder reicht eine abgespeckte HTML-Version aus?

Können Sie auch einen Blog oder ein Tutorial empfehlen oder unten antworten, wie man am besten nach Mobilgeräten sucht?Müssen wir als Programmierer jede Variation des Benutzeragenten kennen, um sie auf unsere mobile Website umzuleiten?

Würden Sie abschließend eine mobile Website für den iPhone-/Touch-Safari-Browser programmieren oder die Website einfach unverändert lassen?

Answer 1

Neuere Telefone sind mit WAP2 ausgestattet, das HTML Mobile Profile (XHTML MP) verwendet, das dem normalen HTML sehr ähnlich ist.Ältere Telefone verwenden Wireless Markup Language (WML).

Abhängig von Ihrer Zielgruppe würde ich in Betracht ziehen, eine mobiltelefonfreundliche Version der Website mit XHTML MP zu erstellen und WML vollständig aufzugeben.Mit Handyfreundlichkeit meine ich leichte Grafiken, wenig JavaScript und einfache Navigation.

Um die Funktionen verschiedener Mobiltelefone zu überprüfen, werfen Sie einen Blick auf WURFL.

Vielleicht möchten Sie auch einen Blick darauf werfen Best Practices für das mobile Web von w3c.

Answer 2

Hier sind zwei Dinge, die Sie tun können, um die Unterstützung für iPhones ohne großen Aufwand zu verbessern:

Lassen Sie die Seite nach oben scrollen, um die URL-Leiste auszublenden:

<script type="application/x-javascript">

  if (navigator.userAgent.indexOf('iPhone') != -1) {
    addEventListener("load", function() {
      setTimeout(hideURLbar, 0);
    }, false);
  }

  function hideURLbar() {
    window.scrollTo(0, 1);
  }

</script>

Und legen Sie die Skalierung für die Seitenbreite fest (am besten testen Sie etwas und spielen damit, suchen Sie auch nach anderen Beispielen, die nützlich sein könnten). user-scalable=true):

<meta name="viewport" content="width=320; user-scalable=false" />

Answer 3

Ich würde Ihnen wärmstens empfehlen, einen Blick darauf zu werfen Cameron Molls‘ Buch Mobiles Webdesign.Dabei handelt es sich nicht so sehr um eine technische Anleitung zum Erstellen von für Mobilgeräte optimierten Websites, sondern regt Sie zum Nachdenken über die verschiedenen verfügbaren Optionen an und fasst die Vor- und Nachteile der einzelnen Optionen zusammen.Wird Sie auf jeden Fall dazu anregen, darüber nachzudenken, welchen Ansatz Sie wählen und ob er der richtige ist.Ich denke, es enthält auch einige Hinweise auf Ressourcen, die dabei helfen, Anfragen mobiler Geräte an Ihre Website zu erkennen. Es gibt verschiedene Optionen.

Answer 4

Stand jetzt (2014)

Wir benötigen möglicherweise keine separate Site für mobile Geräte, sondern können stattdessen auf Front-End-Bibliotheken zurückgreifen Twitter-Bootstrap was nutzt reaktionsfähiges Renderingso dass sich die Seite gegebenenfalls an die Bildschirmgröße anpasst Tablette oder Mobilgerät oder Desktop

Einer der Hauptvorteile ist, dass es benötigt wird weniger Wartung im Vergleich zu separaten Websites für Mobilgeräte und Desktops.

Um mehr darüber zu erfahren Twitter-Bootstrap klicken Hier

Answer 5

Ich denke, der Hauptunterschied zwischen den 2,5G-Telefonen und den neuen 3G-Telefonen besteht darin, dass 2,5G-Telefone zwar ihre eigenen Browser verwendeten, die Browser auf 3G-Telefonen jedoch in ihren Darstellungsfähigkeiten viel ähnlicher/genauer geworden sind.

Andererseits können Sie CSS verwenden, um denselben HTML-Code entweder in einem großen Bildschirmformat oder einem kleinen, für Mobilgeräte optimierten Format darzustellen. Ich vermute also, dass der „einfache HTML“-Ansatz einfach der einfachste Weg zu sein schien nehmen.Darüber hinaus ermöglichen tabellenlose Layouts eine bessere Skalierung von Websites, was die Darstellung einer Website sowohl in großen als auch in kleinen Bildschirmformaten erleichtert.

Die letzte Frage wird also die nach einem Zielmarkt sein.Sprechen Sie eine technisch versierte Zielgruppe an, die in der Regel über vollständig 3G-fähige Telefone verfügt?Zielen Sie auf Personen ab, die höchstens über 2,5G verfügen?

Answer 6

Ich habe die Erfahrung gemacht, dass es wirklich davon abhängt, was Sie tun möchten und wer/wo sich die Benutzer befinden.

Während WAP viel schlechte Presse erhielt, liegt seine Stärke dort, wo Sie über Verbindungen mit geringer Bandbreite und hoher Latenz verfügen.Der WML-Inhalt wird vom Gateway des Netzbetreibers optimiert, um die über die Luft übertragene Datenmenge erheblich zu reduzieren.Wenn Sie über iPhones und dergleichen verfügen, können Sie es sich in Gebieten mit solider 3G-Abdeckung leisten, auf umfangreichere Inhalte zu setzen. Wenn Sie jedoch möchten, dass eine App auch in abgelegeneren Gebieten gut funktioniert, hat WAP einen großen Vorteil.

Bei WAP ist zu beachten, dass die Qualität der WAP-Unterstützung in Mobiltelefonen sehr unterschiedlich ist (das Gleiche gilt wohl auch für Smartphone-Webbrowser).Die meisten von ihnen zeigen Seiten in Ordnung an, aber die Formularverarbeitung ist in manchen Browsern wirklich schrecklich.

Wenn Sie Inhalte je nach Benutzeragent variieren, sollten Sie auch eine explizite Möglichkeit für den Zugriff auf eine bestimmte Art von Inhalt bereitstellen (z. B.separate URIs) – die automatische Auswahl ist nicht immer richtig und Sie möchten, dass der Client sie überschreiben kann.

Wenn Sie sich für die WAP-Entwicklung entscheiden, schauen Sie sich WinWAP an – einen Windows-basierten WAP-Browser.

Answer 7

Wenn Sie einen sehr kleinen Geldbetrag ausgeben möchten, können Sie ein gebrauchtes Exemplar meines Buches finden „Palm OS-Webanwendungs-Entwicklerhandbuch“ bei Amazon für unter 1 $.Während die spezifischen Tipps zu den alten Palm VII-Geräten nicht mehr gelten, gibt es einige Abschnitte zum Erstellen mobiler Websites, die möglicherweise immer noch zutreffen.Mein grundsätzlicher Rat ist dieser:Machen Sie die Seiten zunächst klein, mit relevanten Informationen und dann mit Navigationslinks.Verschieben Sie generische Inhalte/Standardinhalte auf andere Seiten.Versuchen Sie zu optimieren, um die Zeit zu reduzieren, die ein Benutzer auf einer einzelnen Seite verbringt.und vermeiden Sie das Herunterladen vieler Objekte (Bilder, JavaScript-Dateien) für eine Seite, um die Latenz zu reduzieren.

Answer 8

Der Code:Führt dazu, dass der W3-Validator 11 Fehler zurückgibt, wenn ich ihn verwende.Hier ist die Indexseite, auf der es versucht wurde:Sie werden nicht mehrere Zeilen verwenden, die nicht verwendet werden.Es sind Schablonenzeilen.

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Photography Aerial Commercial Portrait Underwater Wedding Tom Szabo</title>
<meta name="description" content="A Thomas Image professional photography serving Cleveland
Northeast Ohio Chagrin Falls Chardon Kirtland Madison Mentor Painesville Perry and Willoughby">
<meta name="keywords" content="A Thomas Image, professional, photography, cleveland, northeast ohio, chagrin falls, chardon, concord, kirtland, madison, mentor, painesville, perry, willoughby,commercial, marketing, advertising, executive, head shot, portrait, baby, children, family, high school senior, family reunion, underwater, scuba diving, pool party, wedding, bride, groom,">
<meta name="y_key" content="7b00158550200c1c">
<meta name="y_key" content="b5a3e0c1d778ff8a">
<meta name="msvalidate.01" content="7C6C4CEC2EB84051B1DCFEC558B77724" />
<meta name="verify-v1" content="G4nmk0aesZsCjneBo0W6kVlv5NpImVnTfsQ+fXEk1fA=" />
<meta name="viewport" content=”width=320,user-scalable=false”>