Animation html5 avec Animate CC

Flash c’est reparti !, Animate CC c’est parti !

Après une période de doute et d’incertitude, notamment suite à l’annonce de l’arrêt du logiciel Edge Animate pourtant lancé depuis quelques temps, les choses semblent avancer dans le domaine de la production d’animation html5.
Adobe semble vouloir relancer un de ses produits phares anciennement Adobe flash et relancé sous le nom d’Animate CC. Les habitués ne seront pas dépaysés en retrouvant leur IDE, même interface, même logique d’animation.
On vous proposera même de produire des animations au format swf, comme si cette technologie ne voulait pas vraiment disparaître. Mais si en apparence les choses semblent identiques c’est pourtant au coeur du logiciel que ce niche la nouveauté.
A la création d’un nouveau fichier on vous proposera de produire deux types de documents : Canvas ou WebGL l’action script 3 étant relégué plus bas.
La bibliothèque create js soutient désormais le processus d’animation et de programmation HTLML5/JS. Vous découvrirez assez vite les limites de ce que vous pouvez faire avec cette technologie, moins aboutie et moins performante que le moteur de rendu flash, car ici c’est votre navigateur qui doit prendre en charge le rendu de l’animation et même si create js se montre habile à gérer vos animations, il convient de veiller à la taille de vos animations, qui peuvent assez vite mettre en difficulté votre navigateur et votre machine. Voir article sur les nouveautés Animate CC
(Lire la suite…)

Librairie Greensock

Si vous êtes webdesigner, vous connaissez surement le site www.awwwards.com et vous avez bavez devant cette vitrine qui présente tous les savoirs-faire graphiques et techniques actuelles (CSS3, CSS animations, Javascript, SVG…)
Dans le détail :

  • 93% utilisent CSS animations
  • 91% -> Javascript animations
  • 83% -> SVG
  • 70% -> jQuery
  • 69% -> Scrolling animations
  • 65% -> Greensock
  • 50% -> HTML5 Canvas

Source : ihatetomatoes.net/awwwards

Dans l’expérience utilisateur on peut donner plus a voir qu’un simple page figée toute responsive qu’elle soit dans sa conception. On peut dynamiser tout un site ou renforcer simplement certaine action avec du javascript afin de rendre l’expérience plus plaisante à l’utilisateur. Sans être développeurs front-End on peut et on doit être sensibilisé à ce genre de chose dans la conception du webdesign et pouvoir imaginer une série d’animation des éléments constitutif du site.
Un élément plus particulièrement m’intéresse ici, ce sont les bibliothèques d’animation jQuery et plus précisément Greensock. Une bibliothèque qui reprend les principes que l’on connait bien en flash en version Javascript, il s’agit de la librairie d’animation Greensock (TweenLite et TweenMax). Cette librairie va vous permettre de créer une série d’animation complète avec une gestion du temps / déroulement assez poussée.
Cette librairie devient un must-have puis que comme indiqué précédemment 65% des sites présentés sur www.awwwards.com proposent cette solution pour animer leurs interfaces en complément de jQuery.
Son avantage, c’est sa grande agilité et de penser l’animation comme une timeline, dans laquelle on pourra déclencher une série d’animation à des moments défini et de pouvoir jouer l’animation en avant ou en arrière , son autre avantage c’est d’être universel et de pouvoir s’exécuter sur tous les navigateurs
Aujourd’hui, elle reste la meilleure réponse face à CSS3 animation qui n’est pas encore bien implémenté sur tous les navigateurs et ne permet pas autant de choses. Quant à jQuery, il n’a pas le même portée et ne peut pas enchaîner une série d’animation dans une timeline et contrôler la lecture de ces animations dans le temps. On retrouve ici des concepts proches de ceux que l’on pouvaient avoir dans Flash.

Découvrir Greensock
greensock

Style CSS pour iframe

l’intégration d’un élément HTML iframe dans une page est parfois la manière la plus simple pour afficher le contexte d’une page provenant d’un autre site et ce pour différentes raisons.
Mais si le plus aisé est bien de convoquer un contexte de navigation imbriqué dans son document, il n’en va pas de même pour l’habillage des élements affichés. En effet la fenêtre enfant possédant déjà ses propres feuilles de styles et ses scripts.
Intervenir d’ailleurs sur un site d’un autre domaine que le contexte de navigation parent peut poser des problèmes de sécurité. Mais le cas qui nous occupe ici est différent de ce cas de figure, il s’agit en effet de réutiliser un formulaire déjà existant et purement fonctionnel sur le même domaine. (voir shéma ci-dessous).
formulaire
(Lire la suite…)

Sites a page unique

velo
Ils fleurissent sur internet depuis quelques années maintenant les sites à page unique et regroupant différentes technologies :

Les techniques

L’idée première étant de présenter son contenu sur une seule page d’accueil profonde, unique ou non d’ailleurs tous dépend de l’objectif de votre site.
la notion de scroll profond s’accompagne souvent d’une navigation interne à la page par le bien des ancre nommées, une technique aussi vieille qu’internet. Elle permet de faciliter la navigation à l’internaute évitant ainsi l’écueil de chercher un contenu noyé dans la page.
En plus des ancres les sites modernes sont souvent sectionnés en différentes parties correspondant aux items du menu soit par un fond de couleur distinct ou par un autre artifice graphique.

La nouveauté qu’a apporté CSS3 c’est l’utilisation de la technique de parallax, procurant un effet de relief impressionnant. Les effets Parallax consistent à séparer des éléments visuels de l’arrière-plan d’un site Internet et à les faire défiler à des vitesses variantes créant ainsi un effet de profondeur lorsque l’usager navigue de haut en bas dans une page web.
Les tutos concernant la mise en oeuvre de cette technique sont nombreux et bien détaillés. Plusieurs variantes existent soit au scroll vertical ou horizontal ou bien au survol de la souris.
Si bon nombre des sites présentés comme des références en la matière fonctionnent très bien sur les navigateurs modernes, peu d’entre eux sont vraiment accessibles sur tablette. Une belle mise en oeuvre technique masque souvent ce problème. Mais il est vrai que l’expérience immersive que procurent ces sites n’atteint son pleine effet que sur Desktop.
Pour pouvoir optimiser ces sites et les rendre pleinement accessible sur mobile, on a recours de plus en plus au javascript, notamment aux bibliothèques Jquery.

Autre effet permis par CSS3 c’est l’utilisation de grandes images, utilisé en fond de page, voir de vidéo. Un effet visuel très impactant, c’est souvent la pièce maîtresse du design. Le choix de celui-ci est donc particulièrement réfléchi et soigné, elle procure une émotion particulière aux visiteurs, mieux que ne le ferait des mots.
La mise en oeuvre de cette technique bénéficiera également de l’apport du javascript.

Les plus : d’un point de vue esthétique et ergonomique, c’est parfait : l’internaute n’est pas perdu dans l’arborescence, des contenus courts et structurés peuvent être mis en valeur par des effets de transition bien maîtrises.

Les moins : Tout cela a un cout en terme d’optimisation, des pages souvent lourdes et peu SEO bien que Google comprenne de mieux en mieux cette façon de faire.

L’objectif de ces sites

On ne va pas concevoir un site à page unique pour présenter une entreprise du type PME. il sera plus pertinent de créer des pages uniques pour chaque activité de l’entreprise.
En revanche, si cette même entreprise communique sur de l’évènementiel, un site a page unique pourra être intéressant, parce qu’attractif et valorisant pour la marque.
De nombreux graphistes utilisent ce modèle qui convient très bien à un CV par exemple.

et pour finir voici un exemple conçu pour l’agence i-com : démo parallax

Créer une police d’icône web

Créer une police d’icône est aujourd’hui quelque chose de relativement facile et bien supporté par les navigateurs. Plusieurs services en ligne proposent de transformer vos icônes en police web. on comprend sans difficulté les avantages d’une telle possibilité : éviter de convoquer une image gif ou png, même optimiser avec la technique des sprites CSS elle sera plus lourde à gérer pour les navigateurs. En outre les résolutions disparates des écrans ne permettent pas toujours la meilleure restitution des icônes.
(Lire la suite…)

Les selecteurs CSS

Dans le monde merveilleux des CSS, il existe une multitude de possibilité pour cibler les éléments, je propose ici une liste non exhaustive de selecteurs, certains connus d’autres moins, mais ce qui est peu usité ce sont les combinaisons des expressions qui permettent d’en certains cas de cibler de manière très globale les éléments html et de réduire la taille de la feuille de style. (Lire la suite…)

Le web design géométrique

CSS
Grâce aux CSS et à la nouvelle norme CSS3, nous pouvons désormais concevoir des interfaces graphiques légères et faciles à maintenir. Les tendances du web design suivent d’ailleurs les avancées techniques du web. Depuis l’arrivée de la norme CSS3, nombreux sont les sites qui utilisent les border-radius pour produire des cercles et coins arrondis ainsi que les pseudo-éléments :before et :after. Les navigateurs ont beaucoup évolué et ils supportent de mieux en mieux ces nouvelles spécifications, ils ne sont pas encore tous logés à la même enseigne et des précautions devront être pris avec l’utilisation des exemples mises en avant ici. (Lire la suite…)

Règles de mise en page web

CSS et mise en page

Un des nombreux problèmes de la mise en page web, c’est d’avoir un beau grisé typographique. On nous rabâche assez que les internautes, ne lisent pas sur internet (même si c’est en parti faux). On peut fournir aux lecteurs des textes agréables à lire.

Un eccueil assez connu c’est la justification des textes. Peu de site l’utilise, alors que beaucoup de graphiste l’emploi en print. Il est vrai que sans aucun paramétrage préalable en CSS l’interprétation est plutôt approximative et le résultat très décevant, la césure n’étant pas automatique sur les navigateurs, on aura des colonnes avec un grisé peu agréable à la lecture. Voici donc l’occasion de revoir quelques règles HTML et CSS nous permettant des mises en pages agréables à lire.

(Lire la suite…)

Optimiser les images pour le web

En terme d’optimisation, on sait que le poids des images est un élément essentiel pour le chargement d’une page web. Les images représentent en moyenne plus de la moitié du poids d’une page, les autres éléments étant les scripts, les CSS, les animations flash ou gif et le contenu textuel. Il est donc intéressant de se pencher sur l’optimisation des images et de prendre le temps de tester les outils permettant de leur faire subir le meilleur régime.
Généralement les graphistes se servant de Photoshop pour les maquettes de leurs sites utilisent l’outil à disposition : « Enregistrer pour le web ».
Photoshop a de nombreux atouts et il est souvent utilisé pour la conversion des images aux formats PNG, JPG ou GIF, mais il ne dispose pas du meilleur algorithme de compression.
Ci-dessous un petit test comparatif sur une image ayant pour poids 1,7 MO, le test a été fait avec 3 logiciels : Photoshop, Fireworks et un outil en ligne JPEG optimizer. Le résultat est significatif, fireworks tire nettement son épingle du jeu en offrant une compression importante tout en gardant la qualité de l’image.
Lors de l’intégration des images dans les pages d’un site, il faut absolument proscrire le redimensionnement dans le code. Une image doit être utilisé à sa taille initiale. Sans quoi c’est le navigateur qui redimensionne l’image cela consomme du CPU et de la bande passante.

optimisation-web

Voici quelques outils en ligne pour optimiser les images :
www.punypng.com/
jpeg-optimizer.com/
kraken.io
www.smushit.com/ysmush.it/

Un webdesign à l’aide d’une grille

Les grilles habituellement utilisées en print ont un double avantage pour le web depuis l’arrivée du RWD. Outre le fait de produire une mise en page bien structurée et harmonieuse, les grilles servent d’armature pour organiser la page et son contenu et favorise un travail plus rapide au niveau de l’intégration CSS, en imaginant se positionner sur une grille existante on peut aisément décliner plusieurs templates CSS, cela se révèle très pratique en production.
La structure de la page ainsi bien élaboré, on aura aucun mal à imaginer la manière dont elle va se comporter avec les différents points de rupture de nos Devices. (320px, 768px, 1024px…)

De nombreux outils de la conception à la réalisation du webdesign peuvent vous venir en aide pour concevoir la grille qui correspondra au design.
Pour la maquette photoshop en voici deux :

modulargrid.org et guideguide.me

Pour firefox il existe des outils pratiques d’aide à la conception de grille qui permettent également d’analyser un webdesign existant, afin de voir sur quelle grille il a été conçu :


grid-webdesign

Pour trouver et réaliser des modèles de grilles, il existe aujourd’hui de nombreux générateurs de grille qui peuvent nous y aider.

http://960.gs/

http://www.gridsystemgenerator.com
Celui-ci à ma préférence, une fois réglé le nombre de colonnes et la largeur des gouttières, vous pouvez télécharger un kit qui contient à la fois l’image png de la grille qui vous servira à caler votre maquette mais également le fichier html et CSS qui correspond aux nombreuses utilisations de cette grille.
http://www.gridsystemgenerator.comgrille-webdesign