Voici le 2ème épisode de Do-Jo Le Podcast débattra cette fois sur les conséquences qu’auront les écrans Retina (Apple) sur le WebDesign.
Voici le 3ème épisode de Do-Jo Le Podcast qui vous parlera cette fois de WordPress, le CMS tout terrain.
TELECHARGER CET EPISODE
Télécharger l’épisode gratuitement pour ensuite l’écouter où vous voulez, quand vous voulez.
Format MP3
ABONNEZ-VOUS A NOTRE PODCAST
Abonnez-vous gratuitement et recevez tous les épisodes automatiquement dès leur sorties.
iTunes Flux RSS
Les news en bref
WordPress Plugin pour FB
http://wordpress.org/extend/plugins/facebook/
Zapier – Sync the Web | Zapier – Sync the Web
https://zapier.com
Le débat
Ecran Retina & WebDesign, qu’est ce qui va changer et quelles en sont les conséquences, pour nous WebDesigner.
Voici quelques astuces pour préparer ses sites à un affichage Retina:
Photoshop:
- Utilisez au possible des calques véctoriels pour les formes simples.
- Pour les images prévoir une image du double de la taille.
- Exporter les 2 images 1ère “normale” avec le nom choisi “monimage.jpg” et la seconde “double taille” en “monimage@x2.jpg” en prévision de l’utilisation du script retina.js >>http://retinajs.com/
- Avant de réduire la taille de votre image la transformer en SMART OBJECT.
En Production:
- Utilisez au maximum les possibilité de CSS3 à savoir les ombres portée, les bords arrondis, les dégradé, les masques.
- Pour les petits Icons et autres images types réseaux sociaux utilisez une police de caractère integrée via @font-face. Par exemple: http://fortawesome.github.com/Font-Awesome/ plus de 270 icons gratuites.
- Le script pour vos images “retina” http://retinajs.com/
- Pour les logos simples n’hésitez pas à vous tourner vers le format SVG “scallable vector graphics” http://www.creare-webdesign.co.uk/blog/videos/svg.html
Topic sur le forum de macrumors pour contre le retina:
http://forums.macrumors.com/showpost.php?p=15057933&postcount=75
Article Webdesigner depot le mythe du DPI:
http://www.webdesignerdepot.com/2010/02/the-myth-of-dpi/
JS pour utilisation d’image @x2
http://retinajs.com/
Les coups de coeur
John
James Bavington and Nick Rinylo
Vidéo à propos du webdesign: (ils viennent de publier une video sur le sujet du SVG.)
http://www.creare-webdesign.co.uk/blog/category/videos
Font Awesome:
Font de plus de 200 icons avec tutoriel pour l’utilisation. basé sur le Twitter bootstrap.
http://fortawesome.github.com/Font-Awesome/
Dom
CheatSheet affiche tous les raccourcis sur votre mac
Disponible sur le Mac App Store
Laisser un commentaire