Je commence le processus d'apprentissage des outs des sites de développement des navigateurs Web mobiles. Y a-t-il de bonnes ressources / communautés en ligne qui discutent des problèmes de développement de sites spécifiques mobiles?
Ma compréhension initiale est que pour couvrir différents téléphones, vous devez construire un site qui est activé pour les navigateurs avec le moteur Webkit (iPhone, Android, etc.) et un autre site plus basique pour d'autres navigateurs plus anciens, est-ce que cette hypothèse est-elle correcte?
aussi ce qui se développe pour webkit signifie exactement? Comment est-il différent de simplement utiliser JavaScript / CSS / HTML? Est-ce la même chose, sauf que vous vous limitez aux fonctions spécifiques au WebKit et à CSS? J'ai regardé sur le site Webkit, mais cela ne l'a pas expliqué dans ces termes.
Y a-t-il d'autres Snafus que je dois faire attention au développement de navigateurs mobiles?
5 Réponses :
Votre hypothèse est correcte, vous devrez développer plusieurs versions de votre site ciblées à différents types de navigateurs.
WebKit est le moteur utilisé par Safari (Safari mobile), Chrome et Andriod Browser (Chrome mobile?) Vous pouvez utiliser JavaScript standard, XHTML et CSS, la principale chose qui rend votre site "Fraîchée aux doigts "Étant donné que ces appareils sont tous entraînés par des écrans tactiles.
Qu'est-ce que je veux dire par "FAT-FIGK-ALLICK", c'est que vous avez de grandes liens / boutons faciles à toucher avec votre doigt, la plupart des navigateurs mobiles sont bons pour approximatiser, ce qui vous liez à toucher, mais si vous avez beaucoup de trucs bloqués ensemble, il est souvent guss mal.
Une autre consultation est la taille de l'écran et ainsi la largeur / hauteur de votre site.
La meilleure illustration que j'ai présente à partir de ARS Technica - Checkout leur site dans votre navigateur de bureau, puis consultez leur site dans votre navigateur mobile. C'est une version très slick du site. ( http://www.arstechnica.com/ )
WebKit est un moteur de rendu conçu pour permettre aux navigateurs Web de rendre les pages Web. Il fournit l'ensemble de classes pour afficher le contenu Web sous Windows et implémenter différentes fonctionnalités fournies par navigateur (telles que des liens, FWD / Backward, etc.).
Vous n'avez pas besoin de construire les différents sites pour différents moteurs de rendu tels que WebKit. La conception du site Web mobile doit considérer la taille de l'écran et la manière dont différents composants ont l'air / se comportent dans différents moteurs de rendu.
regarde ce Question pour Plus de détails sur la construction du site mobile convivial.
Si vous souhaitez prendre en charge les navigateurs plus âgés, vous devez disposer de plusieurs sites. Mais regardez d'abord des statistiques sur le navigateur mobile pour décider si cela en vaut la peine. Si vous souhaitez simplement faire fonctionner votre site Web existant pour iPhone / Android ou d'autres téléphones avec des navigateurs de niveau A, vous pouvez personnaliser avec un CSS sympathique mobile (pour les petits écrans). Mais pour obtenir de bonnes performances sur des périphériques mobiles sur des connexions lentes / peu fiables, vous devez probablement avoir un HTML distinct séparé.
Apple a un très bon guide pour vous aider à optimiser votre site pour iPhone. La plupart d'entre elles travailleront également sur les navigateurs mobiles modernes: http://developer.apple.com/ Safari / Bibliothèque / Documentation / Appleipplications / Référence / SafariWebContent / UtilisationTheViewport / UtilisationTheViewport.html
Peter Paul Koch a fait une excellente recherche sur différents navigateurs mobiles. Il a plusieurs articles, mais celui-ci est un bon départ: http://www.quirksmode.org/mobile/browser.html
Comme Nate Bross mentionné, vous devez optimiser les périphériques tactiles. Malheureusement, il est très difficile de savoir si un appareil a touché ou non, car il n'y a pas de requête médiatique pour cela. Vous pouvez faire de l'agent utilisateur reniflant pour certains appareils, mais je ne le recommande pas. Plus de discussion ici: Optimiser le site Web pour les périphériques tactiles
pour le moment, je détecte les événements tactiles (avec une exception pour Chrome). Si cela revient vrai, j'injecte une touche CSS. Un peu méchant, mais les autres options sont pires: Vous avez spécifiquement demandé des sites pour les navigateurs Web mobiles, mais vous pouvez également consulter les possibilités de créer une application Web mobile. . Cela ressemble à une application iPhone (ou Android pour cette affaire), mais elle est construite avec l'aide de HTML5. Vous pouvez faire de jolies animations slick avec le CSS3 dans l'image WebKit et iPhone contient également des balises Meta pour masquer les barres d'outils de navigation Safari. Les utilisateurs peuvent ensuite signaler votre page à leur écran d'accueil et fonctionnera comme une application iPhone normale. Bien sûr que vous êtes limité au navigateur et à la performance. Mais vous pouvez créer des applications multiplateform :) HTML5 + JS est la seule language multi-mobile-plate-forme Steve Jobs approuve et à l'aide de PhoneGap, vous pouvez même l'obtenir dans l'AppStore!
Si web-app sonne intéressant, vous devez consulter JQTouch , Plugin de transition JQuery CSS et bien sûr Construire des applications iPhone avec HTML, CSS et JavaScript par Jonathan Stark.
Si votre site est assez simple (il suffit de livraison de contenu), je suggère un service comme Mobify: http: // Mobify. Moi /
Beaucoup de grandes publications l'utilisent, et j'ai aussi. En fait, ARS Technica (dont Nate Bross a pointé dans une réponse antérieure) utilise ce service pour afficher leur contenu mobile.
Vous avez le contrôle du style, et c'est à ce sujet, donc si votre site est plus complexe, cela pourrait ne pas être pour vous. Sinon, c'est un bon service. Vous pouvez avoir un site mobile presque aussi rapidement que nécessaire pour le DNS pour l'adresse de votre site mobile à mettre à jour.
Je suis en désaccord que vous devez construire plusieurs versions d'un site Web.
Un simple site Web HTML5 fonctionnera sur tous les navigateurs mobiles et les navigateurs de bureau.
La beauté des derniers développements de HTML5 est que vous pouvez utiliser de nouvelles fonctionnalités d'iPhone / Android, telles que la géolocalisation et les navigateurs plus anciens ignoreront simplement le code JS si vous le mettez soigneusement dans l'absence de déclarations de capture.
Pour les problèmes de type "FAT FRICK", vous pouvez servir une CSS différente qui fait plus gros des boutons si vous le devez vraiment. Les bons navigateurs doivent rendre les boutons par défaut faciles à appuyer dans tous les cas.
Gardez-le simple et vous n'aurez pas à voir ces approches dépendantes de périphérique fragmentées et coûteuses. Écrivez HTML5 à la main et utilisez un validateur . Bonne chance!