public marks

PUBLIC MARKS from Monique with tags webdesign & [fr]

January 2013

Ergonomie web : les mythes et légendes ont la vie dure...

by 1 other

Malgré le travail acharné de grands ergonomes Web reconnus (Amélie Boucher et Jean-François Nogier chez nous, ou Steve Krug et Jakob Nielsen aux USA, pour ne citer qu’eux), des mythes perdurent en donnant des réponses à l’apparence facile et pratique aux profanes, tout en dépréciant notre démarche au passage.

November 2012

Les User Agents, c’est le mal | Édition Nº28 | le train de 13h37

by 1 other

Il est des pratiques qu’il est bon de rappeler, mais il est également bon d’en rappeler les origines. Petite leçon d’histoire par Rudy Rigot à propos des agents utilisateurs et les bonnes pratiques à appliquer vis-à-vis de ceux-ci.

Prendre en compte l'accessibilité dans vos projets » Webdesign Friday (#wdfr)

Vous êtes designer, intégrateur, concepteur d’interfaces ou chef de projet. De votre compétence dépend l’accessibilité des services et applications que vous développez. Faisons un point sur cette notion et voyons comment vous allez pouvoir la prendre en compte.

October 2012

AcceDe Web - La démarche accessibilité

Les notices AcceDe Web s’adressent de façon spécifique à chaque intervenant d’un projet web et sont adaptées aux différentes étapes de conception.

Optimiser le rendu de @font-face : tout un programme ! – Clever Age, 100% digital

by 1 other

Non, ce qui m’intéresse moi, c’est de vous présenter un peu plus en détails les différents formats de police, en particulier TTF, OTF et WOFF, de tenter de répondre à la question « Mais pourquoi mes fontes sont toutes cracra sous Windows », et de vous donner quelques astuces pour optimiser le rendus des polices @font-face.

September 2012

CSS : l'Art & la Science

Jamais, non, plus jamais n’oserez vous approcher une page HTML sans ressentir le désir ardent d’en découvrir l’envers, d’en démasquer la charpente, d’en partager la mécanique.

La tête dans le Flux ! - CSS, la grande remise en question ?

La morale de ce (long) billet est qu’il faut parfois remettre en question ses a priori et préceptes établis et que CSS, comme le Web en général, est un concept vivant qui évolue. A nous d’évoluer avec lui.

La tête dans le Flux ! - Mobiles : tout est une question de taille !

Ça commence à se savoir, les navigateurs mobiles n’en font qu’à leur tête rien que pour nous mener la vie dure : tailles virtuelles, viewport fluctuants, pixel-ratios incohérents, résolutions divergentes, valeurs faussées selon les contextes, etc.

Bref, les mobiles nous mentent ! Et en beauté.

Comme les tableaux et les listes de valeurs ne sont pas toujours très parlants, je me suis dit que des exemples visuels et illustrés seraient bien plus éloquents.

August 2012

CSS3 : animations et transitions d'images ou d'objets - CSS Débutant

les trucs qui bougent pourtout, qui scintillent, qui clignotent sans arrêt, ont un haut pouvoir de nuisance sur la concentration et la sérénité du visiteur. Ces techniques sont donc à utiliser avec raison et parcimonie.

Ergonomie des sites Internet : méfions-nous des recettes | Formation et culture numérique - Thot Cursus

Au-delà des modes et des recettes toute faites, les principes de base d'une bonne ergonomie web sont connus. Ils ne datent pas d'hier.

July 2012

Notices [AcceDe Web]

Notice d'accessibilité pour la conception graphique Notice d'accessibilité HTML/CSS Notice d'accessibilité interfaces riches et JavaScript Notice d'accessibilité éditoriale (modèle)

KNACSS, un mini framework CSS qui claque sous la dent !

by 4 others

Son but est de servir de base commune à tous les projets d'intégration web, grâce à une nomenclature et des conventions constantes. Mais aussi de faciliter les positionnements d'éléments, de gérer les alignements, les gouttières, etc. Le tout de la façon la plus propre et accessible possible

Les boutons de validation en voie de disparition ?![ Usaddict: Ressources sur l’ergonomie des interfaces (le blog Usabilis)]

by 1 other

Sur l'impulsion du Web riche et du mobile (téléphones et tablettes) on voit disparaître des boutons permettant de confirmer une action….

Charte CSS

Nous codons pour des humains, pour nos collaborateurs présents et/ou futurs donc un code lisible et compréhensible est primordial. Cette charte propose des règles pour écrire des CSS cohérentes et uniformisées pour améliorer leur maintenabilité.

designers interactifs - Ressources - Boîte à outils - Les 10 meilleurs outils dédiés au prototypage pour l’architecture de l’information

En architecture de l’information, l’interface filaire (ou communément appelée story-board) est une méthodologie de prototypage rapide qui permet de déterminer la structure d’un site web ou d’une application logicielle. Elle consiste à représenter les unités d’information, leur hiérarchie de façon schématique et à formaliser les interactions au niveau d’un gabarit d’une page-écran.

ARIA, il serait temps de s’y mettre ! | Édition N°8 | le train de 13h37

by 2 others

ARIA, vous en avez peut-être entendu parler sans bien savoir à quoi ça sert, ni comment l’utiliser… une lacune qu’Aurélien vous propose de combler en vous en expliquant les bases et en vous montrant plusieurs exemples d’utilisation concrète.

Web mobile : introduction et glossaire - Alsacreations

une introduction à la conception web mobile sous forme d'un glossaire des principaux termes et d'une double méthodologie pratique

Un joli casse-tête en intégration – HTeuMeuLeu

by 3 others
C'est un effet graphique assez classique, en particulier dans la presse papier. Pourtant, il se trouve que ça reste relativement complexe à reproduire de manière simple en CSS. Voici les règles à respecter : Le texte ne doit contenir aucune balises (donc pas de span pour chaque ligne, pas de br) Vous pouvez utiliser autant de balises que vous voulez autour du texte Pas de JavaScript, que du HTML et CSS Le fond blanc doit suivre le contour du texte Il y a une marge à l'intérieur du fond blanc autour du texte de 20px à gauche et à droite de chaque ligne, et d'environ 10px en haut et en bas Le texte est dynamique, et on doit donc pouvoir le modifier en conservant l'effet La solution doit fonctionner sur les navigateurs modernes (IE9, Firefox 13, Chrome 19, ...)

L'Agence nationale des Usages des TICE - Les sites Web plus accessibles aux malvoyants et aux dyslexiques

Deux chercheurs proposent une liste de recommandations d'accessibilité pour les malvoyants et les dyslexiques sur la base d'une comparaison de différents référentiels. L'objectif est de rendre la navigation et le contenu des sites plus lisibles par les personnes handicapées, mais les recommandations peuvent être utiles également au grand public.

Structurer un site web avec XMind « Trouve ta voie !

Le cauchemar des webdesigners, c’est le client qui a une idée floue de ce qu’il veut. Ou qui change d’avis sur la structure de son site plus souvent que de chemise.

C’est un peu normal, pourtant. N’étant pas tous des spécialistes de l’écriture web, nous avons parfois du mal à nous représenter la structure finale de notre site. Une mindmap, avec sa structure fortement hiérarchisée peut nous y aider.

June 2012

Saisis un ticket ! Oussa ???

by 1 other

Comment signaler un souci technique sur un site Web ?

La solution est alors peut-être à chercher du côté du Web sémantique. Ajouter au code source de chaque page des informations sémantiques pointant vers un système de gestion de tickets.

May 2012

Les pratiques mobiles du Mal – HTeuMeuLeu

by 1 other

De plus en plus, je rencontre des pratiques absolument horribles sur des sites soit disant optimisés pour mobile. Là où j'ai le sentiment que l'ergonomie et l'utilisabilité des sites desktop s'est améliorée, j'ai l'impression qu'on fait un retour 10 ans en arrière sur mobile. Des chefs de projet, graphistes, développeurs et intégrateurs se permettent tout et n'importe quoi sans aucune considération pour les utilisateurs de leurs sites.

Lisibilité des sites web, font-size : 100% – 16px | All For Design

by 2 others

solutions mises en place par les webdesigners pour améliorer la lisibilité de leur contenu textuel

Glisser-déposer accessible avec WAI-ARIA

by 2 others

Cet article est destiné aux personnes voulant créer des applications internet riches avec une fonctionnalité de glisser-déposer et souhaitant la rendre accessible.

Traduction par Cédric Trévisan de "Accessible drag and drop using WAI-ARIA" de Gez Lemon

Édition Nº1 | le train de 13h37

le train de 13h37 ne souhaite pas s'arrêter aux limites du Web. Découvrir des talents et leur donner la parole est un de nos objectifs.