Si vous ne savez pas par où commencer votre webdesign responsive, ni quels outils vont vous faciliter la vie, cette liste d’outils concoctée à l’aide du dernier article de Smashing Hub devrait vous égayer. Faisons un petit tour des outils pratiques ou simplement indispensables…

Le responsive design est relativement récent et les choses bougent très vite. A peine a-t-on pris connaissance d’une technique qu’il faut déjà apprendre une nouvelle chose ou maîtriser le dernier outil sorti. Le responsive design n’est pas une simple mode de passage mais bel et bien une possibilité et une philosophie de conception de sites web bien en place qui fait ses preuves.

Avec sa popularité toujours grandissante, de nombreux outils ont vu le jour pour faciliter le travail des concepteurs et intégrateurs de sites. Ces derniers peuvent vous faire gagner un temps fou que ce soit en amont du projet lors de la phase de réflexion ou durant sa conception jusqu’à la dernière ligne de CSS. Comme il est dur de tous les connaître, Smashing Hub a réalisé un article recensant la boîte à outil ultime pour le responsive webdesign.

L’article original recense de nombreux outils gratuits qu’on peut trouver sur le web et vous trouverez ci-dessous ma sélection parmi tous ceux présentés dans celui-ci, plus quelques ajouts. Faisons le tour des outils à votre disposition pour simplifier et raccourcir vos projets responsives.

Avant de commencer :

N’ouvrez pas dans la hâte Photoshop ou votre éditeur de code favori, prenez le temps de réfléchir au site et à son comportement suivant les résolutions et cas de figure. Rappelons qu’un bon site qui se dit « responsive » s’adapte tout seul en fonction de certains paramètres de l’utilisateur tels que la résolution, la vitesse de chargement, le type d’appareil, etc… Imaginez donc dès le départ ce à quoi ressemblera votre site selon chaque résolution, comment vous allez gérer la navigation, les images ou sliders, etc…

1. Feuilles de croquis pour le responsive design

Très utile pour réaliser vos premières réflexions et poser rapidement des zonings, ces feuilles vierges vous aideront à imaginer votre site sur toutes les résolutions.

2. Différents types de mises en page responsive

Vous ne voyez pas très bien comment votre site pourrait réagir au redimensionnement de la fenêtre ou sur un appareil mobile ? Cet article recense plusieurs possibilités de mise en page responsive : il vous aidera à choisir si vous souhaitez redimensionner vos colonnes, les placer ailleurs, les faire disparaître, etc…

3. Quels choix de navigation en responsive design ?

Dans le même style que l’article juste au-dessus, celui-ci publié il y a peu sur Design Spartan vous aidera dans votre réflexion sur la navigation. Plusieurs méthodes sont listées avec à chaque fois leurs avantages et inconvénients.

Gagnez du temps avec une structure souple et responsive

Les frameworks, kits de développement et grilles mises  à disposition sur le net sont nombreuses et je n’ai pas la prétention de les avoir tous testé. Mais en me reposant sur les différents retours que j’ai reçu d’intégrateurs et l’article de Smashing Hub, voici ceux qui devraient sûrement faire votre bonheur pour gagner du temps lors de la création de votre responsive webdesign. Vous n’avez qu’à les télécharger et vous voilà avec une base de code basique responsive et souvent même plusieurs styles prédéfinis.

1. Simple Grid

2. Foundation

3. Skeleton

4. The 1140px CSS grid

Des outils pour des images responsives

La gestion des images sur un site en responsive design peut être une plaie. Elle doivent se redimensionner, ne pas être trop lourde, si elles deviennent trop petites faut-il les faire disparaître ? Autant de contraintes et de questions qui trouveront sûrement solutions et réponses avec ces outils formidables :

1. Adaptative Images

Je ne l’ai pas testé moi-même mais Adaptative Images semble être un outil indispensable pour tout site en responsive design qui se respecte. Basé sur PHP et Javascript, Adaptative Images détecte automatiquement la résolution du visiteur et en fonction de ça va générer l’image à la taille optimale pour cette résolution et bien sûr, le poids de l’image aussi se verra augmenté ou diminué. Aucun effort à faire !

2. Sencha

C’est un excellent outil utilisé pour le redimensionnement d’images au bon format. Il fournit une optimisation des images hébergées en fonction de la taille du périphérique sur lequel les images sont visionnées.

Du texte qui s’adapte

FitText

FitText est un script JS permettant à vos textes et titres de s’adapter à la taille du conteneur, et donc à la résolution de l’internaute.

Outils relatifs aux media-queries CSS3

1. Respond.js

Utilisez rapidement vos media queries même sur IE 6 à 8 !

2. Adapt.js

Cet outil fonctionne aussi sur les vieux navigateurs et le meilleur est qu’il peut détecter plusieurs dimensions de plusieurs navigateurs et servir en fonction les feuilles de style nécessaires.

3. detectMQ.js

Ce script vous permet de détecter si des media queries sont utilisées ou non. Cela peut être très pratique pour par exemple appliquer du Javascript en fonction du changement de mise en page ou pour avoir avec précision les « breakpoints » sur tous les navigateurs.

Des outils tout-en-un ou « boilerplates »

Les boilerplates sont des combinaisons de nombreux outils pour la création de sites web cross-devices. Cela en fait donc d’excellents choix pour débuter un site web avec de nombreuses fonctionnalités et outils déjà prêts à l’emploi.

1. Mobile boilerplate

2. 320 and up

Conclusion

La principale référence utilisée est l’article paru sur Smashing Hub, vous y trouverez quelques outils non listés ici :

Ultimate responsive web design toolkit

Ces quelques outils devraient vous simplifier de nombreuses tâches lors de la création de sites en responsive, bien qu’ils ne fassent pas tout le travail à votre place. Ils permettent d’accélérer tout votre processus de travail et il serait dommage de se priver de tant d’outils pratiques et gratuits, non ?

Je m’étonne de n’avoir pas encore présenté les digital paintings d’Anton Semenov, aussi connu sous le nom de « Gloom ». Son univers bizarre, froid et quelque fois dérangeant ne laisse pas indifférent. Découvrez son style très personnel qui ne manquera pas de vous inspirer.

Cela fait maintenant plusieurs années que je suis les créations du russe Gloom que j’ai rejoint dans le collectif Slashthree. Il continue de s’améliorer tout en restant fidèle à son univers torturé et dérangeant. Sa création pour l’avant-dernière exhibition de Slashthree avait d’ailleurs fait sensation (première image de cet article). La majorité de ses créations sont très sombres et déssaturées, montrant le plus souvent des personnages difformes, des paysages froids et vides, et des textures de peau plissées ou abimées qui permettent réellement de reconnaître ses travaux en un coup d’oeil.

Qu’on aime ou qu’on n’aime pas le portfolio d’Anton Semenov, ses digital paintings et photomanipulations ne peuvent vous laisser de marbre et créeront automatiquement une émotion chez le spectateur :

DeviantArt d’Anton Semenov aka Gloom

Que pensez-vous des travaux de Gloom ?

Voici le retour des astuces Photoshop avec la nouvelle version de notre logiciel favori ! Photoshop CS6 apporte son lot de nouveautés et de nombreuses nouvelles astuces sont à connaître !

Une des grandes nouveautés de Photoshop CS6 est l’arrivée de filtres dans le panneau de calques. Si comme moi vous avez régulièrement plus d’une centaine de calques et que Ctrl+clic sur le document n’est pas toujours pratique, cette nouveauté arrive tel le messie !

Observons le nouveau panneau des calques de Photoshop CS6, relativement similaire à celui des précédentes versions (notez qu’ici il est en anglais). Notez que j’ai plusieurs calques, de plusieurs types, avec des noms différents.

Et ce qui nous intéresse pour trier et retrouver facilement nos calques est la section de filtre :

Tout commence à gauche en cliquant sur la liste déroulante. En fonction de ce que vous choisirez, les options changeront à droite de la liste déroulante. Il y a 6 grands types de filtres de calques :

- le type (graphique, texte, calque de réglage, dynamique, vectoriel)

- le nom

- l’effet de calque (ombre portée, contour, etc…)

- mode de fusion

- attribut (visible, bloqué, masque d’opacité, etc…)

- couleur du calque

1. Le choix par type de calques

Sélectionné par défaut, le choix par type révèle à droite de la liste déroulante 5 boutons correspondant aux calques graphiques, aux calques de réglage, aux calques de texte, vectoriels et enfin les calques dynamiques. Si vous cliquez sur l’un de ces boutons, seuls les calques correspondant au type sélectionné apparaîtront en-dessous :

Il est à noter que vous pouvez sélectionner plusieurs types de calques à la fois :

Si aucun calque ne correspond au filtre sélectionné :

2. Le choix par nom

Filtrer les calques par leur nom est une bénédiction n’est-ce pas ? Une fois le type de filtre sélectionné (« nom », ici « Name ») un champ texte apparaît à droite. Pas la peine de vous expliquer la suite :

Cela peut s’avérer extrêmement pratique si vous souhaitez rapidement trouver plusieurs calques, il suffit alors de les faire commencer par la même lettre par exemple.

Ex : Dans un webdesign, si vous souhaitez afficher tous les calques de boutons que vous aurez pris soin de renommer. Ou encore dans un matte painting, pour trouver tous les calques correspondant à la végétation en tapant les premières lettres de leur nom.

3. Le choix par effet de calque

Une deuxième liste déroulante vous permet de trouver tous les calques possédant un style activé comme par exemple une ombre portée, une lueur ou un contour, etc…

4. Le choix par mode de fusion

Là encore très pratique, si vous recherchez parmi votre montagne de calques un calque spécifique en Incrustation par exemple, vous n’aurez qu’à le sélectionner et il apparaîtra en-dessous :

5. Le choix par attribut

Le filtre d’attribut permet d’isoler les calques selon leur attribut actif : visible, bloqué, vide, masque vectoriel, masque d’opacité, etc…

6. Le choix par couleur

Si vous êtes un utilisateur assidu de Photoshop, vous devez savoir qu’on peut assigner des couleurs à ses calques, ce qui est très pratique pour les identifier en un clin d’œil. Il suffit de faire un clic droit sur l’œil à gauche du calque et de sélectionner une couleur. Maintenant, on peut filtrer les calques par leur couleur suivant celle que vous leur avez assigné :

Pour finir

Dernière indication et non des moindres, sachez qu’il est possible d’activer ou de désactiver le filtre de recherche de calque en cliquant sur le petit bouton « toggle » à droite (cf image ci-dessous).  Ainsi il est inutile de re-sélectionner des valeurs par défaut pour afficher tous les calques et encore plus pratique : cela vous permet par exemple de jongler en un clic entre l’affichage de tous vos calques et de certains calques spécifiques sans avoir à les chercher à chaque fois.

Pour finir, profitez bien de ce nouveau petit outil qui fera très certainement la différence, surtout lorsque vous passerez plusieurs jours sur le même PSD. Et pensez bien que cela ne vous dispense pas de bien ranger vos calques !

Fatoe aka Mike Orduna a déjà été présenté il y a maintenant quelques années sur Design Spartan. Depuis, il a fait un petit bout de chemin et son style reste unique en mêlant spray, dessin, photomanipulation, etc… C’est l’occasion de découvrir ses nouvelles créations et de redécouvrir les plus anciennes qui n’ont pas pris une ride.

C’est un plaisir de se replonger dans le portfolio inimitable et intemporel de Fatoe, toujours autant teinté de hip hop et de sport. C’est aussi une agréable surprise de voir les nombreux webdesigns qu’il a réalisé pour une multitude de films, le traitement choisi pour chacun d’entre eux est vraiment inspirant. Je tiens à préciser que je reste un grand fan de ses premiers travaux que j’avais découvert à l’ouverture du blog Design Spartan, dont certains ont malheureusement été retirés de son portfolio.

Découvrez ou redécouvrez les travaux de Mike Orduna :

Portfolio de Fatoe aka Mike Orduna

43è sélection du meilleur du web et des liens des lecteurs : ressources, tutoriels, articles intéressants ou juste bons pour l’inspiration, il est temps de ne prendre que le meilleur et de laisser le superflu !

Liens et articles à découvrir

Le site ultime des snippets (bouts de codes utilisables) pour tout type de langages (Lien des lecteurs de LuciferX)

Ressources et tutoriels

17 textures Bokeh pour vos designs

40 typographies pour professionnels du web et du print

50 nouveaux UI kits, PSD et wireframes gratuits pour web et mobiles

15 PSD de rubans jolis et gratuits

PSD gratuit à télécharger d’une pédale d’effet

Grosse collection de plugins jQuery pour du drag and drop

Camera : un slider animé CSS3 gratuit également disponible en fullscreen

30 typographies russes

Tutoriel : Rotation de mots en animation CSS3

Tutoriel : Créez un bloc à onglets animé en CSS3

Pour votre inspiration

100 rendus 3D photoréalistes

Sélection de superbes rendus 3D

Sélection de webdesigns gris

Sélection de webdesigns verts

Sélection de webdesigns rouges

Une sélection conséquente et pleine de ressources en tout genre ! Quels ont été vos liens préférés dans ce 43è numéro ?

Les pokémons sont d’adorables créatures que nous apprécions tous, dessinées à l’origine dans un style manga… mais ceux que je vais vous présenter ne sont pas forcément adorables et mignons. Gavin Mackey a utilisé ses talents en digital painting pour donner une nouvelle vie à nos idoles. Vous ne les verrez plus pareils…

Vous retrouverez ainsi Pikachu, Salamèche, Bulbizarre, Chrysacier, Tartard et compagnie (ça revient de loin tout ça, non ? ) dans une version plus mature, réaliste et plus dangereuse. Et le pire dans tout ça, c’est que le digital painter n’est pas des moins doués et on apprécie se perdre dans des détails qu’on n’aurait jamais imaginé en regardant le dessin animé. Merci à lui !

DeviantArt de Gavin Mackey

Arriverez-vous à reconnaître les 40 Pokémon de Gavin Mackey de cette liste ? Et à les attraper tous ? (je sors.)

(Comme toujours je vous conseille de cliquer sur les images pour les voir en grand dans le mode galerie.)

Et en bonus, Patrick l’étoile de mer dans Bob l’éponge (oui, ben oui…) :

Vous les avez tous reconnus ? Vous êtes retombés en enfance ou au contraire vous ne verrez plus jamais les Pokemon de la même manière ?

Découvrez les travaux de Rafael Sarmento, artiste et illustrateur originaire du Brésil. J’ai eu un petit coup de cœur pour ses illustrations hautement inspirées et personnelles mêlant peinture et dessin traditionnels avec techniques numériques.

C’est bon pour votre inspiration :

Site de Rafael Sarmento

Page Behance de Rafael Sarmento

Le street art a cette manière de s’inviter dans notre champ de vision et d’y modifier la perception monotone de l’espace urbain, sans qu’on s’y attende. Je trouve que cette forme d’art sauvage excelle lorsqu’elle détourne un objet anodin et ennuyeux comme une poubelle ou une bouche d’égout avec créativité. Voici donc une petite sélection de street arts pour votre inspiration.

Ces street arts sont issus des sélections du blog de l’ami Olybop.

Je vous invite à commentez l’article pour donner vos impressions et citer vos street arts préférés !

L’illustrateur et concept artist Alex Broeckel, aka raybender, possède un portfolio très varié démontrant l’étendue de son talent. Oscillant entre concept art, illustration 2D, matte painting et de plus en plus de réalisations en 3D, sa galerie vous en met plein la vue, surtout si vous êtes un amoureux de science-fiction.

Site de l’illustrateur Alex Broeckel aka raybender

DeviantArt d’Alex Broeckel aka raybender

Que pensez-vous des travaux variés d’Alex Broeckel ?

42è sélection du meilleur du web et des liens des lecteurs : ressources, tutoriels, articles intéressants ou juste bons pour l’inspiration, il est temps de ne prendre que le meilleur et de laisser le superflu !

Liens et articles à découvrir

Eviter les tangentes : 9 erreurs de composition dont chaque artiste devrait se méfier (eng)

Sélections de sites web interactifs en jQuery

Ressources et tutoriels

15 Tutoriels de responsive webdesign

30 Tutoriels de pixel art pour les amoureux des pixels

90 nouveaux thèmes WordPress de qualité (édition 2012)

Tutoriel de design et intégration pour créer un formulaire de contact dans un style de lettre (eng)

Google web fonts : des centaines de typographies gratuites à télécharger et implémenter dans vos sites avec @font-face

20 typographies sans empattements licenciées pour @font-face à télécharger

Pour votre inspiration

40 sites utilisant des logos circulaires

80 Publicités designs et créatives de mars 2012

25 exemples de grande photographie en webdesign