Aller au contenu

Mon premier design étirable


Cleden

Sujets conseillés

Bonjour,

Ayant l'habitude de faire des sites aux dimensions fixes, j'ai décidé de casser un peu cette routine pour me lancer dans la création d'un design étirable.

Celui-ci est visible à l'adresse: http://www.cap-sizun.com

Je suis tout à fait conscient que celui-ci est très simple (trop ?), je ne sais, pour l'instant faire que cela. Je vous sollicite donc pour m'aider à réparer les éventuels défauts. Globalement, dites moi ce que vous aimez ,ce que vous n'aimez pas, ce qu'il faudrait changer du point de vue design, ergonomie.

Merci d'avance,

Loïc.

Lien vers le commentaire
Partager sur d’autres sites

salut,

Je trouve qu'il passe pas trop mal dans l'ensemble.

-Peut-être réduire la largeur de la marge gauche pour les 800.600 users, car le contenu devient presque de la même taille que la pub google.

-Pour les fond en couleur des titres (titre Général) mettre un fond transparent pour éviter d'avoir la contreforme blanche de la barre jaune qui vient s'incruster sur ta fleur.

Si tu veux que ta fleur soit visible dans toutes les dimmensions, découpe la du fond, fais en une image individuelle que tu plaques sur le bandeau supérieur avec un alignement à droite. Elle suivra alors ta page en permanence. A mon avis il faudra la réduire en dimensions.

Lien vers le commentaire
Partager sur d’autres sites

Posté (modifié)
Je trouve qu'il passe pas trop mal dans l'ensemble.

C'est déjà un bon point B)

Peut-être réduire la largeur de la marge gauche pour les 800.600 users, car le contenu devient presque de la même taille que la pub google.

J'ai réduit un peu mais je souhaite tester un peu cet emplacement pour adsense. J'ai cru voir dans un article que c'était une zone stratégique.

Pour les fond en couleur des titres (titre Général) mettre un fond transparent pour éviter d'avoir la contreforme blanche de la barre jaune qui vient s'incruster sur ta fleur.

Justement, j'ai essayé le fond transparent pour mon gif aligné à droite mais dans ce cas c'est le background du h1 qu'on voit et non la fleur.

Si tu veux que ta fleur soit visible dans toutes les dimmensions, découpe la du fond, fais en une image individuelle que tu plaques sur le bandeau supérieur avec un alignement à droite. Elle suivra alors ta page en permanence. A mon avis il faudra la réduire en dimensions.

Heu non, ça ne me dérange pas qu'elle bouge, au contraire. Merci pour tes commentaires.

J'aurai également voulu connaitre le rendu avec des navigateurs "exotiques" comme safari ou conquerror, si quelques uns d'entres vous les utilisent...

Pour les autres, je suis prêt à recevoir vos critiques, commentaires ;)

Loïc.

<{POST_SNAPBACK}>

Modifié par Cleden
Lien vers le commentaire
Partager sur d’autres sites

une des meilleures places pour adsense à mon idée est à droite légèrement en dessous de la mi-page.

Car dans le sens de lecture traditionnel, ca devient un échappatoire.

Une fois que la page est lue ou survolée, c'est la que le regard ce porte.

Lien vers le commentaire
Partager sur d’autres sites

une des meilleures places pour adsense à mon idée est à droite légèrement en dessous de la mi-page.

Car dans le sens de lecture traditionnel, ca devient un échappatoire.

Une fois que la page est lue ou survolée, c'est la que le regard ce porte.

<{POST_SNAPBACK}>

Justement, j'ai trouvé deux articles là dessous.

http://www.techno-science.net/?onglet=news&news=1135

http://www.zorgloob.com/2005/04/ou-positio...nces-google.asp

Loïc.

Lien vers le commentaire
Partager sur d’autres sites

Safari n'est pas exotique à mon sens, mais çà passe très bien ;)

Elle est jolie cette page, d'ailleurs, j'aime bien..

Sinon, je pense que tu devrais réduire un peu les pourcentages utilisés, car imagine un peu le rendu sur un écran 1600x1200. Ton texte "Bienvenue sur ce site consacré au Cap-Sizun. Celui-ci se veut interactif, vous pouvez donc y ajouter vos contributions (photos, sites, articles, évènements) au travers des différentes rubriques. Bonne visite." va se retrouver sur une seule ligne par exemple.

Or, certaines règles "entendues" veulent qu'une ligne ne dépasse pas les 60 caractères. Au delà, il devient beaucoup plus difficile de lire car notamment le passage à la ligne devient très dur pour l'œil.

C'est d'ailleurs l'habituel problème des mises en page étirables...

Edit: c'est un peu hors sujet, mais du texte jaune sur fond blanc, ce n'est pas vraiment le nec plus ultra pour la lisibilité ;) Tu devrais mettre un jaune un peu plus foncé, je pense.

Lien vers le commentaire
Partager sur d’autres sites

D accord avec Dudu,

en regardant à nouveau je trouve ca propre et suffisement aéré.

Le jaune clair aussi est clair un poil trop

Pour ton H1, tu devrais modifier une declaration pour ne pas avoir de background ou juste ajouter style="background: none" juste pour celui du haut. Car c'est le premier titre qu'on lit dans la page.

Pour ce qui est des largeurs de ligne sur une grande résolution d'écran, ce n'est pas évident à gérer et ceux qui lisent des sites en 1600 en plein écran le savent. C'est un choix que tu dois faire. limiter ou laisser complètement proportionnel

Modifié par Duxmachine
Lien vers le commentaire
Partager sur d’autres sites

Merci pour vos réponses.

J'ai modifié un peu les textes de couleur. Le vert et le jaune sont maintenant un peu plus foncés. Le problème du jaune est qu'on tombe rapidement dans le jaune caca. J'hésite maintenant à éclaircir un peu les backgrounds des h1.

Concernant la barre jaune qui recouvre une partie de la fleur, j'ai trouvé une solution pas très catholique pour qu'elle soit transparente à son extrémité droite.

Concernant la largeur, j'ai spécifié un max-width: 1200px mais cette commande semble ne pas être reconnue par IE. Peut-être puis-je considérer que les personnes ayant un écran de plus de 1200px de large n'utilisent forcément pas IE :lol:

Si vous avez d'autres commentaires, n'hésitez pas.

Loïc.

Lien vers le commentaire
Partager sur d’autres sites

On peut considérer que ceux qui ont 1600px de large ne naviguent pas en plein écran et peuvent réduire leur fenêtre si ils préfèrent des lignes plus courtes :)

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...