jeudi 18 septembre 2014    Inscription

bannière dossiers

 

 

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

Quid de l’intelligence et de la flexibilité

Nous avons donc compris que « responsive webdesign » rime avec flexibilité, qui pourrait aussi se traduire par souplesse, variation… Ceci implique donc de réfléchir le design d’une manière différente, et pas simplement de construire un site qui soit « flexible » et adaptable pour différents supports, formats, etc. Quelles sont donc les bonnes questions à se poser ? Personne n’a la science infuse, mais il est de bon ton de s’interroger sur les fonctions indispensables du site, les moyens de navigation (tactile, curseur, etc.), de sa version mobile, du public cible, etc. Voilà pourquoi le responsive webdesign ne se limite pas à créer un site adaptable automatiquement en fonction des différents formats et résolutions, mais plutôt à revoir la manière dont on pense le design. L’objectif d’un site, selon son support, ne sera donc pas forcément toujours le même. Un peu de « sociologie web » et de bon sens nous apprennent que la navigation n’est pas la même, le but non plus d’ailleurs, selon que l’on surfe sur un ordinateur, une tablette ou un mobile. « La hiérarchisation du contenu diffère selon le contenu. Il faut donc se demander dans quelles limites celui-ci va-t-il changer, ce qui implique des choix très forts, et une manière de prioriser l’information », explique Gaëtan Weltzer ("www.designspartan.com), designer et illustrateur.

Le responsive webdesign implique donc une hiérarchisation de l’information sélective dirons nous. C’est-à-dire qu’un site aura (par exemple) 6 colonnes sur un ordinateur, 4 colonnes sur une tablette, et 3 colonnes sur un mobile. La suppression des différentes colonnes implique donc de sacrifier certains contenus, et de retenir les plus cruciaux, sans pour autant éluder le reste. Le responsive webdesign implique donc un choix du contenu, ce que permet depuis longtemps CSS : « display: none; »

image 1

Une manière intelligente de ne pas éluder du contenu au profit d’un autre est, par exemple, de remplacer par des liens le contenu moins important. A noter que dans cet exemple, nous aurions pu utiliser « visibility: hidden », qui se contente de cacher le contenu, quand « display: none; » s’en débarrasse complètement (voir image 1).

Ceci n’est qu’un exemple de hiérarchisation. Il en existe bien d’autres, comme celui-ci, où il s’agit désormais de ré-architecturer le contenu de la page. Les deux colonnes de droite sont maintenant placées sous le texte principal, donnant ainsi une priorisation de l’information (voir image 2).

image 2


Ajustement : formats, résolutions…

De nombreux appareils induisent des tailles d’écrans, des résolutions et des orientations (portrait et paysage notamment) différentes. Il suffit d’utiliser un iPad, iPhone ou équivalent pour comprendre combien il est simple de changer l’orientation de son appareil. Et au-delà du fait de penser aux modes portrait et paysage, il faut également songer aux différentes tailles d’écrans ! S’il est toutefois possible de les regrouper par « catégories », voire pour chaque appareil, qui nous dit que cette taille d’écran sera encore disponible dans quelques années ? De plus, il faut penser que tout le monde n’utilise pas un navigateur dans sa taille maximum…

C’est pourquoi Morten Hjerde ("http://sender11.typepad.com/) et quelques collègues se sont amusés à identifier les caractéristiques de 400 appareils vendus entre 2005 et 2008, dont les plus classiques sont représentées dans l'image 3.

Mais depuis 2008, de nombreux nouveaux appareils sont apparus. Et il est donc impossible de créer un design particulier pour chacun d’entre eux. Il convient donc de trouver des solutions, dont la plus évidente : tout rendre flexible. Il y a

encore quelques années, les seuls éléments flexibles d’un site étaient les colonnes et le texte. Mais tout a bien changé depuis : les images peuvent notamment être automatiquement réajustées, et nous disposons également de solutions de contournement pour éviter de casser la disposition générale (même si cela implique un écrasement des contenus, qui perdent en lisibilité). C’est une solution technique assez simpliste et limitée, mais elle peut s’avérer pratique. Il existe d’ailleurs des techniques pour rendre les images « fluides » (voir images 4 et 5).


Rendre les images flexibles n’est pas forcément la solution à tout. On peut également imaginer un autre cas de figure, dans lequel l’image est retaillée selon l’orientation en découpant par exemple intelligemment une image ou un logo. Ceci évite donc un redimensionnement de l’image qui pourrait s’avérer un mauvais choix selon l’image (qui risque d’être déformée).


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