Créer un cadre adaptable avec HTML5
Avant de créer un cadre pour un site Web qui sera affiché sur l'iPhone et l'iPad, il est utile de penser à l'avance sur la façon dont vous voulez que vos pages à regarder lorsque vous ajoutez les styles. Ceci est où filaires peuvent vraiment aider.
Dans les figures suivantes, vous voyez trois modèles filaires différents pour la première page d'un site web simple blog - le premier est pour l'iPhone, et les deux suivants sont pour l'iPad (l'un pour le mode paysage et l'autre pour le mode portrait).
Nous allons explorer trois modèles filaires relativement simples qui serait idéal pour un blog de base. Dessins filaires, tels que ceux représentés, peuvent vous guider dans la création d'un cadre pour votre site en HTML.
Comme vous décidez comment développer votre site, gardez à l'esprit que vous pouvez créer trois pages HTML complètement différentes, chacune avec sa propre feuille de style pour atteindre ces trois affichages différents.
Si vous avez pris cette route, vous aurez besoin d'utiliser un script de détection de l'appareil, un programme complexe qui peut détecter le type de dispositif utilisé par les visiteurs à votre site et ensuite les diriger vers la meilleure version de chaque page pour ce périphérique. Si vous concevez un site Web mobile qui a besoin d'atteindre le public le plus large, qui est la meilleure façon d'aller.
L'avantage de se concentrer sur l'iPhone et l'iPad est que vous ne devez pas aller à tous la peine de créer un script dispositif de détection. Voilà parce que le navigateur web Safari sur l'iPhone et l'iPad peut lire plusieurs fichiers CSS, quelque chose que beaucoup d'autres navigateurs de téléphones portables ne sont pas capable de faire.
Ainsi, vous pouvez utiliser les CSS pour créer des modèles qui fonctionnent bien sur les navigateurs les plus récents sur les ordinateurs de bureau et portables, ainsi que l'iPhone et l'iPad.
Bien que vous pouvez créer complètement différentes pages pour l'affichage dans chaque appareil, l'option la plus efficace est de créer une page en HTML et ensuite utiliser trois ensembles différents de feuilles de style pour adapter la conception. Avec cet objectif à l'esprit, de créer un cadre de la première page, puis utiliser les CSS pour créer des conceptions différentes de ce que une page HTML.
Maintenant, voici la partie qui peut sembler un peu fou si vous n'êtes pas déjà familier avec toutes les choses que vous pouvez faire avec CSS. Le même code HTML peut être utilisée pour créer l'ensemble des trois conceptions représentées sur les figures. Le positionnement des éléments, tels que le côté, se fait avec CSS.
Conception pour les navigateurs Safari et chrome Safari et Chrome sont des navigateurs WebKit, basé sur le même WebKit déchirerERing moteur, qui contrôle la façon dont le navigateur interprète HTML, CSS et autre code. Tous les navigateurs WebKit suivent les mêmes règles (au moins la…
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 créer un site web avec HTML5 Concepteurs de sites Web utilisent souvent des termes comme Architecting, bâtiment, et construction quand ils parlent de la création de pages Web, car il ya beaucoup de similitudes entre la construction d'une maison et la conception d'un site web…
Comment concevoir pour les différents navigateurs web Bien que votre public peut différer, vous pouvez créer des sites Web qui semblent bonnes dans Safari sur l'iPhone et l'iPad sans compromettre la conception de la page lorsque l'affichage dans les navigateurs Web les plus populaires sur…
Comment économiser de l'espace sur l'écran de l'iPhone Lorsque vous concevez des sites Web pour l'écran relativement petit de l'iPhone, chaque pixel est précieux. Le script présenté ici est conçu pour faire défiler la page vers le bas automatiquement, cacher la barre d'adresse et de vous donner…
Faites votre travail CSS 3 à travers les navigateurs web Si vous concevez votre site Web pour le bureau ainsi que pour l'iPhone et l'iPad, vous pouvez toujours utiliser le CSS expérimentale 3! Finalement, le CSS 3 dans votre site sera probablement pris en charge. L'exemple de cette section vous montre…
Déplacer vers HTML5 et CSS 3 pour la conception web Lors de la planification d'une nouvelle conception de sites Web, rappelez-vous que de nombreuses versions différentes de HTML sont maintenant en cours d'utilisation sur le web. Toutes les versions les plus récentes travailler dans le (système…
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…
Iphone Test conçoit avec Safari Le plus proche vous pouvez venir à avoir Safari sur un iPhone ou iPad est Safari sur un ordinateur. Il a quelques différences notables, y compris la taille de l'écran plus grand que la plupart des gens utilisent les ordinateurs et le fait que…
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 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…