Optimiser mon site pour IphoneRésolu/Fermé

Question

Salut, beaucoup de mes visiteurs ce rendent sur mon site par le biai d'un iphone. 
Apres une analyse des statistiques. 

C'est pourquoi j'aimerais rendre mon site le plus optimal possible, pour s'afficher sur les Iphones. 

Comment peut-on s'y prendre svp?

Makaveli90.

Configuration: iPhone - iPhone OS 4.3.3

le hollandais volant · Answer

Salut !

Tu peux déjà ajouter une feuille de style CSS spécialle pour les petits écrans avec :

<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld, only screen and (max-device-width: 480px)"/>

Ce CSS viendra s'ajouter au CSS normale dans le cas d'un écran plus petit que 480pixel de large.
Pour éviter un mélange, tu peux mettre l'autre feuille ainsi :

<link rel="stylesheet" type="text/css" href="STYLE_NORMAL.css" media="all, only screen and (min-device-width: 480px)"/>

Dans le CSS pour le style mobile : il s'agit d'optimiser le desing de ton site pour qu'il soit lisible pour des petits écrans.
Voilà mes conseils :

- une police d'écriture plus grande
- pas la peine de mettre les barres latérales de navigation (ajouter plutôt une page externe du style "plan du site").
- ne pas mettre des effets de :hover, c'est impossible sous iPhone/Androïd
- PERMETTRE DE DÉSACTIVER LES THÈMES POUR MOBILE

Ce sont là mes conseils.
Y'a pas tout mais le gros y est.

Makaveli90 · Answer

Sup!

Tous d'abord, si je comprend bien, je doit ajouter ces deux codes:

ajouter celui la!:
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld, only screen and (max-device-width: 480px)"/>

Et modifier mon code initial par celui ci!:
<link rel="stylesheet" type="text/css" href="STYLE_NORMAL.css" media="all, only screen and (min-device-width: 480px)"/>

pour qu'ils dirigent les utilisateurs d'écran plus petits vers le "mobile.CSS"?

Par contre où doit-je placer ces codes svp? entre <head></head> c'est bien ça?

PS: j'ai aperçu sur pas mal de site, que le CSS est pratiquement identique, à l'image de l'ios iphone (frenchiphone.com, iphone4.fr..par exemples!) Il y a surement un logiciel qui traite cette configuration?
Je veut dire que nous sommes peut être pas obliger de reconstruire la forme du site, simplement réadapter le contenu? je dit ça sans certitude... un simple doute!

Makaveli90.

le hollandais volant · Answer

Tu as bien compris : c'est en effet dans le <head> qu'il faut mettre le code.

Concernant ta question, je ne la comprend pas très bien...
En fait, avec ma solution (un fichier CSS pour mobile) le HTML reste parfaitement identique, ce qui change c'est le desing.

Par exemple, dans le fichier CSS normal tu mets :
body { background: red; }

et dans le fichier CSS Mobile :
body { background: blue; }

Ainsi ton site sera rouge sur un ordinateur, et bleu sur un téléphone (iphone, android...).
En applicant tout la puissance des CSS, tu peux ainsi recréer un style pour l'iPhone qui soit parfaitement visible, même sans utiliser de zoom.

Ce que je conseile de faire (c'est ainsi que je procède moi même d'ailleurs, vu que je suis en train de faire une version mobile pour mon site), c'est de reprendre intégrallement le CSS normal dans le fichier CSS mobile, et de commencer par masque ce qui doit l'être : la barre latérale, le menu... avec :

xxx { display: none; }

Ensuite, tu adaptes tout le reste, comme on fait un thème en temps normal.

Makaveli90 · Answer

Regarde mon site peut etre? Je suis en php et css!

Optimiser mon site pour Iphone

4 réponses

Discussions similaires

Newsletters