Blog Web Design + Développement + SEO de l'Agence Soluo
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 niveau du design et de l’expérience utilisateur ? Quelles sont ses points faibles ? Lire la suite …
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 pour s’adapter à la taille du device et/ou du navigateur de manière intelligente et ergonomique. Pour plus d’infos, voir cet article sur les media-queries par Alsacréations. Lire la suite …
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 », car nous avons rencontré un certain nombre de difficultés, notamment avec Internet Explorer 7 et 8, malgré les outils javascript fournis dans le template. Lire la suite …
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, avant que nous décidions d’en faire un site réactif.
Note : en principe une telle décision devrait se faire en amont et avec l’accord du client car cela représente plus de travail qu’un site statique (et donc un coût un peu plus important) mais nous avions envie d’expérimenter sur ce projet qui s’y prêtait bien. Lire la suite …
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 fenêtre, ou encore de l’orientation d’un appareil mobile (smartphones et tablettes).
Cela permet donc de présenter à l’utilisateur un design et une ergonomie optimisés pour chaque type d’appareil qu’il utilise ainsi que pour la taille de la fenêtre de son navigateur.
Pour voir de quoi il s’agit, amusez-vous à redimensionner la fenêtre de votre navigateur lorsque vous êtes sur secri.fr.
Notons que selon les projets, il peut être préférable de créer un site ou une application mobile séparés. Cependant, dans la plupart des cas, l’utilisation des media-queries est la meilleure option car elle est relativement facile à implémenter et reste peu coûteuse. Lire la suite …
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.
Premières questions du formulaire de candidature à l'appel à projets Ecoquartier
Dans un précédent article sur l’accessibilité des sites Web nous avons vu qu’il était facile de créer un site accessible s’il est assez simple. Cela nécessite un tout petit peu de réflexion pendant la phase de création et une syntaxe HTML impeccable, ce qui n’est pas insurmontable.
Cependant, les choses se compliquent pour les formulaires – surtout lorsqu’ils sont complexes – ainsi que pour les applications riches. Lire la suite …
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 en les implémentant.
Selon Wikipedia, l’accessibilité du Web est la problématique de l’accès aux services et contenus en ligne pour les handicapés et les seniors.
Avec 22% de plus de 60 ans (INSEE) et environ 18% de personnes ayant un certain degré de handicap (Mise à jour du 18/04/2012), on s’attendrait à ce que la majorité de sites web soient accessibles. Ils sont pourtant une faible minorité en ce début d’année 2011. Lire la suite …