A DAO of flexibility

The intersection of design and dev

What it is about ?

Ethan Marcotte is an american webdesigner who worked for famous newspapers like “The New York Magazine”. He also wrote some important articles and books about responsive webdesign.

First of all, we should make a link between web design and prepresse. Furthermore we should think about where we come from and where we are now, and that everything that is shaped on a computer has its origins in something else that we know from the physical world.

Think about choosing a canvas, it is the part where we give the work a shape, as an artist you can choose to work on stone or on paper, well in web design the canvas is the web browser.

In addition, we are encouraged to think beyond our own desktop pc and to consider all the different devices that are actually connected to the Internet. To realize the amount of devices those, we are invited to regroup all of them on a table.

We should also consider that every project starts with a flexible grid, hence we should work with proportions instead of static pixel sizes to facilitate the process of making things responsive.

Another topic is Media Querie, we can consider it as a part of the code that is responsible to resize the text so that it scales better with the images and grid. A brief definition of the Media Querie is: “a CSS3 module allowing content to adapt to the screen resolution”.

To conclude, the conference showed us how the concept of responsive design was created and how nice it is but that we still should work on spotting bugs and if needed, work on an alternate design for certain devices.

Citations

“Le web n’est pas une question de pixels mais de proportions”

“Responsive design, le renouveau du web en 2010”

“Aucun design/concept ne fonctionne parfaitement en dehors du contexte dans lequel il a été créer.”

“Permettre à son site de savoir s’adapter et se modifier de lui même assurera sa fluidité, sa perrenité et une expérience positive pour l’utilisateur.”

Ethan Marcotte: A Dao of Flexibility

Biographie

Le webolutionnaire Ethan Marcotte, habite à Boston, dans le Massachusetts, il est l’homme qui a écrit Responsive Web Design, le livre de chevet des designers. Certaines personnes de son agence le désignent comme un visionnaire ou un génie. D’autres ailleurs préfèrent le terme de webolutionnaire. On attendra que la pratique se soit imposée avant de les rejoindre. Mais à la vitesse à laquelle sa thèse se répand, il peut sérieusement prétendre a ces titres.

Dans sa jeunesse, Ethan a eu pour clients New York Magazine, l’université de Stanford, ou le festival du film de Sundance. A un moment, lui qui est « passionné par le beau design, le code élégant, et l’intersection des deux » se pose des questions.

Il observe que les supports se multiplient : ordinateurs certes, mais aussi, tablettes, smartphones, ou encore de très grands écrans.

Plutôt que de développer un site par format, il se dit qu’il vaudrait mieux développer un site adaptable à toutes les résolutions. C’est le principe du RWD.

A DAO of flexibility


vendredi 6 janvier 2012 à 10:14

Architecture:

Tout d’abord intéressons-nous à l’architecture, tout comme le web un bâtiment ne fonctionne jamais parfaitement pour diverses raisons. Certains architectes ont donc créer des bâtiments qui se transforment en fonctionne de leur utilisation. Pour créer une expérience plus agréable. (+ d’explication)

Prépresse:

En prépresse on rencontre de multiples formats de support différents. Souvent on retrouve des livres dans des versions grandes puis en version livre de poches. On doit donc même en prépresse penser le contenu en sorte qu’il puisse être imprimé de toutes les façons possibles.

Web:

Dans le web on rencontre une problématique très similaire au prépresse. Un site contient un contenu, mais les appareils électroniques se connectant à un site on chacun des dimensions différentes d’écran.

La problématique du web qui se rajoute à celle que le prépresse connaît déjà. C’est que l’on ne connaît pas la destination du contenu a l’avance. De plus, il existe de plus en plus d’objet avec accès à Internet, il est donc quasiment impossible de prévoir tout a l’avance.

Mediaquery:

Il existe donc la possibilité de travailler avec des mediaqueries, en bref cela consiste à travailler avec des fichiers CSS (fichier de style d’un site web) spécifique. Si on ouvre un certain site avec un mobile au lieu d’un desktop, un fichier CSS different est ouvert et le site a donc une autre allure dépendamment de l’objet connecte.

Première notion de responsive design:

Les bases du responsif sont très simples, on doit oublier les pixels et commencer à travailler avec des proportions pour éviter des problèmes d’affichage. Pour cela on introduit la valeur de 1em. Ceci correspond à 16 pixels (par défaut sur un desktop). Cette valeur varie en fonction des paramètres de votre navigateur web.

Au lieu d’utiliser des marges de 20 px par exemple on doit utiliser des marges de 1,25em. Ceci permettra donc d’ouvrir le site sur un autre objet électronique en gardant la même marge proportionnellement parlante que sur le desktop.

Confort utilisateur:

Le confort de l’utilisateur joue aussi un grand rôle dans la conception d’un site. Il serait donc trop facile de généraliser le tout et de travailler uniquement avec des proportions sans corriger certains aspects du contenu.

Problématique

Il est impossible de lire sans se fatiguer le même montant de contenu sur un desktop que sur un mobile. Il est donc nécessaire de repenser le contenu de manière intelligente en sorte que l’utilisateur ne soit pas forcé de lire des tonnes de texte sur un écran minuscule.

Parfois il sera donc nécessaire de créer une variation du contenu de base pour qu’il soit mieux adapté à son utilisation. Exemple: Une personne qui ouvre un site d’une pizzeria sur un desktop n’a pas forcément le même but que celle qu’il l’ouvre sur un mobile. Admettons que la personne se connectant via son mobile veut simplement passer commande mais n’a pas forcément envié de lire les articles etc.

Il serait donc judicieux de créer un site web mobile, qui contient seulement le nécessaire. Cela rendrait le site plus utilisable pour le consommateur.