Mornington Peninsula responsive design

315 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Mornington Peninsula responsive design

  1. 1. Mornington Peninsula Responsive Design
  2. 2. What is responsive design?
  3. 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’
  4. 4. This is the internet...
  5. 5. Almost half of all internetconnections are mobile wireless Source: ABS 9th October 2012http://www.abs.gov.au/ausstats/abs@.nsf/mediareleasesbyCatalogue/F2D32B785378BC9CCA257 58D002B6804?Opendocument
  6. 6. Mobile vs. Apps vs. Responsive
  7. 7. Mobile websitesPros• 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 pointCons• Limited view of information• Need to create separate mobile templates• Different URL
  8. 8. Mobile ApplicationsPros• More control over user experience & security• PUSH notification & personalisation• Content available without internet connectionCons• Expensive to build and maintain• Need to build one for iOS, Android, etc• It’s a ‘hard sell’ (even if its free)
  9. 9. Responsive DesignPros• 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 screensCons• 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
  10. 10. Mobile (portrait)Desktop Tablet (portrait)
  11. 11. Mobile (portrait) Tablet (portrait)Desktop
  12. 12. Mobile (portrait) Tablet (portrait)Desktop
  13. 13. Demo time!Mornington Peninsula Website Broome Shire Website
  14. 14. 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
  15. 15. 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)
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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)
  20. 20. Thank you!

×