Vodafone Report 2013 homepage
If it’s for Vodafone then it has to be responsive. Yes this is another front-end dev project for the lovely people who do ‘Reporting’ at Radley Yelder.
Creative HTML 5 tags for semantic responsive tabular data
Back by popular demand
Last year’s report was built by the talented Corey Dutson. It was very popular so it was decided that the new one should follow a similar design and use the same code base. So what stayed the same?
The homepage on my Kindle HDX 7
Break points
Full desktop, small desktop (or tablet), portrait tablet and mobile. There’s some pretty radical changes in visual layout that go with that.
Responsive friendly pop-up.
Layout
Navigation, big background image, block of text on the left. A couple of links do a clever lightbox over the right side.
ZoomSearch
Search functionality remains the same. All I needed to do was re-index the new site with the ZoomSearch software. Sorted ;-)
WinHTTrack
“Win what?” Oh, it’s an app that crawls your website and creates a flat HTML version. Final delivery is a flat HTML site. Like Corey, I built the site in Visual Studio with ASP.NET and Masterpages.
… and what was different?
Homepage in mobile view (on a, iPhone 4)
The homepage
The story telling aspect of the design has been augmented to include a third box, less copy and more visual appeal.
Enhanced footer
Sounds simple enough. Remember that this is a responsive site though. Away from the homepage the desktop version carries the ‘Watch’, ‘Browse’ and ‘Download’ concept with thumbnails.
Case study carousel in the Strategy section
Case studies
The strategy section contains responsive friendly carousels of case studies. Each case study has its own fullscreen background image.
Another case study with its own background image
Improved tracking
I’ve improved the Google Analytics tracking, especially for the video
What would I do different?
Less breakpoints
I don’t think the small desktop state adds much value. I prefer a larger font size and a bit more spacing.
A different process to flatten the site
I’m trying out Middleman which uses Ruby, Haml and SASS on another project.
See the Vodafone Report 2013.