Création d'un design mobile et accessible

Salut tout le monde ^^

Bon, je pense que tout est dans le titre ou presque. Je me lance aujourd'hui dans un nouveau défi, pas forcément simple.

J'aimerais créer un site qui puisse passer à la fois sur les mobiles et sur les ordinateurs standard. Mais qui, en plus, serait accessible aux non-voyants. Au passage, il est prévu une évolution multi-langue.

Le détail, c'est que le site en question, se baserait énormément sur le graphisme et les images. Très peu de texte.

Ma question est finalement assez simple... Je démarre comment pour faire ma maquette (et les images) ?

A vue de nez, je partais sur 3 résolutions : 300x200 (blackberry); 600x480 (iphone 4 en paysage) et 1024x768 (ordinateur de bureau classique). Et donc sur 3 interfaces similaires, mais chacune adaptée à la résolution (sachant que je peux mettre clairement plus d'informations sur un écran en 1024x768 qu'en 300x200)... mais ça me semble lourd.

Salut,

N'oublie pas les tablettes : même si l'on y trouve du 1024*768, il y a des spécificités qui font que ce n'est pas tout à fait un écran d'ordinateur en 1024*768.

Quant aux maquettes graphiques, il faudra en prévoir au moins deux pour chaque type de page.

En tout cas, un tél défi n'est pas impossible à relever.

Salut,

Pour t'aider à sélectionner les différentes tailles d'écran je te suggère cet outil : http://quirktools.com/screenfly/

Si je devais choisir 3 largeur d'écran, je prendrais : 320px (mobile), 768px (tablettes) et 1024 et + (screen)

Du coup ça te fait 3 maquettes à faire

Bon courage

oki, donc je dois rester sur l'idée de 3 maquettes. (et tes propositions semblent raisonnables, j'avoue que j'y connais rien en tablette et en mobile perso ^^)

Et pour les non-voyant, y a un truc à respecter pour les maquettes ? (tant qu'on y est)


Au fait, on peut trouver des émulateurs de mobiles et de tablette ? (idée de tester sur le PC à quoi ça devrait ressembler sur blackberry, iphone et autre) ? Parce que je suppose que réduire la taille de sa fenêtre à la résolution de l'écran de mobile, c'est pas franchement fiable.


@Victor : tu veux dire quoi par "faudra en prévoir au moins 2 par type de page" ?
Modifié par Lothindil (29 Nov 2011 - 12:34)

Pour l'accessibilité (ce n'est pas que les non voyants), c'est à réfléchir globalement même si la majeure partie se règle lors de l'intégration.

Quelques pistes :
- Images porteuses de contenu dans le HTML avec alternative renseignée et pertinente.
- Images de décoration avec alternative vide
- Vérifier que l'information est présente avec ou sans Javascript activé
- Vérifier que l'information est présente avec ou sans CSS activé
- Navigation au clavier facile et compréhensible
- Pas d'erreurs HTML selon le DOCTYPE (pour le cas d'HTML5 c'est encore un peu vague)
- Niveau de titre cohérent (H1 > H6)
- Code langue déclaré
- etc...

Après ça dépend de ce que tu vises comme niveau d'accessibilité. Un niveau Bronze (A) est déjà une très belle performance sous Wordpress.

A+

Lothindil a écrit :
@Victor : tu veux dire quoi par "faudra en prévoir au moins 2 par type de page" ?

Tu as répondu à ta question en évoquant trois maquettes, qu'il faudra multiplier par le nombre de pages types (page d'accueil, page d'article, etc.).

Maki a écrit :
Pour l'accessibilité (ce n'est pas que les non voyants), c'est à réfléchir globalement même si la majeure partie se règle lors de l'intégration.

Très bien pour ces deux rappels essentiels.

Maki a écrit :
Quelques pistes :
- Images porteuses de contenu dans le HTML avec alternative renseignée et pertinente.
- Images de décoration avec alternative vide
- Vérifier que l'information est présente avec ou sans Javascript activé
- Vérifier que l'information est présente avec ou sans CSS activé
- Navigation au clavier facile et compréhensible
- Pas d'erreurs HTML selon le DOCTYPE (pour le cas d'HTML5 c'est encore un peu vague)
- Niveau de titre cohérent (H1 > H6)
- Code langue déclaré
- etc...

Ce à quoi on peut ajouter :
* un contraste suffisant pour les couleurs,
* l'information ne doit pas être véhiculée uniquement par la couleur (ex. : « les champs en rouge sont obligatoires »),
* l'information ne doit pas être véhiculée uniquement par la forme ou la position (ex. : « voir l'encart à coins arrondis contenant le tableau en haut à gauche »).

Maki a écrit :
Après ça dépend de ce que tu vises comme niveau d'accessibilité. Un niveau Bronze (A) est déjà une très belle performance sous Wordpress.

Un tel niveau correspond au niveau minimal : pour atteindre un niveau normal d'accessibilité, il s'agit plutôt du niveau AA WCAG 2.0 (niveau Argent Accessiweb), qui est, d'ailleurs, le niveau de conformité requis par le RGAA. Quoi qu'il en soit, il est plus sage de mettre en place une démarche d'amélioration progressive et continue de l'accessibilité du site en question.

Enfin, il est encore plus sage de savoir ce qu'est vraiment l'accessibilité du Web en suivant une formation à l'une des méthodes d'évaluation ayant fait leurs preuves.

@Victor : Le but était de ne pas décourager une si louable entreprise . J'ai un peu de mal avec la notion de niveau minimal. Si tous les sites pouvaient se rapprocher (et atteindre) le niveau bronze ce serait déjà formidable et le web n'en serait que meilleur.

@Lothindil : Quoi qu'il en soit l'intention est louable et je t'encourage à aller dans ce sens. Un site accessible, c'est avant tout un site de qualité, plus lisible (y compris par les robots). En y pensant dès le début tu verras que ça ne te prendra pas tant de temps que cela.

Bon courage

J'ignore ce que sont les niveaux, mais en gros, mon but c'est que mon site soit accessible à un maximum de monde pour que des publics très différents puissent se retrouver au sein d'un même espace sur le web, quelque soit leur moyen de communication (lecteur d'écran, téléphone, tablette, ordinateur,...).

Et je note tous les trucs où je dois faire attention. (ça va être sympa de faire un site moderne utilisant à la fois l'ajax et pouvant s'en passer, surtout avec ce genre de site )

*note qu'elle va avoir une flopée de maquettes au final, genre une dizaine de page *3 maquettes*


Pour les formations, ça m'intéresserait... mais ça va pas être possible. (suis chômeuse en Belgique et c'est pas mon domaine , ils sont pas fans des reconversions)
Par contre, des bouquins ou des sites webs où je peux choper des infos, ça me va très bien ^^ (j'ai déjà vu quelques trucs sur alsacréations)

Lothindil a écrit :
Pour les formations, ça m'intéresserait... mais ça va pas être possible. (suis chômeuse en Belgique et c'est pas mon domaine , ils sont pas fans des reconversions)

Vu que tu es en Belgique, tu peux te tourner du côté d'Anysurfer pour les formations.

Lothindil a écrit :
Par contre, des bouquins ou des sites webs où je peux choper des infos, ça me va très bien ^^ (j'ai déjà vu quelques trucs sur alsacréations)

Tu peux ajouter aux ressources susceptibles de t'intéresser le portail Access-key (je te conseille de consommer les vidéos sans modération).

Maki a écrit :
Si je devais choisir 3 largeur d'écran, je prendrais : 320px (mobile), 768px (tablettes) et 1024 et + (screen)

sachant que le 1024, c'est pas forcément 768px de haut mais aussi 600px sur les netbooks normaux. Ne pas préjuger de la hauteur de l'écran quoi, entre les netbooks, les 4/3 et les 16/9 ou 16/10 ...

L'accessibilité au niveau graphique :
- contrastes minimaux entre couleur de texte et couleur de fond
- des liens distinguables du reste du texte (le plus simple est de les prévoir soulignés)
- formulaires "complets" (avec bouton de soumission qui ne se réduit pas à "OK" - OK quoi ? - mais plutôt un verbe d'action: "Supprimer mon compte", "Envoyer", "Connexion" et étiquettes systématiquement devant input, textarea, select)
Le reste est plus de l'ergonomie : cf. la première partie du PDF de la charte ergonomique (pas mal du tout, des trucs ont vieilli mais ça va) ou les vidéos Paris-Web d'Amélie Boucher pour commencer.

Le plus gros du boulot d'accessibilité est ensuite dans l'intégration statique HTML/CSS et dans le choix judicieux du CMS qui ne doit pas te brider puis éviter de faire du jQuery à tort et à travers sans savoir ce que l'on provoque.
Modifié par Felipe (29 Nov 2011 - 23:16)

Felipe a écrit :

sachant que le 1024, c'est pas forcément 768px de haut mais aussi 600px sur les netbooks normaux. Ne pas préjuger de la hauteur de l'écran quoi, entre les netbooks, les 4/3 et les 16/9 ou 16/10 ...

Tiens, c'est marrant, tous les netbooks que j'ai connus qui n'était pas en 4/3 s'élargissait plutôt que de perdre de la hauteur (passage à 1288 ou à 1366)

Felipe a écrit :
L'accessibilité au niveau graphique :
- contrastes minimaux entre couleur de texte et couleur de fond
- des liens distinguables du reste du texte (le plus simple est de les prévoir soulignés)
- formulaires "complets" (avec bouton de soumission qui ne se réduit pas à "OK" - OK quoi ? - mais plutôt un verbe d'action: "Supprimer mon compte", "Envoyer", "Connexion" et étiquettes systématiquement devant input, textarea, select)
Le reste est plus de l'ergonomie : cf. la première partie du PDF de la charte ergonomique (pas mal du tout, des trucs ont vieilli mais ça va) ou les vidéos Paris-Web d'Amélie Boucher pour commencer.

Plus dur à intégrer les liens soulignés (bah ouais, ça fait moche dans le genre de site, mais je note quand même; je trouverais une solution^^)
Pour le PDF, je vais bouquiner ça à mon aise ^^

Felipe a écrit :
Le plus gros du boulot d'accessibilité est ensuite dans l'intégration statique HTML/CSS et dans le choix judicieux du CMS qui ne doit pas te brider puis éviter de faire du jQuery à tort et à travers sans savoir ce que l'on provoque.

Pas fan du jQuery à outrance et pas de CMS prévu ici ^^
pour l'intégration, ouais, je m'en doute que ça va être un gros boulot.

Lothindil a écrit :
Plus dur à intégrer les liens soulignés (bah ouais, ça fait moche dans le genre de site, mais je note quand même; je trouverais une solution^^)

À défaut de souligner les liens, fais au moins en sorte que le contraste entre la couleur du lien et celle du texte environnant soit suffisant.