Amplexor drupalcamp-gent-2012 - kinepolis platform

1,828 views
1,783 views

Published on

Presentation by Amplexor on Drupal Camp Gent in 2012.

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,828
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Amplexor drupalcamp-gent-2012 - kinepolis platform

  1. 1. The Kinepolis platformbuilding high-traffic and accessible websites Jan Lemmens 1.
  2. 2. Follow us! Jan Lemmens! ! ECM Consultant! jan.lemmens@amplexor.com! @vollepeer! 2.
  3. 3. 1! 2!High traffic sites with Drupal! Future proof websites! Kinepolis case study! Focus on accessibility! 3.
  4. 4. High traffic websites with Drupal!Kinepolis case study! 4.
  5. 5. !   Platform structure!!   Data sources!!   Search!!   User data!!   Ads!!   Performance!!   Development workflow!!   Deployment automation! 5.
  6. 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. 7. main website!ticketing! mobile website! master
 repository! apps! digital signage! 7.
  8. 8. main website!BE NL! BE FR! FR! ES! CH! 8.
  9. 9. platform !structure! 9.
  10. 10. multilingual BE NL! BE FR! FR! ES! CH ! 10.
  11. 11. multilingual similar content!same group of editors!same functionalities! 11.
  12. 12. multilingual blocks! taxonomy settings interface paths nodes menus 12.
  13. 13. multilingual it’s a PITA! 13.
  14. 14. multilingual i18n! 14.
  15. 15. multisite BE NL ! BE FR ! FR ! ES !single codebase! CH ! 15.
  16. 16. multisite same content structure!asynchronous content!different user accounts! 16.
  17. 17. content! 17.
  18. 18. 18.
  19. 19. main website!ticketing! mobile website! master
 repository! apps! digital signage! 19.
  20. 20. matching content structures ! movie! repository!very simple approach ! 20.
  21. 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. 22. content 
structuring !!   Node
 basic content storage!!   Taxonomy 
 classification!!   Nodequeue
 managing “selections”!!   Entity Reference
 relating content! 22.
  23. 23. content 
structuring !!   Entities
 tiny content storage!!   Blocks
 side info! 23.
  24. 24. disadvantages !!   Lots of configuration stored in the database (versioning, deployments, ...)!!   Extendability (advanced features may require rework)!!   Performance! 24.
  25. 25. use view modes! ! 25.
  26. 26. !use formatters! 26.
  27. 27. !use formatters! 27.
  28. 28. other Drupal modules !!   Context! !   Memcache!!   Panels! !   Services!!   Media! !   Features!!   CDN! !   Strongarm!!   Entity cache! !   Localization Client!!   Varnish! !   Views! 28.
  29. 29. syncing content ! assets! queue! movie!repository! 29.
  30. 30. > 180 000! Drupal nodes! 30.
  31. 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. 32. search! 32.
  33. 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. 34. user data! 34.
  35. 35. > 35 000!registered users! 35.
  36. 36. profiling! segmentation! mass emailing!Drupal isn’t the right tool here! ! 36.
  37. 37. exchanging user data !CRM! 37.
  38. 38. ads! 38.
  39. 39. Drupal isn’t the right tool here! ! 39.
  40. 40. multidimensional targeting!open API!campaign priorities!analytics!audience segmentation! 40.
  41. 41. 1. page request! 2. HTML + JS!website visitor! Drupal webserver!asynchronous!! OpenX server! 41.
  42. 42. performance! 42.
  43. 43. “Drupal does not scale.”! ! Drupal generates pages, ! it does not serve them! 43.
  44. 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. 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. 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. 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 & DevOpenX (Images & Video) Drupal (zabbix?) Environment Database Database Search Slave Master 47.
  48. 48. webserver 1 webserver 2 SAN12GB RAM
 12GB RAM
 4 cores 4 cores 1.5TB! 2.4GHz! 2.4GHz! 48.
  49. 49. > 16 000 000! pagehits per month! 49.
  50. 50. > 90!requests per second! peak moments! 50.
  51. 51. master/slave database!Memcached!APC!reverse proxy!asynchronous requests!static server! 51.
  52. 52. DEV1! DEV2! DEV3! DEV4! Version control! Build server! INT! TEST! ACC!Continous Integration! Customer Test! Customer Acceptance! 52.
  53. 53. Deployment automation Deployment automation ! Jenkins! Build server! Monitoring and reporting! Continuous integration! Web interface for configuration! ! ! 53.
  54. 54. Deployment automation ! 1 2 3 4 backup get code from deploy to run deploymentdatabase version control servers scripts 54.
  55. 55. Monitoring ! 55.
  56. 56. Future-proof websites! 56.
  57. 57. the problem! 57.
  58. 58. 640px! 800px! 1024px! 58.
  59. 59. 59.
  60. 60. 60.
  61. 61. ?px! 61.
  62. 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. 63. low usability! small text, tiny targets, !“desktop” UI, content overload! 63.
  64. 64. 64.
  65. 65. phones! tablets! TVs! 65.
  66. 66. 66.
  67. 67. user interface!viewport!connection speed and bandwidth!technology support!context! 67.
  68. 68. 68.
  69. 69. mobile website! 69.
  70. 70. www.uitinvlaanderen.be! m.uitinvlaanderen.be! 70.
  71. 71. “full” website! HTML + CSS + Javascript! templates! front-end! templates! DB!raw content! back-end! logic! mobile website! HTML + CSS + Javascript! 71.
  72. 72. give me mymobile site! 72.
  73. 73. “My mobile site should have lessstuff than my desktop site has now.”!!“Yes sir, not because it’s mobile, butbecause your desktop site is full ofcrap.”!! 73.
  74. 74. “Smartphone users need othercontent and features.”! 74.
  75. 75. “Mobile users want to see our menu,hours and delivery number. Desktop usersdefinitely want this 1 MB png of someonesmiling at a salad.”! opening hours now!! 75.
  76. 76. mobile ≠ lite! 76.
  77. 77. 77.
  78. 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. 79. responsive ! website! 79.
  80. 80. www.barackobama.com! www.barackobama.com! 80.
  81. 81. responsive website! 81.
  82. 82. responsive design front-end! templates! HTML + CSS + Javascript DB!raw content! back-end! logic! 82.
  83. 83. 1. fluid grid + fluid images! 83.
  84. 84. 2. CSS3 Media Queries! 84.
  85. 85. 3. content like water!content’s going to take many forms and flow into many different containers.! 85.
  86. 86. same content for all devices! solid content strategy is crucial!! organizing and prioritizing 86.
  87. 87. WYSIWTF!meanwhile, at the customer’s office…! 87.
  88. 88. WYSIWTF!this TinyMCE won’t die!! at the Amplexor front…! 88.
  89. 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. 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. 91. responsive website!scalable!no changes CMS!SEO!1 single website!complex for existing websites!complex wireframing and design! 91.
  92. 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. 93. apps! 93.
  94. 94. no standardization! 94.
  95. 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.
  96. 96. open standards!structured data!scalability!analytics! 96.
  97. 97. Feedback & follow-up:http://drupalcampgent.be/feedback 97.

×