Vidéo: Comment créer la version mobile de son site web ? 2025
Avant de créer un cadre pour un site Web qui sera affiché sur l'iPhone et l'iPad, il est utile de réfléchir à la façon dont vous souhaitez que vos pages s'affichent lorsque vous ajoutez les styles. C'est là que les wireframes peuvent vraiment aider.
Dans les figures suivantes, vous voyez trois conceptions filaires différentes pour la page d'accueil d'un blog simple - la première est pour l'iPhone, et les deux suivantes pour l'iPad (une pour le mode paysage et l'autre pour le portrait mode).
Explorons trois conceptions filaires relativement simples qui seraient idéales pour un blog de base. Les conceptions filaires, telles que celles illustrées, peuvent vous aider à créer un cadre pour votre site en HTML.
Lorsque 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 réaliser ces trois affichages différents.
Si vous suiviez cette route, vous auriez besoin d'un script de détection de périphérique, un programme compliqué capable de détecter le type de périphérique utilisé par les visiteurs de votre site, puis de les rediriger vers la meilleure version de chaque page.. Si vous concevez un site Web mobile qui doit atteindre le plus large public, c'est la meilleure solution.
L'avantage de se concentrer sur l'iPhone et l'iPad est que vous n'avez pas à vous soucier de créer un script de détection de périphérique. En effet, le navigateur Web Safari sur l'iPhone et l'iPad peut lire plusieurs fichiers CSS, ce dont beaucoup d'autres navigateurs ne sont pas capables.
Vous pouvez donc utiliser CSS pour créer des conceptions qui fonctionnent bien sur les derniers navigateurs des ordinateurs de bureau et portables, ainsi que sur l'iPhone et l'iPad.
Bien que vous puissiez créer des pages complètement différentes pour chaque périphérique, l'option la plus efficace consiste à créer une page en HTML, puis à utiliser trois jeux de feuilles de style différents pour ajuster la conception. Avec cet objectif en tête, créez d'abord une page Framework, puis utilisez CSS pour créer différents designs à partir de cette page HTML.
Maintenant, voici la partie qui peut sembler un peu folle si vous n'êtes pas déjà familier avec tout ce que vous pouvez faire avec CSS. Le même code HTML peut être utilisé pour créer les trois dessins illustrés sur les figures. Le positionnement des éléments, tels que le côté, est fait avec CSS.
