Revue de site : l’interface de LifeInMyShoes.org

thumb01

Je vous propose de décortiquer un site web chaque mois afin d'examiner son interface utilisateur. Je tâcherai de choisir des sites plutôt bien exécutés, utilisant des techniques actuelles et ayant des designs intéressants. Pour la première édition de l'année, nous allons nous pencher sur le site Life In My Shoes. Quelles sont ses forces au … [Lire plus...]

Faire varier le format d’une date avec CSS et les media-queries

calendar

Nous allons voir comment dans un blog "responsive" on peut afficher un format de date différent, comme par exemple avoir tantôt le mois en toutes lettres (ex : Septembre), tantôt l'abréviation du mois (ex : SEP), le tout en gardant une syntaxe HTML propre. Rappel sur le design "responsive" (ou "réactif") : il s'agit d'utiliser les media-queries … [Lire plus...]

Responsive web design : Comment optimiser son site pour mobiles et tablettes (3ème partie)

thumb4

Après les phases initiales de recherche et de design graphique que nous avons abordé dans deux articles précédents, vient le temps de l'intégration HTML et CSS. En principe ce n'est pas très compliqué : il suffit de suivre la méthode de 320 and up qui consiste à intégrer d'abord pour la taille de fenêtre la plus petite. Je dis "en principe", … [Lire plus...]

Responsive web design : Comment optimiser son site pour mobiles et tablettes (2ème partie)

thumb3

Dans un article précédent nous avons parlé des outils que nous avons choisi pour la réalisation du site secri.fr, afin d'en faire un site "responsive" (ou en français, "réactif"). Cependant, avant de passer à l'intégration du site il nous a fallu repenser le design. En effet, le visuel du site en 960px de large avait déjà été validé par le client, … [Lire plus...]

Responsive web design : Comment optimiser son site pour mobiles et tablettes (1ère partie)

responsive_thumb

Nous avons récemment mis en ligne le site secri.fr, pour un syndic de copropriété situé en région parisienne. Nous l'avons intégré de sorte qu'il soit "réactif". En anglais on parle de "responsive web design". En pratique, cela signifie qu'on utilise les media-queries (CSS3) pour appliquer des styles différents selon la taille de l'écran, de la … [Lire plus...]

Concevoir des formulaires ergonomiques et accessibles

ecoq

Dans cet article nous allons voir quelques points qui pourront nous aider à concevoir des formulaires ergonomiques et accessibles. La première partie concerne la phase de conception graphique, la seconde nécessite une connaissance du HTML car elle est technique. Dans un précédent article sur l'accessibilité des sites Web nous avons vu qu'il … [Lire plus...]

Créer des sites accessibles, c’est facile

monkey

Dans cet article nous allons parcourir quelques règles d'accessibilité qui concernent le code HTML, l'écriture des contenus, ainsi que les phases de conception et de design. Ces règles rendent service à une multitude d'utilisateurs. En parallèle, elles favorisent un bon référencement naturel, ce qui n'est pas négligeable. Il y a donc tout à gagner … [Lire plus...]

5 types de notifications pour applications web

Notification SoluoCRM

  Chez Soluo nous travaillons actuellement sur un projet d'application web. C'est dans ce cadre que je me suis penchée sur les différentes manières d'afficher des messages d'erreur, d'avertissement, d'information et de confirmation. Les messages d'erreur sont probablement les plus connus, mais les autres types de notifications peuvent … [Lire plus...]

Comment utiliser CSS3 dès aujourd’hui

Logo de CSS3

CSS3 en bref CSS3 permet la création d'effets visuels qui ne pouvaient pas être réalisés auparavant, ou qui nécessitaient du marquage en plus et/ou du Javascript. En bref, CSS3 simplifie le job de l'intégrateur et met plus d'outils à sa disposition. Parmi les nouveautées inclues dans les specifications CSS3, on trouve : text-shadow : en une … [Lire plus...]

Maquettes interactives : le design dans le navigateur

design_browser

Toujours à la recherche de nouveaux process, outils et pratiques, je me suis penchée sur l'idée de ne plus passer par Photoshop pour la création graphique de sites, mais de passer tout de suite à l'intégration. Francis Chouquet (fran6art) parle de "maquettes interactives". Le sujet fait un peu de bruit depuis quelques mois, certains voient les … [Lire plus...]