#2 – Ecrans Retina et WebDesign

PodSource_2

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:

  1. Utilisez au possible des calques véctoriels pour les formes simples.
  2. Pour les images prévoir une image du double de la taille.
  3. 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/
  4. Avant de réduire la taille de votre image la transformer en SMART OBJECT.

En Production:

  1. Utilisez au maximum les possibilité de CSS3 à savoir les ombres portée, les bords arrondis, les dégradé, les masques.
  2. 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.
  3. Le script pour vos images “retina” http://retinajs.com/
  4. 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