Mobilize your website and web applications
Download as PPTX, PDF0 likes816 views
The document discusses strategies for optimizing web experiences across devices, emphasizing the need for mobile websites, responsive design, and apps. It highlights the importance of user interface, content structure, and SEO for achieving a seamless user experience. Challenges include differing stakeholder mindsets and the necessity for adaptability in content management and design.
Mobilize your website and web applications
- 2. Future-friendly web 2.
- 3. the web logo banner WEB text 3.
- 4. the web logo banner text 4.
- 5. 5.
- 6. the real web Image courtesy of Brad Frost 6.
- 7. reduce costs ensure a “pixel-perfect” experience across users covered 90% of web clients 7.
- 8. 8.
- 9. the “classic” web, today... 9.
- 10. low usability small text, tiny targets, “desktop” UI 10.
- 11. slow... 11.
- 12. use of obsolete technologies 12.
- 13. ineffective use of space 13.
- 14. user interface viewport connection speed and bandwidth technology support context 14.
- 15. 3 high level strategies 15.
- 16. 1. mobile website 2. responsive website 3. app 16.
- 17. 1. mobile website 17.
- 18. www.uitinvlaanderen.be m.uitinvlaanderen.be 18.
- 19. “full” website HTML + CSS + Javascript templates front-end templates DB raw content back-end logic mobile website HTML + CSS + Javascript 19.
- 20. mobile website 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 20.
- 21. 2. responsive website 21.
- 22. www.barackobama.com www.barackobama.com 22.
- 23. responsive website 23.
- 24. responsive design front-end templates HTML + CSS + Javascript DB raw content back-end logic 24.
- 25. 1. fluid grid + fluid images 25.
- 26. 2. CSS3 Media Queries 26.
- 27. 3. content like water content’s going to take many forms and flow into many different containers. 27.
- 28. “Whatever the device you use for getting your information out, it should be the same information.” Sir Tim Berners-Lee, 1999 28.
- 29. same content for all devices solid content strategy is crucial! organizing and prioritizing 29.
- 30. responsive website scalable no changes CMS SEO 1 single website complex for existing websites complex wireframing and design 30.
- 31. 3. app 31.
- 32. no standardization 32.
- 33. apps rich user interface OS integration high performance app store monetization time to update app store approval and restrictions development for each platform 33.
- 34. the real-world 34.
- 35. mobile ≠ lite 35.
- 36. no clear “mobile use case” exists phone/tablet as a primary device mobile as an opportunity 36.
- 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 37.
- 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 38.
- 39. go mobile first growth -> opportunity constraints -> focus capabilities -> innovation 39.
- 40. if you want an “app” feeling, just build a native app. 40.
- 41. use web standards 41.
- 42. 42.
- 43. 43.
- 44. 44.
- 45. it’s not only about technology... content design structure usability accessibility 45.
- 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. 46.
- 47. SEO 47.
- 48. mobile search ≠ local search 48.
- 49. local search 49.
- 50. mobile search crawling CMS www.example.com/about-us m.example.com/about-us 50.
- 51. mobile search searching device detection + redirect www.example.com/about-us m.example.com/about-us 51.
- 52. 52. relevancy SEO?
- 53. SEO: it is at it’s best if you do not really need it. relevant content high-quality markup consistent access across devices 53.
- 54. analytics 54.
Editor's Notes
- #8: static viewport widthintroduces control