Réflexions sur le webdesign, les nouvelles technologies, la vie ...

Freebies : Septembre

Voici une petite sélection de tutos et ressources, indispensables et totalement gratuits. Have fun !

- Tutoriel pour designer un bouton graphique en CSS :
http://line25.com/tutorials/how-to-create-a-stylish-button-entirely-with-css3

- Développer des menus à plusieurs niveaux en full CSS (compatibles) :
http://css3menu.com/index.html

- Créer des boutons de toutes tailles et toutes couleurs en full CSS3 :
http://acrisdesign.com/2011/06/create-a-multi-color-and-size-css3-buttons/

- Pour visualiser son travail dans toutes les tailles d’écrans :
http://resizemybrowser.com/

- Pour générer des CSS3 :
http://css3generator.com/

- Un générateur de grille gratuit :
http://netprotozo.com/grid/

- Générateur de palettes de couleurs :
http://www.colorschemedesigner.com/

- Créer et installer de belles Polices sur vos sites, avec générateur de CSS :
http://awesome-fontstacks.com/

E-conso : les avis qui comptent

e-commerceSouvent perçue comme une science obscure, le décryptage des habitudes et des modes de consommation sur le web devient un peu plus clair au fil de mes recherches. J’ai trouvé sur capitaine-commerce.com, un graphique très intéressant, lui même fourni par la société olimeo.com, qui a fait des recherches auprès de plusieurs « gros » sites e-commerce. On découvre alors plusieurs choses :

1 acheteur mécontent partage sa mauvaise expérience avec 11 personnes
Celui ci ne prévient que 3 personnes s’il est satisfait (Les français sont râleurs ?)
90% des internautes lisent les avis laissés par des tiers
86% font confiance à ces recommandations
91% des internautes considèrent que les avis consommateurs sont le vecteur n°1 de la prise de décision d’achat

Dans l’absolu, je suis comme les autres, je regarde les avis des internautes avant d’acheter, mais attention :
Un avis c’est une impression sur le moment, peut être pas vraie, ni réaliste, selon l’humeur, mais si il y a beaucoup de critiques du même ordre, on doit se poser des questions. De même que trop d’avis positifs sont peut-être le fruit de « faux » clients (payés par la marque).
J’ai placé à la suite une étude de shopping.com, qui nous dit que la mode influence les achats, le déclencheur est le prix, que l’achat s’effectue majoritairement en 15mn, que 70% des internautes achètent pour eux-même et dépensent plus que lorsqu’il achètent pour les autres.

CSS : Vidéos élastiques

Dans l’optique du développement multiplateformes, on nous demande de penser en amont à toutes les options possibles pour qu’un projet web soit conçu pour passer aussi bien sur les navigateurs web mais aussi sous smartphones et tablettes. J’ai fait des recherches pour un projet ou beaucoup de vidéos étaient présentes. Non seulement les CSS doivent s’adapter aux formats, mais les médias aussi. Avec HTML5 on peut utiliser la balise native « video » avec max-width:100% + height:auto, mais ceci ne marche pas avec l’iframe intégré ou la balise object.
Heureusement, j’ai trouver un petit tuto sur webdesignerwall, qui traite de ce sujet. En HTML5 le code est basique :

Html

video {
max-width: 100%;
height: auto;
}

Comme je l’ai dit au début, ce code ne fonctionne pas si l’intégration utilise balise iframe ou la balise objet, qui est couramment utilisé par la plupart des sites de partage vidéo comme YouTube et Vimeo.

Pour des balises iframe & objet élastiques

Rien de compliqué, il faut juste envelopper le code d’intégration avec une DIV et spécifiez 50% à 60% en bottom. Il faut ensuite définir les éléments enfants (iframe, object et embed) en largeur et hauteur à 100%, le tout en position absolue. Ceci afin de forcer les éléments intégrés à s’élargir automatiquement. Ce qui donne :

Html

< div class="video-container" >
< iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0"
width="800" height="450" frameborder="0" >
< /div >

CSS

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }

Comment faire pour créer Largeur fixe & élastique ?

Pour contraindre la largeur d’une vidéo, une DIV supplémentaire est nécessaire. Enveloppez la vidéo avec cette autre DIV et spécifiez une valeur de largeur fixe avec max-width: 100%.

CSS

.video-wrapper {
width: 600px;
max-width: 100%;
}

Html

< div class="video-wrapper" >
< div class="video-container" >
< iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0"
width="800" height="450" frameborder="0">
< /div >
< !-- / video -->
< /div >
< !-- / video-wrapper -->

Compatible ?

Ceci fonctionne sur les principaux navigateurs (Chrome, Safari, Firefox, Internet Explorer, Opera, l’iPhone et l’IPAD).

Pour aller plus loin :
http://www.alistapart.com/
http://www.tjkdesign.com/

 Page 3 de 11 « 1  2  3  4  5 » ...  Last »