Your SlideShare is downloading. ×
0
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Mornington Peninsula responsive design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mornington Peninsula responsive design

131

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
131
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mornington Peninsula Responsive Design
  • 2. What is responsive design?
  • 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. This is the internet...
  • 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. Mobile vs. Apps vs. Responsive
  • 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. 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. 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. Mobile (portrait)Desktop Tablet (portrait)
  • 11. Mobile (portrait) Tablet (portrait)Desktop
  • 12. Mobile (portrait) Tablet (portrait)Desktop
  • 13. Demo time!Mornington Peninsula Website Broome Shire Website
  • 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. 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. 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. 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. 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. 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. Thank you!

×