Avant même d’écrire cet article j’avais l’intention de vous parler des tendances web pour 2011, l’une de ces tendances était la mort du fold, cette zone supposé être visible par la majorité des utilisateurs. Cette tendance qui se dessine réellement cette année est fortement poussé par la montée en puissance des téléphones intelligents, tablettes et grandes variétés de résolutions d’écrans. Les Designers Web doivent s’adapter.

Nouvelle manière de penser

Jusqu’à maintenant, les designers web pensaient comme les «designers papier». Ils se donnaient un canevas et travaillaient à l’intérieur du cadre de celui-ci en essayant de faire paraître au mieux le site web dans ses différentes résolutions. Cette école de pensées n’est pas adaptée au web. Le web, c’est autre chose; le web, c’est interactif, ça bouge et surtout, c’est accessible sur diverses plateformes. C’est maintenant qu’il faut agir comme il se doit, de profiter de la chance de pouvoir construire sur un canevas qui s’adapte à l’utilisateur. Le designer se doit de profiter du fait que son utilisateur possède un écran toujours de plus en plus grand et non pas le remplir d’éléments superflus. Il doit comprendre conséquemment qu’en dépit du fait que l’utilisateur ait un petit écran, l’expérience se doit d’être tout aussi agréable.

L’arrivée de l’«Adaptive web design»

Advenant que vous suiviez moindrement ce qui se passe sur le web et que vous ignorez tout en ce qui a trait au «sujet», aussi appelé le «Responsive web design», trouvez-vous d’autres sources! Bien que le «sujet» ne soit pas nouveau, il est de plus en plus actuel. Le design web réactif permet, grâce à l’arrivée du «CSS3»,  de construire un design de site web qui se conforme à toutes les résolutions d’écrans, du téléphone mobile jusqu’à l’écran 27 pouces! Le «web design réactif» est rendu possible grâce à quatre technologies existantes soient les grilles fluides, les images flexibles, les typographies flexibles et les «medias querries». Sans sombrer dans les détails plus techniques, ces méthodes permettent au designer de construire un design qui s’adaptera de lui-même aux différents écrans. Par exemple, un site qui comporte quatre colonnes pourra aisément, devenir un site comportant 2 colonnes sur un i Pad ou encore en un site à une seule et unique colonne sur un écran i Phone et ce, tout en conservant les images d’origine, de la bonne grandeur et des typographies adaptées à l’écran utilisé.

Je vous invite par ailleurs à consulter quelques sites que j’apprécie et ensuite à redimensionner votre fenêtre de navigateur afin de bien saisir le principe.

http://www.foodsense.is

http://www.anderssonwise.com

http://www.colly.com

http://www.stephencaver.com

http://www.designmadeingermany.de/magazin/5

Mes bémols

Le «design web réactif», même à sa plus simple expression, comporte aussi des faiblesses. À mon avis, bien entendu. La première concerne la possibilité de redimensionner les images; par cette méthode, on ne peut réduire le poids, ce qui peut poser problème aux utilisateurs de téléphones mobiles qui s’attendent à un chargement rapide. Le deuxième problème vient du fait que l’utilisateur, selon la plateforme, ne cherche pas  nécessairement la même information; c’est-à-dire que l’utilisateur du cellulaire ne veut pas automatiquement se faire servir le même contenu chargé et plus approfondi que l’utilisateur d’un ordinateur.

Malgré tout, j’aime bien cette nouvelle manière de procéder et je compte bien l’adopter. À l’aide d’un peu de programmation, les faiblesses de la techniques seront rapidement oubliées. Plusieurs développeurs ont déjà soumis des solutions. La façon de faire en est encore à ses premiers balbutiements mais elle promet grandement.

Pour les intéressés, je commence tranquillement à travailler sur un site web de «templates et thèmes Adaptive template».