Outils et gestion Agence Web / FreeLancer

Bonjour à tous,

j'ai remarqué que la question des outils pratiques est soulevée assez souvent dans les lives, je voulais apporter ma pierre à la communauté Grafikart, ne pouvant assister au live en direct.

Déjà petite présentation de la société. Nous sommes une petite (voir minuscule) agence web basée sur 3 personnes en haute-savoie :

un web designer / développeur front-end
un admin-sys pour l'infogérance
un gérant / développeur back-end (moi)
J'ai repris la société il y a 8 mois, après y avoir été salarié pendant 3,5 ans.

Nous travaillons tous les 3 en télé-travail donc cela s'apparente à du freelance. Nous sommes d'ailleurs tous déclarés auto-entrepreneur en parallèle.

(Bon et le outils ! ?), j'y viens :)

Les outils que nous utilisons pour la gestion globale sont principalement gratuit et en voici une petite liste :

Dolibarr : gestion des clients, propositions et factures
Harvest : gestion des projets, tâches et du temps (récemment mis en place suite à l'annonce dans un des lives)
Evernote : gestion des TODO-list de gros projets (partagées)
Google Keep (Desktop) : gestion des TODO journalières / mémo rapide
Google Drive : gestion partagés des documents de travail, brain-storming, debriefing de réu
DropBox : Gestion des documents par client (à titre perso), cahier des charges, maquettes, documentations techniques
VirtualMin : Gestion des sites au niveau des serveurs, vous gérez facilement tous vos sites avec chacun leurs configurations propres, leurs comptes ftp/svn/mail. Assez pratique à déployer car vous installera une architecture AMP facilement. Et vous aurez le confort d'un web-app pour configurer. Permet de gérer des sauvegardes et tout un tas d'autre chose.
Certains outils sont clairement redondant mais comme l'a souligné Grafikart, mettre tous ces oeufs dans le même panier, c'est pas une bonne idée.

Les outils de développement :

Sublime text : éditeur de texte surpuissant (merci encore pour ce partage de Grafikart). Nous avions tester Aptana en gratuit et NuSphere PhpEd (payant). Le confort d'utilisation, la rapidité, la gestion des projets, ont fait que nous sommes resté sur SublimeText
Zeal : documentation OffLine/rapide pour tous les langages/framework
Prepros : preprocesseur, nous travaillons principalement en less et sass, pas encore touché au coffeescript mais ca va peut être venir
TortoiseSVN : gestion du versioning des sources (détaillé plus loin)
Chrome (pas besoin de lien je pense) : principal navigateur utilisé avec les extensions pour dev : adblock, black menu for google, chrome sniffer, google keep, harvest time tracker, jsonview, nimbus screen capture web, pagespeed insights, perfectpixel (désuet depuis le responsive), scure password générator, utime, web developper, xml tree
Les outils en ligne pratique :

Online Compressor : compression de css/js pour les sites sans langages préprocesseur
WhatMyDns : testeur de propagation des dns
RegExr : testeur d'expression régulière (on en a toujours besoin)
Base 64 Decode/Encode : ca peut servir
PlaceIt : présentation de design, illustration divers, à tester !
SupportDetails : le lien à envoyer absolument à un client qui a un rendu/comportement bizzare sur votre site/application, avec ces éléments, vous avez un début d'explication et savez dans quelle direction chercher votre erreur (die IE, die!)
Base64 String : pour tester une image sur un site en direct sans upload ou autre. Vous récupérer le code base64 de l'image et la mettez dans votre inspecteur (background-image, img src, etc..)
Chraracter-Code : parce que la mémoire, c'est pas fait pour retenir tous ces codes
FontAwesome Icons : idem ci-dessus mais pour les icônes
ColorScheme Designer : trouver une nuance de couleur, une couleur correspondante à une autre par différente règle colorimétrique
Code Canyon et autres : parce qu'on peut en avoir besoin pour éviter de réinventer la roue et simplement se fournir en diverse ressources à bon prix.
EDIT : Les outils improbables (ou pas) :

le cahier/stylo : on a beau passer son temps sur un clavier, un schéma, une prise de note rapide, ça passera toujours par du papier
le téléphone (Nexus 5) : à raison de 5-10 appels par jour, je pourrais difficilement m'en passer
un verre / bouteille d'eau : ouais moi aussi je tourne à l'eau
un onglet du nav bloqué sur GrooveShark en mode radiodiffusion de la chaîne MasterofSoundTrack toute la journée (que je met en mute de temps en temps)
un clavier roccat Ryos Mk Pro : mécanique, profil de couleur selon l'activité, les raccourcis utiles
une souris logitech roulette libre : je sais plus le modèle mais c'est ma souris spéciale dev, le défilement libre est tellement utile
2 écrans 24" : le dual screen est obligatoire quand on doit monter une site de A à Z et gérer plusieurs dossiers clients en même temps
Je voulais revenir sur notre gestion SVN assez spécifique.

En fait, tous nos sites en développement sont en SVN. Nous avons une copie chez nous, nous commitons nos modifs sur un dossier du site sur le serveur (non visible) puis il y a un hook automatique pour exporter les fichiers/dossiers commités sur le dossier web. C'est assez pratique pour travailler en collaboration et même seul si on souhaite revenir à une ancienne version ou comparer des versions. C'est assez rapide, nous avons un raccourci clavier sous sublime text

Pour les mises en ligne de site, on passe par filezilla (avec les modes navigation synchro et comparaison de dossier) et si on a un doute, on comparera le fichier en ligne avec le fichier dev via le soft TortoiseMerge (livré avec TortoiseSVN)

Voila, je pense avoir fait le tour de tous nos outils.

Je voulais également faire un point sur la gestion des dossiers et le déroulement d'un projet.

Pour commencer, après une première rencontre client où nous avons évaluer le besoin, nous réalisons une proposition commercial (Dolibarr).

Elle sera plus ou moins détaillé.

A -5000€, elle sera assez détaillée car faisant seule foi.

A +5000€, elle sera simple car reprendra des points détaillés dans un cahier des charges (fourni par le client et adapter ou créé).

Pour la signature, nous exigeons 30% d'acompte pour tous les projets (sauf -1000€), cela nous permettra de figer le planning. Ceux qui tarde à signer/payer verrons leur planning se repousser, priorité à ceux qui paye.

Ceux qui paye comptant à la signature sont ultra prioritaire, on bouleversera un planning pour eux.

Ces éléments sont clairement établi avec le client et il n'y a pas de surprise.

Dans le déroulement du projet, nous travaillons sur le design (ou récupérons un design d'une autre agence), nous déployer notre back-office maison, l'adaptons aux spécificités clients (notre coeur de métier étant le sur-mesure) puis nous intégrons le site.

En générale sur le gros projet (+5000€), nous demandons le deuxième acompte (30%) au début de l'intégration (une fois le design validé).

Un fois l'intégration terminé, nous passons en phrase de test. Une fois ceux-ci validé par le client, nous planifions une mise en production (selon l'activité, s'il s'agit d'une création et d'un update, nous pourrons déployer à n'importe quelle heure de la semaine).

Une fois le site en ligne et fonctionnel avec les tous les éléments vendus développés, nous procédons à solde du dossier et demandons le reste de la facture, soit 40% en générale.

Contrairement à Grafikart, nous gérons les hébergements nous-même et les clients sont libres d'en choisir un autre au bout d'un an. La première année d'hébergement/maintenance/sauvegarde est généralement incluse dans la proposition).

Nous avons la particularité d'avoir développer un back office mutualisé que nous mettons à jour gratuitement régulièrement.

Les clients peu demandeurs en spécificité, utilisent les fichiers du système mutualisé qui inclue beaucoup d'option pour autoriser quelques spécificités. Si les développements sont trop spécifique, ils sont propres au site du client mais peuvent s'appuyés sur les classes générales (extends style). Certains aurons deviné que nous sommes en POO Php.

Voila pour notre petite histoire. J'espère que ça pourra en aider certains qui hésitent encore à se lancer dans ce métier ou à persévérer dans ce métier. Personnellement, c'est ma passion, j'en vie et je ne la changerai pour rien au monde.

Je pourrais répondre aux questions si besoins. Si c'est trop technique/spécifique/protégé, on pourra voir ça par mp.

A bientôt les grafikarteurs(ses) :)