It’s All About Piano

Development & design of a responsive & touch-enabled piano festival website

It’s All About Piano is a piano festival that takes place in London every year, at the Institut fran├žais du Royaume-Uni. Piano enthusiasts are brought together for three days through concerts, recitals and films. The website for this festival presents the events and artists taking part in the festival, as well as its partners. The website was developed using WordPress, custom post types & custom fields (see Altitour) but we here focus on how Responsive Web Design and Twitter integration were implemented.

Design

The design for this website is simple, using flat design, with several patterns repeated throughout the website: the red & grey boxes, for instance, use the same properties in the stylesheet. Each box holds a clear title and a call-to-action button at the bottom-right-hand corner. If the action button is essential (eg. ‘Buy now’), it will stand out using a red background.

Box with call-to-action button to book tickets

Box with call-to-action button to book tickets

Responsive Web Design

Aware of the growing proportion of mobile users browsing the web, the website needed to be responsive: it can adapt to any screen resolution and is device-agnostic.

Thanks to the chosen grid system, blocks will stand next to each others or one above the other depending on the screen size.
Because of our users needs, the natural order they would use when viewed on a small screen needed to be changed: for instance, the ‘filter box’ that stands on the right on large screens cannot be located under the whole left column on mobile screen as filtering would be used before browsing through all events. This could be gracefully achieved with the new ‘flex’ CSS property but I chose to use JavaScript as ‘flex’ was not widely supported across all browsers yet.

Finally, the website is touch-gesture enabled (taping, swiping etc. on a mobile screen) as it is a convenient way to flick through the homepage slider when viewing the website on a smartphone.

iaap-responsive

It’s All About Piano on mobile, tablet and laptop

 

Twitter integration

Twitter offers easy ways to display a feed on a website. However, the level of customization offered is very low and you find yourself forced to load an iframe on your website. I decided to dive into the Twitter API (never to return) in order to achieve a customized result: tweets including the #AllAboutPiano hashtag are automatically retrieved, parsed with JSON and then returned raw to the webpage, allowing a full customization with CSS.

Twitter feed integration

Twitter feed integration

Visit the website