2. Future-friendly web

3. the web logo banner text WEB

4. the web logo banner text

6. Image courtesy of Brad Frost the real web

7. reduce costs ensure a “pixel-perfect” experience across users covered 90% of web clients

9. the “classic” web, today...

10. low usability small text, tiny targets, “desktop” UI

11. slow...

12. use of obsolete technologies

13. ineffective use of space

14. user interface viewport connection speed and bandwidth technology support context

15. 3 high level strategies

16. 1.mobile website 2.responsive website 3.app

17. 1. mobile website

18. www.uitinvlaanderen.be m.uitinvlaanderen.be

19. back-end front-end DB raw content “full” website HTML + CSS + Javascript templates logic mobile website HTML + CSS + Javascript templates

20. specific content and targeted UI no changes to existing website optimal experience for targeted device device detection for auto-redirect scalability multiple information architectures changes to CMS SEO mobile website

21. 2. responsive website

22. www.barackobama.com

23. responsive website

24. HTML + CSS + Javascript responsive design back-end front-end DB raw content logic templates

25. 1. fluid grid + fluid images

26. 2. CSS3 Media Queries

27. 3. content like water content’s going to take many forms and flow into many different containers.

28. “Whatever the device you use for getting your information out, it should be the same information.” Sir Tim Berners-Lee, 1999

29. same content for all devices solid content strategy is crucial! organizing and prioritizing

30. scalable no changes CMS SEO 1 single website complex for existing websites complex wireframing and design responsive website

31. 3. app

32. no standardization

33. rich user interface OS integration high performance app store monetization time to update app store approval and restrictions development for each platform apps

34. the real-world

35. mobile ≠ lite

36. no clear “mobile use case” exists phone/tablet as a primary device mobile as an opportunity

37. real-world difficulties Stakeholders have different mind-sets Level of knowledge and experience No room for mandatory content (*) (*) read “ads” Fear of losing flexibilty i.a. limited rich-text editor Testing Device labs are recommended Short time-to-deliver Not much time for thorough content selection, modeling and structuring

38. possible solution Build 2 separate websites  classic “desktop” website (www.example.com)  separate “mobile” website (m.example.com) Use the separate mobile website as a testbed for new technologies (e.g. concepts like responsive design) and new ways of representing content Eventually, replace the classic “desktop” website with the separate (responsive) website

39. go mobile first growth -> opportunity constraints -> focus capabilities -> innovation

40. if you want an “app” feeling, just build a native app.

41. use web standards

45. it’s not only about technology... content design structure usability accessibility

46. Properly structured content is portable to future platforms. Design from the content out, not from the canvas in. A flexible project workflow is essential to cope with changes.

47. SEO

48. mobile search ≠ local search

50. mobile search crawling www.example.com/about-us m.example.com/about-us CMS canonical

51. mobile search searching www.example.com/about-us m.example.com/about-us device detection + redirect

52. SEO? relevancy

53. SEO: it is at it’s best if you do not really need it. relevant content high-quality markup consistent access across devices

54. analytics

56. OEA Website www.ohea.org Vendor designed CMS called GeoDocs. Local to Columbus. We chose option 2, responsive website. Required CMS modifications. Full content, but not full functionality.