design-adaptatif

Trucs et astuces pour un design adaptatif (responsive design)

Le design adaptatif, ou responsive design, très à la mode depuis l’émergence du mobile, est l’art de faire s’adapter un site à la taille de l’écran l’affichant.

En d’autres termes, naviguez sur un même site depuis votre PC ou depuis votre tablette tactile ou votre mobile, le site sera toujours lisible (sans défilement intempestif), et beau, mais il se présentera différemment.
Par exemple, les colonnes de droite s’afficheront en dessous sur un petit écran, voir pas du tout, ou sous une forme différente afin de simplifier la lecture ou la navigation.

Alors quelles sont les bonnes pratiques pour avoir un site adaptatif ?

  • Approche « Mobile first » afin de vous concentrer sur l’essentiel de votre communication, et adapter ensuite le site pour afficher plus de choses pour les écrans le permettant.
  • Utilisez les @media CSS pour adapter la présentation de la page à la taille de l’écran.
  • Utilisez les librairies Javascript comme Respond.js ou CSS3 Media Queries afin d’apporter la prise en charge des @media aux navigateurs ne les comprenant pas par défaut.
  • Utilisez des « fluid layouts », ou zones adaptatives et relatives, afin de s’adapter à l’écran. Ne faites pas une CSS pour les iPhone, une pour les tablettes, …, car demain (et déjà hier) un écran avec des dimensions intermédiaires sortira.
  • Faites votre design en fonction de votre contenu. Les frameworks CSS sont à la mode, et utiles dans certains cas, mais font rarement l’affaire pour un site sur-mesure. Ne les laissez pas mettre votre créativité dans des cases.
  • Adaptez la taille de vos images à la taille des écrans avec img { max-width: 100%; }. Cela permet de gérer l’affichage, mais télécharge toujours un fichier unique (en général, le fichier en taille réelle). Pour pallier ce problème, essayer avec un script comme Responsive Images afin de télécharger l’image de la taille correspondant à celle de l’écran.
  • Utilisez le lazy loading pour vos images. Un petite librairie Javascript qui permet de ne télécharger les images que lorsque l’internaute aura fait suffisamment défiler la page pour que l’image se trouve dans la zone visible. On peut citer le très bon plugin jQuery Lazy Load.
  • Oubliez la perfection (mais essayez de l’atteindre). Il y aura toujours des personnes avec de très vieux navigateurs, ou Javascript désactivé. Faites en sorte que l’affichage de votre design dans ces conditions soit correct, que le site reste beau et utilisable, même si tout ne sera pas parfait (le site aura par exemple des images haute résolution alors que l’écran de l’internaute n’est pas très grand).

Cette façon de concevoir est récente, mais s’avère de plus en plus nécessaire, compte-tenu des périphériques variés ayant accès à internet (PC fixes, portables, tablettes, mobiles, télévision).
Suivre ces recommandations demande du temps et de la réflexion pour obtenir un site joli, bien fait, utilisé et utilisable, mais c’est important, et vous les connaissez maintenant, alors comme on dit, y’a plus qu’à.

Lire la suite

HTML5 : La nouvelle technologie suscite beaucoup d'intérêt

HTML5 : des expériences à voir absolument

A l’heure actuelle, HTML5 est l’un des sujets les plus populaires chez les développeurs.

Cette nouvelle technologie suscite beaucoup d’intérêt chez ces derniers, qui tentent des expériences incroyables que l’on aurait pas pu imaginer sans flash il y a encore quelques années.

Aujourd’hui, nous vous proposons de voir une collection incroyable d’expériences en HTML5, de sites en HTML5 ainsi que de tutoriels HTML5 pour ceux qui voudraient toucher de plus prêt à cette nouvelle techno !

ENJOY !!!

 

31 expériences HTML que vous devez voir

Attention vous allez en avoir plein les yeux !

Le pouvoir des fleurs en HTML5

 

50 sites Internet utilisant la technologie HTML5

50 sites utilisant HTML5

 

25 tutoriels HTML 5

Amusez-vous 😉

Tutoriels HTML5

Lire la suite

taille-de-police-web-rem

Fini la galère des tailles de police

Déterminer l’unité à utiliser pour vos polices (font) a toujours été un problème délicat, avec des avantages et inconvénients dans chaque cas.

Pour rappel, il existait jusqu’à maintenant deux principales unités dans le web :

  • l’unité absolue (pixel alias px)
  • l’unité relative (alias em)

Taille de police en px

Depuis le début du web, l’unité pixel est utilisée pour spécifier les tailles d’objets, et notamment les tailles de polices.

L’avantage de cette unité est que l’on sait exactement à quoi elle correspond.

L’inconvénient est qu’en l’utilisant, on perd une faculté importante, celle de pouvoir redimensionner le texte. Et il n’est pas possible de grossir la taille du texte avec cette unité, même sur des navigateurs récents.
Il existe toutefois une fonction zoom sur certains navigateurs (qui grossit tout, et pas seulement le texte), ce qui peut déjà  être un petit palliatif.

Taille de police en em

L’unité em parue il y a déjà plusieurs années parait donc être la solution absolue (enfin relative…).

Cette unité permet après définition de la taille de texte par défaut, de définir la taille du texte d’un bloc (une div par exemple) relativement à la taille du texte du bloc parent.

Par exemple:


body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
a { font-size: 1.4em; } /* =14px? */

L’avantage de cette unité est sa notion d’unité relative, ce qui permet en changeant la taille du texte de base, de changer la taille de l’ensemble des textes du site.
Le navigateur peut ainsi en changeant sa taille de base, grossir l’ensemble des textes de la page, tout en gardant les différences entre les différents textes (le titre en plus gros, le copyright en plus petit, …).
L’inconvénient est que cette notion de relative est dépendante du bloc parent.
Dans l’exemple ci-dessus, si notre balise « a » est dans le body, elle aura une taille de 14 pixels, mais si notre « a » se trouve dans une balise « p », elle aura une taille de 20px (soit 14px * 1.4).
D’où un gros problème de design potentiel, obligeant à créer des styles pour les éléments enfants à 1em.

Par exemple :


body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
a { font-size: 1.4em; } /* =14px? */
p a { font-size: 1em; } /* =14px */

C’est pénible !
La solution arrive avec CSS3 et l’unité rem.

Taille de police en rem

Cette unité, qui veut dire « root em », au lieu d’être relative à son parent direct, est relative à la racine du HTML, c’est à dire à la balise html.
En reprenant nos styles, cela donnerait donc :


html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
p { font-size: 1.4rem; } /* =14px */
a { font-size: 1.4rem; } /* =14px */

Noter qu’il n’y a plus de « ? » pour notre balise « a », car on est maintenant sûr de la taille de notre lien.
Elle est pas belle la vie ?
D’autant que le support de cette unité est plutôt correct : Safari 5, Chrome, Firefox 3.6+, et même Internet Explorer 9 !

Vous me direz, d’accord, mais pour les autres (IE6 à 8, Opéra, …) ?
Et bien, le mieux est de définir deux unités :

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
p { font-size: 14px; font-size: 1.4rem; } /* =14px */
a { font-size: 14px; font-size: 1.4rem; } /* =14px */

Vous savez maintenant comment avoir une belle taille de police, homogène dans tous les navigateurs.

Source : Snook.ca

Lire la suite

formes-CSS

Dessiner des formes en CSS pur

Avec l’arrivée de CSS3 sur les navigateurs et des border-radius, il devient possible de faire des formes jusqu’alors impensables.
Ci-dessous sont présentes une liste non-exhaustives de formes possibles (un navigateur respectant les normes CSS3 et notamment les border-radius est nécessaires pour en apprécier la beauté ; bref presque tous sauf IE 8 et moins).

Pour que ça soit compréhensible, les formes sont classées par ordre de difficultés de réalisation.

Square


#square {
width: 100px;
height: 100px;
background: red;
}

Rectangle


#rectangle {
width: 200px;
height: 100px;
background: red;
}

Circle


#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

Oval


#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

Triangle Up


#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

Triangle Down


#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

Triangle Left


#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}

Triangle Right


#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}

Triangle Top Left


#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}

Triangle Top Right


#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;

}

Triangle Bottom Left


#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}

Triangle Bottom Right


#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}

Parallelogram


#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
}

Trapezoid


#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}

Star (6-points)


#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

Star (5-points) via Kit MacAllister


#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);

}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}

Pentagon


#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}

Hexagon


#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}

Octagon


#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}

#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}

#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}

Heart via Nicolas Gallagher


#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}

Infinity via Nicolas Gallagher


#infinity {
position: relative;
width: 212px;
height: 100px;
}

#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

Diamond


#diamond {
width: 80px;
height: 80px;
background: red;
margin: 25px 0 15px 35px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}

Egg


#egg {
display:block;
width: 126px;
height: 180px;
background-color: red;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Pac-Man


#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}

Talk Bubble


#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}

12 Point Burst via Alan Johnson


#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before, #burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}

8 Point Burst via Alan Johnson


#burst-8 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
transform: rotate(20deg);
}
#burst-8:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

Source : CSS-Tricks

Lire la suite

twitter-fail-whale

La baleine Twitter dessinée et animée en pur CSS

Il y a quelques temps déjà que Steve Dennis a dessiné un « logo » non officiel pour Twitter : des petits oiseaux soulevant hors de l’eau une baleine.

Cette « image » a été réalisée entièrement en CSS (oui oui, entièrement, sans la moindre image).
Vous n’y croyez pas ?
Aller voir la démo en ligne sur différents navigateurs :

  • Chrome et Safari marche parfaitement (et l’image est même animée),
  • Pour les autres, c’est plus délicat. Noter plutôt le rendu Internet Explorer 8 :-(

Impressionnant, n’est-ce pas ?

Lire la suite

html5-boilerplate

HTML5 Boilerplate v2

les développeurs de HTML5 Boilerplate viennet de sortir la version 2.0 de leur kit de démarrage HTML, CSS et JavaScript afin de pouvoir  créer site et prototypes en HTML5 rapidement.

Pour télécharger cette version de HTML5 Boilerplate v2.0, rendez-vous sur le site officiel HTML5 Boilerplate.

La version 2.0 comporte d’importante modification, notamment l’inclusion de la nouvelle feuille de style de reset normalize.css. Normalize est quelques peu différente de son prédécesseur. Elle conserve les valeurs par défaut des navigateurs et ne fait le reset que des éléments nécessaires à un affichage identique sur tous les navigateurs.

Nouvelle fonctionnalité également dans HTML5 Boilerplate, l’inclusion du support de Respond.js (qui permet de créer des design s’adaptant aux mobiles et tablettes tactiles), des gains de performances notables (jusqu’à 80% à en croire la note de version). Et finalement, avec cette v2,  IE 6 demandera maintenant à l’internaute d’installer Chrome Frame (le futur est en marche).

Pour plus de détails sur les nouveautés HTML5 Boilerplate v2, n’hésitez pas à lire le site officiel et notamment la note de version. Une chose intéressante à noter dans la Foire aux questions (en anglais, désolé) :

Do I need to upgrade my sites to a new version?

Nope. So far there have been no critical bugs within our code that we’ve fixed from version to version. There are some nice changes that reduce your stress, but updating your HTML or CSS to the new stuff is probably more effort than it’s worth.

However, the .htaccess and Build Script you probably didn’t edit and therefore can be dropped into your existing sites with little hassle and likely a significant reward. So feel free to update those, and also update your Modernizr and jQuery versions to the latest versions they have.

Lire la suite