Création d'un site optimisé iPhone
Page 1 sur 1
Création d'un site optimisé iPhone
La prolifération du nombre de iPhone nous contraint à envisager la création d'un site optimisé iPhone.
Pourquoi un site optimisé iPhone?
Le iPhone possède malgré tout pas mal d' inconvénients:
(Nombre de pages ouvertes simultanément limité à 8, Page web limitée à 10 Mo, Image limitée à 8 Mo, Pas de Gif animés, Javascript limité à 5 secondes et à 10 Mo d'allocation, Drag/Drop, Pas de sélection possible)
Ce qui nous intéresse particulièrement ici:
-Il ne lit pas le flash (diaporamas photo etc...)
-Sa résolution & dimension d'écran est très petite
En mode portrait, le iPhone a un affichage de 320 x 480 pixels.
(320 x 356 selon vos réglages)
En mode paysage, le iPhone a un affichage de 480 x 320 pixels.
(480 x 208 selon vos réglages)
Un site non optimisé est difficile à naviguer, les liens invisibles, l' érgonomie du site s'en trouve fortement modifiée.
Je vous conseille de tester votre site ou celui d'un ami. Pour cela iPhoney simule l'affichage sur un iPhone; plutôt pratique et rapide.
Comment cela fonctionne?
Il y à de nombreuses méthodes.
(Wordpress propose par exemple un Plug-in automatique pour votre blog.)
Considérant la simplicité et la rapidité d' iWeb, nous allons ici créer un double site et demander à notre site normal qu'il détecte les iPhone pour les envoyer vers le site optimisé.
ETAPE 1: Préparation des pages
Duppliquez vos pages (clic droit > Duppliquez)
Ajoutez "_iphone" à la fin de chaque nom de pages duppliquées.
ETAPE 2 :: Modification de largeur et hauteur des pages "_iPhone"
Changez la largeur de vos pages "_iPhone" dans iWeb selon si vous souhaitez que votre site soit visible à l'horizontal ou à la vertical. (420 pixels est une largeur standard)
ETAPE 3: Mise en page:
Replacez vos éléments graphiques dans la nouvelle largeur en tenant compte de certains impératifs:
-Minimiser votre contenu dans la page.
-Assurez-vous que les liens soient visibles et (assez gros pour être validés par un doigt...)
-Texte en caractère large (14 et +) et lisible. (pas de clair sur fond clair..)
-Limitation du scrolling (défilé vertical de la page)
-Simplifiez votre contenu (éviter l'ajout de widget qui risque d'être mal lu)
Bien entendu, essayez au maximum de conserver les codes couleurs et la charte graphique.
Si vous avez un diaporama photo en flash par exemple; il vous faudra mettre vos photos "à plat" dans la page en petite taille. (145 x 219 par exemple).
Exemple de page non- iPhone
Exemple de page_iPhone
ETAPE 4: Changez vos liens entre vos pages
Si vous utilisez les menus iWeb
-Pour chaque page "_iphone", décochez la case "affichage du menu de navigation" dans l'inspecteur.
Vos menus disparaissent. Il vous faut les re-créer: Créez le mot et appliquez le lien vers lapage correspondante "_iphone"
Si vous utilisez vos propres menus
Pensez à rediriger chaque lien vers sa bonne page "page_iphone"
ETAPE 5: Insérer un widget HTML
-Insérez un widget html dans votre page "index "
(la page "index" est la page d'accueil de votre site; elle se nomme "index")
-Ajoutez et modifiez le code suivant:
Remplacez MonDomaine.com par le vrai nom de votre Domaine
Ce code permet au navigateur qui va ouvrir la page (normale) de votre site de reconnaître un iPhone et de l'envoyer vers votre page d'accueil iPhone ----http://www.MonDomaine.com/index_iPhone.html---
Pensez à cliquer sur "appliquer" pour valider le Widget.
ETAPE 6: Visualisez votre site
-Enregistrez iWeb
-Publier votre site
Utilisez iPhoney ou votre iPhone pour vérifier que la redirection fonctionne bien.
Autre vérification:
Lancez votre site sur votre ordinateur et ajoutez à l'adresse "_iphone.html"
Vous devriez visualiser la version iPhone sur votre ordinateur.
Si le widget a bien été modifié et ajouté, le navigateur enverra le iPhone vers la page "index_iphone.html"
Pourquoi un site optimisé iPhone?
Le iPhone possède malgré tout pas mal d' inconvénients:
(Nombre de pages ouvertes simultanément limité à 8, Page web limitée à 10 Mo, Image limitée à 8 Mo, Pas de Gif animés, Javascript limité à 5 secondes et à 10 Mo d'allocation, Drag/Drop, Pas de sélection possible)
Ce qui nous intéresse particulièrement ici:
-Il ne lit pas le flash (diaporamas photo etc...)
-Sa résolution & dimension d'écran est très petite
En mode portrait, le iPhone a un affichage de 320 x 480 pixels.
(320 x 356 selon vos réglages)
En mode paysage, le iPhone a un affichage de 480 x 320 pixels.
(480 x 208 selon vos réglages)
Un site non optimisé est difficile à naviguer, les liens invisibles, l' érgonomie du site s'en trouve fortement modifiée.
Je vous conseille de tester votre site ou celui d'un ami. Pour cela iPhoney simule l'affichage sur un iPhone; plutôt pratique et rapide.
Comment cela fonctionne?
Il y à de nombreuses méthodes.
(Wordpress propose par exemple un Plug-in automatique pour votre blog.)
Considérant la simplicité et la rapidité d' iWeb, nous allons ici créer un double site et demander à notre site normal qu'il détecte les iPhone pour les envoyer vers le site optimisé.
ETAPE 1: Préparation des pages
Duppliquez vos pages (clic droit > Duppliquez)
Ajoutez "_iphone" à la fin de chaque nom de pages duppliquées.
ETAPE 2 :: Modification de largeur et hauteur des pages "_iPhone"
Changez la largeur de vos pages "_iPhone" dans iWeb selon si vous souhaitez que votre site soit visible à l'horizontal ou à la vertical. (420 pixels est une largeur standard)
ETAPE 3: Mise en page:
Replacez vos éléments graphiques dans la nouvelle largeur en tenant compte de certains impératifs:
-Minimiser votre contenu dans la page.
-Assurez-vous que les liens soient visibles et (assez gros pour être validés par un doigt...)
-Texte en caractère large (14 et +) et lisible. (pas de clair sur fond clair..)
-Limitation du scrolling (défilé vertical de la page)
-Simplifiez votre contenu (éviter l'ajout de widget qui risque d'être mal lu)
Bien entendu, essayez au maximum de conserver les codes couleurs et la charte graphique.
Si vous avez un diaporama photo en flash par exemple; il vous faudra mettre vos photos "à plat" dans la page en petite taille. (145 x 219 par exemple).
Exemple de page non- iPhone
Exemple de page_iPhone
ETAPE 4: Changez vos liens entre vos pages
Si vous utilisez les menus iWeb
-Pour chaque page "_iphone", décochez la case "affichage du menu de navigation" dans l'inspecteur.
Vos menus disparaissent. Il vous faut les re-créer: Créez le mot et appliquez le lien vers lapage correspondante "_iphone"
Si vous utilisez vos propres menus
Pensez à rediriger chaque lien vers sa bonne page "page_iphone"
ETAPE 5: Insérer un widget HTML
-Insérez un widget html dans votre page "index "
(la page "index" est la page d'accueil de votre site; elle se nomme "index")
-Ajoutez et modifiez le code suivant:
- Code:
<script type="text/javascript">
if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.
match(/iPod/i))){parent.location.replace('http:/MonDomaine.com/index_iphone.html');}</script>
Remplacez MonDomaine.com par le vrai nom de votre Domaine
Ce code permet au navigateur qui va ouvrir la page (normale) de votre site de reconnaître un iPhone et de l'envoyer vers votre page d'accueil iPhone ----http://www.MonDomaine.com/index_iPhone.html---
Pensez à cliquer sur "appliquer" pour valider le Widget.
ETAPE 6: Visualisez votre site
-Enregistrez iWeb
-Publier votre site
Utilisez iPhoney ou votre iPhone pour vérifier que la redirection fonctionne bien.
Autre vérification:
Lancez votre site sur votre ordinateur et ajoutez à l'adresse "_iphone.html"
Vous devriez visualiser la version iPhone sur votre ordinateur.
Si le widget a bien été modifié et ajouté, le navigateur enverra le iPhone vers la page "index_iphone.html"
DrOSX- Administrateur
- Messages : 1338
Inscription : 15/10/2007 Localisation : Atlantique/Altitude 0
Version iWeb : 3
Publication : locale
Sujets similaires
» [ARCHIVE]
» Création du deuxième site
» règles de base création site web
» création de compte pour adhérents sur mon site
» Site version iphone : définir l'icone pour écran d'accueil
» Création du deuxième site
» règles de base création site web
» création de compte pour adhérents sur mon site
» Site version iphone : définir l'icone pour écran d'accueil
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|