EPA Victoria - Case study in responsive design

21
  • date post

    21-Oct-2014
  • Category

    Documents

  • view

    1.424
  • download

    2

description

Presented by EPA Victoria: Daniel McLeod, Program Leader Digital, Marketing & Communications Unit, with Tim Kotsiakos, Executive Creative Director at Reactive Media. Presentations to the Victoria Online Seminar Series, Thursday 22 November 2012.

Transcript of EPA Victoria - Case study in responsive design

Page 1: EPA Victoria - Case study in responsive design
Page 2: EPA Victoria - Case study in responsive design

WHAT IS RESPONSIVE

WEB DESIGN?

INTRO

Page 3: EPA Victoria - Case study in responsive design

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

Page 4: EPA Victoria - Case study in responsive design

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

Page 5: EPA Victoria - Case study in responsive design

THE WEB RIGHT NOW

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

(United States stat)

Page 6: EPA Victoria - Case study in responsive design

DIFFERENT RESOLUTIONS & FORMATS

Page 7: EPA Victoria - Case study in responsive design

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

Page 8: EPA Victoria - Case study in responsive design

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

Page 9: EPA Victoria - Case study in responsive design

EPAVICTORIA

CASE STUDY

www.epa.vic.gov.au

Page 10: EPA Victoria - Case study in responsive design

WHY SHOULD EPA BE RESPONSIVE?

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

(and increasing)Plan for the future

Page 11: EPA Victoria - Case study in responsive design

53% mobile traffic during

summer

10% mobile traffic

WHY EPA AND NOT THE BEACH REPORT?

Page 12: EPA Victoria - Case study in responsive design

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

Page 13: EPA Victoria - Case study in responsive design

DEMONSTRATION

Page 14: EPA Victoria - Case study in responsive design
Page 15: EPA Victoria - Case study in responsive design
Page 16: EPA Victoria - Case study in responsive design
Page 17: EPA Victoria - Case study in responsive design

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

Page 18: EPA Victoria - Case study in responsive design

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

Page 19: EPA Victoria - Case study in responsive design

External feedback has been overwhelmingly positive

...AND MOST IMPORTANTLY

Page 20: EPA Victoria - Case study in responsive design

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

Page 21: EPA Victoria - Case study in responsive design

THANKS

END OF CASE STUDY

www.reactive.com