Comment puis-je concevoir un site pour les téléphones mobiles

Question

Comment puis-je démarrer le développement d'un site pouvant être parcouru depuis un téléphone mobile? Par exemple, si vous naviguez sur le site Gmail depuis un iPhone, le site est différent du site normal. Vous devez concevoir deux sites différents pour faire cela? Comment savoir si le site est accessible via un navigateur mobile?

Answer 1

Vous n'avez pas à concevoir deux sites différents, mais vous le souhaitez probablement s'il est important de laisser les utilisateurs mobiles accéder à votre site.

Il existe plusieurs façons de traiter ce problème, chacune avec ses avantages et ses inconvénients. Je suppose que votre site a ses informations dans une base de données et les publie à l'aide d'un ensemble de modèles? (Par exemple, un site Ruby on Rails ou Django; un site PHP; un blog; etc.) Si vous avez codé à la main un tas de pages HTML statiques, cela nécessitera beaucoup plus de travail.

1: même HTML, différentes feuilles de style pour SCREEN et MOBILE

L'idée: vous fournissez la même structure HTML pour toutes les demandes. Vous créez une feuille de style pour SCREEN et une autre pour MOBILE.

Bien: Pour vous, le programmeur. Il est plus facile pour vous de gérer deux feuilles de style que de gérer deux sites de modèles totalement distincts.

Mauvais: pour vos utilisateurs. Un site facile à utiliser sur un appareil mobile est généralement inefficace pour un navigateur normal; et les sites optimisés pour un ordinateur de bureau / un ordinateur portable échouent souvent misérablement sur un appareil mobile. Évidemment, cela dépend de la façon dont vous codez vos pages, mais dans la plupart des cas, le transfert de votre site Web normal vers un navigateur mobile sera préjudiciable pour vos utilisateurs. (Voir http://www.useit.com/alertbox/mobile-usability.html pour un résumé des recherches récentes de Jakob Nielsen sur la convivialité des sites mobiles.)

2: gérez des sites distincts

(Gmail gère même plus de 2 systèmes! Ils ont en principe différents modèles d’applications / modèles de conteneur qui traitent les mêmes données: la version complète du navigateur AJAX, la version du navigateur HTML simple, une version mobile de base, une application native Blackberry et un application iPhone native.)

Il s’agit de la norme émergente pour les sites qui souhaitent réellement être présents à la fois sur leur mobile et sur leur ordinateur. C'est plus de travail pour vous, mais en général c'est beaucoup mieux pour vos utilisateurs.

D'un autre côté, vous pouvez probablement créer un site purement HTML dépouillé qui fonctionne pour les mobiles et qui sert de solution de secours pour les rares internautes qui ne disposent pas de javascript ou qui ont des problèmes d'accessibilité majeurs qui les empêchent d'utiliser le " complet " site.

En outre, selon votre base d'utilisateurs: aux États-Unis, les utilisateurs ont généralement accès à un ordinateur de bureau / portable et utilisent leurs appareils mobiles pour un accès auxiliaire. Par exemple, je réserve mes billets d'avion et ma voiture de location à l'aide de mon ordinateur de bureau, mais je souhaite consulter mon code de réservation sur mon mobile. Dans de nombreux cas, vous pouvez vous en sortir en limitant les fonctionnalités que vous proposez sur le site mobile et en demandant à l'ordinateur complet d'effectuer des cas d'utilisation peu communs.

La procédure de base:

1. Design & amp; construire des interfaces utilisateur pour mobile et écran.
2. Lancez les sites à deux URL différentes. la convention émergente est www.votresite.com pour la version de bureau et m.votite.com pour la version mobile. (Cela permet aux utilisateurs de naviguer directement sur m.votresite.com s’ils connaissent la convention.)
3. Sur www.votresite.com, détectez l'agent utilisateur et vérifiez si le navigateur de l'utilisateur est mobile. Si tel est le cas, dirigez l'utilisateur vers m.votresite.com.
   1. Vous pouvez probablement utiliser des renifleurs écrits dans différentes langues de serveur (PHP, Perl, etc.). Vérifiez les licences. Voici un exemple de renifleur écrit en php .
   2. De article de Wikipedia sur la détection d'agent d'utilisateur : " Sites Web spécifiquement destinés aux téléphones mobiles, comme I-Mode de NTT DoCoMo ou Vodafone Live! les portails dépendent souvent beaucoup de la détection des agents d’utilisateur, car les navigateurs mobiles diffèrent souvent beaucoup les uns des autres. De nombreux développements dans la navigation mobile ont été réalisés ces dernières années, tandis que de nombreux téléphones plus anciens qui ne possèdent pas ces nouvelles technologies sont encore largement utilisés. Par conséquent, les portails Web mobiles génèrent souvent un code de balisage complètement différent en fonction du téléphone mobile utilisé pour les parcourir. Ces différences peuvent être faibles (redimensionnement de certaines images pour s'adapter à des écrans plus petits, par exemple) ou assez étendues (rendu de la page en WML au lieu de XHTML, par exemple). "
4. Sur m.votresite.com, fournissez un lien vers www.votresite.com. Les utilisateurs qui cliquent sur ce lien ne doivent PAS être redirigés vers le site mobile, et la manière dont vous y parviendrez dépend de votre implémentation.

Vous voudrez peut-être suivre Quirksmode pour son avenir articles sur les tests mobiles.

3: les modèles génèrent différents fragments de données en fonction de l'agent utilisateur et gèrent des feuilles de style distinctes

Comme (2), vous devez renifler l'agent utilisateur. Contrairement à (2), vous utilisez toujours la même logique de page et n'avez pas besoin de gérer deux sites distincts. Cela pourrait être acceptable si vous ne vous occupez que d'un blog ou d'un site Web qui traite principalement de la lecture de données.

Dans votre code de modèle, vous pouvez dire des choses comme

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

Cela vous permet de gérer la plupart des jeux de modèles. Vous pouvez également rationaliser les pages que vous envoyez à vos utilisateurs mobiles, afin qu'ils ne reçoivent pas une page volumineuse quand ils veulent simplement lire votre billet de blog ou quoi que ce soit.

Answer 2

La majorité des appareils mobiles de nos jours prennent en charge les "feuilles de style mobiles". qui sont simplement des feuilles de style alternatives pour montrer les choses plus simplement. Vous pouvez ajouter une feuille de style mobile à votre site de la manière habituelle et inclure l'attribut media = "portable" :

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

Ensuite, ces styles s’appliqueront aux mobiles.

Le seul problème avec cette méthode est que si votre code HTML est volumineux, le chargement de la page peut prendre un certain temps, car la plupart des navigateurs mobiles sont plus lents (sauf Opera Mini). C’est pourquoi les grands sites comme Flickr et Digg utilisent des sites distincts.

Notes complémentaires:

• Le volume HTML volumineux n'affecte pas autant Opera Mini, car il utilise un proxy qui effectue le rendu en externe, puis envoie une "image" spéciale. à l'appareil.
• Utilisez du code HTML simple et propre, vous pouvez ensuite envoyer le même message à des navigateurs et des appareils mobiles classiques
• Vous devrez vérifier les combinaisons de feuilles de style avec les attributs media . L'ajout du code ci-dessus par IIRC obligera les navigateurs à ignorer la première feuille de style Si vous ajoutez media = "tout" au premier, les deux seront utilisés (et vous pourrez ainsi remplacer les styles d'origine plutôt que de recommencer à zéro).

Answer 3

Pour vérifier l'aspect d'une page Web dans un navigateur mobile, utilisez Émulateur Opera Mini

Answer 4

Consultez le projet WURFL . Son objectif est d'aider les développeurs à cibler plusieurs navigateurs téléphoniques et a commencé bien avant l'avènement de Mobile Safari, à l'époque du HDML, du WAP et du XHTML-MP. Il est cependant à jour, stockant les capacités des appareils modernes tels que l'iPhone. Il contient des données sur plus de 400 appareils et des bibliothèques en Java, PHP, Perl, Ruby, Python, .NET, C ++. En fonction de la largeur que vous souhaitez cibler pour votre application mobile, il convient de regarder. Voici une liste des sites qui utilisent WURFL.

Un autre projet connexe rédigé par Luca Passani (cofondateur et responsable de WURFL) est Switcher . Vous pouvez l'utiliser pour rediriger automatiquement vers la version mobile de votre site.

Answer 5

Faites simple, pensez à opera mini et vous vous en sortirez bien. (iPhone a plus d'un navigateur normal ...)

1. Concentrez-vous sur le contenu

2. Évitez les plugins

3. Suivez les normes Web

4. Séparez le contenu de la présentation / conception, utilisez autant que possible les CSS.

5. Utilisez du texte et des images.

Ajoutez le reste des cloches et des sifflets si vous le souhaitez, mais assurez-vous que le contenu du site est toujours disponible, même lorsque les cloches et des sifflets sont désactivés. Si vous pouvez naviguer sur la page avec un simple navigateur comme Lynx et un navigateur normal comme Firefox, alors vous êtes sur la bonne voie.

Pour plus d'informations, n'hésitez pas à visiter la n'importe quelle campagne de navigateur

.

Modifier: Dans le cas où il n’est pas évident que vous travailliez avec différents CSS pour différents types de navigateurs, vous utilisiez toujours le même contenu. Visitez le css zen garden pour une belle démonstration.

Mise à jour: Ajouter un lien vers les types de média css et, comme d'autres l'ont indiqué, c'est l'option de l'ordinateur de poche qui est intéressante.

• http://www.w3.org/TR/CSS21/media.html

Answer 6

  

Vous devez concevoir deux sites différents pour le faire?

Oui

  

Comment savoir si le site est accessible via un navigateur mobile?

Votre langage de programmation a probablement un moyen de parcourir les informations du client. PHP, par exemple, a une variable superglobal $ _ SERVER qui contient toutes sortes d'informations du serveur serveur et du client visiteur. Dans ce cas, la valeur de $ _ SERVER ['HTTP_USER_AGENT'] vous intéresserait, ce qui donnerait le résultat suivant, si je visitais une page:

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

Cela vous indique que j'utilise Mac OS X 10.5.6 avec Safari 4.0. Il existe des mots-clés connus pour différents navigateurs mobiles. Une version du navigateur de l'iPhone, par exemple, comporte l'agent utilisateur suivant:

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

l'iPhone " donne déjà, mais est encore confirmé par les mots-clés & Mobile; Mobile " et "Safari"

Answer 7

La plupart des sites ont un sous-domaine légèrement différent pour les sites mobiles (la plupart utilise "m"). par exemple. flickr utilise m.flickr.com

(il est recommandé d'utiliser le TLD .mobi , mais je n'ai jamais vu que utilisé)

Faites en sorte que le design soit très simple, n’utilisez pas trop de graphiques, mais gardez-les aussi petits que possible. Ceci pourrait être utile pour la conception.

Je construirais probablement un ensemble de pages différent pour les utilisateurs mobiles, en utilisant les mêmes objets métier, etc. que ceux que vous utilisez pour le site principal.

Si les différences entre les conceptions des deux sites ne sont pas trop grandes, vous pourrez peut-être trouver un moyen de servir uniquement des fichiers CSS séparés?

Answer 8

Votre site doit être limité au téléphone mobile, ce qui peut répondre aux exigences maximales. vous ne pouvez même pas divertir tous les téléphones mobiles .

Votre site Web doit avoir un jeu de styles CSS différent et HTTP AGENT doit vérifier le type de client en fonction de la demande. La sélection Css doit avoir lieu.