comment cree responsive site avec beacoup d'images ?

najmeddine
Les bases HTML/CSS

bonjour

je suis intégrateur web j'ai reçu une maquette en illustrateur est très très long (height) site design avec un (width = 1920px) .
le client ma demander de faire le site en responsive , avec des animation de beacoup (centaine) d'images SVG , le site marche tres bien sur ordinateur mais le problème qu'il ne marche pas sur les smartphones ipad ou iphones , et je pense a cause des images lourdes et les animation aussi s'il vout plait propose moi une solution est ce je doit faire une autre design pour le responsive et diminuer le nombre d'image, est ce que il faut diminuer les animations ou bien est ce qu'il ya d'autres solution qui peut me consrver les animation et les images .

et merci d'avance

5 réponses

iluzzion
Réponse acceptée

Salut,

Comme l'a dit Wapaca tu peux utiliser Bootstrap, personnellement j'utilise Unsemantic en ce moment et j'en suis satisfait.

www.unsemantic.com

nestecha
Réponse acceptée

Sinon, avec de l'AJAX tu peux aussi charger les images et les animations en fonction du niveau du scroll de ta page.

Beaucoup de sites du genre que tu décris sont obligés d'utiliser ce système sans quoi Google leur met une belle olive et ne les référence même pas.

En gros l'idée, c'est un peu comme le mur de Facebook. Y'a genre 30 news qui se chargent, puis quand tu scroll en bas, y'a d'autres news qui se chargent. Ça t'évite de charger 3 ans d'actualité à chaque fois que tu vas sur ton mur Facebook.

Si tu fais ça ça posera zéro problème niveau temps de chargement, et ça fonctionnera aussi bien sur mobile que sur tablette ou PC.

Wapaca

Salut,

Pour le responsive je te conseille d'utiliser bootstrap 3 qui gère ça très très bien (possibilité de modifier l'emplacement des blocks très simplement et aussi d'en cacher ou rendre visible en fonction de la largeur de l'écran).

Bootstrap :
http://getbootstrap.com/
(lis bien la documentation en prenant des notes, tu n'es pas obligé de tout savoir par coeur mais au moins de savoir ce qui existe)

Media queries associé :
http://scotch.io/quick-tips/css3-quick-tips/default-sizes-for-twitter-bootstraps-media-queries
Tu peux aussi peux aussi les utiliser pour ton projet si tu as fait le site en html/css

Les média queries permettent de modifier les règles css en fonction de la largeur de l'écran mais si tu n'as pas utilisé bootstrap 3 tu devras aussi modifier la largeur et hauteur de tes blocks.

najmeddine
Auteur

le problème que les images même les images cacher en css le navigateur ils les télécharges tous ce qui alourdir le temps du chargement du site web

najmeddine
Auteur

merci Nestecha pour la renonce , le site contient des animations et le chargement AJAX peut bloqué cette fluidité des animations C'est le seul inconvénient de cette solution.