About the project
As fans of the IME publications and initiatives (especially IME's alternative budgets, Bulgarian Tax freedom day, Разходите на българската държава), we were excited when they engaged us to create a (responsive) website for the first “Regional profiles: Indicator of development 2012” analysis. These studies will be performed annually by (almost) the same methodology so that the Content Management System, which we had to create for the project, should be flexible enough to meet any changes in methodology. In addition, the site should be with responsive design as a way for users to see the full site content on mobile and tablet devices.
The overal website design
From the design point of view the brief was quite free - no hard color or style guidelines. All that is required is to be very stylish and clean, with easily accessible and well-presented information and graphics.
Our first task was to create the overall design for the website, starting with the desktop version first:
… and than the others – smartphone and tablet versions. We've desided to use Twitter bootstrap framework and grid system although we knew it would require some modifications.
High-quality interactive graphics with Rafaeljs and SVG
A key place on each of the main web site pages (homepage and category pages - economy, healtcare etc.) takes an interactive map of Bulgaria split into regions, where each region is colored according to its assessment in that category. We have decided to use SVG (Scalable Vector Graphics) - an ideal solution for this project for a number of reasons:
- one SVG image fits all resolutions, and you do not lose image quality when zooming on your mobile device;
- SVG images are dynamic and interactive – they allow the insertion of effects and animations(which we use when selection a region), support colors and outline forms;
- supported by all modern browsers natively (including most mobile devices and tablets);
- lighter and faster than flash-generated graphics that require installed flash player.
All SVG maps are displayed using raphaeljs. Extremely lightweight, easy and convenient to use and well-documented, raphaeljs was our natural choise.
No hidden content
One of the main ideas in the RWD concept is that none of the site content or functionality gets removed or hidden, and we tried to adhere to it as much as possible. Actually one of the few things missing from the mobile site, is the link to our website.
And my favorite project phase...
the pressconference where the project and the website were unveiled to the public.
See you at the next year pressconference. In the meantime, if you want a responsive website, we would be glad to hear from you!