Comment s’en sortir dans cette jungle infâme de sites offrant toujours plus de ressources gratuites avec une qualité plus ou moins aléatoire ? Webdesigner Trends est là pour vous guider et ne garder que le meilleur.

Depuis plusieurs mois il ne se passe pas une journée sans « nouveau kit GUI » à posséder absolument ou encore la « collection Ultime des meilleurs PSD » à télécharger etc. L’idéal est de trouver l’élément dont vous avez besoin lorsque vous en avez besoin. Les sites suivants proposent régulièrement du contenu de qualité :

Duck Files

Design Kindle

Icondesposit

Medialoot

365 PSD

PixelDen

Prenium Pixels

Launched Pixels

Et vous, cher lecteur, quel est votre favori ?

En créant du contenu utilisable rapidement, la popularité des outils CSS en ligne est toujours plus croissante auprès des webdesigners. Leurs solutions utiles sont souvent complémentaires, découvrez quelques exemples pour avoir toutes les cartes en main pour bien commencer un projet web.

Primer CSS

Copiez votre HTML, Primer CSS se charge de créer pour vous une feuille de style CSS de base avec vos classes et vos ID. À tester !

CSS Frame Generator

Même principe que pour Primer CSS, coller votre HTML, le site vous génère le code CSS.

Variable Grid System

Basé sur 960.gs, utilisez l’outil pour personnaliser une grille, avec le nombre de colonnes de votre choix et la largeur des marges.

Ultimate Gradient Generator

Son nom l’indique clairement, le générateur ultime de dégradé CSS 3 est le plus complet du moment. Pour les navigateurs ne supportant pas la propriété Grandient CSS3, l’outil génère automatiquement une image.

CleanCSS

Optimisez et formatez correctement votre feuille de style. Attention à valider votre code avec d’injecter votre code dans le générateur.

CSS Shoter

Permet de faire un tri alphabétique de vos déclarations CSS.

CSS Layout Generator

Pratique pour les débutants, générez des mises en pages personnalisables en quelques clics.

CSS Drive

Un des compresseur de CSS les plus connus.

JuicyStudio / CSS Analyser

Très complet, le site de Juicy Studio permet d’analyser votre feuille de style. De la validation, jusqu’à l’analyse de vos contrastes couleurs. Pratique pour l’accessibilité par exemple.

Accessify

Créez des formulaires HTML et CSS en quelques étapes.

Et vous, que pensez-vous de ses générateurs ? Plutôt réservés aux débutants ? Ou bien même aux professionnels confirmés ?

Comment s’y retrouver parmi les milliers de plugs-in Jquery disponible sur le web ? C’est simple, gardez uniquement le meilleur de cette année pour vos sites web à venir !

Depuis déjà 5 ans, la libraire Jquery et ses plugs-in fabuleux n’en finissent pas de retourner le web. L’année 2011 à vu sortir de terre quelques beaux trésors de technologie. Voici pour vous, la sélection du meilleur de cette année :

Joyride Tour

Pour faire rapidement une visite guide de votre site.

DropKick.js

Créer un menu déroulant stylé !

Isotope

Ultra complet, voir trop complet, découvrez Isotope pour vos mises en page.

Supersized 3.2

La dernière version du plug in pour vos site photo en plein écran.

Sausage.js

La saucisse magique pour vos sites en une page. Super pratique.

FitText

2011 à connu l’explosion du Reponsive Webdesign. FitText vous donne les outils pour adapter vos tailles de police, et bien plus encore.

Flexslider

Toujours dans le Reponsive Webdesign, FlexSlider un slider Jquery complétement adaptable.

Jquery Timeline

Idéal pour des réalisations créatives basés sur une ligne du temps.

Jquery PhotoSwipe

LA galerie d’image pour mobile !

Reveal Box

Installable en trois clics, la Reveal Box est l’outil ultime de vos message non-intrusifs.

Circular Content Carousel

Un caroussel évolué pour vos contenus.

Jquery : Menu animé et site plein écran

Un autre plug-in par Codrops qui peux être une bonne base pour un projet.

Tubular

Parfait pour mettre une vidéo en full screen et en fond de votre site

JVector Map

Un librarie de cartes, toujours utile dans certaines situations et très complet.

Si vous en aviez un seul à garder, lequel choisiriez-vous ?

Retourner à la préhistoire du HTML. Voilà par quoi il faudra passer pour créer un email complexe et solide. Profitez de cet article pour vous aider dans cette tâche parfois rude…

Adieu CSS

Souvent oublié lorsqu’on débute, mais pour toute conception d’une campagne emailling, adieu le CSS pour le découpage. Les webmails n’interprètent pas les feuilles de style. Tout au plus, vous pouvez gérez quelques styles comme la taille du texte, la couleur, la police, etc. Remonter à l’âge de pierre. Telle sera votre mission pour réussir à créer un email compatible avec la plupart des webmails du marché comme Gmail, Outlook, Hotmail, Yahoo…

C’est parti pour le découpage

Templates et ressources

Armez-vous de votre éditeur préféré et partez à la guerre. Une des meilleures manière de procéder est de baser sa conception de maquette sur un template de base existant. Le célèbre site MailChimp excelle dans le domaine avec des centaines de ressources sur le sujet, des PDF à télécharger avec des conseils pour vos campagnes, des templates optimisés, et bien plus encore.

Campagnain Monitor avec sa centaine de templates gratuits fera sûrement votre bonheur.

Une campagne personnalisée

Malgré ces ressources et astuces, vous serez souvent contraints de créer des emails à partir de zéro. Pour partir sur de très bonnes bases, il est grandement conseillé d’utiliser une structure existante, déjà testée, composée de plusieurs astuces et de hacks. Elle permettra d’augmenter vos chances d’obtenir un emailing HTML compatible sur tout les différents clients emails.

HTML Email Boiler Plate est par exemple une base utilisable pour vos campagnes :

Plus récemment, le site Emailology, remarqué sur le web pour son design et son ergonomie, propose un contenu très riche sur les emails. En plus d’un code de base utilisable immédiatement, il donne des astuces propres aux différents clients mails. Vraiment pratique pour s’y retrouver facilement parmi tout ce monde !

Testez avant d’envoyer…

Avant l’envoi final à votre base de données, les mots d’ordres sont : test, test et retest. Les spécificités des différents clients mails rendent le travail long et très fastidieux. Fractal, un outil en beta pour l’instant, permet de tester votre découpage, virtuellement, sur plusieurs clients. Au final, Fractal vous donne un rapport avec les points à corriger pour maximiser la compatibilité.

Optimisez l’envoi

Pour aller plus loin et pour réussir votre campagne d’emailling, choisissez l‘outil de routage adapté à vos besoins. Des centaines de sites proposent ce type de service en ligne. En plus de répandre votre campagne chez vos clients, vous bénéficiez d’outils de suivi et de statistiques poussées en fonction de l’outil utilisé. Comme cités précédemment, vous pouvez utiliser des services comme Campaign Monitor, Mail Chimp, Dolist ou bien des logiciels comme Sarbacane.

Pour conclure

Au risque de me répéter, un des points les plus important est la compatibilité. Chaque client mail avec ses propres spécificités d’interprétation. À la longue, un découpage d’email peux vous rendre chauve tant il vous fera arracher vos cheveux en procédant de la mauvaise manière. Pour éviter ce genre d’incident capillaire, basez-vous sur des templates et des « boilerplates emails » déjà prêts pour envoi. Pratiques, optimisés, profitez-en !

Utiles et rapides, les outils en ligne donne un véritable coup de pouce aux webdesigners dans les moments de stress. Pour toujours avoir les bonnes ressources sous le coude, je vous invite à lire suite.

Sprite Cow

Pourquoi s’embêter avec les repères et des sélections dans Photoshop lorsque Sprite Cow vous permet de générer du CSS directement avec vos images ? Testez c’est plutôt pratique !

Subtle Patterns

Le site une galerie de motifs à télécharger pour vos designs web.

Patternify

Le site est un générateur de motifs, simple à utiliser. Créatif, il vous permet de créer un nombre infini de motifs différents.

PrefixMyCSS

Avec l’utilisation massive des CSS3, nous autres webdesigners perdons un temps précieux à préfixer nos déclarations pour qu’elles soit utilisables sous Webkit / Firefox et Internet Explorer. Pour gagner du temps, copiez-collez votre code et Prefix My CSS se chargera du reste.

CSS3 Generator

Très connu, celui-ci est un générateur de code CSS3 comme son nom l’indique.
Avec lui, plus de soucis pour vos box shadow, border-radius ou autre gradient.

Dernière ligne droite avant la mise en ligne, le débugage est une étape essentielle. En plus de vérifier si le cahier des charges est rempli, il est également temps d’optimiser votre projet. Découvrez une sélection de 20 outils pour ne rien laisser au hasard.

La phase de vérification et d’optimisation est aussi important que la phase de définition d’un projet web. Elle permet de finaliser un site en beauté, d’avoir au final un produit de qualité, fonctionnel et conforme aux normes du web. Pour vous aider dans cette quête de perfection, je vous propose de découvrir ses quelques outils. Gratuits et en ligne pour la plupart, ils vous seront d’une aide précieuse…

Analyses préalables :

Verify App

« La manière la plus rapide de collecter les retours utilisateurs sur les maquettes et concepts ». Produit payant, mais avec un essai gratuit de 30 jours.

Resolve App

Outil de collaboration pour aider les équipes de conception web à donner leurs avis sur un projet

Php Security Info

Permet de vérifier la configuration de PHP sur le serveur.

sfProjectAnalyser

Analyse et vérifie que votre projet web avec Symfony est codé selon les normes

Wappalyzer

Analyse les technologies utilisées sur le site (JQuery, etc)

Erreurs et bug de style :

Holmes

Holmes est un testeur CSS autonome qui peut souligner les déclarations potentiellement invalides, inaccessibles ou erronées. Il s’utilise en ajoutant juste une classe.

CSS Lint

Analyse votre feuille de style et vous permet de corriger vos erreurs CSS.

Resize My Browser

Un peu gadget lorsqu’on possède la debug Bar de Firefox, Resize My Brower permet tout même de tester son site sur plusieurs résolutions en quelques clics.

Firebug

L’outil de débogage de Firefox, devenu quasi incontournable aujourd’hui.

Webdeveloper Bar

Toujours pour Firefox, très utilisé et très complet.

Validator W3c

Le site offciel du W3C pour valider sa sémantique et son CSS.

Performances :

GTMetrix
Un outil pour mesurer les performances de votre site, pour vous permettre d’optimiser votre JS ou vos CSS. Au programme, des rapports complets et surtout bien faits.

Google Page Speed

L’outil de Google pour mesure la vitesse de chargement de vos pages web. « Page Speed Online analyse le contenu d’une page Web, puis génère des suggestions susceptibles de vous aider à accélérer son chargement  »

WebPageTest

Un outil alternatif, pour encore et encore tester les performances de votre site. Utiliser plusieurs services permet d’analyser les résultats et faire des moyennes de performances lors de vos tests.

Loads.In

En combien de secondes se charge votre page web ?

Blamestella

Votre site est-il rapide ? Un autre site pour tester la vitesse de chargement

Check-list :

Une check-list complète de vérification avant lancement du projet par Dan Zambonini (en anglais)

Pour ce qui concerne l’ergonomie, le site Conseils Marketing propose une liste complète

Symfony Check

Une liste complète pour vérifier votre projet Symfony

LaunchList

Une liste pour vérifier les points importants avant de mettre en ligne. Deux version, une gratuite de base et une version payante plus poussée.

Liens des lecteurs :

Plusieurs outils ont été suggérés par vous, chers lecteurs :

Wookrank Proposé par Monsieur_m

Pour tester son site. Simple et efficace.

Grader Proposé par Hypaepa

Grader pour un check-up Seo

OpQuast Proposé par Monique

pour gérer la qualité et l’accessibilité de vos sites Web.

Tanaguru Proposé par Matthieu

Tanaguru où comment auditer 10.000 pages en un clic :)

Merci à Brice pour ses bons conseils. Si j’ai oublié votre outil fétiche, signalez-le moi dans les commentaires. Je ne manquera pas de le rajouter dans la liste !

Les formulaires font parti des éléments quasi incontournables sur un site web. Pas toujours évidents à mettre en forme lorsqu’on débute en CSS, longs et redondants lorsqu’on est passé pro. Dans les deux cas, une bonne dose de ressources fait toujours du bien !

On débute ?

Lorsqu’on débute en HTML / CSS, rien de tel pour apprendre que d’examiner un formulaire très simple et basique pour comprendre la sémantique de base. Premier exercice avec ce formulaire complet mais simplement stylé.

Pour ensuite comprendre le HTML rien de tel qu’avoir un exemple clair du markup :

Un site vieux certes mais avec des exemples de bases qui peuvent aider. Différents types de formulaires sont présentés (verticaux, horizontaux…) :

Côté ergonomie, A List Apart donne également de bons conseils :

C’est du gâteau !

Lorsqu’on maîtrise l’art des formulaires sur le bout des doigts et pour gagner du temps, quoi de mieux que de se baser sur des templates très bien préparés comme sur le site Indeziner :

Pour gagner un maximum de temps, les générateurs font parfois très bien l’affaire :

Les meilleures pratiques pour créer un formulaire d’inscription expliquées sur SpeckyBoy :

Pour aller plus loin avec HTML 5 / CSS 3 et le mobile

Beaucoup de documentation et des références de qualité :

Des conseils et astuces pour les formulaires sur mobiles :

Comme d’habitude n’hésitez à partager vos bonnes trouvailles dans les commentaires !

Les sites avec un webdesign plein écran, envahissent le web. Pour la simple et bonne raison que leur mise en page est souvent simple, efficace et permet de mettre avant des visuels qui en jettent. Pour vous aider a faire de même, je vous propose 8 ressources Jquery.

Bien avant l’explosion et l’utilisation massive de Jquery, le Flash était la principale technique utilisée pour réaliser des sites « fullscreen« . Les designers qui se sont tourné vers la librairie Jquery ont permis de faire avancer la technologie  pour offrir des sites toujours plus rapides, toujours plus animés et prenant la totalité de l’écran du navigateur. Vous cherchez les ressources et les tutoriels sur le sujet ? Vous les avez sous la main !

Menu animé Jquery en plein écran

Galerie fullscreen avec miniatures animées

Galerie fullscreen

Galerie Jquery avec miniatures

Le célébre plug-in « Supersized » Jquery

Jquery Fullscreener plug-in

Un tutoriel CSS + Jquery

Galerie / slider en fullscreen

Partagez vous aussi vos ressources, je n’hésiterai pas à les rajouter à l’article !

Voici la suite tant attendue de mon tutoriel de création de design de blog sous Photoshop, le tutoriel pour créer votre thème en intégrant votre design !

Au programme différentes étapes en partant de la découpe de la maquette, jusqu’à l’optimisation pour Internet Explorer. Au passage, du PHP, du CSS, du CSS 3, du Javascript avec la libraire JQuery, et au final un thème pour WordPress prêt à l’emploi ! Ci-dessous quelques images extraites du tutoriel :

À consommer sur le site de tutoriels, Living Tuts

La navigation est un élément primordial à soigner dans un design de site web. Pour la rendre facilement utilisable, et joliment regardable, un petit peu Javascript est souvent le bienvenu.

Les nouvelles techniques CSS3, couplées à du Jquery permettent d’obtenir des menus de toute beautés. Cette sélection de 8 tutoriels permettra de vous apprendre différentes techniques pour créer un menu qui en jette !

Un menu bien animé

Simple mais efficace drop down menu

Un menu façon Vimeo

Jquery + CSS 3

Un navigation de slide

Navigation sur images de fond

Un menu en bulles, bien réussi

Celui-ci n’est pas vraiment un menu mais il peu toujours servir !

Si vous avez d’autres