[Pro] Site de photographe freelance

D'accord avec juliesunset, c'est parfaitement illisible. J'ai mis un moment pour déceler qu'il y a un menu à gauche.

juliesunset a écrit :
Bonjour,
Il va falloir foncir un peu l'écrire du menu parce que c'est là c'est illisible et j'ai pourtant de bon yeux.

Obscurcir, assombrir, ternir, opacifier, foncer même au besoin, ce ne sont pas les mots qui manquent, inutile d'en inventer

D'accord avec le commentaire, l'ensemble est un peu pâle, et ce menu pas très intuitif

Salut,

Laurie-Anne a écrit :
Le site n'est pas utilisable sur tablette...

Le monsieur a dit qu'il ne s'est pas encore occupé de la partie responsive.

Bonsoir,


J'ai bien compris toutes les remarques, concernant la lisibilité. Chez moi je n'ai pas ce problème, mais il est vrai qu'il faut savoir anticiper le rendu sur les différentes configurations... Je vais donc revoir ma copie dans ce sens, et vous soumettrais une version corrigée d'ici la fin de semaine.
A ce sujet, certains ont-ils des suggestions sur les "limites" à ne pas dépasser, en termes de lisibilité/accessibilité ?

Sinon, pour ce qui est des bugs que je signale sur IE9 (avec jScrollpane, l'alignement vertical, et enfin la vidéo avec Vimeo), personne n'a fait de remarque... Pourtant je ne cacherais pas qu'un peu d'aide serait bienvenue !
J'attends donc vos coups de pouce (merci d'avance !) sur ces points, et bien sûr, je vous ferais part de la prochaine version, avec le problème de lisibilité pris en compte, dès que possible.

Enfin, sur le code (outre le CSS, donc^^), quelqu'un voit-il des corrections/améliorations à apporter ?


Merci encore pour vos réponses !


@Victor BRITO > Merci pour cette précision, j'allais faire la même remarque... Effectivement, le site n'est pas encore optimisé pour les supports mobiles (smartphones & tablettes), mais je préférais, pour des raisons d'organisation et de temps, valider d'abord avec vous (et oui !) la version "classique" du site, avant d'aller plus loin. Ca fait toujours moins de CSS à corriger...

Pour les bugs concernant IE 9, le mieux est que tu ouvres un sujet dans le salon approprié.

En jetant un rapide coup d'œil, je constate les points suivants à améliorer :
* déclarer la langue du site (attributs xml:lang et lang au niveau de l'élément racine html) ;
* supprimer les deux éléments ul vides qui invalident le code de ta page d'accueil ;
* utilise max-width: 100% plutôt que width: 100% pour éviter que les images ne débordent de leur conteneur (height: auto OK) ;
* même s'il s'agit d'un site de photographe, il convient d'alléger le poids de la photo de la page d'accueil : 829 ko pour du JPEG, ça se ressent au premier chargement de la page ;
* des attributs title superflus à supprimer au niveau des liens de ton menu ;
* les h2 dans le menu sont superflus ;
* les liens en forme de pictogrammes gagneraient à être regroupés dans une liste non ordonnée ;
* quand je navigue au clavier, la tabulation n'est pas cohérente au niveau de ces pictogrammes et je n'atteins pas les liens du menu latéral (testé sous Safari, la navigation par tabulation ne semblant plus marcher sous Firefox 16 ) ;
* songer à fournir une alternative pertinente aux vidéos en Flash (si tu veux ne pas faire fuir ne serait-ce que les utilisateurs d'iOS quand tu songeras au responsive ) ;
* l'utilisation de listes de définitions n'est pas pertinente pour les galeries photo ;
* si tu peux éviter les scrolls verticaux internes (comme le texte de la page Votre vie est bis ou la galerie de photos bien fournie de la vie qui est ter, par exemple), ce sera mieux : faire défiler un contenu n'est jamais aisé, surtout quand on n'a pas de souris ou qu'on dispose d'une interface tactile.

Bref, en plus des remarques déjà formulées par mes petits camarades, il y a du pain sur la planche.

Bonjour,


Merci pour toutes ces remarques. A mon tour, je précise quelques points :

Concernant les images, elles n'ont pas été optimisées, pour la simple raison qu'il s'agit là d'un site "essai". Dans la version définitive, bien sûr, les images seront optimisées, afin d'alourdir au minimum le site.

Certaines balises (h2 dans le menu, listes de définitions, ...) ne sont pas de mon fait, mais générées automatiquement par Wordpress. Sur ces points donc, je ne peux pas intervenir.

Pour ce qui est des scrolls internes, c'est un choix graphique, car je ne voulais préserver la mise en page (et donc, sa longueur). Ce choix peut être discutable, mais il me semble cohérent.
Encore une fois la mise en forme pour interface tactile n'est pas faite, et... je ne crois pas que beaucoup de personnes se servent d'un ordinateur (surtout dans le public visé par ce site) sans souris. Je ne suis donc pas convaincu par cette remarque, sur la navigation par tabulation.

a écrit :
les liens en forme de pictogrammes gagneraient à être regroupés dans une liste non ordonnée

> Pourrais-tu être plus explicite ? Je ne vois pas en quoi cela dérange, que ce soit une liste ordonnée actuellement...

a écrit :
supprimer les deux éléments ul vides qui invalident le code de ta page d'accueil

> Encore une fois, je veux bien des précisions : pour moi chaque balise <ul> contient bien une balise <li>... Je transmets le code concerné, si quelqu'un veut bien éclairer ma lanterne...

<ul id="leftmenu">

            <li class="series"><h2>S&eacute;ries</h2><ul>
            <?php $args = array( 'numberposts' => 10, 'order'=> 'ASC', 'category' => '3' );
			$postslist = get_posts( $args );
			foreach ($postslist as $post) :  setup_postdata($post); ?> 
			<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li><?php endforeach; ?></ul></li>
            
            <li class="portraits"><h2>Portraits</h2><ul>
            <?php $args = array( 'numberposts' => 10, 'order'=> 'ASC', 'category' => '5' );
			$postslist = get_posts( $args );
			foreach ($postslist as $post) :  setup_postdata($post); ?> 
			<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li><?php endforeach; ?></ul></li>
            
            <li class="reportages"><h2>Reportages</h2><ul>
            <?php $args = array( 'numberposts' => 10, 'order'=> 'ASC', 'category' => '6' );
			$postslist = get_posts( $args );
			foreach ($postslist as $post) :  setup_postdata($post); ?> 
			<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li><?php endforeach; ?></ul></li>
            
            <li class="mode"><h2>Mode</h2><ul>
            <?php $args = array( 'numberposts' => 10, 'order'=> 'ASC', 'category' => '4' );
			$postslist = get_posts( $args );
			foreach ($postslist as $post) :  setup_postdata($post); ?> 
			<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li><?php endforeach; ?></ul></li>
            
            <li class="edition-presse"><h2>&Eacute;dition/presse</h2><ul>
            <?php $args = array( 'numberposts' => 10, 'order'=> 'ASC', 'category' => '8' );
			$postslist = get_posts( $args );
			foreach ($postslist as $post) :  setup_postdata($post); ?> 
			<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li><?php endforeach; ?></ul></li>
            
            <li class="projets-pedagogiques"><h2>Projets p&eacute;dagogiques</h2><ul>
            <?php $args = array( 'numberposts' => 10, 'order'=> 'ASC', 'category' => '7' );
			$postslist = get_posts( $args );
			foreach ($postslist as $post) :  setup_postdata($post); ?> 
			<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li><?php endforeach; ?></ul></li>
		</ul>

Pour le reste, je m'en occuperais dès que possible, et vous soumettrais ma copie corrigée

Merci encore pour toutes ces remarques !

[Edit] D'après un ami à moi (mais c'est à confirmer), l'iframe Vimeo détecte automatiquement la présence (ou non) de Flash sur le système, pour passer en canvas video si besoin... Le problème serait donc réglé (sauf pour le bug IE^^).
Modifié par soykje (31 Oct 2012 - 09:49)

soykje a écrit :
Certaines balises (h2 dans le menu, listes de définitions, ...) ne sont pas de mon fait, mais générées automatiquement par Wordpress. Sur ces points donc, je ne peux pas intervenir.

Vu le bout de code que tu présentes (qui mêle PHP et code HTML « en dur »), tu peux modifier le template du menu pour virer les h2. Pour le reste, c'est à vérifier.

soykje a écrit :
je ne crois pas que beaucoup de personnes se servent d'un ordinateur (surtout dans le public visé par ce site) sans souris. Je ne suis donc pas convaincu par cette remarque, sur la navigation par tabulation.

Le jour où (je ne te le souhaite pas, bien entendu) tu auras un bras dans le plâtre qui te rendra l'usage de la souris incommode, tu réviseras ton jugement.

soykje a écrit :
les liens en forme de pictogrammes gagneraient à être regroupés dans une liste non ordonnée

> Pourrais-tu être plus explicite ? Je ne vois pas en quoi cela dérange, que ce soit une liste ordonnée actuellement...
Ils sont codés avec des div, alors que l'on a plutôt affaire à une liste de liens, comme pour le menu latéral.

soykje a écrit :
supprimer les deux éléments ul vides qui invalident le code de ta page d'accueil

> Encore une fois, je veux bien des précisions : pour moi chaque balise <ul> contient bien une balise <li>...
Et pourtant, quand je regarde le code source, je tombe bien sur des éléments ul, comme suit :

<h2>Portraits</h2><ul>
            </ul>

Pour y remédier, insère la boucle foreach dans une condition permettant de vérifier si le tableau PHP analysé par la boucle foreach n'est pas vide, cette condition encadrant, bien entendu les balises <ul> et </ul>.
Modifié par Victor BRITO (31 Oct 2012 - 12:25)