1485 sujets

Web Mobile et responsive web design

Conseils adaptation responsive

Bonjour à tous,

il se trouve que j'ai besoin de vos lumières, que ca soit en matière de responsive comme de css classique.

Le principe du site est d'être en fullscreen, tout va bien pour le moment sa fonctionne parfaitement sur mon 22".

Le soucis apparait lorsque je passe sur un écran < 15", j'ai un énorme soucis que le responsive pourrait régler.
Les images seront plus simple que les longs discours.

Voila le rendu 22"

http://uppix.net/0/4/f/c8f58fba5846676c4cfe992b6f8fa.png

Le rendu 13"

http://uppix.net/d/b/2/924736742bca0f3d38ef2138c266d.png

Le rendu souhaité en 13" ce qui correspond à une diminution de 40%

http://uppix.net/8/f/8/dc118ca1c31f8ed8bb4cace2c9452.png

Mes questions sont les suivantes:

Bien que le mieux soit de réaliser pour toutes les résolutions existantes, quelle est la résolution d'adaptation que vous me conseillez (à partir du 15" réduire de 40% ?)

Comment procéder ? Mes images sont en 100%, mais le fond noir à l'opacité de 0.80 est en css ?

Si vous avez des tutos à me conseiller qui répondent en partit à ma questions, je suis preneur.

Merci d'avance
Salut,

pourquoi n'utiliser que 40% de l'écran ? Imagine toi sur mobile avec tes pauvres 300px, côté lisibilité ça va pécher un peu :s

Réfléchir en terme de résolution n'est pas toujours adapté à l'heure actuelle, même si la grande majorité des écrans font plus de 1024px de large on tend à la fois à :

* l'immensément grand : TV
* l'immensément petit : mobile

Ju
J'ai bien réfléchis à ca.
C'est juste pour répondre à un besoin en particulier, j'ai trés peu d'infos à y faire figurer et que le placement en 960 de large me suffit.
Toutes les notions que vous pouvez avoir en terme de dev sont importantes, mais je suis dans le graphisme et l'animation, j'essaye de savoir faire des petites choses en dev mais je n'aurai jamais votre niveau, c'est pour ca que je viens trouver votre aide et que je vous demande de la pédagogie.

Ici il faut avoir 2 affichages pour 2 types d'écrans, le reste sera fait soit aprés, soit pas du tout.

J'ai fait des test du genre:
@media only screen and (max-height:875px) {
.item { height: 60%;}
}


Ca fonctionne bien pour certaine image qui ont la classe "item", mais ce que je ne comprend pas, c'est que certaines images, qui n'ont pas de caractéristiques particulières (à premiere vue), ne sont pas redimensionnées.

Savez vous d'où peut venir le problème ?
Merci.
Salut,

nos remarques n'ont rien à voir avec le dév, et ne sont pas non plus des critiques de tes choix graphiques.

C'est juste que ne jouer que sur les ratios pour faire du "responsive" ça a ses limites.

Sinon, pour répondre à ta dernière question. Tes images sans css ne se redimensionneront pas, elles conservent leurs dimensions initiales.

Tu peux cibler tes images comme tu le fait pour .item.

Ju
jb_gfx a écrit :
Commence déjà par te renseigner sur la différence entre la taille de l'écran et sa définition.


Il n'a pas parlé de définition mais de résolution c'est pas pareil !
Modifié par Crousti2 (28 Aug 2012 - 19:26)
Oui c'est en fonction de la résolution enfin, c'est surtout de la taille de la page web.

J'ai ciblé mes images avec le css en lui apportant la class item.
Seulement certaines images sont redimensionnée, et pas d'autres, je ne sais pas ce qui différencie ces images.

Sinon ca fonctionne, donc ca commence à voir le jour correctement, a part le soucis de ces images qui prennent une taille aléatoire.
Salut,

si toutes tes images ne se redimensionnent pas c'est que t'as du css qui prend le dessus.

As-tu vérifié la priorité de tes règles css ? As-tu un reset.css ? Tu peux rapidement voir ça avec Firebug ou autre console. Un petit coup d'inspecteur & tu sais quel css est précisément appliqué.

Sans avoir le site sous les yeux, c'est difficile d'en dire plus :s

Ju
J'ai pas mit de reset, et il n'y a pas de css concernant le redimensionnement des images ailleurs dans le code.
J'utilise le quel reset ? celui fournit avec boilerplate ?

Merci
Sujet clos
Aller à