Comment concevoir une page web pour iPhone
Depuis sa sortie en 2007, l'iPhone inspire les concepteurs web à créer des pages spécialement adaptées. L'iPhone intègre le navigateur Safari d'Apple. Vous pouvez aussi télécharger Opera depuis l'App Store. Les deux navigateurs affichent les pages web comme sur un ordinateur. Il peut être intéressant de créer un design plus épuré qui charge rapidement sur iPhone. Vous aurez besoin de connaissances en CSS, HTML et d'un iPhone pour tester.
Ce dont vous avez besoin
- iPhone
- Logiciel d'édition HTML et CSS
Instructions
- Ouvrez votre fichier « .html » actuel avec votre éditeur HTML/CSS. Un éditeur de texte basique suffit (Bloc-notes sur Windows, TextEdit sur Mac).
- Ajoutez un élément « <link> » dans la section « <head> » de votre fichier HTML qui renvoie vers un nouveau fichier « .css » qu'on créera, nommé « iphone.css ». Le chemin doit être le même que pour les autres fichiers CSS. Incluez des instructions pour ne charger ce fichier que sur les appareils d'une largeur max de 480px. Exemple :
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/iphone.css" type="text/css" /> - Créez un nouveau fichier « .css » dans votre éditeur. Nommez-le « iphone.css ». Écrivez-le comme un CSS normal, en miroir de votre CSS principal. Pour l'iPhone, organisez tout en une seule colonne à 100% de largeur. Masquez certains éléments avec « display:none ». Expérimentez jusqu'à obtenir un design satisfaisant.
- Téléversez votre nouveau fichier CSS à l'emplacement indiqué dans l'élément « <link> » ajouté à votre HTML. Remplacez le fichier HTML original par le vôtre révisé.