touch.gg – ça avance…

Le mois dernier j’ai pris quelques heures sur mon temps libre pour avancer un peu ce projet (voir mon précédent article).
J’étais presque tenté de laissé vivre mourir le site, mais finalement je me suis dit qu’il y’avait encore quelques pistes intéressantes à travailler. En plus ça ne pourra pas faire de mal à mon CV d’avoir un projet web comme celui-là mené à terme.

L’idée de base du site est en place : on peut bookmarker des applications iOS et suivre les baisses de prix.

track_price_drop_for_ios_apps_games

http://touch.gg

Ca fonctionne bien et maintenant je vais travailler sur :

  • la création et le partage de listes par les utilisateurs (idéal pour partager à vos Twittos votre liste des clones les plus idiots de Flappy Bird)
  • outils pour suivre les baisses de prix (alertes par mail)
  • la mise en avant sur le site des meilleures listes
  • le reste est par là

Idéalement j’aimerais bien me rapprocher d’une structure existante (type gros site d’actus ou appli ayant déjà une large base d’utilisateurs) pour faire avancer le site car je sais que sans ça le site ne décollera pas. Mais bon, je rêve un peu…

touch.gg – Communication & Réception (+ Bonus)

Précédemment : développement et optimisations (web)

J’ai volontairement laissé passer quelques semaines depuis le dernier article pour pouvoir tirer de premières conclusions sur la réception de http://touch.gg
Mais avant ça voyons ce que j’ai fait pour communiquer sur le lancement du site.

Communication

«Un site sans public, c’est triste.»

Deux semaines avant le lancement officiel du site j’ai passé plusieurs heures à récupérer les contacts de sites anglophones et francophones qui pouvaient être intéressés par un site comme le mien… en tout cas c’est ce que je pensais. Je n’ai finalement rassemblé qu’une grosse trentaine de contacts car la plupart des sites qui me venaient à l’esprit n’ont aucun intérêt à parler de touch.gg (pourquoi toucharcade.com parlerait de l’ouverture d’un site « concurrent » ?).
Autant vous dire que ma liste est éclectique, ça va de venturebeat.com à gonzague.me !
J’ai donc envoyé un mail à tout ce petit monde… sans résultat, puis une petite relance… sans effet.

Sur Twitter quelques amis on gentillement RT mon annonce d’ouverture du site.

±20 RT en tout mais finalement peu d'impact
±20 RT en tout

J’ai également posté un lien sur Reddit dans r/iosgaming.

19 upvotes c'est peu mais finalement pas si mal pour r/iOSgaming
19 upvotes c'est peu mais finalement pas si mal pour r/iOSgaming

J’ai également tenté une technique que je déteste mais peut parfois porter ses fruits : follower des twittos importants en espérant qu’ils vous remarquent et parlent de vous. J’ai arrêté cette idiotie après mon 100e following. Las.

J’ai remarqué qu’il me restait quelques dizaines d’euros sur mon compte Facebook Ads, j’ai donc testé deux types de pubs tout en sachant que ça ne valait pas beaucoup plus que distribuer des tracts dans la rue. Néanmoins ça m’a permis de redécouvrir les différentes options avancées de création d’une publicité Facebook, je me demande si ça ne vaudra pas le coup un jour de cibler des employés d’Apple pour tenter de promouvoir un de nos prochain jeu iOS. Oui car Facebook Ads permet de cibler les employés d’une boite ou les étudiants d’un collège en particulier ! En tout cas c’est ce qu’ils disent.

Pour la petite histoire voici qui je me suis amusé à cibler pour ma pub :

capture_d_ecran_13_06_13_22_09

Le résultat a sonné tel un coup de trique : 2 likes pour $10 de publicité (j’en rigole encore…).

Intermède : petite histoire.

Début juin je tombe sur ce joli GIF de @corentin_lamy, je le poste sur Reddit r/gaming. 3h et 3500 upvotes plus tard le post est en frontpage de Reddit !
En commentaire j’avais correctement sourcé le GIF ce qui m’a valu un gros paquet de karma comment, j’en ai donc profité pour le hijacker mon commentaire et faire un peu de pub pour touch.gg. Ouais je suis une sacré enflure.

Cela m’a au moins permis de vérifier la solidité du site, le site ne bronche pas même avec 300 visiteurs dessus plus ou moins au même moment (dixit Google Analytics). J’aurais au moins réussi quelque chose 🙂

Certains commentaires sur ce thread de Reddit sont intéressants, globalement une chose revient sans arrêt : beaucoup de personnes trouvent le site moche.
A force d’avoir des commentaires négatif sur le design du site je me demande si le rejet qu’il provoque n’est pas tel que cela a un vrai impact sur l’engagement des visiteurs.

The Reddit Effect
The Reddit Effect

Réception

Le lancement a été très difficile, il m’a pris beaucoup de temps pour quasiment aucun résultat. Les statistiques du premier mois sont sacrement tristes.

La majorité des visiteurs viennent de ce blog, de mon post sur r/IOSgaming et de mes quelques RT sur Twitter.
La majorité des visiteurs viennent de ce blog, de mon post sur r/IOSgaming et de mes quelques RT sur Twitter.

Autant je pense qu’un site comme celui-là peut intéresser de nombreuses personnes, autant cela n’intéresse personne d’en parler.

J’ai pas assez de recul pour me rendre vraiment compte de ce qui peut bloquer les gens d’en parler, le site est peut être trop cheap ou dégage un sentiment de déjà-vu ?

Quoiqu’il en soit j’en retire une bonne leçon : avoir un peu de presse lorsqu’on sort un jeu c’est pas trop compliqué, avoir un peu de presse lorsqu’on sort un site… c’est une autre histoire !

Bonus

Faire tourner touch.gg me coûte : Hébergement (12*10€) + Nom de domaine (60€) = 180€ / an
C’est tout à fait raisonnable pour un petit projet comme celui-là et c’est de tout façon négligeable vis-à-vis du temps que j’y ai investi.

Même si le site n’intéresse pas grand monde je compte bien le faire vivre pendant encore quelques années, à un moment donné ce serait bien qu’il se finance lui-même. Comme je n’ai aucune envie de « trahir » l’esprit du site en ajoutant de la publicité pour des jeux de merde développés par de grosses boites, j’ai choisi la solution qui me paraissait la plus juste : faire payer Apple.
J’ai donc mis en place des liens affiliés sur l’ensemble du site. Je ferai peut être un article à ce sujet si la situation du site évolue mais pour l’instant ce n’est pas très intéressant.
Si ces histoires d’affiliation iTunes vous intéresse je vous encourage à lire cette FAQ et je vous invite à rejoindre soit http://georiot.com soit http://afflr.com (ce type de service me laisse rêveur : ça répond à un vrai besoin et ils peuvent se faire des couilles en or).

Note : j’ai regroupé l’ensemble de précédents articles concernant touch.gg sur cette page.

touch.gg – Développement et optimisations (web)

Précédemment : intro & partie technique

CMS

J’utilise SPIP depuis des années et ce projet me permet de me mettre à jour sur certaines fonctionnalités de la version 3.X de ce CMS.

Quelques avantages :

  • C’est un CMS simple, robuste et très bien conçu. Il n’est pas parfait mais je le porte dans mon coeur depuis des années.
  • Il est bien sécurisé et n’étant pas très répandu il ne risque pas de faire l’objet d’une quelconque attaque.
  • La boucle DATA me permet de travailler sur le flux JSON de l’AppStore très facilement.

Outils

MAMP pour le développement sur ma machine perso, Sublime Text pour l’édition du code et Pixelmator les 2 images que je vais avoir à créer.

CSS / JS

Vu que le site s’adresse en particulier à des utilisateurs d’iPhone/iPad je me devais de le rendre le plus accessible possible sur ces machines.

Voilà une parfaite excuse pour me mettre à niveau sur un truc très à la mode ces deux dernières années dans le milieu du web : le Responsive Design.

C’est bien la première fois que j’avais envie d’en faire, jusqu’à présent c’était pour moi une expression à la mode que des clients mettaient dans leurs appels d’offres sans trop savoir ce que ça pouvait impacter sur leur site, les budgets ou si ils en avaient vraiment besoin.

Bref, j’ai pris comme base le framework Kube.css qui à l’avantage d’être léger et de ne pas trop s’éloigner de ce pourquoi il est fait : une très bonne base pour commencer un site en RWD.

Au niveau des scripts JS il n’y a rien de très folichon hormis :

  • FastClick – une librairie qui permet d’éliminer de délais de 300ms entre le moment ou on touche l’écran d’un appareil mobile et où le clic est pris en compte.
  • OffCanvas-nav – un superbe menu ultra rapide car il est animé avec des transitions CSS plutôt qu’en JS. Combiné à FastClick c’est très chouette !

Je ne sais pas trop quoi dire de plus sans rentrer trop dans les détails. Si vous avez des questions n’hésitez pas à me les poser.

Sur la page About this website vous trouverez un changelog assez light du site depuis sa version Beta, il est accompagné de screenshots d’anciennes versions du site… si vous avez envie de vous marrer…

Optimisations

J’ai voulu aller le plus loin possible au niveau de l’optimisation du serveur et de mon application, plus par défi personnel que pour autre chose.

J’ai usé et abusé de GTmetrix pour mesurer la performance de mon code HTML, l’idée étant d’avoir le meilleur score Page Speed & YSlow possible.

Pour cela :

  • mes CSS et JS sont minifiés et combinés
  • mes requêtes HTTP sont réduites au minimum vital
  • mes images très compressées (JPEG à 40% mais de tailles importantes pour un rendu correct sur écrans retina)
  • tout est GZIPé au niveau du serveur
  • la mise en cache des navigateurs est sollicité par des directives Apache
  • j’utilise plusieurs sous-domaines pour dispatcher les requêtes des navigateurs sur mes medias (images/css/js)

http://html5boilerplate.com a été une très bonne source d’inspiration et de conseils.

J’obtiens des scores très corrects (82%-85%), si je ne gérais pas les images retina (ou si je le faisait d’une autre façon) j’obtiendrais très aisément un score au dessus de 90%.

Autre outil intéressant pour mesurer les performances de son site : blitz.io.

Du côté du serveur cela a été un peu plus compliqué, comme je l’ai expliqué précédemment je me suis concentré sur le module PHP « MPM-worker » pensant qu’il serait la réponse à tous mes besoins.

Au dernier moment, deux jours avant la sortie officielle du site, j’ai décidé de tester le reverse-proxy Varnish. Je pensais m’embarquer dans quelque chose qui allait me prend beaucoup de temps et me rajouter du travail mais il en a été tout autre. En un quart d’heure Varnish était installé et configuré, tournait correctement, et les performances étaient au-delà de mes espérances !

150 utilisateurs simultanément et le serveur ne répond plus qu'avec un délais de 600ms
Avant Varnish - 150 utilisateurs simultanément et le serveur ne répond plus qu'avec un délais de 600ms
Après Varnish
Après Varnish - 250 utilisateurs simultanément, réponse du serveur en 100ms !

A suivre : communication et réception du site.

touch.gg

http://touch.gg

http://twitter.com/touchGG

touch.gg – Intro & partie technique

Fin 2012 j’ai eu une nouvelle idée de site internet. C’est pas la première fois, mais cette fois-ci les astres s’alignaient enfin pour que je m’y mette :

  • contrairement à d’autres idées que je traine depuis des années celle ci est relativement simple à mettre en place
  • j’ai pris une grande claque en 2012 en suivant le blog et les tweets de Anahkiasen, faire mon propre site est l’occasion parfaite pour me remettre à jour sur un tas de trucs
  • ma tendinite qui ne me lâche plus depuis deux ans m’empêche de me lancer dans le développement d’un nouveau jeu mais m’autorise enfin à passer quelques heures par semaines sur le développement d’un site

Me voilà donc lancé dans le développement d’un site sur une idée ultra simple : proposer les meilleurs jeux iOS disponibles, et uniquement la crème de la crème !

Pour en savoir un peu plus sur ma démarche et sur la philosophie du site je vous laisse lire cette page d’information.

Partie technique

Voilà un domaine dans lequel j’avais peu d’expérience, cela s’avérera être une partie des plus intéressantes pour moi.

Serveur

Je voulais avoir la main sur l’ensemble du serveur, je me suis donc tourné vers un VPS qui me permet d’avoir l’équivalent d’un serveur perso mais à moindre coût. J’ai passé de nombreuses heures à chercher le bon hébergeur, je me suis finalement fixé sur un hébergeur travaillant exclusivement avec des disques SSD : Ramnode (lien affilié, lien classique). Cela n’avait finalement que peu d’importance au final (on verra plus tard pourquoi), néanmoins je suis content d’avoir trouvé ce petit hébergeur « familiale », il fait du très bon boulot !

Quelques stats sur cet hébergeur : http://serverbear.com/622-1024mb-svz-ramnode

Installation

Ne connaissant pas grand chose aux différentes distributions Linux je me suis laissé guider vers Ubuntu.

S’en est suivi les étapes classiques d’installation d’un serveur LAMP, étant relativement novice dans la gestion d’un serveur j’ai pris soin de noter toutes les étapes et de me renseigner sur internet avant chacune d’entre elles.

webmin/sqlite/phpmyadmin/imagemagick/…

J’ai ensuite passé de nombreuses heures à essayer de configurer Apache au mieux, l’objectif étant d’avoir un serveur suffisamment robuste pour accueillir une centaine de visiteurs simultanés. Je me suis donné cet objectif comme un exercice d’apprentissage sachant très bien que je n’avais que peu de chance d’avoir autant de visiteurs sur mon site.

J’ai choisi d’utiliser le module « MPM Worker » pour Apache puisque c’est celui qui semblait le mieux répondre à cet objectif. Le plus gros problème à ce niveau-là et qu’il y’a peu de documentation sur ce module et sur la façon de le configurer correctement. J’ai donc perdu beaucoup de temps sur ce point là.

Sécurité

D’un point de vue de la sécurité j’ai fait quelques petites erreurs que je ne détaillerai évidemment pas ici (j’ai la flemme de les corriger…).

Si j’ai un seul conseil à donner de ce point de vue là c’est de lire le guide suivant avant de faire quoi que ce soit sur votre VPS :

http://plusbryan.com/my-first-5-minutes-on-a-server-or-essential-security-for-linux-servers

Logwatch et Fail2ban me semblent être deux outils incontournables pour sécurisé un serveur.

Dans les prochains articles je détaillerai :

touch.gg

http://touch.gg

http://twitter.com/touchGG

Ouverture de touch.gg – « Les meilleurs jeux iOS sont ici »

Vous aimez jouer sur votre iPhone/iPad mais vous avez du mal à trouver de bons jeux ?

Il y’a un site web pour ça : http://touch.gg

touch.gg

Je vais très vite revenir dans un post beaucoup plus long sur la mise en place de ce site qui m’a pris quelques mois (sur mon temps libre évidement).

D’ici à ce que cet article soit prêt je vous laisse découvrir le site.

http://touch.gg

http://twitter.com/touchGG