The Institut français in London is a French culture and language centre that aims to spread French culture through its cinema, library, French courses and various cultural events.
Several observations urged us into adapting our website to mobile devices:
- Through the years, the website has grown from a static online showcase to the essential step prior to paying the Institut a visit, with more that 2.400 sessions a day.
- In less than two years, the mobile visitors share rose from 1/5 to more than 1/3, and almost 50% of them left the website after browsing one page only.
- Finally, Google’s new policy of lowering the ranking for websites that aren’t mobile-friendly as of April 2015 was the clincher, a good ranking being crucial to the viability of our organisation.
By its structure and the diversity of its offer, the website of the Institut is large and we needed to find some solutions to display such an amount of content on small screens while keeping a clear and smooth browsing.
The Institut website features three levels of menus, each with a large number of items. We chose not to hide these menus behind a hamburger button as they are the core of our website navigation, but it was also impossible to display them fully on mobile screens. We developed a “hybrid” solution, using the power of touch gesture on mobile screens and a breadcrumb.
Several techniques were used to fit the content on small screens.
- We chose to hide the unnecessary: that includes most of the decoration and also the redundant items that are justifiable on a big screen but unnecessary on a mobile screen.
- We gained some space by overlaying the event picture with the title while providing a sleek display. On the contrary, some items, like the buttons, were made larger to ensure they’re easy to tap on with your large (dirty?) fingers.
- Event listings that are usually rendered on three columns (large screen) scale down to two and then one column on smaller screens.
Load time was improved by
- Loading images that are the perfect size for the current screen
- Using SVG icons when possible (improving sharpness on retina displays at the same time)
Some improvements unrelated to the responsive website were integrated at the same time:
- A new ‘Latest news’ box on each section of website
- The ability to share an event on Whatsapp for our mobile users
- Several WordPress plugins developed to help the Institut team update the website more easily (handling the sliders, linking events to the booking system)
The website was presented to the team of the Institut and feedback was collected over the next days, before the website went live in time, in June 2015.
The responsive website, paired with the new ticketing system, made the process of booking tickets fast-forward for our mobile customers.
Load time (on the home page with a hard reload) fell from 2.72s to 1.38s.
Overall, the feedback received was overwhelming positive, both from the team and the public.
Visit the website