EPA Victoria - Case study in responsive design

WHAT IS RESPONSIVE

WEB DESIGN?

INTRO

THE WEB RIGHT NOW

16.2 million mobile handset subscribers in Australia

an increase of 7% from 15.2 million subscribers at the end

of December 2011

* Australian Bureau of Statistics

THE WEB RIGHT NOW

6,610 Terabytes downloaded during three months

ending June 2012 an increase of 32%

from the three months ended 31 December 2011

* Australian Bureau of Statistics

THE WEB RIGHT NOW

As many as 31% of users use their mobile as their primary means to access the internet

(United States stat)

DIFFERENT RESOLUTIONS & FORMATS

TWO APPROACHES, EXPLAINED

Separate Mobile site:

• Mobile & desktop experiences are treated completely differently

• The Web site detects the devices and diverts the user to the appropriate site

• Typically the mobile site has fewer functions and content

Responsive design

• User experience is based on the same foundation

• The site detects the screen resolution and adjusts the interface accordingly

• Content is the same across desktop & mobile

CONSIDERATIONS

Separate Mobile site:

• Good for dedicated experiences

• URL’s will be different

• Page load can be better optimized for the device

• Users may not expect a completely different experience

Responsive design:

• May impact production costs

• One URL is good for SEO (Google's preferred approach, although they support separate sites too)

• Easy to maintain (one single version of the site)

• Mitigate against future devices

• Guarantee to fit on the users screen

• Resizing graphics could be problematic

• Compatibility issues with HTML5 & CSS3

• Responsiveness can be compromised

EPAVICTORIA

CASE STUDY

www.epa.vic.gov.au

WHY SHOULD EPA BE RESPONSIVE?

Mobile traffic growing from around 5% a year to 10%

(and increasing)Plan for the future

53% mobile traffic during

summer

10% mobile traffic

WHY EPA AND NOT THE BEACH REPORT?

WHY EPA AND NOT THE BEACH REPORT?

Main EPA site gets less mobile traffic and has less of a specific

purpose Responsive design allowed EPA to support mobile whilst catering to

all audiences and needs

DEMONSTRATION

11% increase in visits and24% increase in page views

in the 3 months afterlaunch compared to the 3

months before launch

GENERAL TRAFFIC RESULTS*

* Please note that these are approximations

10% mobile traffic 1st Aug – 31st Oct 2012

(compared to 5.6% mobile traffic during

1st Aug – 31st Oct 2011)

MOBILE TRAFFIC RESULTS*

* Please note that these are approximations

External feedback has been overwhelmingly positive

...AND MOST IMPORTANTLY

SOME LEARNINGS

• Content can be tricky e.g complex tables• Legacy apps - Think about how to integrate non-responsive

apps/microsites• Page and image sizes• Order of item layout at various sizes - requires thought• Hard to explain to people without showing them (having

responsive wireframes developed was useful as an internal sales tool)

• Content creators need to update their thinking to consider mobile (the responsive design framework isn't going to solve this) - still working on this one

THANKS

END OF CASE STUDY

www.reactive.com