Créez des conceptions de Web spécifiques pour iPhone et iPad
Si vous souhaitez optimiser vos pages pour regarder leur meilleur, vous devez tenir compte de la taille de l'écran et la résolution des différences entre l'iPhone et l'iPad. Remarquez le schéma simplifié illustrant un moyen commun concepteurs modifient leurs pages pour chaque appareil: organiser la mise en page pour le meilleur ajustement sur les différentes tailles d'écran.
Sommaire
Simplifiez vos créations pour le petit écran iPhone
Sur l'iPad, représenté sur le côté gauche de la figure, vous voyez beaucoup de place pour une deuxième colonne de sorte que les apartés peuvent être alignés à droite de l'article. Sur le côté droit de la figure, vous voyez que la meilleure pratique est de limiter votre conception à une colonne sur les petits écrans des iPhone et iPod touch.
Si vous regardez la figure et que, “ Attendez une minute - l'iPad est en mode paysage et l'iPhone est en mode portrait, et cela fait une grande différence, ” vous avez raison.
Maintenant vérifier ce chiffre de voir comment le site American Airlines utilise une seule colonne pour la conception iPhone, même en mode paysage, et utilise plusieurs colonnes sur l'iPad, même quand il est en mode portrait.
Remarquez sur l'iPhone que l'équipe American Airlines a changé non seulement la conception, mais aussi l'information qui est affichée, se concentrant sur les éléments les plus susceptibles d'être important pour une personne en mouvement, y compris vol facile check-ins.
Aperçu plusieurs modèles dans Dreamweaver
Si vous utilisez Adobe Dreamweaver, être sûr d'obtenir le HTML5 Pack de Dreamweaver. Cette extension est incluse dans mises à jour de Dreamweaver CS5 et versions ultérieures et peut être ajouté comme une extension de Dreamweaver versions 3 et 4. Comme vous pouvez le voir dans cet exemple, l'extension HTML5 vous permet de visualiser facilement trois versions différentes de vos feuilles de style à une du temps en affichant chacun dans une section distincte de l'écran.
Le HTML5 Pack pour Dreamweaver Dreamweaver CS3 et CS4 est un moyen utile pour vérifier rapidement vos conceptions pour voir comment les différentes feuilles de style CSS affectent eux, mais il ne supporte pas encore toutes les variations de HTML5 et CSS 3. Il faut aussi savoir que la limite “ immobilier ” dans le rapport vertical de ces extraits, il est difficile d'assurer que vous utilisez tout l'espace disponible en mode portrait.
Pour utiliser Adobe Dreamweaver pour afficher un blog créé avec WordPress, tel que celui illustré dans l'exemple, vous devez configurer votre ordinateur comme un serveur web - un processus qui est pas aussi difficile que vous pourriez imaginer. Vous trouverez des instructions détaillées pour la fabrication de Dreamweaver et le travail WordPress sur votre ordinateur de bureau.
Créez des conceptions web pour l'iPad L'iPad, avec son grand écran magnifique, peut vous amener à croire que vous ne devez faire quelque chose de spécial, mais les meilleures techniques de conception pour l'iPad ne sont pas les mêmes techniques que beaucoup ont utilisé pour…
Images de conception pour l'iPhone et l'iPad Ayant images accrocheur sur votre site Web est l'une des meilleures façons d'attirer iPhone et iPad amateurs soucieux de leur image. Mais bachotage une image haute résolution qui peut être soufflé jusqu'à la taille de l'affiche sur un écran de…
Comment écrire du code dans la nouvelle HTML5 Il ya plus que de nouveaux éléments sémantiques dans HTML5, que vous pouvez utiliser pour concevoir des sites Web à afficher sur iPhone et iPad ainsi que les écrans d'ordinateur. HTML5 fusionne HTML 4 et XHTML. HTML5 a deux versions…
Nouveaux ajouts à HTML5 pour la conception web IPhone et iPad d'Apple ont transformé le rêve de tenir “ le web dans la paume de votre main ” en réalité - une réalité qui a des implications profondes pour l'avenir de la conception web.Les navigateurs Safari sur l'iPhone et l'iPad…
Optimiser les conceptions web pour l'iPhone L'écran de l'iPhone est petite, mais essayez d'arrêter de penser à des contraintes et de commencer à se concentrer sur les incroyables nouvelles opportunités - comme attirer un public de personnes en mouvement - des gens qui peuvent être…
Conceptions de pages pour vues portrait et paysage Lorsque vous mettez sur un iPhone ou un iPad, l'orientation d'une page Web ajuste automatiquement en conséquence. Le navigateur web Safari agrandit intelligemment (ou réduit) les pages web pour adapter à l'écran, mais il est pas parfait. Même…
Dreamweaver CS4 pour les nuls Le mode de l'inspecteur Dreamweaver CS4 propriété HTML offre des outils pour vous aider à éditer et de formater le texte ou l'objet sélectionné dans la fenêtre de document. La figure suivante montre la barre d'outils et comment il peut vous…
Dreamweaver CS5 pour les nuls Le Groupe de Dreamweaver CS5 commune InsérerLorsque vous concevez vos pages Web dans Dreamweaver, vous pouvez insérer un lien, tag, le script, un modèle ou l'un des nombreux autres éléments simplement en cliquant sur son icône sur le panneau…
Le panneau Fichiers de Dreamweaver CS5 Le panneau Fichiers est une fonctionnalité très pratique dans Dreamweaver CS5. Utilisez le panneau Fichiers pour sélectionner le site que vous souhaitez travailler et de synchroniser des fichiers un des sites entre votre ordinateur et votre site…
Choisir une stratégie pour votre conception de Web mobile Les gens voient maintenant les pages Web sur tout, des écrans de téléphones portables minuscules projecteurs qui illuminent le côté d'une grange. Les contraintes que vous rencontrez dans la conception de Web mobile pour le petit écran de…
Comment choisir un éditeur html Si vous êtes un masochiste, vous pouvez certainement créer des pages web dans un programme de traitement de texte. Tout ce que vous devez savoir est que les balises HTML à utiliser pour chaque section de ce document. Toutefois, en prenant ce…
Comment créer des conceptions Web mobiles ipad-friendly L'iPad, avec son grand écran magnifique, peut vous amener à croire que vous ne devez faire quelque chose de spécial dans votre conception de Web mobile, mais les meilleures techniques de conception web pour l'iPad ne sont pas les mêmes que…
Optimisation de vos projets web mobiles pour l'iPhone Oui, l'écran de l'iPhone est petit, mais il faut arrêter de penser à des contraintes et de commencer à se concentrer sur les nouvelles opportunités étonnantes iPhone offres de conception de sites Web - par exemple en attirant un public de…
IPhone & iPad conception de sites Web pour les nuls Les gens voient maintenant les pages Web sur tout, des écrans de téléphones portables minuscules projecteurs qui illuminent le côté d'une grange. Les contraintes que vous rencontrez dans la conception de Web mobile pour le petit écran de…