Mise en page pour smartphone

Antoine

#1 le 18/05/2011 à 10:38

Bonjour,

Je souhaitais savoir comment peut-on faire pour qu'une page d'un site emajine déja existant soit visible aussi sur smartphone. Y a-t-il une façon de procéder ?

Seb - iNCiTE Web

#2 le 18/05/2011 à 10:46

Salut

Que veux-tu dire par "visible", "acceptable" ? par défaut les sites s'affichent bien sur iPhone par exemple, évidemment ce n'est pas au top et ça pourrait être optimisé, mais ça reste utilisable...

www.inciteweb.com

pderathe

#3 le 19/05/2011 à 15:13

L'idée est de définir un ensemble de feuilles de style dédié aux smartphones et quand on détecte que le poste est un smartphone on branche vers une page utilisant la feuille de style optimisée

Artisan du Web en Rhône-Alpes

Manuel [Medialibs]

#4 le 23/05/2011 à 16:18

Hey bien tu pourra trouver un script utile sur ce site mon cher Pascal :
http://detectmobilebrowser.com/ (onglet Jquery)

L'idéal étant de le personnaliser dans le but d'être redirigé vers la rubrique de ton choix affichant la version mobile. Bien sûr, la rubrique sera associée à un autre modèle graphique (version mobile). Pour cela, il faut ajouter ce script à la fin :

 
if(jQuery.browser.mobile==true){
           document.location.href="http://www.SITE.fr/RUBRIQUE-VERSION-MOBILE/";
}

Puis d'intégrer ce javascript dans le mainPage.html + lien vers la feuille de style conditionnelle avec l'occurence handeld en guise de media.

EDIT :
Vous pouvez vous appuyer des plug-ins jQuery dans le but de proposer des effets d'animation / transition (CSS3 notamment) :
- http://jquerymobile.com/
- http://jqtouch.com/

Formateur web [Medialibs]

Fanny

#5 le 22/02/2012 à 15:33

Bonjour,

Je me permet de rouvrir ce post, pourrais-je avoir plus de précision, pour savoir comment liée le javascript et la feuille de style en html?

Merci

Manuel Pinard

#6 le 22/02/2012 à 17:00

Bonjour Fanny,

Il faut partir sur une intégration relativement classique en créant un nouveau thème graphique, puis dans le mainPage.html spécifique à ce thème ajouter simplement l'appel aux fichiers. C'est donc le fait de changer de rubrique, et donc de thème qui affiche la mise en forme mobile.

Un exemple, pour mainPage.html du thème graphique "mobile" :

<!DOCTYPE html>
<Head>
...
<!-- CSS compatible version mobile -->
<link rel="stylesheet" href="/scripts/mobile/css/jquery.mobile-1.0b1.css">
<link rel="stylesheet" href="/scripts/mobile/css/mobile.css">
 
<!-- Declaration de javascript --> 
<script src="/scripts/mobile/js/jquery.mobile-1.0b1.min.js"></script>
 
...
</head>

Pour les balises "link" tu peux par exemple cibler le media concerné avec l'occurence "handeld" (pour mobile) mais cette occurrence n'est pas forcément nécessaire puisque le thème graphique suffit à lui même.

Sache qu'il y aussi d'autres pratiques pour la mise en place de site web mobile. Exemple : http://mediaqueri.es/
Nous proposons aussi des formations sur-mesures en intégration de site web mobile.

N'hésites pas à nous faire ton retour si tu es intéressée.

Bon après-midi,
Manuel

Fanny

#7 le 22/02/2012 à 17:39

Bonjour Manuel,

Merci pour les infos, en effet au début j'étais partie sur les medias queries. Mais en ce qui concerne la simplicité c'est raté, je dois faire cette adaptation pour notre site perso qui est l'un des plus compliqué.

Bonne fin de journée,

Fanny

Julien

#8 le 27/02/2012 à 17:06

Bonjour à tous,

pour des sites consultables sur toutes sortes de plate-formes, pensez Responsive Design, ça marche trop bien :-)

http://www.alsacreations.com/article/lire/930-css3-media-queries.html

Julien

Fanny

#9 le 27/02/2012 à 17:19

Bonjour Julien,

Oui en effet je viens justement de m'acheter le livre d'Ethan Marcotte sur le sujet qui est très intéressant et vraiment drôle je l'ai dévoré en un w.end (et pourtant je suis pas livre du tout!!)

Fanny

Mise en page pour smartphone

Syndication