Ressources du dimanche : 05_responsive

Fraîcheur sur la ville et blés déjà bien mûrs pour ce dimanche de juillet. Thématique de la semaine, le web responsive, ressources, outils et articles dédiés pour réussir votre projet de site web en responsive.

1 – Votre design est-il ‘mobile friendly’ ?

‘Mobile friendly’ que je peux traduire par : accessible et lisible sur smartphone. On peut voir si un projet de site web en responsive est réussi quand on constate que sur smartphone, votre site est clair, lisible, quand l’accessibilité est optimale et que tous vos contenus sont présents et bien placés pour nos gros doigts. Et souvent, dans mes projets web, je cherche à travailler spécifiquement toute la partie design interface pour smartphone, car je sais que c’est la cible première d’un site responsive, et qu’il ne faut absolument pas la Richa Jain, dans son article, nous donne 12 conseils clairs et déterminants pour évaluer et réussir votre projet de site web en responsive.

Article de Richa Jain sur le site sitepoint.com.

Guide de Google Developers donnant des recommandations simples et précises sur le ‘mobile friendly’.
studiopress

2 – Retour d’expérience de Hiveage

Un article très intéressant sur la refonte du site Hiveage. Où on apprend que les designers sont retournés au papier pour prototyper, qu’ils ont travaillé en mobile-first, en respectant les Best Practices et notamment celles de Luke Wroblewski. On nous relate le processus de réflexion, les choix qui ont été faits, notamment pour la gestion du menu mobile, les outils de création et d’intégration, etc… L’article nous présente aussi les retombées, du moins les conséquences de fréquentation et  les nouveaux comportements que la refonte a pu entraîner. Un retour d’expérience vraiment très complet et honnête qui permet à chacun d’entre nous de s’enrichir et d’améliorer son propre process.

Article de Prabhath Sirisena sur le blog de Hiveage. —-  Site de Hiveage

hiveage

 

3 – Le Responsive côté serveur

Une vidéo de Rémi Grumeau à la dernière KiwiParty de 2015. LE responsive web design nous pose la question de la performance : comment avoir le même timing de traitement de nos pages web entre le desktop et le smartphone ? Comment optimiser nos contenus (animations, images…) pour que l’affichage se fasse en X millisecondes sans que le fatidique loader apparaisse sur notre écran smartphone et nous décourage ? Rémi Grumeau nous apporte des solutions côté serveur pour améliorer nos flux  et faire les bons choix de contenus pour fluidifier l’affichage sur tous les écrans.

Vidéo de la présentation de Rémi Grumeau sur Vimeo.

Retour sur la KiwiParty de 2015

remi_grumeau_sketching

4 – Calculer sa grille

Elément déterminant pour le webdesign de nos sites web en responsive, la grille n’est pas toujours facile à définir ni même à construire. Gridcalculator nous indique selon nos critères de construction la grille adéquate pour chaque largeur ciblée. En plus, l’outil nous permet de télécharger la grille selon les 3 formats classiques de webdesign  .ai (illustrator), .psd (photoshop) et .png. De cette façon, on importe la grille déjà construite dans notre logiciel, on peut l’isoler ou le mettre sure un calque sans aucun souci. Fantastique !

L’outil gridcalculator.

Outil de grille - gridcalculator

5 – 4 menus en responsive

Un menu en responsive complet à télécharger, une ressource intéressante écrite sans framework, prête pour un projet personnel ou commercial. Via un petit plugin Slicknav.js, le menu est entièrement responsive, et permet de faire la bascule sur les écrans réduits via le menu burger, avec 3 déclainaisons texte/ pictos ( font-awesome).

Lien vers la ressource du site tutorialzine.

Navigation responsive, ressource à télécharger

6 – Connaissez-vous Susy ?

Cet article nous indique comment utiliser Susy dans un projet. Susy est un cadre de grille basé sur le lnagage Sass efficace et très léger. Il a été conçu par Eric M. Suzanne et Construction de la grille, modèle de base, utilisation des fonctions et la mise en contexte avec le responsive. Article bien fait et complet pour se mettre à Susy.

« Je tiens également à souligner que, bien que Susy repose actuellement sur ​​des flotteurs traditionnels pour positionner votre grille, la documentation indique que la disposition de grille via CSS & Flexbox pourrait bien être à venir, ce qui rendra encore Sass plus puissant ! » Cela augure des possibilités que nous réserve le framework.

Lien vers l’article de Michelle Barker.

Documentation de Sass & la cerise sur la gâteau; un cours dédié sur Codepen, absolutly fabulous ! (Codepen supporte Sass, of course)

Susy, framework Sass

 

 

Categories:
Tags:
Date:
  • 19/07/2015
Share:
%d blogueurs aiment cette page :