1. Sustainable
strategies for the
mobile web

2. This session

3. Strategy,
not <code />.

4. Designers &
developers beware.

5. Internets, not intranets.

6. Slides available online.

7. About me
Jesper Wøldiche Rahkonen
Municipality of Aarhus
designer /
markup marine /
project lead /
woeldiche on twitter / quora / linkedin / etc.

9. Overview
Present Challenges of the traditional model.
Future
Why
How
Mobile first
But

10. Overview
Present
Future A responsive alternative.
Why
How
Mobile first
But

11. Overview
Present
Future
Why The benefits of a universal web.
How
Mobile first
But

12. Overview
Present
Future
Why
How A look at the techniques.
Mobile first
But

13. Overview
Present
Future
Why
How
Mobile first Why you should design mobile first.
But

14. Overview
Present
Future
Why
How
Mobile first
But Really? I’m Cinderella too?

15. The traditional model

16. The traditional model
‘Desktop’ + ‘mobile’ version

17. The traditional model
‘Desktop’ + ‘mobile’ version
+ iPhone optimized

18. The traditional model
‘Desktop’ + ‘mobile’ version
+ iPhone optimized
+ App

19. Challenges
Content duplication

20. Challenges
Content duplication
Version specific links

21. Challenges
Content duplication
Version specific links
SEO issues

22. Unsustainable costs

23. Unsustainable costs
Desktop version

24. Unsustainable costs
Desktop version
‘Mobile’ version

25. Unsustainable costs
Desktop version
‘Mobile’ version
iPhone optimized version

26. Unsustainable costs
Desktop version
‘Mobile’ version
iPhone optimized version
Large tablet (iPad) version

27. Unsustainable costs
Desktop version
‘Mobile’ version
iPhone optimized version
Large tablet (iPad) version
Small tablet version (Galaxy)

28. Unsustainable costs
Desktop version
‘Mobile’ version
iPhone optimized version
Large tablet (iPad) version
Small tablet version (Galaxy)
Internet enabled TV version?

29. Unsustainable costs
Desktop version
‘Mobile’ version
iPhone optimized version
Large tablet (iPad) version
Small tablet version (Galaxy)
Internet enabled TV version?
Internet enabled fridge version?

30. You want updates with that?
(I know, you get the point).

32. Don’t assume context
from device.

33. There is no mobile web.
(But it makes for great
presentation titles).

34. @stephenhay
“There is no Mobile Web. There is only The Web,
which we view in different ways. There is also no
Desktop Web. Or Tablet Web. Thank you.”

36. The words we use
influence our thinking.

37. The alternative approach

38. Aim for universal access.

39. Make no assumptions.
Or try not to.
That goes for accesibility too.

40. Design and build for
everything in between.

41. Design and build for
everything in between.
Including the next device.

42. Lancaster University

43. Wide screen

44. Narrow

45. Tablet sized

46. Smartphone

47. Why?

48. Benefits
Reduced costs for multiple platforms.

49. Benefits
Reduced costs for multiple platforms.
Sustainable.

50. Benefits
Reduced costs for multiple platforms.
Sustainable.
Future proof.

51. Benefits
Reduced costs for multiple platforms.
Sustainable.
Future proof.
Works on iPhone 5.

53. Solves our challenges.
One article = one url.

54. Solves our challenges.
One article = one url.
Update content once.

55. Solves our challenges.
One article = one url.
Update content once.
Maintain one platform only.

56. 34% more buzzwords per
project.
Nah, not really.

57. How?

58. A combination of techniques
and web standards

59. Responsive webdesign
Flexible grids

60. Responsive webdesign
Flexible grids
+ media queries

61. Responsive webdesign
Flexible grids
+ media queries
+ adaptive media

62. Responsive webdesign
Flexible grids
+ media queries
+ adaptive media
+ web standards

64. Adaptive webdesign?

65. A design approach

66. Design for mobile first.

67. Mobile extends your
capabilities.

68. Mobile is exploding.

69. Mobile first provides focus.

70. Expand from that focus.

71. I’m Cindarella too, really?

72. Different context (might)
require different solutions.

73. An example: The event site

75. One shoe never fits all.
But try it on first.

76. You might be Cindarella too.

78. More sources
‘Responsive Webdesign’, Ethan Marcotte.
‘Mobile First’, Luke Wroblewski.
‘A New Canon’, Mark Boulton.
Links online.

79. Thank you.
slideshare.net/woeldiche

80. Photos
Stone 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/

81. Responsive web design
Links
http://www.abookapart.com/products/responsive-web-design
http://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/

82. Mobile first
Links
http://www.lukew.com/ff/entry.asp?933
http://www.lukew.com/ff/entry.asp?1137
http://www.lukew.com/ff/entry.asp?1393
http://www.abookapart.com/products/mobile-first

83. A New Canon
Links
http://2011.newadventuresconf.com/audio/mark.html
http://vimeo.com/29991675
http://www.netmagazine.com/interviews/in-depth/mark-boulton-layouts-
and-grid-systems