»

Vodafone Report 2013

Vodafone Report 2013 homepage

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

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

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.

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)

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 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

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.

Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>