[Problème] Comment rendre son site responsive design ?

[baprousselot]

Version joomla: 2.5
niveau: débutant
lien site: www.renanrousselot.fr

Bonjour à tous,

Je crée mon premier site sur joomla et l'ai mis depuis peu en ligne. J'ai beaucoup recherché ma réponse sur les forums mais niet.

Problème, je voudrais savoir comment adapter mon site aux smartphones et tablettes. Sur ordinateur tout roule (normal, je l'ai crée à partir d'un ordinateur) mais sur autre terminal, mon logo se déforme, et rien ne reste en place.


Y a-til des extensions de responsive design qui pourraint régler le prb (gratuites)? ou y a-t-il des manips à faire sur l'administration joomla ? sur le code css ?

Merci pour votre aide !!!

Baprousselot

[klims]

Re : Comment rendre son site responsive design ?

Pour transformer un template en responsive afin qu'il s'adapte aux smartphones et tablettes il faut des connaissances en html, css, et php. L'idéal je pense pour ne pas perdre trop de temps c'est de trouver un template qui soit responsive et qui ressemble au tien.
Sinon j'ai entendu parlé de RESPONSIVIZER
Après tu en as d'autres extensions à découvrir sur http://extensions.joomla.org/extensi...mobile-display
Un tutoriel intéressant http://www.joomlack.fr/documentation...a-pour-mobiles

[chabi01]

Re : Comment rendre son site responsive design ?

Un tutoriel intéressant http://www.joomlack.fr/documentation...a-pour-mobiles

A consulter effectivement !

Sinon, au niveau de ton site, le fonctionnement actuel est "normal" : il te faut des règles css qui te permettent de varier suivant la largeur d'affichage du navigateur utilisé. Pour cela, le lien fourni par Klims et répété dans ce post te permet de comprendre les "médiaqueries" qui permet ce genre de choses.
De la même manière, pour tes images qui se déformes, tu auras une solution à la fin du document

Par contre, il va falloir que tu retravailles sérieusement tes images : elles sont redimensionnées à l'écran et font donc en moyenne plus de 200 Ko chaque. Ta page d'accueil fait 3.5 Mo pour 15 images et pas de textes... beaucoup trop pour un affichage mobile par exemple (je pense à "mobile" parce que tu parles de "responsive"). Les pages internes sont encore plus lourdes : tu répètes ta page d'accueil en ajoutant le contenu de ton article avec une image supplémentaire (premier lien : 4.7 Mo....).

Cordialement,

[baprousselot]

Re : Comment rendre son site responsive design ?

Merci pour vos conseils, j'ai téléchargé le tutoriel qui ne demande plus qu'à être lu :-)

Concernant les images, a combien de ko dois-je les mettre environ pour que la navigation sur mobile soit fluide (et que ca ne soit pas trop pixelisé sur ordi) ?

[chabi01]

Re : Comment rendre son site responsive design ?

Si tu regardes les préconisations W3C, une page ne devrait pas dépasser... 100 Ko !
Mais entre la théorie et la pratique, il y a un peu de marge.
Tente déjà au moins de ne pas dépasser les 1 mo en page d'accueil.
Avec un template "mobile", tu peux éviter de charger certaines parties suivant le périphérique avec des "display:none" dans le css pour certains div, ce qui te permet d'optimiser.

Teste ensuite avec cet outil : http://validator.w3.org/mobile/
Cela te donnera pas mal d'indications.
Cordialement,