Site Responsive : à tester, merci

Invité · 19/05/2013, 08h58

Bonjour,
après des semaines/mois de dév., voici mon 1er site "fully responsive" :
=> http://www.kyoko-reaux-creations.fr

Je l'ai testé sur mon PC et mon smartphone (samsung), mais j'aimerais que VOUS, possesseurs de tablettes, iphone,... puissiez le tester, et me dire si vous voyez un problème majeur :
- lenteur de chargement,
- problème de résolution/adaptation au media,
- mauvaise qualité d'image (basse résolution, au lieu de la résolution correcte),
- problème de CSS, JavaScript,
- accessibilité,
- ou tout autre problème technique...

Merci

(N.B. Merci de préciser sur quel média et quelle résolution d'écran)

J'aimerais aussi savoir comment vous traitez les images "responsive", afin de les optimiser pour affichage suivant la résolution.

Pour ma part :
- j'ai enregistré plusieurs résolutions pour chaque image (960px, 750px, 640px, 480px) dans des dossiers différents ("original", "desktop", "tablet", "phone")
- puis, en jQuery, je change le dossier en fonction de la résolution

Bonne/mauvaise technique ?
Meilleure technique à proposer ?

re-Merci

**rodolphebrd** · 19/05/2013, 09h29

Bonjour,

Bravo pour le site (de mémoire c'est le deuxième que tu présentes), il est vraiment réussi et très beau.

pour les images voici ce que j'ai trouvé (et pas encore testé):

- http://adaptive-images.com
- balise noscript + JS : https://github.com/sashasklar/Respon...mages-Noscript
- balise HTML5 picture + polyfill : https://github.com/scottjehl/picturefill
- RESS (Responsive côté serveur) : http://www.netmagazine.com/tutorials...g-started-ress
- Compressive images : http://filamentgroup.com/lab/rwd_img_compression/

Je teste sur Iphone et Ipad et je te donne plus de détails
.

Invité · 19/05/2013, 10h38

Bonjour Rodolphe,
et merci.

En effet, c'est le 2ème site que je montre.
Le 1er n'était pas "responsive", et j'ai utilisé les remarques faites dessus pour améliorer mon code... et passer au "responsive design" !

Il y a sans doute encore beaucoup à améliorer et optimiser.

**rodolphebrd** · 19/05/2013, 10h54

Sur Iphone 4, Ipad (retina) et Ipad mini (tous sur Safari ): aucun problème.

Petit bémol concernant le menu responsive qui ne fonctionne pas sur ordi (mac) Safari, Chome, Firefox.

Sur Iphone :
•les drapeaux paraissent trop flous voir délavés. Si je peux me permettre, je les verrais beaucoup plus visibles.
•Lorsque l'on clique sur le menu responsive celui-ci se déroule et masque le haut de la page. Je verrais la page s'afficher à la suite du déroulement du menu.

Je commence à naviguer sur le site et je constate qu'il n'y a pas de focus sur les liens ce qui est nuisible pour la navigation au clavier.

Les liens du slideshow (page index) ne sont pas intuitifs.
La bordure (rouge) du bouton lire la suite bave un peu (je la supprimerais).

Il y a quelque chose qui me gène dans le menu:
Répéter le premier item et le reporter dans le sous-menu, n'est-ce pas redondant? Par exemple intuitivement pour aller dans "contact", je clique directement sur "contact", lien inactif puisqu'il faut faire dérouler le menu pour faire apparaitre de nouveau "contact" et enfin recliquer dessus...

Invité · 19/05/2013, 11h54

Merci pour toutes ces infos importantes !

Envoyé par rodolphebrd

Sur Iphone 4, Ipad (retina) et Ipad mini (tous sur Safari ): aucun problème.

Ca, c'est une VRAIE BONNE nouvelle !

Petit bémol concernant le menu responsive qui ne fonctionne pas sur ordi (mac) Safari, Chome, Firefox.

Argh. Je n'ai pas de Mac pour tester. Cela dit, le mini-menu "phone" n'est pas prévu pour PC.
N.B. As-tu "Actualisé" la page ? (cela peut "activer" le mini-menu)
As-tu ciblé d'où vient le problème (jQuery,... ?)

•les drapeaux paraissent trop flous voir délavés. Si je peux me permettre, je les verrais beaucoup plus visibles.

J'ai mis une opacité. Peut-être trop.

•Lorsque l'on clique sur le menu responsive celui-ci se déroule et masque le haut de la page.

Oui, c'est le comportement que j'ai choisi (choix perso). Je verrai "à l'usage" si je change ou pas.

je constate qu'il n'y a pas de focus sur les liens ce qui est nuisible pour la navigation au clavier.

quel focus ???
J'avoue que je ne me suis pas vraiment pencher sur la navigation au clavier.
J'aurais besoin de plus d'infos sur les "bonnes pratiques"...
Que devrais-je faire/modifier ?

Les liens du slideshow (page index) ne sont pas intuitifs.

Pas grave. Ce n'est qu'une fioriture (un petit "plus" pas vraiment utile)

La bordure (rouge) du bouton lire la suite bave un peu (je la supprimerais).

Vu.

Il y a quelque chose qui me gène dans le menu...
Répéter le premier item et le reporter dans le sous-menu, n'est-ce pas redondant? Par exemple intuitivement pour aller dans "contact", je clique directement sur "contact", lien inactif puisqu'il faut faire dérouler le menu pour faire apparaitre de nouveau "contact" et enfin recliquer dessus...

Fait. Le menu principal est désormais cliquable.
J'ai néanmoins laissé les liens dans le sous-menu (certes redondants, mais importants).

**rodolphebrd** · 19/05/2013, 16h15

Envoyé par jreaux62

quel focus ???
J'avoue que je ne me suis pas vraiment pencher sur la navigation au clavier.

Sur les liens auxquels on applique un hover il est de utile d'y ajouter un focus

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.link a:hover, 
.link a:focus{
 
}

La navigation au clavier se fait pour commencer très basiquement avec la touche TAB et un focus procurera une bordure brillante permettant de se situer dans le suivi des liens.

Invité · 19/05/2013, 16h31

Ok ! J'avais zappé le :focus CSS

Dans mon CSS, j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

a:focus { outline:thin dotted; }

Sans doute "un peu" léger (surtout en blanc sur blanc !)

**rodolphebrd** · 19/05/2013, 17h54

Ce que j'ai mentionné pour Ordi, concernant le menu, ne s'applique pas pour mobile...
Sur un mobile:
Depuis la page d'accueil (par exemple) pour aller à "collections", je clique dessus en m'attendant à voir se dérouler les sous-menus et j'accède à la page "collections" de manière inattendue.

C'est la différence entre un menu que l'on survol et un menu responsive qui fonctionne au touch.

Du coup le comportement précédent (du menu) est plus à l'avantage de la version mobile...

Invité · 19/05/2013, 17h59

Argh. Je me disais bien que j'avais une BONNE RAISON pour ne pas mettre les liens sur le menu principal !

Je vais voir ce que je peux faire pour que les 2 modes fonctionnent (PC + Mobile)

[EDIT] C'est fait (jQuery)

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
if(IS_PHONE){
	// IMPORTANT : on supprime les liens des Menus AVEC Sous-Menus
	$('#navMain > ul li.hasChildren > a').attr('href','javascript:void(0);');
}

Invité · 21/05/2013, 14h27

Me revoilà.
J'ai modifié le site pour avoir le FOCUS plus visible (et accessible).

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
/* --------------- FOCUS ---------------- */
#navMain ul li > a:focus , 
#menu_hor99 li a:focus,
a.abt:focus, .artListe a.abt:focus,
input:focus, textarea:focus, select:focus,
button:focus, #bloc-langues-flags button:focus { border:3px dotted #ff0099;/*fushia kyoko*/ }

Navigation clavier :
Par contre, je n'arrive pas à NAVIGUER dans les SOUS-MENUS.

Pour l'instant, je n'arrive qu'à ouvrir le sous-menu sur le focus du menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#navMain ul li > a:focus + ul { display:block; }

La TAB zappe ensuite le contenu du sous-menu...

(logique, puisqu'il perd alors le focus du menu principal)

Que manque-t-il pour y parvenir ?
CSS ou jQuery ?

**rodolphebrd** · 21/05/2013, 16h09

bonjour,

Le problème du focus sur les drop-down menus est récurrent concernant l'accessibilité.
Superfish résout ce problème avec javascript en prévoyant sa désactivation.

Invité · 21/05/2013, 17h32

Finalement, j'ai résolu le problème de manière très simple :

CSS : PAS de xxx{display:none;} NI xxx:hover{display:block;}

jQuery :
1/ tous les sous-menu : height:0;
=> de cette manière, les sous-menus restent présent (mais invisibles)
2/ HOVER : height:'auto';
3/ FOCUS : height:'auto';

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
	if( $(window).width() > 640) {	// Desktop et Tablet
		var id = '#navMain';
		// on masque
		$(id+' > ul > li > ul').css({ height:0 });
		// hover : 
		$(id+' > ul > li').on('mouseover', function() {
			$(this).find('ul').css({ height:'auto' }); // on affiche
		}).on('mouseout', function() {
			$(this).find('ul').css({ height:0 });
		});
		// focus :
		$(id+' ul li.hasChildren > a').on('focus', function() {
			$(id+' > ul > li > ul').css({ height:0 });
			$(this).parent().find('ul').css({ height:'auto' }); // on affiche
		});
	}

A priori, ça donne le résultat escompté

**rodolphebrd** · 21/05/2013, 17h49

Bien vu

, mis à part que le focus personnalisé est ajouté au focus par défaut du navigateur pour tout élément autre que la balise A.
Si Javascript est désactivé l'accès au sous-menu est plus difficile,
• il faut naviguer très vite (à la souris).
• les sous-menus ne sont plus accessibles au clavier.

Edit: remets un lien vers ton site sur ton dernier message, ça évite de scroller.

Invité · 21/05/2013, 18h12

J'ai édité mon précédent message (plus simple encore) :

CSS : PAS de xxx{display:none;} NI xxx:hover{display:block;}

jQuery :
1/ tous les sous-menu : height:0;
=> de cette manière, les sous-menus restent présents (mais invisibles),; et accessibles au focus
2/ HOVER : height:'auto';
3/ FOCUS : height:'auto';

=> http://www.kyoko-reaux-creations.fr

N.B. Il reste encore un souci : le dernier sous-menu ne se ferme pas quand on quitte le menu...

Je continue à creuser...

**jgrmstr** · 08/09/2014, 16h29

J'ai testé le site par curiosité à partir de mon PC, en redimensionnant mon navigateur.
Le menu, une fois transformé en icône, n'a aucune réaction lorsque l'on clique dessus (impossible de l'ouvrir).