Sustainable Strategies for the Mobile Web

Transcript

1. Sustainable strategies for the mobile web Yes, this is the User Experience track.
2. This session
3. Strategy, not <code />.
4. Designers & developers beware.
5. Internets, not intranets.
6. Slides available online.
7. Jesper Wøldiche Rahkonen Municipality of Aarhus designer / markup marine / project lead / woeldiche on twitter / quora / linkedin / etc. About me
9. Overview Present Future Why How Mobile first But Challenges of the tradition model.
10. Overview Present Future Why How Mobile first But A responsive alternative.
11. Overview Present Future Why How Mobile first But The benefits of a universal web.
12. Overview Present Future Why How Mobile first But A look at the techniques.
13. Overview Present Future Why How Mobile first But Why you should design mobile first.
14. Overview Present Future Why How Mobile first But Really? I’m Cindarella too?
15. The traditional model
16. ‘Desktop’ + ‘mobile’ version The traditional model
17. ‘Desktop’ + ‘mobile’ version + iPhone optimized The traditional model
18. ‘Desktop’ + ‘mobile’ version + iPhone optimized + App The traditional model
19. Content duplication Challenges
20. Content duplication Version specific links Challenges
21. Content duplication Version specific links SEO issues Challenges
22. Unsustainable costs
23. Desktop version Unsustainable costs
24. Desktop version ‘Mobile’ version Unsustainable costs
25. Desktop version ‘Mobile’ version iPhone optimized version Unsustainable costs
26. Desktop version ‘Mobile’ version iPhone optimized version Large tablet (iPad) version Unsustainable costs
27. Desktop version ‘Mobile’ version iPhone optimized version Large tablet (iPad) version Small tablet version (Galaxy) Unsustainable costs
28. Desktop version ‘Mobile’ version iPhone optimized version Large tablet (iPad) version Small tablet version (Galaxy) Internet enabled TV version? Unsustainable costs
29. Desktop version ‘Mobile’ version iPhone optimized version Large tablet (iPad) version Small tablet version (Galaxy) Internet enabled TV version? Internet enabled fridge version? Unsustainable costs
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 to at least.
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. Reduced costs for multiple platforms. Benefits
49. Reduced costs for multiple platforms. Sustainable. Benefits
50. Reduced costs for multiple platforms. Sustainable. Future proof. Benefits
51. Reduced costs for multiple platforms. Sustainable. Future proof. Works on iPhone 5. Benefits
53. One article = one url. Solves our challenges.
54. One article = one url. Update content once. Solves our challenges.
55. One article = one url. Update content once. Maintain one platform only. Solves our challenges.
56. 34% more buzzwords per project. Nah, not really.
57. How?
58. A combination of techniques and web standards
59. Flexible grids Responsive webdesign
60. Flexible grids + media queries Responsive webdesign
61. Flexible grids + media queries + adaptive media Responsive webdesign
62. Flexible grids + media queries + adaptive media + web standards Responsive webdesign
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. ‘Responsive Webdesign’, Ethan Marcotte. ‘Mobile First’, Luke Wroblewski. ‘A New Canon’, Mark Boulton. Links online. More sources
79. Thank you. slideshare.net/woeldiche
80. 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/ Photos