Sustainablestrategies for themobile web
This session
Strategy,not <code />.
Designers &developers beware.
Internets, not intranets.
Slides available online.
About meJesper Wøldiche RahkonenMunicipality of Aarhusdesigner /markup marine /project lead /woeldiche on twitter / quora ...
OverviewPresent        Challenges of the traditional model.FutureWhyHowMobile firstBut
OverviewPresentFuture         A responsive alternative.WhyHowMobile firstBut
OverviewPresentFutureWhy            The benefits of a universal web.HowMobile firstBut
OverviewPresentFutureWhyHow            A look at the techniques.Mobile firstBut
OverviewPresentFutureWhyHowMobile first   Why you should design mobile first.But
OverviewPresentFutureWhyHowMobile firstBut            Really? I’m Cinderella too?
The traditional model
The traditional model‘Desktop’ + ‘mobile’ version
The traditional model‘Desktop’ + ‘mobile’ version+ iPhone optimized
The traditional model‘Desktop’ + ‘mobile’ version+ iPhone optimized+ App
ChallengesContent duplication
ChallengesContent duplicationVersion specific links
ChallengesContent duplicationVersion specific linksSEO issues
Unsustainable costs
Unsustainable costsDesktop version
Unsustainable costsDesktop version‘Mobile’ version
Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized version
Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized versionLarge tablet (iPad) version
Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized versionLarge tablet (iPad) versionSmall tablet version ...
Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized versionLarge tablet (iPad) versionSmall tablet version ...
Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized versionLarge tablet (iPad) versionSmall tablet version ...
You want updates with that?(I know, you get the point).
Don’t assume contextfrom device.
There is no mobile web.(But it makes for greatpresentation titles).
@stephenhay“There is no Mobile Web. There is only The Web,which we view in different ways. There is also noDesktop Web. Or...
The words we useinfluence our thinking.
The alternative approach
Aim for universal access.
Make no assumptions.Or try not to.That goes for accesibility too.
Design and build foreverything in between.
Design and build foreverything in between.Including the next device.
Lancaster University
Wide screen
Narrow
Tablet sized
Smartphone
Why?
BenefitsReduced costs for multiple platforms.
BenefitsReduced costs for multiple platforms.Sustainable.
BenefitsReduced costs for multiple platforms.Sustainable.Future proof.
BenefitsReduced costs for multiple platforms.Sustainable.Future proof.Works on iPhone 5.
Solves our challenges.One article = one url.
Solves our challenges.One article = one url.Update content once.
Solves our challenges.One article = one url.Update content once.Maintain one platform only.
34% more buzzwords perproject.Nah, not really.
How?
A combination of techniquesand web standards
Responsive webdesignFlexible grids
Responsive webdesignFlexible grids+ media queries
Responsive webdesignFlexible grids+ media queries+ adaptive media
Responsive webdesignFlexible grids+ media queries+ adaptive media+ web standards
Adaptive webdesign?
A design approach
Design for mobile first.
Mobile extends yourcapabilities.
Mobile is exploding.
Mobile first provides focus.
Expand from that focus.
I’m Cindarella too, really?
Different context (might)require different solutions.
An example: The event site
One shoe never fits all.But try it on first.
You might be Cindarella too.
More sources‘Responsive Webdesign’, Ethan Marcotte.‘Mobile First’, Luke Wroblewski.‘A New Canon’, Mark Boulton.Links online.
Thank you.slideshare.net/woeldiche
PhotosStone tablet: http://www.flickr.com/photos/mendhak/2181341370/1984: http://www.flickr.com/photos/colindunn/422998341...
Responsive web designLinkshttp://www.abookapart.com/products/responsive-web-designhttp://www.alistapart.com/articles/respo...
Mobile firstLinkshttp://www.lukew.com/ff/entry.asp?933http://www.lukew.com/ff/entry.asp?1137http://www.lukew.com/ff/entry....
A New CanonLinkshttp://2011.newadventuresconf.com/audio/mark.htmlhttp://vimeo.com/29991675http://www.netmagazine.com/inter...
Sustainable Strategies for The Mobile Web
Sustainable Strategies for The Mobile Web
Sustainable Strategies for The Mobile Web
Sustainable Strategies for The Mobile Web
Sustainable Strategies for The Mobile Web
Sustainable Strategies for The Mobile Web
Sustainable Strategies for The Mobile Web
Upcoming SlideShare
Loading in...5
×

Sustainable Strategies for The Mobile Web

2,578

Published on

Published in: Technology, Sports
2 Comments
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,578
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
35
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide

Sustainable Strategies for The Mobile Web

  1. 1. Sustainablestrategies for themobile web
  2. 2. This session
  3. 3. Strategy,not <code />.
  4. 4. Designers &developers beware.
  5. 5. Internets, not intranets.
  6. 6. Slides available online.
  7. 7. About meJesper Wøldiche RahkonenMunicipality of Aarhusdesigner /markup marine /project lead /woeldiche on twitter / quora / linkedin / etc.
  8. 8. OverviewPresent Challenges of the traditional model.FutureWhyHowMobile firstBut
  9. 9. OverviewPresentFuture A responsive alternative.WhyHowMobile firstBut
  10. 10. OverviewPresentFutureWhy The benefits of a universal web.HowMobile firstBut
  11. 11. OverviewPresentFutureWhyHow A look at the techniques.Mobile firstBut
  12. 12. OverviewPresentFutureWhyHowMobile first Why you should design mobile first.But
  13. 13. OverviewPresentFutureWhyHowMobile firstBut Really? I’m Cinderella too?
  14. 14. The traditional model
  15. 15. The traditional model‘Desktop’ + ‘mobile’ version
  16. 16. The traditional model‘Desktop’ + ‘mobile’ version+ iPhone optimized
  17. 17. The traditional model‘Desktop’ + ‘mobile’ version+ iPhone optimized+ App
  18. 18. ChallengesContent duplication
  19. 19. ChallengesContent duplicationVersion specific links
  20. 20. ChallengesContent duplicationVersion specific linksSEO issues
  21. 21. Unsustainable costs
  22. 22. Unsustainable costsDesktop version
  23. 23. Unsustainable costsDesktop version‘Mobile’ version
  24. 24. Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized version
  25. 25. Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized versionLarge tablet (iPad) version
  26. 26. Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized versionLarge tablet (iPad) versionSmall tablet version (Galaxy)
  27. 27. Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized versionLarge tablet (iPad) versionSmall tablet version (Galaxy)Internet enabled TV version?
  28. 28. Unsustainable costsDesktop version‘Mobile’ versioniPhone optimized versionLarge tablet (iPad) versionSmall tablet version (Galaxy)Internet enabled TV version?Internet enabled fridge version?
  29. 29. You want updates with that?(I know, you get the point).
  30. 30. Don’t assume contextfrom device.
  31. 31. There is no mobile web.(But it makes for greatpresentation titles).
  32. 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. 33. The words we useinfluence our thinking.
  34. 34. The alternative approach
  35. 35. Aim for universal access.
  36. 36. Make no assumptions.Or try not to.That goes for accesibility too.
  37. 37. Design and build foreverything in between.
  38. 38. Design and build foreverything in between.Including the next device.
  39. 39. Lancaster University
  40. 40. Wide screen
  41. 41. Narrow
  42. 42. Tablet sized
  43. 43. Smartphone
  44. 44. Why?
  45. 45. BenefitsReduced costs for multiple platforms.
  46. 46. BenefitsReduced costs for multiple platforms.Sustainable.
  47. 47. BenefitsReduced costs for multiple platforms.Sustainable.Future proof.
  48. 48. BenefitsReduced costs for multiple platforms.Sustainable.Future proof.Works on iPhone 5.
  49. 49. Solves our challenges.One article = one url.
  50. 50. Solves our challenges.One article = one url.Update content once.
  51. 51. Solves our challenges.One article = one url.Update content once.Maintain one platform only.
  52. 52. 34% more buzzwords perproject.Nah, not really.
  53. 53. How?
  54. 54. A combination of techniquesand web standards
  55. 55. Responsive webdesignFlexible grids
  56. 56. Responsive webdesignFlexible grids+ media queries
  57. 57. Responsive webdesignFlexible grids+ media queries+ adaptive media
  58. 58. Responsive webdesignFlexible grids+ media queries+ adaptive media+ web standards
  59. 59. Adaptive webdesign?
  60. 60. A design approach
  61. 61. Design for mobile first.
  62. 62. Mobile extends yourcapabilities.
  63. 63. Mobile is exploding.
  64. 64. Mobile first provides focus.
  65. 65. Expand from that focus.
  66. 66. I’m Cindarella too, really?
  67. 67. Different context (might)require different solutions.
  68. 68. An example: The event site
  69. 69. One shoe never fits all.But try it on first.
  70. 70. You might be Cindarella too.
  71. 71. More sources‘Responsive Webdesign’, Ethan Marcotte.‘Mobile First’, Luke Wroblewski.‘A New Canon’, Mark Boulton.Links online.
  72. 72. Thank you.slideshare.net/woeldiche
  73. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×