Regard sur la conception pour les appareils mobiles
Lorsque le premier iPhone est sorti, il a pris d'assaut le monde de la technologie. Depuis près de 5 ans déjà, le marché des smartphones a gagné en popularité, même Microsoft a été mis en concurrence avec son système d’exploitation Windows 7 et ses partenaires. Avec autant d'utilisateurs d'Internet sur leur smartphone, il est de bon sens de s'attendre à une augmentation agressive du nombre de sites Web mobiles..
Cependant, concevoir pour le Web mobile est une opération complètement différente avec la conception Web commune. Nos sites Web sont conçus pour un écran géant, mais la taille de l'écran du smartphone est bien trop petite comparée à celle, ce qui crée des problèmes de convivialité.. Nouvelles normes et pratiques de conception sont grandement nécessaires pour une meilleure conception de site mobile avec une expérience utilisateur fluide.
Dans ce guide, nous chercherons à concevoir un site convivial pour les navigateurs mobiles de smartphones. Je parlerai des meilleures pratiques et de l’outil de développement utile pour vous permettre de concevoir un meilleur site Web pour mobile, alors allons-y après saut!
Planifier une expérience utilisateur forte
Lorsque vous créez un site Web mobile, il est important de: gardez toujours vos utilisateurs à l'esprit, votre site Web est conçu et créé pour que les utilisateurs puissent en profiter. Les utilisateurs s'attendent généralement à ce que les sites Web mobiles se comportent de la même manière que l'environnement de bureau. garder l'expérience utilisateur conviviale devrait être votre objectif principal tout en construisant un site mobile réussi.
Il existe de nombreux concepts d’utilisabilité à considérer pour vos utilisateurs. Ces considérations incluent taille de l'écran, images en ligne, hyperliens, tailles de police, et navigation de page. Nous avons écrit sur la conception de la convivialité mobile pour que vous sculptiez votre site Web afin d’améliorer la convivialité. Outre le guide, vous devez toujours restez attentif aux nouvelles idées pour améliorer votre site.
Planifier une expérience utilisateur forte signifie également que vous devez Déterminez comment un utilisateur interagira avec votre site Web.. Sur un ordinateur de bureau, votre site Web peut être interagi avec une souris et un clavier, mais sur un smartphone, les utilisateurs seront tapotement, chiquenaude, et glisser leur chemin sur votre site. Vous devrez probablement concevoir le site de manière à ce que les utilisateurs puissent accéder facilement aux informations du site avec ces mouvements physiques.
Gardez les pages courtes et douces
La viande et les pommes de terre de tout site Web sont les Contenu de la page. Chacune de vos pages Web détient des quantités importantes d'informations utiles pour vos utilisateurs, tels que du texte, des photos ou des vidéos. Vous trouverez également des articles de presse et des articles de blog qui ne durent que quelques pages, ce qui peut aider à séparer le texte, mais cette technique n'est pas recommandée sur les appareils mobiles. nécessite plus de chargement de page, ce qui signifie plus de temps d'attente du côté utilisateur.
Sauf si c'est absolument nécessaire, je le recommande garder le contenu de votre page courte. Vous devriez également envisager de rendre cela semble doux par style de la police à une taille beaucoup plus grande et peut-être les images en mouvement à part. Lorsque votre contenu est entièrement affiché, il attire naturellement l’attention. En outre, l’optimisation simplifie considérablement la numérisation des pages. C’est aussi la raison pour laquelle un disposition en colonne unique convient parfaitement.
Dans la plupart des cas, les navigateurs mobiles ne chargent pas les pages Web aussi rapidement que les navigateurs de bureau, ce qui pourrait gêner vos lecteurs. C'est pourquoi vous devez optimiser le contenu et le site web pour le chargement de contenu à haute vitesse. Tu peux soit raccourcir l'article tout en conservant le contenu intégral, ou simplement supprimer les images inutiles. Mettez l'accent sur la simplicité plutôt que sur la beauté.
Votre navigation de base est la bouée de sauvetage de vos visiteurs qui cherchent à se déplacer d’une page à l’autre. Sur un appareil mobile, les liens à l’écran apparaîtront beaucoup plus petits par nature, ce qui rendra beaucoup plus difficile leur exploitation. Un tweak essentiel pour résoudre ce problème est de maximiser la police et l'espace pour vos liens de navigation, peut-être prendre toute la zone de bloc. Sinon vous pouvez concevoir la barre de navigation de manière à être similaire à la barre de tabulation de l'application iPhone réelle, comme celui présenté ci-dessus.
Création de styles CSS mobiles
Maintenant que nous savons comment optimiser le site Web mobile pour en améliorer la lisibilité et la convivialité, il serait bon de parler de styles CSS. Chaque feuille de style CSS contient de nombreux sélecteurs avec des propriétés relatives aux polices, aux tailles, au positionnement et aux paramètres d'affichage. Quand il s'agit de mobile, vous devriez faire attention à comment vos blocs se mettent en place.
(Source de l'image: Smashing Magazine)
Un domaine à commencer est de réinitialiser les largeurs de wrapper de votre site en pourcentage. Il est courant d’utiliser les pixels comme unité de positionnement, de hauteur de trait, de taille de police et de largeur de div, mais lorsque vous utilisez un mobile, vous souhaitez que vos pages soient fluide et transition entre chaque appareil naturellement. Définir les divs de conteneur à 100% de la largeur permettra au contenu de Remplissez facilement entre le mode portrait / paysage sans couler sur le bord.
Si vous envisagez de restructurer l’ensemble de votre mise en page, assurez-vous de frapper tout avec un réinitialiser. Également les paragraphes, les titres et les liens de navigation doivent tous être réglés sur bloc de visualisation; de sorte que vous obtenez ce sentiment de style d'impression linéaire. Repositionnez les marges et le rembourrage pour éliminer les ballonnements de votre mise en page.. Éviter les tables si possible, car ceux-ci ont tendance à rendre les résultats erronés entre les périphériques.
Les grandes images sont également un problème entre les appareils. La plupart des images de votre site Web généreront un rendu supérieur à 480 px et vous souhaiterez peut-être qu'elles ne cassent pas le conteneur. La première option est de définir leur largeur à 100% pour que les images puissent être redimensionnées naturellement. Il est certainement possible de créer différents ensembles d'images pour votre site web et les rendre différemment en fonction de l'agent de navigateur, mais honnêtement, cela ajoute simplement plus d'œuvres de votre côté, alors essayez de utilisez la technique seulement quand c'est vraiment nécessaire.
Conception de sites Web pour iPhone
La part de marché de la téléphonie mobile est relativement importante et divisée, mais Apple en a une grosse part avec ses iDevices. L'iPhone et l'iPad sont tous deux des appareils compatibles Internet mobiles dotés d'une fonctionnalité d'écran tactile intégrée. Ils disposent du même navigateur Web par défaut, Safari, et de nombreuses autres options..
Pour les sites Web spécifiques à l'iPhone, vous devez cibler la taille de l'écran. La taille d'écran fixe est définie sur 320px par 480px pour les anciens modèles d'iPhone et 640px par 960px pour iPhone 4 et iPhone 4S.
Les écrans d'iPhone sont limités à l'espace. Tu aurais dû un bloc de contenu qui s'étend aussi longtemps que nécessaire. Garder les éléments dans une seule colonne vous sauvera des maux de tête et permettre une mise en page fluide pour “remplir” les modes portrait et paysage. Pour cela, vous devrez probablement développer un autre modèle et trouver un moyen de vérifier si vos visiteurs utilisent un iPhone. Le petit extrait de PHP ci-dessous devrait bien fonctionner:
Fondamentalement, la logique tire notre global $ _SERVER variable pour l'agent HTTP et vérifie si le mot “iphone” apparaît n'importe où. Si oui, nous savons que notre visiteur utilise un iPhone et à partir de là, nous pouvons afficher un code HTML légèrement différent, voire une toute nouvelle disposition de modèle! Cela pourrait aussi être utilisé pour inclure une feuille de style spécifique à l'iPhone, changer le titre de votre page, supprimer des images ou presque tous les effets dynamiques.
Pour servir de nouveaux styles, il existe un moyen plus simple. Comme mentionné précédemment, la taille d'écran maximale pour l'iPhone est de 960 pixels de large. Par conséquent, avec les nouvelles requêtes de médias CSS3, vous pouvez ajouter des styles directement dans la feuille de style principale de votre site. seulement afficher sur iPhone. Ci-dessous, un petit exemple de code:
@ Écran multimédia et (largeur maximale du périphérique: 960 pixels) / * iPhone css * /
Cela fonctionne parce que CSS peut maintenant détecter les agents de navigation et leurs propriétés. La largeur maximale d'écran est l'une des propriétés pouvant également être détectées.
Le site Web mobile tout-en-un pour les appareils iPhone n’est pas trop difficile à concevoir, il y a trop d’exemples à citer, par exemple, CSS pour iPhone. Tenez-vous occupé à étudier et n'ayez pas peur de expérimenter de nouvelles techniques de conception d'interface utilisateur.
Script jQuery mobile
La majorité des développeurs Web front-end sont familiers avec la bibliothèque jQuery. Il offre un raccourci fantastique pour les effets de codage, les animations, les menus déroulants et de nombreuses autres fonctionnalités du navigateur. Il devient encore plus impressionnant avec l'annonce de jQuery Mobile. Il est pas recommandé de sauter dans la technologie directement et chargez votre site Web avec des effets partout, mais à des fins de test, les fonctionnalités avancées peuvent très bien jouer.
jQuery Mobile est un peu différent de jQuery classique, car il vous donne un environnement complet sur lequel vous pouvez construire. Lorsque vous travaillez avec leurs fichiers, il ne s'agit pas uniquement de JavaScript, mais également de styles CSS pour les boutons, les liens et les effets de transition. Vous écrivez toujours des pages Web en code HTML, mais l'équipe de jQuery Mobile a fourni de nombreuses fonctionnalités de conception d'interface utilisateur en option. Nous pouvons faire beaucoup de choses avec ce cadre, mais depuis le framework est encore en beta, collons à des effets simples.
Un petit tutoriel sur le blog DevGrow fournit quelques exemples impressionnants. Le site officiel propose également des démonstrations à essayer. Notez que nous utilisons l'attribut HTML, transition de données d'ajouter des effets d'animation avec l'une des valeurs prédéfinies. Ceux-ci incluent slide, pop, flip, fade, etc. Consultez le petit exemple de DevGrow pour avoir un aperçu de ces effets..
Les effets et les transitions sont très soignés, et le fait de pouvoir construire une interface mobile entière strictement avec jQuery est également un énorme pas en avant pour cette plate-forme. leur bibliothèque, surtout avec le fait qu'il est non pris en charge par tous les principaux smartphones au moment de la rédaction (en particulier Windows Phone 7), mais cela ira sûrement mieux avec le temps.
En fin de compte, je vous recommande de vous familiariser avec ce nouveau framework mobile avant déployer en direct sur n'importe quel projet.
Outils de développement utiles
Les développeurs mobiles ne s'intéressent pas uniquement aux ressources de codage et de conception. Il existe également une forte demande pour les outils logiciels et les IDE, sans parler des puissants frameworks mobiles. Le développement Web est une tâche difficile qui nécessite un peu de dévouement, mais l'utilisation d'outils supplémentaires facilitera grandement votre travail..
Emulateur Mobile Opera
Vous cherchez un moyen de vérifier le rendu de votre site Web mobile? Cela peut être très pénible si vous n’avez pas de smartphone avec accès à Internet. Ou vous ne souhaitez simplement pas utiliser votre smartphone pour tester le site chaque fois qu'une mise à jour est transmise à votre serveur. Eh bien, Opera Mobile Emulator est un logiciel fantastique pour tester votre site web mobile..
L'émulateur prend en charge autour de 20 profils mobiles tels que Samsung Galaxy S, HTC Desire, et même une tablette comme Motorola Xoom. Il est également possible de définir le résolution personnalisée et densité de pixels à des fins de test intensif. Mieux encore, vous n'avez pas besoin de trop de travail de configuration, il vous suffit de faire quelques clics et vous êtes prêt à partir..
Le téléchargement est entièrement gratuit et le logiciel est exécuté dans les environnements Mac OS X et Windows. Leurs développeurs travaillent d'arrache-pied pour créer des normes Web appropriées et peaufiner leur moteur de rendu mobile. Je recommande leurs autres outils de développement si vous recherchez des outils supplémentaires pour vous aider tout au long du processus..
PhoneGap
Il n'y a pas eu beaucoup d'API développées sur HTML5 pour créer des applications mobiles solides. Notamment le paysage mobile manque de ces types de sites Web, ce qui explique pourquoi PhoneGap remplit si bien ce créneau. Leur plateforme vous permet facilement construire des applications HTML5 en tant qu'applications natives sur 6 plates-formes différentes.
Le processus fonctionne en compressant d'abord votre code et en le passant à travers le cadre d'application de PhoneGap. À partir de là, vos applications peuvent atteindre une grande partie du marché mobile, notamment Android, iOS, Windows Phone 7 et BlackBerry..
Si vous êtes un peu confus, ne vous inquiétez pas trop. Leurs pages de support décrivent parfaitement le processus et proposent des liens vers des ressources utiles. Les applications déjà développées ont été compilées dans un magnifique portefeuille de style bibliothèque. Découvrez leur collection complète d'applications que vous pouvez ensuite trier par appareils avec des captures d'écran.
Studio Aptana
Le site Web Aptana est le premier site d’information sur leurs outils de développement. La dernière version de la suite, Aptana 3.0.3, comprend un IDE entièrement intégré pour le développement Web, les styles CSS et l’imbrication de balises HTML. Le meilleur atout: Aptana est complètement libre Télécharger! Ils proposent des packages pour les 3 principaux systèmes d’exploitation (y compris Linux), ce qui est très pratique pour les développeurs..
Ce qui rend Aptana spécial, c'est la rapidité avec laquelle vous pouvez développer une petite application Web et tester votre conception. La suite studio vous permet de développer et tester rapidement une application Web fonctionnant sous Ruby on Rails, PHP, Python ou simplement HTML / CSS, et leurs fonctionnalités de mise en évidence du code ont été récemment améliorées pour inclure de nouvelles bibliothèques de balises HTML5 et CSS3. Il comprend également une intégration Git, un terminal intégré, un débogueur de code et une poignée d’autres fonctionnalités intéressantes..
Kits et icônes de l'interface graphique mobile
Que serait le Web sans les cadeaux? Pour les concepteurs Web, l’importance de l’interface utilisateur est au-dessus de tout. Les interfaces graphiques simples sont difficiles à trouver et seuls les concepteurs les plus créatifs ont mis au point des solutions efficaces..
Cependant, de nombreuses ressources gratuites, mais de qualité, sont disponibles pour votre concepteur Web. Ces kits d'interface graphique sont principalement conçus pour Adobe Photoshop ou Fireworks, où vous pouvez déplacer des éléments et les exporter en tant que fichiers d'image à plat..
Les icônes sont une ressource très pratique à avoir. Les concepteurs créent des ensembles gratuits et les offrent en ligne plus souvent que jamais auparavant. Un de ces sites, Glyphish, présente des icônes gratuites et professionnelles. Ces conceptions sont basées sur un thème unique à utiliser sur les modèles mobiles et les conceptions d'applications..
Notre collection de modèles de prototypage d'appareils mobiles vous sera d'une grande aide tout au long du processus de développement de sites Web et d'applications. Vous ne devriez pas commencer à coder tant que vous n’avez pas une interface graphique puissante et ces kits Web vous aideront à démarrer sur la bonne voie..
Kit d'interface graphique iOS 5
Éléments de vecteur d'interface utilisateur iPhone
Kit d'icônes d'application iPhone
Aimants Filaires (Kit DIY)
Interface graphique Android
