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.
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.
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.
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.
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.
Visit the website