Quelques Définitions.

La résolution de l’écran est théoriquement le nombre de pixels (que l’on peut représenter) par unité de surface qui est le pouce (inch)

Issu d’un compromis anglo-saxon (en 1959) le pouce est exactement égale à 2.54cm.

Quant au pixel (contraction de « picture element ») est l’unité de base de mesure de la définition d’une image.

Par abus de langage on s’est habitué à mélanger la définition de l’écran avec la résolution, la définition de l’écran est le produit entre le nombre de pixels que peut afficher un écran en horizontale et en verticale, ce qui explique le signe multiplicatif (x) qu’on met entre ses deux valeurs

Le travail du Designer.

Lors de l’étape de conception de l’interface graphique d’un site web (gabarit, template, charte graphique) le designer se pose plusieurs questions relatives tout d’abord au thème de l’interface, à la palette de couleur qui devra être en harmonie avec le sujet du site, au choix d’une bonne police d’écriture (css3 permet d’utiliser des polices « non-standard ») en suivant toute les recommandations d’accessibilité (WAI: Web Accessibility Initiative).

Le Conteneur du site (wrapper).

Lors de la conception de la maquette sur son éditeur graphique (ou lors de la réalisation simple du genre minimaliste) le designer devra choisir une largeur pour l’interface et plus précisément pour le conteneur (wrapper) des éléments du site.

c’est dans ce wrapper qu’on trouvera toute l’interface, il permet de manipuler la totalité du site en css, par exemple si on veut centrer la page du site il suffit de centrer le wrapper, si on veut qu’il soit à droite il suffit de l’aligner à droite, si on veut que le site occupe toute la largeur il suffit de lui donner une taille (width) de 100% et si on veut limiter la largeur du site il suffit encore de donner une taille (width) ou taille maximum (max-width) à ce wrapper 🙂

Un mot sur la Hauteur (height).

Dites vous que la limite en hauteur ne sert à rien, elle ne sera et ne pourra jamais être déterminée

Même si la définition verticale de l’écran est de 1200, rien ne dit quelle sera la taille réelle d’affichage du site, il y a parfois plusieurs barres qui s’ajoutent à la barre des menus de votre navigateur et qui ne laissent parfois que les 3/4 de la hauteur pour afficher le site, Bref …. le sujet et à oublier, par contre pour la largeur le choix se pose.

Résolution Optimale.

Une étude montre que la résolution de base sur laquelle tout tourne est la « 1024×768 ». Le principe et le but de cette étude et d’offrir des stastiques qui seront utilisés lors de la conception graphique et qui permette de voir quelles résolutions permettront de satisfaire un maximum de visiteurs potentiels, par exemple dans le tableau ci dessous on voit très bien qu’il serait préférable d’abandonner carrément l’idée d’un site se basant sur une résolution de 800×600 ou 640×480.

Les résolutions inférieur sont celle des équipements mobiles.

Date Supérieur 1024×768 800×600 640×480 Inférieur
Janvier 2011 85% 14% 0% 0% 1%
Janvier 2010 76% 20% 1% 0% 3%
Janvier 2009 57% 36% 4% 0% 3%
Janvier 2008 38% 48% 8% 0% 6%
Janvier 2007 26% 54% 14% 0% 6%
Janvier 2006 17% 57% 20% 0% 6%
Janvier 2005 12% 53% 30% 0% 5%
Janvier 2004 10% 47% 37% 1% 5%
Janvier 2003 6% 40% 47% 2% 5%
Janvier 2002 6% 34% 52% 3% 5%
Janvier 2001 5% 29% 55% 6% 5%
Janvier 2000 4% 25% 56% 11% 4%

Donc la largeur de base sera 1024pixels, mais attention … de nombreux personnes oublient que selon le contenu il apparait parfois des ascenseurs (scrolling) à droite ou à gauche (selon la langue) ce qui diminue cette taille optimale de 1024 à parfois 1000 pixels, de plus les attributs CSS ne sont pas interprété de la même facon d’un navigateur à un autre, du fait de leur incompatibilité (graphique et tableau d’utilisation des navigateurs) il faudra penser à laisser une dizaine voir plus (selon le nombre d’éléments div et de padding utilisé avec des widths de 100%).

Quelle est la solution?

Lire la suite

Publicités

Google planifie la mort de javascript avec DART :)

L’histoire commence par un mail du 16 novembre qui aurait apparemment échapper à Google, celui ci parle de javascript comme étant un langage de plus en plus ambiguë avec ces nombreux framework et qu’il fallait réagir grâce à DASH « destiné à maintenir la nature dynamique de JavaScript, mais avec un meilleur profil de performance et qui se prête mieux au “tooling” sur les grands projets »

C’est à la prochaine conférence GOTO du 10 au 12 octobre que Google  va dévoiler son nouveau langage de programmation orienté Web qui désormais s’appellera DART (en remplacement de DASH), Le chercheur Mark S Miler (auteur du mail) en est convaincu  « JavaScript tel qu’il est aujourd’hui n’est pas une solution viable à long terme et quelque chose doit changer ».

Pour booster l’adoption de son langage Google prendra à sa charge la création de plug-ins pour le support par les autres navigateur (autre que chrome).

Affaire à suivre…

Adobe CS6 sort le bout de son nez!

La suite CS d’adobe est bien connue dans le monde du design et du web design, avec des applications de création graphique incontournable tel que Photoshop© et Illustrator© (vectoriel), ou encore l’éditeur graphique de site web Dreamweaver© et pour finir le fameux Indesign© qui permet facilement la création pro de magazine.

La version CS6 offre 4 grandes nouveautés à savoir

  1. Adobe Maestro
  2. Adobe Helium
  3. Adobe Muse
  4. Adobe Time Tracker
  • Adobe Maestro © permet de synchroniser, sauvegarder et partager vos projets dans les nuages (CLOUD)  en offrant 100 Go de stockage (compatible avec l’application Iphone Adobe Idea)
  • Adobe Helium © permet de créer des animations en HTML5 et CSS3!!! rien que ça 🙂 aider bien sur d’autres standard tel que jquery.
  • Adobe Muse © est un éditeur de site web visuel (WYSIWYG) qui nous guide dans la création du site en associant la partie création graphique et la partie intégration web. l’aisance est bluffante, par contre pour ce qui est du code on ne peut pas en dire autant, mais le résultat est là! et pour un néophyte du webdesign la satisfaction est garantit

Adobe Muse est à suivre dans un futur billet

  • Adobe Time Tracker © quant à lui permet de gérer et calculer le temps passé sur un projet (et chaque étape du projet)