Game'Her is a French association aiming to promote gender diversity in esports, video games and audiovisual media. For this, we have mixed esports teams that we try to put as much as possible at the forefront of the French esport scene to inspire women and other structures to do the same. But we also have a team of passionate writers who write articles on video games, esports and audiovisual topics on our website. On top of that, we have many volunteers working to create community events, streaming on Twitch and wonderful graphic designers who do all our visuals.

Before I joined the association, we were on Wordpress, the most efficient and most importantly the fastest solution. There is no need to have strong development skills to be able to implement it and very little to customize the theme. The only problem is that when you buy a ready-made theme, it is difficult to be able to customize it as you wish. And that's where this project makes sense.

A major frustration

Every time we wanted to change the design of our site, we were limited by the original wordpress theme. So we were forced to buy a new theme because the people who wanted to change it didn't necessarily have much knowledge of the code. But as we changed themes like shirts, it was starting to cost us a lot of money and as a front-end developer, it frustrated me a lot. That's why I proposed to abandon Wordpress and create our own site from A to Z using the Symfony framework. With the help of another developer (thanks a lot to you if you read this), we created in one month a complete website with an administration interface with different permissions, especially for my editors who use the site more than anyone else.

However, when it was officially released live, the site was full of bugs and annoying little things that made me sad and unproud of the work done. But somewhere along the line, what we provided in a single month was much cleaner than some websites designed in several months, so it was somewhere reassuring. Then it was at that moment that we decided to open the site as an opensource project. Being only two developers by profession, we do not necessarily have the time to give to this project nor necessarily the desire to code when we get back from work. We have therefore taken the opportunity of the hacktoberfest to greatly improve our site and we thank again the various contributors. And being a volunteer for this association, open source seemed to me to be the best option! And I don't regret this choice.

Why did we go that way?

As we needed a huge backend part in a very limited time, we couldn’t afford to go for a procedural option. We needed to use something we are comfortable with and with easy implementation. I’ve already worked with a framework like Laravel in the past for some school projects. So it was a quick and nice solution for us to get rid of the evil Wordpress. As we both (the other developer and I) worked with Symfony for professional and personal projects, we find out it was the best solution for us. We should be able to work efficiently and quickly. Also, we needed to use something with a great documentation and a lot of tutorials so we can relate on it.

Then, because we didn’t have a lot of time, we decided to use materializecss for our css, especially for the admin side (because we didn’t had any design for this part of the website). It helps us to go faster, but it’s not perfect, the style asked by the designers which they had no idea about what material design is. (That's also why our website is not 100% material compliant but we are ok with it so it's fine).

We decided to host our site with Digital Ocean because for the use we make of it, it costs us 5€ less per month than the solution we had previously.

How to work?

As you know now, we are all volunteers with a lot of aptitude. But our designers are mostly about graphism and illustration than web design. Before we talk to them about material design, they had never heard about that. They also had no experience with accessibility like color contrast, voicers readers, keyboard navigation,… Same for the web design they delivered it was like jpeg mockup with no information about the hexadecimal code for the color, font size, margin and padding between elements,… So yeah, it was hard to work with them, even if they are so lovely, we had a lot of trouble to communicate and explain clearly what was our needs at this time, and why this workflow wasn’t working well for everyone. But isn't it the same everywhere?

So we did it with the things we had and release the first version of the website. Then, we took some time to explain to them what are Material Design, accessibility but also responsive design. And on their side, they take the time to explain us what were their constraints. Now we are still working on the V1 of our website, but we have new tools. In addition, we have improved our communication with each other and have learned to clearly express our needs and constraints on both sides.

With developers outside the association, communication was quite simple in the end. Our only big problem is that we don't have a dummy dataset to help them contribute properly.

You want in?

If you are interested in open source and want to start a project like this one, you should know that we still have a lot of work to do on this site. So, you just need to have a github account and some knowledge in html/css and ideally a first experience with the Symfony framework.

We already have a list of issues to correct if you want it right here: https://github.com/Noelierx/GameHer/issues you can also add your own issue or just suggest stuff you want to see in this website (like an english version or a dark mode theme)!

Follow us!

You can support us and follow us on :

• Twitter: https://twitter.com/GameHer
• Instagram: https://www.instagram.com/gameheroff/
• Website: https://www.gameher.fr/
• Discord: https://discordapp.com/invite/vKpbwh6
• Twitch: https://www.twitch.tv/gamehertv