Amplexor drupalcamp-gent-2012 - kinepolis platform
•
3 j'aime•1,862 vues
Presentation by Amplexor on Drupal Camp Gent in 2012.
Recommandé
Recommandé
Contenu connexe
Similaire à Amplexor drupalcamp-gent-2012 - kinepolis platform
Similaire à Amplexor drupalcamp-gent-2012 - kinepolis platform (20)
Plus de Amplexor
Plus de Amplexor (20)
Dernier
Dernier (20)
Amplexor drupalcamp-gent-2012 - kinepolis platform
- 1. The Kinepolis platform building high-traffic and accessible websites Jan Lemmens 1.
- 2. Follow us! Jan Lemmens! ! ECM Consultant! jan.lemmens@amplexor.com! @vollepeer! 2.
- 3. 1! 2! High traffic sites with Drupal! Future proof websites! Kinepolis case study! Focus on accessibility! 3.
- 4. High traffic websites with Drupal! Kinepolis case study! 4.
- 5. ! Platform structure! ! Data sources! ! Search! ! User data! ! Ads! ! Performance! ! Development workflow! ! Deployment automation! 5.
- 6. ! Project kick-off: April 2011! ! Websites live: January 2012! ! Currently: maintenance and CRs! ! Design and functional analysis: Kunstmaan! ! Hosting: Nucleus! ! Master content repository: Edge.be! ! CRM: Selligent! ! Drupal implementation: Amplexor! 6.
- 7. main website! ticketing! mobile website! master repository! apps! digital signage! 7.
- 8. main website! BE NL! BE FR! FR! ES! CH! 8.
- 9. platform ! structure! 9.
- 10. multilingual BE NL! BE FR! FR! ES! CH ! 10.
- 11. multilingual similar content! same group of editors! same functionalities! 11.
- 12. multilingual blocks! taxonomy settings interface paths nodes menus 12.
- 13. multilingual it’s a PITA! 13.
- 14. multilingual i18n! 14.
- 15. multisite BE NL ! BE FR ! FR ! ES ! single codebase! CH ! 15.
- 16. multisite same content structure! asynchronous content! different user accounts! 16.
- 17. content! 17.
- 18. 18.
- 19. main website! ticketing! mobile website! master repository! apps! digital signage! 19.
- 20. matching content structures ! movie! repository! very simple approach ! 20.
- 21. very simple approach ! ! Make the most out of the Drupal default components! ! Facilitates integration with e.g. Views, Taxonomy and Apache Solr! ! Reduces custom development (lowers the risk)! ! Increases maintainability and portability! ! Faster prototyping! 21.
- 22. content structuring ! ! Node basic content storage! ! Taxonomy classification! ! Nodequeue managing “selections”! ! Entity Reference relating content! 22.
- 23. content structuring ! ! Entities tiny content storage! ! Blocks side info! 23.
- 24. disadvantages ! ! Lots of configuration stored in the database (versioning, deployments, ...)! ! Extendability (advanced features may require rework)! ! Performance! 24.
- 25. use view modes! ! 25.
- 26. ! use formatters! 26.
- 27. ! use formatters! 27.
- 28. other Drupal modules ! ! Context! ! Memcache! ! Panels! ! Services! ! Media! ! Features! ! CDN! ! Strongarm! ! Entity cache! ! Localization Client! ! Varnish! ! Views! 28.
- 29. syncing content ! assets! queue! movie! repository! 29.
- 30. > 180 000! Drupal nodes! 30.
- 31. Integrations with 3rd party systems ! ! webservice at which side?! ! sync intervals?! ! foresee just enough logging! ! set up email notifications! ! write unit tests! ! ensure emulation of previous events! ! ensure loose coupling! 31.
- 32. search! 32.
- 33. Search! core search! MySQL server! webserver! MySQL server! webserver! index! PHP/MySQL aren’t built for Apache Solr/ indexing and search! Lucene is ! xml based! optimized for ! clustering! search purposes! index! ! grouping! ! facets! ! scores! Solr server! ! highlighting! 33.
- 34. user data! 34.
- 35. > 35 000! registered users! 35.
- 36. profiling! segmentation! mass emailing! Drupal isn’t the right tool here! ! 36.
- 37. exchanging user data ! CRM! 37.
- 38. ads! 38.
- 39. Drupal isn’t the right tool here! ! 39.
- 40. multidimensional targeting! open API! campaign priorities! analytics! audience segmentation! 40.
- 41. 1. page request! 2. HTML + JS! website visitor! Drupal webserver! asynchronous!! OpenX server! 41.
- 42. performance! 42.
- 43. “Drupal does not scale.”! ! Drupal generates pages, ! it does not serve them! 43.
- 44. page request handling! no caching! Drupal database! 3. load content from DB! 1. page request! 2. bootstrap Drupal! ! 4. build up the response! ! 6. sent response! 5. theme the result! website visitor! Drupal webserver! 44.
- 45. page request handling! Drupal page caching! Drupal database! 3. load cached content! from DB! 1. page request! 2. bootstrap Drupal! 4. sent response! website visitor! Drupal webserver! 45.
- 46. page request handling! reverse proxy caching! Drupal database! website visitor! 1. page request! 2. sent response! pass request to Drupal if cache is expired or if request is handled for the first time! reverse proxy! Drupal webserver! 46.
- 47. Trafic to Drupal & openX Application Firewall Application firewall (stand-by) Trafic for Assets (video & images) Load Balancer Load Balancer + Cache + Cache (stand-by) Assets Monitoring Test & Dev OpenX (Images & Video) Drupal (zabbix?) Environment Database Database Search Slave Master 47.
- 48. webserver 1 webserver 2 SAN 12GB RAM 12GB RAM 4 cores 4 cores 1.5TB! 2.4GHz! 2.4GHz! 48.
- 49. > 16 000 000! pagehits per month! 49.
- 50. > 90! requests per second! peak moments! 50.
- 51. master/slave database! Memcached! APC! reverse proxy! asynchronous requests! static server! 51.
- 52. DEV1! DEV2! DEV3! DEV4! Version control! Build server! INT! TEST! ACC! Continous Integration! Customer Test! Customer Acceptance! 52.
- 53. Deployment automation Deployment automation ! Jenkins! Build server! Monitoring and reporting! Continuous integration! Web interface for configuration! ! ! 53.
- 54. Deployment automation ! 1 2 3 4 backup get code from deploy to run deployment database version control servers scripts 54.
- 55. Monitoring ! 55.
- 56. Future-proof websites! 56.
- 57. the problem! 57.
- 58. 640px! 800px! 1024px! 58.
- 59. 59.
- 60. 60.
- 61. ?px! 61.
- 62. 21.06%! 16.86%! 15.58%! 6.64%! 5%! 3.40%! 3.46%! 4.01%! 2.35%! 320! 768! 1024! 1280! 1366! 1440! 1600! 1680! 1920! screen widths used on the web (February 2012)! 62.
- 63. low usability! small text, tiny targets, ! “desktop” UI, content overload! 63.
- 64. 64.
- 65. phones! tablets! TVs! 65.
- 66. 66.
- 67. user interface! viewport! connection speed and bandwidth! technology support! context! 67.
- 68. 68.
- 69. mobile website! 69.
- 70. www.uitinvlaanderen.be! m.uitinvlaanderen.be! 70.
- 71. “full” website! HTML + CSS + Javascript! templates! front-end! templates! DB! raw content! back-end! logic! mobile website! HTML + CSS + Javascript! 71.
- 72. give me my mobile site! 72.
- 73. “My mobile site should have less stuff than my desktop site has now.”! ! “Yes sir, not because it’s mobile, but because your desktop site is full of crap.”! ! 73.
- 74. “Smartphone users need other content and features.”! 74.
- 75. “Mobile users want to see our menu, hours and delivery number. Desktop users definitely want this 1 MB png of someone smiling at a salad.”! opening hours now!! 75.
- 76. mobile ≠ lite! 76.
- 77. 77.
- 78. 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! 78.
- 79. responsive ! website! 79.
- 80. www.barackobama.com! www.barackobama.com! 80.
- 81. responsive website! 81.
- 82. responsive design front-end! templates! HTML + CSS + Javascript DB! raw content! back-end! logic! 82.
- 83. 1. fluid grid + fluid images! 83.
- 84. 2. CSS3 Media Queries! 84.
- 85. 3. content like water! content’s going to take many forms and flow into many different containers.! 85.
- 86. same content for all devices! solid content strategy is crucial!! organizing and prioritizing 86.
- 87. WYSIWTF! meanwhile, at the customer’s office…! 87.
- 88. WYSIWTF! this TinyMCE won’t die!! at the Amplexor front…! 88.
- 89. real-life difficulties! ! Stakeholders have different mind-sets! ! Knowledge and experience of design agency! ! No room for mandatory content (*) (*) read “ads”! ! Fear of losing flexibilty i.a. limited rich-text! ! Testing Device labs are recommended! ! Short time-to-deliver Not much time for thorough content selection, modeling and structuring! 89.
- 90. 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 website! 90.
- 91. responsive website! scalable! no changes CMS! SEO! 1 single website! complex for existing websites! complex wireframing and design! 91.
- 92. Responsive website! ! Not mobile first (obviously)! ! But accounted for during the whole project! ! Use of HTML5 video! ! Most ads are gone!! ! Conditional loading! ! Transformation of interface elements! ! Swiping carousels! 92.
- 93. apps! 93.
- 94. no standardization! 94.
- 95. apps! rich user interface! OS integration! high performance! app store monetization! development for each platform! app store approval and restrictions! time to update! 95.