1. The Kinepolis platform building high-traffic and accessible websites Jan Lemmens
Jan 28, 2015
1.
The Kinepolis platform building high-traffic and accessible websites
Jan Lemmens
3.
High traffic sites with Drupal!Kinepolis case study!
Future proof websites!Focus on accessibility!
1! 2!
4.
High traffic websites with Drupal!Kinepolis case study!
5.
! Platform structure!! Data sources!! Search!! User data!! Ads!! Performance!! Development workflow!! Deployment automation!
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!
7.
master repository!
ticketing! mobile website!
digital signage!apps!
main website!
8.
main website!
BE NL! CH!ES!FR!BE FR!
9.
platform !structure!
10.
BE NL!BE FR!
FR!ES!CH!
multilingual
11.
similar content!
same group of editors!
same functionalities!
multilingual
12.
settings interface paths
taxonomy
menus
blocks!
nodes
multilingual
13.
multilingual
it’s a PITA!
14.
i18n!
multilingual
15.
BE NL!
BE FR!
FR!
ES!
CH!single codebase!
multisite
16.
same content structure!
asynchronous content!
different user accounts!
multisite
17.
content!
18.
19.
master repository!
main website!
ticketing! mobile website!
digital signage!apps!
20.
matching content structures!
movie!repository!
very simple approach!
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!
22.
content structuring!! Node
basic content storage!
! Taxonomy classification!
! Nodequeue managing “selections”!
! Entity Reference relating content!
23.
content structuring!! Entities
tiny content storage!
! Blocksside info!
24.
disadvantages!! Lots of configuration stored in the
database (versioning, deployments, ...)!
! Extendability (advanced features may require rework)!
! Performance!
25.
use view modes!!
26.
use formatters!!
27.
use formatters!!
28.
other Drupal modules!! Context!
! Panels!
! Media!
! CDN!
! Entity cache!
! Varnish!
! Memcache!
! Services!
! Features!
! Strongarm!
! Localization Client!
! Views!
29.
syncing content!
movie!repository!
assets!queue!
30.
> 180 000!Drupal nodes!
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!
32.
search!
33.
Search!
core search!
MySQL server! webserver!
index!
PHP/MySQL aren’t built for indexing and search!
MySQL server! webserver!
Solr server!
index!
Apache Solr/Lucene is
optimized for search purposes!
! xml based!! clustering!! grouping!! facets!! scores!! highlighting!
34.
user data!
35.
> 35 000!registered users!
36.
profiling!
segmentation!
mass emailing!
Drupal isn’t the right tool here!!
37.
exchanging user data!
CRM!
38.
ads!
39.
Drupal isn’t the right tool here!!
40.
multidimensional targeting!
open API!
campaign priorities!
analytics!
audience segmentation!
41.
Drupal webserver!website visitor!
1. page request!
2. HTML + JS!
OpenX server!asynchronous!!
42.
performance!
43.
“Drupal does not scale.”!!
Drupal generates pages, !it does not serve them!
44.
page request handling!no caching!
website visitor! Drupal webserver!
Drupal database!
1. page request! 2. bootstrap Drupal!!4. build up the response!!5. theme the result!
3. load content from DB!
6. sent response!
45.
2. bootstrap Drupal!
3. load cached content! from DB!
1. page request!
4. sent response!
page request handling!Drupal page caching!
website visitor! Drupal webserver!
Drupal database!
46.
Drupal webserver!
Drupal database!
reverse proxy!
pass request to Drupal if cache is expired or if
request is handled for the first time!
1. page request! 2. sent response!
page request handling!reverse proxy caching!
website visitor!
47.
Trafic to Drupal & openX
Trafic for Assets(video & images)
Test & DevEnvironment
Load Balancer+ Cache
DatabaseMaster
Application firewall
Monitoring(zabbix?)
SearchDatabaseSlave
OpenXAssets
(Images & Video) Drupal
Load Balancer+ Cache
(stand-by)
Application Firewall(stand-by)
48.
webserver 1
12GB RAM4 cores 2.4GHz!
webserver 2
12GB RAM4 cores 2.4GHz!
1.5TB!
SAN
49.
> 16 000 000!pagehits per month!
50.
> 90!requests per second!
peak moments!
51.
master/slave database!
Memcached!
APC!
reverse proxy!
asynchronous requests!
static server!
52.
DEV1! DEV2! DEV3! DEV4!
Version control!
Build server!
INT! TEST! ACC!
Continous Integration! Customer Test! Customer Acceptance!
53.
Deployment automation
Jenkins!Build server!
Monitoring and reporting!
Continuous integration!
Web interface for configuration!
!
!
Deployment automation!
54.
1 2 3 4
backup database
get code from version control
deploy to servers
run deployment scripts
Deployment automation!
55.
Monitoring!
56.
Future-proof websites!
57.
the problem!
58.
640px! 800px! 1024px!
59.
60.
61.
?px!
62.
3.40%!2.35%!
15.58%!
21.06%!
16.86%!
6.64%!
3.46%!4.01%! 5%!
320! 768! 1024! 1280! 1366! 1440! 1600! 1680! 1920!
screen widths used on the web (February 2012)!
63.
low usability!small text, tiny targets, !
“desktop” UI, content overload!
64.
65.
phones! tablets! TVs!
66.
67.
user interface!
viewport!
connection speed and bandwidth!
technology support!
context!
68.
69.
mobile website!
70.
www.uitinvlaanderen.be! m.uitinvlaanderen.be!
71.
back-end!
front-end!DB!
raw content!
“full” website!HTML + CSS + Javascript!
templates!
logic! mobile website!HTML + CSS + Javascript!
templates!
72.
give me my mobile site!
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.”!
!
74.
“Smartphone users need other
content and features.”!
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!!
76.
mobile ≠ lite!
77.
78.
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!
79.
responsive !website!
80.
www.barackobama.com! www.barackobama.com!
81.
responsive website!
82.
HTML + CSS + Javascript
responsive design
back-end!
front-end!DB!
raw content!
logic!
templates!
83.
1. fluid grid + fluid images!
84.
2. CSS3 Media Queries!
85.
3. content like water!
content’s going to take many forms and flow into many different containers.!
86.
same content for all devices!solid content strategy is crucial!!
organizing and prioritizing
87.
WYSIWTF!
meanwhile, at the customer’s office…!
88.
WYSIWTF!
this TinyMCE won’t die!!
at the Amplexor front…!
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-deliverNot much time for thorough content selection, modeling and structuring!
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!
91.
scalable!
no changes CMS!
SEO!
1 single website!
complex for existing websites!
complex wireframing and design!
responsive website!
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!
93.
apps!
94.
no standardization!
95.
rich user interface!
OS integration!
high performance!
app store monetization!
development for each platform!
app store approval and restrictions!
time to update!
apps!
96.
open standards!
structured data!
scalability!
analytics!
97.
Feedback & follow-up: http://drupalcampgent.be/feedback