3. ‘The Internet isn’t just on your computer screen
anymore. It’s also on your phone, your tablet,
your laptop, and who knows what else in the
next few years.
So when you visit a modern webpage, its design
should take our multiplatform world into
account, and morph to ideally match the size
and shape of the screen you’re viewing it on.
This is called responsive design’
5. Almost half of all internet
connections are mobile wireless
Source: ABS 9th October 2012
http://www.abs.gov.au/ausstats/abs@.nsf/mediareleasesbyCatalogue/F2D32B785378BC9CCA257
58D002B6804?Opendocument
7. Mobile websites
Pros
• Create a mobile centric user experience
• Shape experience around specific tasks
• Good for dedicated experience
• Pages load faster
• Content size is smaller and more direct/to the point
Cons
• Limited view of information
• Need to create separate mobile templates
• Different URL
8.
9. Mobile Applications
Pros
• More control over user experience & security
• PUSH notification & personalisation
• Content available without internet connection
Cons
• Expensive to build and maintain
• Need to build one for iOS, Android, etc
• It’s a ‘hard sell’ (even if its free)
10.
11.
12. Responsive Design
Pros
• Provide access to broader information
• Content easier to access across broad range of devices
• URL stays the same
• Easy to maintain (single version of content instead of multiple sites)
• Mitigate against future devices and different size screens
Cons
• Change to content publishing processes
• More production effort, therefore cost goes up
• More testing
• Possibility of problems with CSS 3 and HTML 5
– This could improve once the browser improves to support the new
technologies
18. About Mornington Peninsula
• Our Communication Challenges
• 25,000 non-resident rates payers (holiday homes)
• No one newspaper covers the peninsula
• Increasing demand for mobile/tablet friendly
website
• Huge influx of tourists over summer holidays
• Increased use of multimedia – audio & video
• Integrate with social media & ‘newsy’
• Internet coverage & infrastructure
19. Why we decided on responsive?
• 16.2 million people have smart phones
• One URL and one site to manage & maintain
• Desire to be innovative & try something new
• Improved user experience – best practice
• Staff & Councillors use tablets daily
• Future proof! (support new phones)
20. Content Challenge
• How the content is going to be displayed on all
screen sizes
• Tables & images resize - No tables in content that
cannot shrink (2 columns max, not too much
content)
• Keeping the mobile top of mind
• What information should stay/go as the screen
gets smaller
• Allow for lots of testing
21. Project Management
• Build upon our good relationship
• Realistic timelines – development time longer
• Design brief detailed & delivered what we
wanted
• Extensive wireframing 26 content types x 4
• Wiki made life very easy
22. Things to consider
• Different screen resolutions
• Different input mechanisms (click, touch)
• Accessibility considerations
• Filetypes and elements (Word, PDF)
• Non-responsive 3rd party software (GIS)
• Content Authors need to think more about
how their content is going to be displayed on
all screen sizes
23. Things to consider
• Allow for lots of testing - Padding in the project
schedule because everything takes so much longer
• Development time is longer than just developing for
the desktop
• How to integrate legacy apps that are not responsive
design friendly.
• Think about what information should stay/go when the
screen gets smaller, e.g. Main menu, Side Nav,
Quicklinks, footer content, etc.
• Size matters! (Links, Text, Buttons, White space around
all content, Room for content to grow/shrink, Image
sizes)
