Planification et création d'un site mobile pour votre site principal [fermé]

Question

Nous sommes dans les premières étapes de planification de la création d’un site mobile pour l’un de nos clients.Ce site mobile viendra en complément du site principal que nous avons déjà construit pour eux.Nous avons déterminé que le contenu constituerait une petite sous-section du site principal et ciblerait le public principal censé utiliser le site.

En parcourant quelques exemples de sites mobiles, nous avons remarqué que de nombreux sites dont l'URL contient WAP ne sont en réalité que des fichiers HTML simplifiés. http://wap.mlb.com n'est pas vraiment compatible WAP mais simple HTML.

Ma question est-ce que le WAP est une pensée du passé ?Les smartphones et l'iPhone ayant la capacité de restituer des sites tels quels, devons-nous nous soucier de WML et WAP ou une version HTML allégée suffira-t-elle ?

Pouvez-vous également recommander un blog ou un didacticiel ou répondre ci-dessous sur la meilleure façon de vérifier les appareils mobiles ?En tant que programmeur, avons-nous besoin de connaître chaque variante de l'agent utilisateur afin de les rediriger vers notre site mobile ?

Enfin, programmeriez-vous un site mobile pour le navigateur iPhone/Touch Safari ou laisseriez-vous simplement le site tel quel ?

Answer 1

Les téléphones les plus récents sont livrés avec WAP2 qui utilise le profil HTML Mobile (XHTML MP), qui est assez similaire au HTML normal.Les téléphones plus anciens utilisent le Wireless Markup Language (WML).

En fonction de votre public, j'envisagerais de créer une version du site adaptée aux téléphones mobiles en utilisant XHTML MP et d'abandonner complètement WML.Par compatible avec les téléphones mobiles, j'entends des graphismes légers, peu de JavaScript et une navigation simple.

Pour vérifier les capacités des différents téléphones portables, consultez WURFL.

Aussi, vous voudrez peut-être jeter un œil à Meilleures pratiques du Web mobile du w3c.

Answer 2

Voici deux choses que vous pouvez faire pour améliorer la prise en charge des iPhones sans trop de travail :

Faire défiler la page vers le haut pour masquer la barre d'URL :

<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>

Et définissez la mise à l'échelle pour la largeur de la page (il est préférable de faire quelques tests et de jouer avec cela, recherchez également d'autres exemples qui peuvent utiliser user-scalable=true):

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

Answer 3

Je vous recommande fortement de consulter Cameron Molls livre Conception de sites Web mobiles.Il ne s'agit pas tant d'un guide technique pour créer des sites optimisés pour les mobiles, mais vous fait réfléchir aux différentes options disponibles et résume les avantages et les inconvénients de chacune.Cela vous fera certainement réfléchir à l'approche que vous adoptez et si elle est la bonne.Je pense qu'il contient également des indicateurs vers des ressources qui aident à détecter les demandes d'appareils mobiles vers votre site. Il existe différentes options.

Answer 4

À partir de maintenant (2014)

Nous n'avons peut-être pas besoin d'un site séparé pour les appareils mobiles, mais nous pouvons opter pour des bibliothèques frontales comme Amorçage Twitter qui utilise rendu réactifpour que le site s'adapte à la taille de l'écran que ce soit Tablette ou Appareil mobile ou Bureau

L'un des principaux avantages est qu'il faut moins d'entretien par rapport à des sites Web distincts pour mobile et ordinateur de bureau.

Pour en savoir plus sur Amorçage Twitter Cliquez sur ici

Answer 5

Je pense que la principale différence entre les téléphones 2,5G et les nouveaux téléphones 3G est que si les téléphones 2,5G utilisaient leurs propres navigateurs, les navigateurs des téléphones 3G sont devenus beaucoup plus similaires/précis dans leurs capacités de rendu.

D'un autre côté, vous pouvez utiliser CSS pour afficher le même HTML dans un format grand écran ou dans un petit format optimisé pour les mobiles. Je suppose donc que ce qui s'est passé, c'est que l'approche "HTML simple" semble être la voie la moins difficile. prendre.En outre, les mises en page sans table permettent aux sites Web de mieux évoluer, ce qui facilite le rendu d'un site dans les formats grand et petit écran.

La question finale sera donc celle du marché cible.Ciblez-vous un public féru de technologie qui aura tendance à disposer de téléphones entièrement compatibles 3G ?Ciblez-vous les personnes qui pourraient disposer au maximum de 2,5G ?

Answer 6

Mon expérience est que cela dépend vraiment de ce que vous essayez de faire et de qui/où se trouvent les utilisateurs.

Bien que le WAP ait eu beaucoup de mauvaise presse, sa force réside dans les connexions à faible bande passante et à latence élevée.Le contenu WML est optimisé par la passerelle de l'opérateur pour réduire considérablement la quantité de données transmises par voie hertzienne.Si vous possédez un iPhone, etc., dans les zones bénéficiant d'une solide couverture 3G, vous pouvez vous permettre d'opter pour un contenu plus riche, mais si vous souhaitez qu'une application fonctionne toujours bien dans des zones plus reculées, le WAP présente un gros avantage.

Une chose à surveiller avec le WAP est que la qualité de la prise en charge du WAP sur les combinés varie beaucoup (je suppose que vous diriez également la même chose pour les navigateurs Web des smartphones).La plupart d'entre eux affichent les pages correctement, mais la gestion des formulaires est vraiment horrible dans certains navigateurs.

Si vous modifiez le contenu en fonction de l'agent utilisateur, vous devez également fournir un moyen explicite d'accéder à un type spécifique de contenu (par ex.uri séparés) - le choix automatisé n'est pas toujours correct et vous souhaitez que le client puisse le remplacer.

Si vous optez pour le développement WAP, consultez WinWAP - un navigateur WAP basé sur Windows.

Answer 7

Si vous souhaitez dépenser une toute petite somme d'argent, vous pouvez trouver un exemplaire d'occasion de mon livre "Guide du développeur d'applications Web Palm OS" sur Amazon pour moins de 1 $.Bien que les conseils spécifiques concernant les anciens appareils Palm VII ne s'appliquent plus, quelques sections sur la création de sites Web mobiles peuvent toujours s'appliquer.Mon conseil de base est le suivant :réduisez la taille des pages avec d'abord des informations pertinentes, puis des liens de navigation ;transmettre du contenu générique/passe-partout vers d'autres pages ;essayez d'optimiser pour réduire le temps qu'un utilisateur passe sur une seule page ;et évitez de télécharger beaucoup d'objets (images, fichiers JavaScript) pour une page afin de réduire la latence.

Answer 8

Le code:Le validateur w3 renvoie 11 erreurs lorsque je l'utilise.Voici la page d'index dans laquelle il a été essayé :Vous n'aurez pas plusieurs lignes non utilisées.Ce sont des lignes de modèles.

<!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”>