jeudi 13 décembre 2018    Inscription

bannière dossiers

 

 

Par la rédaction le 26/01/2012 Article Rating

Tout webdesigner devra un jour se frotter au « responsive webdesign ». Pour vous aider, CréaNum vous propose un premier aperçu sur les notions essentielles où l’on parle de « media queries », de l’importance du CSS3, du HTML5, mais aussi de la définition, des bonnes pratiques, en proposant quelques ressources pour se lancer.


C’est le terme à la mode, celui circule en boucle chez un grand nombre de web designers : « responsive webdesign ». Que se cachet- il derrière ce nom un peu barbare ? C’est ce que nous allons tenter d’analyser dans cet article, qui dresse un tableau aussi complet possible sur ce « phénomène », qui est en fait une adaptation du travail des graphistes à l’ère moderne du Web 2.0 et surtout, de la mobilité. « Le sentiment de contrôle que connaissent les designers dans les supports d’impression, qui est souvent un désir dans les supports web, est simplement inhérent à la limitation physique d’une page imprimée. Nous devrions accepter le fait que le Web n’adopte plus les mêmes contraintes, et que nous designons en fonction de sa flexibilité. Mais en premier lieu, il convient d’accepter "le flux et le reflux des choses" ». Cette citation est signée John Allsopp, dans son livre « A Dao of Web Design », et elle résume bien ce qui a conduit les graphistes à changer la manière de travailler afin de s’adapter à un monde 2.0.

Rendons également une sorte d’hommage à celui qui a(urait) inventé le concept de responsive webdesign, Ethan Marcotte, dont vous pouvez retrouver les articles (en anglais) sur " www.alistapart.com.

Vous l’aurez très probablement remarqué si vous travaillez régulièrement avec des clients pour la réalisation de sites web par exemple. Désormais, plus question pour eux de se contenter d’un « site Internet » : on y ajoute une version mobile. Mais certains veulent une version pour Black- Berry d’autres pour iPhone, pour Android… Sans oublier encore une autre pour Kindle, pour l’iPad, etc. Et bien entendu, le site original doit être compatible avec tous ces formats. Impossible donc de créer une version spécifique pour tous ces supports, sans compter que d’ici 5 ans, le nombre de nouveaux formats aura très probablement encore augmenté. La question à se poser est donc : devons-nous simplement subir la conséquence de perdre des visiteurs sur un appareil, au bénéfice d’en gagner sur un autre ? Ou existe-t-il une autre solution ? 

C’est à ces questions que le responsive webdesign apporte une réponse : ni l’un ni l’autre. La meilleure définition que l’on pourrait donner est : une approche qui fait en sorte que le design et le développement devraient répondre aux comportements des utilisateurs, peu importe le terminal qu’il utilise, sa plateforme ou son orientation. Plus facile à dire qu’à faire… Mais il existe pourtant déjà des solutions, utiliser des mixes entre grille et mise en page flexible, des images et une utilisation intelligente et cohérente des « media queries » de CSS. Mais bien entendu, qui dit flexibilité dit adaptabilité.

Voir tous les dossiers PhotoShop

Notations 

Sélection de tutoriels

Créez votre portfolio (2)
Par la rédaction le 19/10/2011
Dans ce didacticiel nous allons voir ensemble comment créer sous Photoshop (peu importe la version) un portfolio simple mais efficace puis comment découper le design afin de l’intégrer en utilisant le couple HTML / CSS. Le design de celui-ci est minimaliste et je pense que cela est important et valable sur n’importe lequel des supports où vous pouvez présenter vos travaux (par exemple pour le book).

[Voir le tuto...]

Autres tutoriels Flash, Web
Colorisation dans Flash
Par la rédaction le 01/10/2006

DOMAINE : Couleur
LOGICIEL : Flash
NIVEAU : Amateur

Cet exercice va vous montrer qu'il est possible de faire de la colorisation de dessin directement dans Flash pour ensuite pouvoir animer les éléments. - Dan Drapper/Philippe Beaudran

[Voir le tuto...]

Autres tutoriels Flash, Web
Flash : page de chargement /preloading
Par la rédaction le 10/05/2006

DOMAINE : Web
LOGICIEL
: Flash
NIVEAU:
Amateur
PUBLIE LE :
10-05-06

Lorsque votre site tout entier ou même une partie en Flash est un peu trop lourde, un chargement est nécessaire. Aussi appelé "preload", voici comment réaliser cette "salle d'attente". - Maurice Philippon

[Voir le tuto...]

Autres tutoriels Flash, Web