Le forum des utilisateurs iWeb
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment : -24%
PC Portable Gaming 15.6″ Medion Erazer Deputy ...
Voir le deal
759.99 €

Création d'un site optimisé iPhone

Aller en bas

Création d'un site optimisé iPhone Empty Création d'un site optimisé iPhone

Message par DrOSX 8/6/2010, 18:42

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)
Création d'un site optimisé iPhone Pixels10

En mode paysage, le iPhone a un affichage de 480 x 320 pixels.
(480 x 208 selon vos réglages)
Création d'un site optimisé iPhone Pixels11

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.
Création d'un site optimisé iPhone Captur47

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)
Création d'un site optimisé iPhone Captur48

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

Création d'un site optimisé iPhone Captur52

Exemple de page_iPhone

Création d'un site optimisé iPhone Captur51

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.
Création d'un site optimisé iPhone Captur55

Vos menus disparaissent. Il vous faut les re-créer: Créez le mot et appliquez le lien vers lapage correspondante "_iphone"
Création d'un site optimisé iPhone Captur56

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---

Création d'un site optimisé iPhone Captur57

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
DrOSX
Administrateur

Messages : 1338
Inscription : 15/10/2007 Masculin Localisation : Atlantique/Altitude 0
Version iWeb : 3
Publication : locale

Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum