Sustainable Strategies for The Mobile Web

  • 2,418 views
Uploaded on

 

More in: Technology , Sports
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,418
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
34
Comments
2
Likes
5

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. Sustainablestrategies for themobile web
  • 2. This session
  • 3. Strategy,not <code />.
  • 4. Designers &developers beware.
  • 5. Internets, not intranets.
  • 6. Slides available online.
  • 7. About meJesper Wøldiche RahkonenMunicipality of Aarhusdesigner /markup marine /project lead /woeldiche on twitter / quora / linkedin / etc.
  • 8. OverviewPresent Challenges of the traditional model.FutureWhyHowMobile firstBut
  • 9. OverviewPresentFuture A responsive alternative.WhyHowMobile firstBut
  • 10. OverviewPresentFutureWhy The benefits of a universal web.HowMobile firstBut
  • 11. OverviewPresentFutureWhyHow A look at the techniques.Mobile firstBut
  • 12. OverviewPresentFutureWhyHowMobile first Why you should design mobile first.But
  • 13. OverviewPresentFutureWhyHowMobile firstBut Really? I’m Cinderella too?
  • 14. The traditional model
  • 15. The traditional model‘Desktop’ + ‘mobile’ version
  • 16. The traditional model‘Desktop’ + ‘mobile’ version+ iPhone optimized
  • 17. The traditional model‘Desktop’ + ‘mobile’ version+ iPhone optimized+ App
  • 18. ChallengesContent duplication
  • 19. ChallengesContent duplicationVersion specific links
  • 20. ChallengesContent duplicationVersion specific linksSEO issues
  • 21. Unsustainable costs
  • 22. Unsustainable costsDesktop version
  • 23. Unsustainable costsDesktop version‘Mobile’ version
  • 24. Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized version
  • 25. Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized versionLarge tablet (iPad) version
  • 26. Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized versionLarge tablet (iPad) versionSmall tablet version (Galaxy)
  • 27. Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized versionLarge tablet (iPad) versionSmall tablet version (Galaxy)Internet enabled TV version?
  • 28. Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized versionLarge tablet (iPad) versionSmall tablet version (Galaxy)Internet enabled TV version?Internet enabled fridge version?
  • 29. You want updates with that?(I know, you get the point).
  • 30. Don’t assume contextfrom device.
  • 31. There is no mobile web.(But it makes for greatpresentation titles).
  • 32. @stephenhay“There is no Mobile Web. There is only The Web,which we view in different ways. There is also noDesktop Web. Or Tablet Web. Thank you.”
  • 33. The words we useinfluence our thinking.
  • 34. The alternative approach
  • 35. Aim for universal access.
  • 36. Make no assumptions.Or try not to.That goes for accesibility too.
  • 37. Design and build foreverything in between.
  • 38. Design and build foreverything in between.Including the next device.
  • 39. Lancaster University
  • 40. Wide screen
  • 41. Narrow
  • 42. Tablet sized
  • 43. Smartphone
  • 44. Why?
  • 45. BenefitsReduced costs for multiple platforms.
  • 46. BenefitsReduced costs for multiple platforms.Sustainable.
  • 47. BenefitsReduced costs for multiple platforms.Sustainable.Future proof.
  • 48. BenefitsReduced costs for multiple platforms.Sustainable.Future proof.Works on iPhone 5.
  • 49. Solves our challenges.One article = one url.
  • 50. Solves our challenges.One article = one url.Update content once.
  • 51. Solves our challenges.One article = one url.Update content once.Maintain one platform only.
  • 52. 34% more buzzwords perproject.Nah, not really.
  • 53. How?
  • 54. A combination of techniquesand web standards
  • 55. Responsive webdesignFlexible grids
  • 56. Responsive webdesignFlexible grids+ media queries
  • 57. Responsive webdesignFlexible grids+ media queries+ adaptive media
  • 58. Responsive webdesignFlexible grids+ media queries+ adaptive media+ web standards
  • 59. Adaptive webdesign?
  • 60. A design approach
  • 61. Design for mobile first.
  • 62. Mobile extends yourcapabilities.
  • 63. Mobile is exploding.
  • 64. Mobile first provides focus.
  • 65. Expand from that focus.
  • 66. I’m Cindarella too, really?
  • 67. Different context (might)require different solutions.
  • 68. An example: The event site
  • 69. One shoe never fits all.But try it on first.
  • 70. You might be Cindarella too.
  • 71. More sources‘Responsive Webdesign’, Ethan Marcotte.‘Mobile First’, Luke Wroblewski.‘A New Canon’, Mark Boulton.Links online.
  • 72. Thank you.slideshare.net/woeldiche
  • 73. PhotosStone tablet: http://www.flickr.com/photos/mendhak/2181341370/1984: http://www.flickr.com/photos/colindunn/4229983412/Superheroes: http://www.flickr.com/photos/ari/2567524938/Why: http://www.flickr.com/photos/tonikaarttinen/5687056556/Cindarella: http://www.flickr.com/photos/tonyj1961/6047893889/Nightclub: http://www.flickr.com/photos/30691679@N07/4423432834/Another Cindarella: http://www.flickr.com/photos/tonyj1961/6036010920/
  • 74. Responsive web designLinkshttp://www.abookapart.com/products/responsive-web-designhttp://www.alistapart.com/articles/responsive-web-design/http://www.zeldman.com/2011/07/06/responsive-design-i-dont-think-that-word-means-what-you-think-it-means/
  • 75. Mobile firstLinkshttp://www.lukew.com/ff/entry.asp?933http://www.lukew.com/ff/entry.asp?1137http://www.lukew.com/ff/entry.asp?1393http://www.abookapart.com/products/mobile-first
  • 76. A New CanonLinkshttp://2011.newadventuresconf.com/audio/mark.htmlhttp://vimeo.com/29991675http://www.netmagazine.com/interviews/in-depth/mark-boulton-layouts-and-grid-systems