Top Banner
1. The Kinepolis platform building high-traffic and accessible websites Jan Lemmens
97

Amplexor drupalcamp-gent-2012 - kinepolis platform

Jan 28, 2015

Download

Design

Amplexor

Presentation by Amplexor on Drupal Camp Gent in 2012.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Amplexor drupalcamp-gent-2012 - kinepolis platform

1.

The Kinepolis platform building high-traffic and accessible websites

Jan Lemmens

Page 2: Amplexor drupalcamp-gent-2012 - kinepolis platform

2.

Follow us!

Jan Lemmens!!ECM Consultant!

[email protected]!

@vollepeer!

Page 3: Amplexor drupalcamp-gent-2012 - kinepolis platform

3.

High traffic sites with Drupal!Kinepolis case study!

Future proof websites!Focus on accessibility!

1! 2!

Page 4: Amplexor drupalcamp-gent-2012 - kinepolis platform

4.

High traffic websites with Drupal!Kinepolis case study!

Page 5: Amplexor drupalcamp-gent-2012 - kinepolis platform

5.

!   Platform structure!!   Data sources!!   Search!!   User data!!   Ads!!   Performance!!   Development workflow!!   Deployment automation!

Page 6: Amplexor drupalcamp-gent-2012 - kinepolis platform

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!

Page 7: Amplexor drupalcamp-gent-2012 - kinepolis platform

7.

master repository!

ticketing! mobile website!

digital signage!apps!

main website!

Page 8: Amplexor drupalcamp-gent-2012 - kinepolis platform

8.

main website!

BE NL! CH!ES!FR!BE FR!

Page 9: Amplexor drupalcamp-gent-2012 - kinepolis platform

9.

platform !structure!

Page 10: Amplexor drupalcamp-gent-2012 - kinepolis platform

10.

BE NL!BE FR!

FR!ES!CH!

multilingual

Page 11: Amplexor drupalcamp-gent-2012 - kinepolis platform

11.

similar content!

same group of editors!

same functionalities!

multilingual

Page 12: Amplexor drupalcamp-gent-2012 - kinepolis platform

12.

settings interface paths

taxonomy

menus

blocks!

nodes

multilingual

Page 13: Amplexor drupalcamp-gent-2012 - kinepolis platform

13.

multilingual

it’s a PITA!

Page 14: Amplexor drupalcamp-gent-2012 - kinepolis platform

14.

i18n!

multilingual

Page 15: Amplexor drupalcamp-gent-2012 - kinepolis platform

15.

BE NL!

BE FR!

FR!

ES!

CH!single codebase!

multisite

Page 16: Amplexor drupalcamp-gent-2012 - kinepolis platform

16.

same content structure!

asynchronous content!

different user accounts!

multisite

Page 17: Amplexor drupalcamp-gent-2012 - kinepolis platform

17.

content!

Page 18: Amplexor drupalcamp-gent-2012 - kinepolis platform

18.

Page 19: Amplexor drupalcamp-gent-2012 - kinepolis platform

19.

master repository!

main website!

ticketing! mobile website!

digital signage!apps!

Page 20: Amplexor drupalcamp-gent-2012 - kinepolis platform

20.

matching content structures!

movie!repository!

very simple approach!

Page 21: Amplexor drupalcamp-gent-2012 - kinepolis platform

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!

Page 22: Amplexor drupalcamp-gent-2012 - kinepolis platform

22.

content structuring!!   Node

basic content storage!

!   Taxonomy classification!

!   Nodequeue managing “selections”!

!   Entity Reference relating content!

Page 23: Amplexor drupalcamp-gent-2012 - kinepolis platform

23.

content structuring!!   Entities

tiny content storage!

!   Blocksside info!

Page 24: Amplexor drupalcamp-gent-2012 - kinepolis platform

24.

disadvantages!!   Lots of configuration stored in the

database (versioning, deployments, ...)!

!   Extendability (advanced features may require rework)!

!   Performance!

Page 25: Amplexor drupalcamp-gent-2012 - kinepolis platform

25.

use view modes!!

Page 26: Amplexor drupalcamp-gent-2012 - kinepolis platform

26.

use formatters!!

Page 27: Amplexor drupalcamp-gent-2012 - kinepolis platform

27.

use formatters!!

Page 28: Amplexor drupalcamp-gent-2012 - kinepolis platform

28.

other Drupal modules!!   Context!

!   Panels!

!   Media!

!   CDN!

!   Entity cache!

!   Varnish!

!   Memcache!

!   Services!

!   Features!

!   Strongarm!

!   Localization Client!

!   Views!

Page 29: Amplexor drupalcamp-gent-2012 - kinepolis platform

29.

syncing content!

movie!repository!

assets!queue!

Page 30: Amplexor drupalcamp-gent-2012 - kinepolis platform

30.

> 180 000!Drupal nodes!

Page 31: Amplexor drupalcamp-gent-2012 - kinepolis platform

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!

Page 32: Amplexor drupalcamp-gent-2012 - kinepolis platform

32.

search!

Page 33: Amplexor drupalcamp-gent-2012 - kinepolis platform

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!

Page 34: Amplexor drupalcamp-gent-2012 - kinepolis platform

34.

user data!

Page 35: Amplexor drupalcamp-gent-2012 - kinepolis platform

35.

> 35 000!registered users!

Page 36: Amplexor drupalcamp-gent-2012 - kinepolis platform

36.

profiling!

segmentation!

mass emailing!

Drupal isn’t the right tool here!!

Page 37: Amplexor drupalcamp-gent-2012 - kinepolis platform

37.

exchanging user data!

CRM!

Page 38: Amplexor drupalcamp-gent-2012 - kinepolis platform

38.

ads!

Page 39: Amplexor drupalcamp-gent-2012 - kinepolis platform

39.

Drupal isn’t the right tool here!!

Page 40: Amplexor drupalcamp-gent-2012 - kinepolis platform

40.

multidimensional targeting!

open API!

campaign priorities!

analytics!

audience segmentation!

Page 41: Amplexor drupalcamp-gent-2012 - kinepolis platform

41.

Drupal webserver!website visitor!

1. page request!

2. HTML + JS!

OpenX server!asynchronous!!

Page 42: Amplexor drupalcamp-gent-2012 - kinepolis platform

42.

performance!

Page 43: Amplexor drupalcamp-gent-2012 - kinepolis platform

43.

“Drupal does not scale.”!!

Drupal generates pages, !it does not serve them!

Page 44: Amplexor drupalcamp-gent-2012 - kinepolis platform

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!

Page 45: Amplexor drupalcamp-gent-2012 - kinepolis platform

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!

Page 46: Amplexor drupalcamp-gent-2012 - kinepolis platform

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!

Page 47: Amplexor drupalcamp-gent-2012 - kinepolis platform

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)

Page 48: Amplexor drupalcamp-gent-2012 - kinepolis platform

48.

webserver 1

12GB RAM4 cores 2.4GHz!

webserver 2

12GB RAM4 cores 2.4GHz!

1.5TB!

SAN

Page 49: Amplexor drupalcamp-gent-2012 - kinepolis platform

49.

> 16 000 000!pagehits per month!

Page 50: Amplexor drupalcamp-gent-2012 - kinepolis platform

50.

> 90!requests per second!

peak moments!

Page 51: Amplexor drupalcamp-gent-2012 - kinepolis platform

51.

master/slave database!

Memcached!

APC!

reverse proxy!

asynchronous requests!

static server!

Page 52: Amplexor drupalcamp-gent-2012 - kinepolis platform

52.

DEV1! DEV2! DEV3! DEV4!

Version control!

Build server!

INT! TEST! ACC!

Continous Integration! Customer Test! Customer Acceptance!

Page 53: Amplexor drupalcamp-gent-2012 - kinepolis platform

53.

Deployment automation

Jenkins!Build server!

Monitoring and reporting!

Continuous integration!

Web interface for configuration!

!

!

Deployment automation!

Page 54: Amplexor drupalcamp-gent-2012 - kinepolis platform

54.

1 2 3 4

backup database

get code from version control

deploy to servers

run deployment scripts

Deployment automation!

Page 55: Amplexor drupalcamp-gent-2012 - kinepolis platform

55.

Monitoring!

Page 56: Amplexor drupalcamp-gent-2012 - kinepolis platform

56.

Future-proof websites!

Page 57: Amplexor drupalcamp-gent-2012 - kinepolis platform

57.

the problem!

Page 58: Amplexor drupalcamp-gent-2012 - kinepolis platform

58.

640px! 800px! 1024px!

Page 59: Amplexor drupalcamp-gent-2012 - kinepolis platform

59.

Page 60: Amplexor drupalcamp-gent-2012 - kinepolis platform

60.

Page 61: Amplexor drupalcamp-gent-2012 - kinepolis platform

61.

?px!

Page 62: Amplexor drupalcamp-gent-2012 - kinepolis platform

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)!

Page 63: Amplexor drupalcamp-gent-2012 - kinepolis platform

63.

low usability!small text, tiny targets, !

“desktop” UI, content overload!

Page 64: Amplexor drupalcamp-gent-2012 - kinepolis platform

64.

Page 65: Amplexor drupalcamp-gent-2012 - kinepolis platform

65.

phones! tablets! TVs!

Page 66: Amplexor drupalcamp-gent-2012 - kinepolis platform

66.

Page 67: Amplexor drupalcamp-gent-2012 - kinepolis platform

67.

user interface!

viewport!

connection speed and bandwidth!

technology support!

context!

Page 68: Amplexor drupalcamp-gent-2012 - kinepolis platform

68.

Page 69: Amplexor drupalcamp-gent-2012 - kinepolis platform

69.

mobile website!

Page 70: Amplexor drupalcamp-gent-2012 - kinepolis platform

70.

www.uitinvlaanderen.be! m.uitinvlaanderen.be!

Page 71: Amplexor drupalcamp-gent-2012 - kinepolis platform

71.

back-end!

front-end!DB!

raw content!

“full” website!HTML + CSS + Javascript!

templates!

logic! mobile website!HTML + CSS + Javascript!

templates!

Page 72: Amplexor drupalcamp-gent-2012 - kinepolis platform

72.

give me my mobile site!

Page 73: Amplexor drupalcamp-gent-2012 - kinepolis platform

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.”!

!

Page 74: Amplexor drupalcamp-gent-2012 - kinepolis platform

74.

“Smartphone users need other

content and features.”!

Page 75: Amplexor drupalcamp-gent-2012 - kinepolis platform

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!!

Page 76: Amplexor drupalcamp-gent-2012 - kinepolis platform

76.

mobile ≠ lite!

Page 77: Amplexor drupalcamp-gent-2012 - kinepolis platform

77.

Page 78: Amplexor drupalcamp-gent-2012 - kinepolis platform

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!

Page 79: Amplexor drupalcamp-gent-2012 - kinepolis platform

79.

responsive !website!

Page 80: Amplexor drupalcamp-gent-2012 - kinepolis platform

80.

www.barackobama.com! www.barackobama.com!

Page 81: Amplexor drupalcamp-gent-2012 - kinepolis platform

81.

responsive website!

Page 82: Amplexor drupalcamp-gent-2012 - kinepolis platform

82.

HTML + CSS + Javascript

responsive design

back-end!

front-end!DB!

raw content!

logic!

templates!

Page 83: Amplexor drupalcamp-gent-2012 - kinepolis platform

83.

1. fluid grid + fluid images!

Page 84: Amplexor drupalcamp-gent-2012 - kinepolis platform

84.

2. CSS3 Media Queries!

Page 85: Amplexor drupalcamp-gent-2012 - kinepolis platform

85.

3. content like water!

content’s going to take many forms and flow into many different containers.!

Page 86: Amplexor drupalcamp-gent-2012 - kinepolis platform

86.

same content for all devices!solid content strategy is crucial!!

organizing and prioritizing

Page 87: Amplexor drupalcamp-gent-2012 - kinepolis platform

87.

WYSIWTF!

meanwhile, at the customer’s office…!

Page 88: Amplexor drupalcamp-gent-2012 - kinepolis platform

88.

WYSIWTF!

this TinyMCE won’t die!!

at the Amplexor front…!

Page 89: Amplexor drupalcamp-gent-2012 - kinepolis platform

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!

Page 90: Amplexor drupalcamp-gent-2012 - kinepolis platform

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!

Page 91: Amplexor drupalcamp-gent-2012 - kinepolis platform

91.

scalable!

no changes CMS!

SEO!

1 single website!

complex for existing websites!

complex wireframing and design!

responsive website!

Page 92: Amplexor drupalcamp-gent-2012 - kinepolis platform

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!

Page 93: Amplexor drupalcamp-gent-2012 - kinepolis platform

93.

apps!

Page 94: Amplexor drupalcamp-gent-2012 - kinepolis platform

94.

no standardization!

Page 95: Amplexor drupalcamp-gent-2012 - kinepolis platform

95.

rich user interface!

OS integration!

high performance!

app store monetization!

development for each platform!

app store approval and restrictions!

time to update!

apps!

Page 96: Amplexor drupalcamp-gent-2012 - kinepolis platform

96.

open standards!

structured data!

scalability!

analytics!

Page 97: Amplexor drupalcamp-gent-2012 - kinepolis platform

97.

Feedback & follow-up: http://drupalcampgent.be/feedback