Adapter vos sites pour les écrans Retina

Avec l’arrivée des écrans haute densité comme les écrans Retina, il devient urgent d’adapter nos webdesigns à ce type d’écran. Loris Grillet vous présente quelques technique afin de préparer vos icônes et autres éléments d’interface à l’arrivée de ces types d’écran.

Avancements du projet "Thèmes à monter soi-même"

Par

Mi-octobre je lançais l’idée de proposer des templates HTML5/CSS3 à télécharger gratuitement ici sur le blog, je ne reviendrai pas sur les raisons qui m’ont poussées à entamer cette démarche, ici j’ai envie de vous parler de comment ce présente l’enfant. Lire la suite

#wdfr S02E01 – Responsive Web Design

Le vendredi 2 septembre, on avait évoqué le responsive web design. Aujourd’hui, le compte rendu de la session a été publié sur le blog du Webdesign Friday.  Cliquez sur le titre du billet pour lire le compte rendu !

FitVids.JS – adaptez vos vidéos à la taille de fenêtre

Vendredi dernier, on a parlé du Responsive Web design (RWD) pendant le #wdfr sur Twitter, vous aurez d’ailleurs un résumé de la sessions du 2 septembre sur le blog du WDfriday, une fois celui-ci en ligne.

Aujourd’hui, voilà pour vous une nouvelle ressource pour pouvoir servir vos vidéos YouTube, Dailymotion, Vimeo, etc. avec une largeur « responsive », s’adaptant à la taille de la fenêtre. Vous n’avez plus d’excuse pour passer au RWD !

FlexSlider — vos diaporamas "responsive"

Aujourd’hui, avec HTML5, CSS3 et les Media Queries, on fait de très jolies choses côté webdesign. Mais le must-have, hormis les rubans et autres joyeuseté bien rétro, c’est un design complètement « responsive », adaptatif, afin de servir une mise en page différente de l’informations suivant le support (desktop, mobile, tablette, etc…).

La petite trouvaille d’aujourd’hui, est un diaporama utilisant le principe du responsive design! Vous pourrez donc vous la péter en gardant vos sliders dans les versions pour mobiles. #youpi!

Un blog plus clean et épuré

Par

Hello vous, petite note rapide. Cette semaine je suis tombé sur une font vraiment trop top en cherchant un service permettant de générer rapidement une font-stack (pile de polices) ayant les mêmes caractéristiques (oui je m’intéresse à la typo maintenant, mais de loin).

Du coup, je m’suis dis, tiens pourquoi ne pas l’utiliser sur le blog et en profiter pour épurer encore plus le design, histoire de laisser la vedette au contenu?
Voilà le pourquoi du comment le blog a cette tête en ce moment. Je me pose aussi la question de savoir si je remet les commentaires, puisque ce blog est pour moi, en premier lieu une façon de mettre de côté des ressources, liens, tutos pour les réutiliser plus tard ou simplement me faire des pense-bêtes. Donc on verra ça plus tard.

En tout cas, vous pouvez me faire vos feedbacks sur Twitter (@nighcrawl) sur le redesign en cours, et peut-être que j’en tiendrai compte ;)

Patternify – Générateur de pattern CSS

Patternify est une petite application web permettant des dessiner pixel par pixel ses propres motifs rayés afin de les utiliser dans nos feuille de style CSS, sans avoir à ouvrir Photoshop. On pourra enregistrer l’image dans un fichier, ou bien directement utilisé l’image converti en Base64, sans avoir besoin d’une image.

Le blog s'habille en Prada

Par

Petite note vraiment très rapide concernant le design actuel du blog. Il n’est que temporaire. Cela fait bien 3-4 mois que j’ai décidé de changer le design du blog, d’une part parce que mes habitudes de blogging on changées ces derniers mois, j’aime de plus en plus la façon de blogger que j’ai sur Tumblr, du coup je réfléchis en ce moment à la façon d’intégrer ici ce format de blog plutôt pratique et moins « oppressif » pour moi. Ce Thème acheté chez WooThemes, va me permettre de venir partager ici plus souvent, sans pour autant écrire un vrai billet. Merci WordPress 3.1!

D’autre part, je trouvais que ce design bleu turquoise ne me correspondait pas assez. Le prochain costume du blog sera beaucoup plus minimaliste, et si vous me suivez sur Dribble, Twitter ou Instagram, vous avez surement vu passé quelques shots ;)

Créer un panneau de Login coulissant avec jQuery

Par

Comme premier article pour cette nouvelle année 2010 (bonne année à tous d’ailleurs!), j’ai décidé de vous proposer un tutoriel très simple pour créer une zone de login coulissante grâce à la librairie javascript jQuery.

Lire la suite

Utiliser une fonte personnalisée avec Cufón

Par

Dans un précédent billet j’avais mentionné Cufón et sIFR, comme moyen d’utiliser des polices personnalisées sur nos sites Internet, de bonnes alternatives à la propriété CSS3 @font-face qui n’est pas prise en compte par tout les navigateurs web. Aujourd’hui je vais vous montrer comment utilisé vos polices d’écriture préférées sur votre site Web en utilisant Cufón. Lire la suite