CSS transition and diagonal website design

Le sujet du billet présente ici un cas d’école intéressant, puisqu’il s’agit des effets de transitions que l’on peut retrouver dans beaucoup de webdesign actuel, malgré la tendance naturel a produire des affichages de type bloc ou tuile pour reprendre le concept de Microsoft.

Il existe aujourd’hui beaucoup de possibilités pour produire des graphismes allant au delà du scope de la simple ligne horizontale ou verticale notamment grâce à l’exploitation du format SVG qui permet tous les graphismes possibles. Ce format est désormais bien supporté par les navigateurs modernes et c’est à mon sens le seul capable d’offrir toutes les permissions en matière de graphisme tout en s’adaptant au différents écrans. La solution abordée ici est assurément la plus répandue en webdesign car elle permet de produire une mise en page dynamique en travaillant les perspectives des lignes au travers des diagonales de construction.

diagonale-design

Une mise en garde est à faire devant ces maquettes engageantes et des graphistes qui adorent se faire plaisir en produisant de beaux web design, mais sans prise en compte des contingences liées au web, celles-ci ne représentent souvent que des exercices de style sans autre finalité que de mettre en avant un book et un savoir-faire. En effet la pratique d’un bon web design interdit d’aller trop loin dans les maquettes sous peine de les rendre irréalisables. Si les sites ont tendances a adopter les mêmes codes graphiques, c’est aussi parce qu’ils représentent une simplicité de mise en oeuvre pour nos clients qui devront gérer in fine leur site, le graphisme web ne peut pas être pensé comme un one shot mais de façon pérenne.

Néanmoins il a des possibilités de proposer des maquettes intéressantes pour peu que l’on ai anticipé la mise en oeuvre technique. Une des solutions loisibles passe par l’utilisation des sections ou chaque zone de contenu est une strate indépendante des autres mais qui de manière contigu constitue une page web cohérente.

Chaque section démarquée par une ligne horizontale, peut-être retravaillée pour offrir une alternative au travers de formes géométriques diverses. L’avantage d’agir sur les sections et en bordure des contenus c’est que ceux-ci ne seront pas directement impacté par le graphisme, a rebours d’une photo prise dans une forme triangulaire.

Du côté de la CSS

D’un point de vue pratique, il existe différentes méthodes pour contraindre la bordure de la section a s’afficher en diagonale. Pour faire simple j’ai identifié cinq grandes méthodes qui sont aussi concomitantes avec les derniers aboutissements du web.
Ce qui fera la différence entre ces solutions c’est leur adaptation au contexte : le responsive en premier lieu mais aussi les éléments graphiques adjacents (une image en bordure…) .

#1

Cette première méthode est finalement presque la plus simple à imaginer et techniquement facile à intégrer. Il s’agit d’une image placée en position absolute en bas du premier bloc. Mais assez vite on en voit les limites : l’image intégrée dans le dom, n’est évidement pas responsive et l’angle présenté augmente en réduisant la fenêtre du navigateur tout en détériorant la qualité de l’image et l’on voit le pixel apparaître

https://jsfiddle.net/icom/d2k28kyr/ 

#2

Une méthode a priori plus moderne avec l’utilisation d’une balise SVG et d’une bonne gestion du responsive pour peu que l’on travaille avec des hauteur en vw se heurte néanmoins au problème de l’image en background

https://jsfiddle.net/icom/w8xvb2n7/

#3

Cette solution valide tous les points : on a une bordure net et responsive et un affichage correct de l’image de fond. Mais la méthode CSS clip-path n’est pas prise en compte par IE et Edge

https://jsfiddle.net/icom/we3fj1hz/1/

#4

la méhode Skew() permet d’opérer une distorsion en étirant chaque point de l’élément d’un certain angle. Si la méthode répond bien au responsive, en revanche l’élément déformé ne change pas le périmètre physique de la boite

https://jsfiddle.net/icom/qa7rx2yu/3/

#5

Enfin une méthode pas vraiment nouvelle, mais qui fonctionne partout, il s’agit de l’utilisation d’un pseudo-élément :after ou :before. L’affichage de cette élément se superposant aux sections en place permet de masquer l’image

https://jsfiddle.net/icom/w9cjfmo1/10/

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

Enregistrer

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/