Slides of the Amplexor Drupal Mini Seminar on 8th March 2012. Amplexor has been building high traffic websites for over a decade. In 2008, Drupal was added to our portfolio of Web Content Management systems - and with the arrival of Drupal 7, there was a massive interest amongst website owners to migrate their website to this new & promising platform During this seminar, we will provide you with an overview of the possibilities for building large scale, high performance websites with Drupal. Not only you will get an insight in the functional and technical possibilities of the platform, but also of the possible caveats. The last session will focus on how to make (Drupal based) websites future-proof. The number of people accessing websites through mobile devices is growing extremely fast, so it is important to make your website accessible to those. Hence the importance of HTML 5 and Responsive Design among others. Moreover, the focus on content is more important then ever. In this session, we will go over the possible strategies for making your website more accessible for next-gen devices.

2. High traffic websites with Drupal!
Kinepolis case study!
2.!

3. main website!
ticketing! mobile website!
master
repository"
apps! digital signage!
3.!

4. main website!
BE NL! BE FR! FR! ES! CH!
4.!

5. platform "
structure"
5.!

6. multilingual!
BE NL + BE FR +
FR + ES + CH "
6.!

7. multilingual!
similar content"
same group of editors"
7.!

8. multilingual!
blocks"
taxonomy!
settings!
interface!
paths!
nodes! menus!
8.!

9. multilingual!
i18n"
9.!

10. multisite!
BE NL "
BE FR "
FR "
ES "
single codebase!!
CH "
10.!

11. multisite!
same content structure"
asynchronous content"
different user accounts"
11.!

12. content"
12.!

13. 13.!

14. main website!
ticketing! mobile website!
master
repository"
apps! digital signage!
14.!

15. matching content structures "
movie"
repository"
15.!

16. syncing content "
movie"
repository"
16.!

17. > 180 000"
Drupal nodes"
17.!

18. search"
18.!

19. 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"
19.!

20. user data"
20.!

21. > 15 000"
registered users"
21.!

22. profiling"
segmentation"
mass emailing"
Drupal isn’t the right tool here! "
22.!

23. exchanging user data "
CRM"
23.!

24. ads"
24.!

25. Drupal isn’t the right tool here! "
25.!

26. multidimensional targeting"
open API"
campaign priorities"
analytics"
audience segmentation"
26.!

27. 1. page request"
2. HTML + JS"
website visitor" Drupal webserver"
asynchronous!"
OpenX server"
27.!

28. performance"
28.!

29. “Drupal does not scale.”"
"
Drupal generates pages, "
it does not serve them!"
29.!

30. 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"
30.!

31. 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"
31.!

32. 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"
32.!

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

34. webserver 1 webserver 2 SAN
12GB RAM 12GB RAM
4 cores 4 cores 1.5TB!
2.4GHz! 2.4GHz!
34.!

35. > 12 000 000"
pagehits per month"
35.!

36. > 90"
requests per second"
(peak moments)"
36.!

37. CPU load "
requests/s "
37.!

38. master/slave database"
Memcached"
APC"
reverse proxy"
asynchronous requests"
static server"
38.!

39. Future-proof websites!
39.!

40. the problem"
40.!

41. 640px" 800px" 1024px"
41.!

42. 42.!

43. 43.!

44. ?px"
44.!

45. 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)"
45.!

46. 46.!

47. low usability"
small text, tiny targets, “desktop” UI"
47.!

48. 48.!

49. phones" tablets" TVs"
49.!

50. user interface"
viewport"
connection speed and bandwidth"
technology support"
context"
50.!

51. 51.!

52. 52.!

53. mobile website"
53.!

54. www.uitinvlaanderen.be" m.uitinvlaanderen.be"
54.!

55. “full” website"
HTML + CSS + Javascript"
templates"
front-end"
templates"
DB"
raw content"
back-end" logic"
mobile website"
HTML + CSS + Javascript"
55.!

56. 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"
56.!

57. responsive "
website"
57.!

58. www.barackobama.com" www.barackobama.com"
58.!

59. responsive website"
59.!

60. responsive design
front-end" templates"
HTML + CSS +
Javascript
DB"
raw content"
back-end" logic"
60.!

61. 1. fluid grid"
61.!

62. 2. CSS3 Media Queries"
62.!

63. 3. fluid images"
63.!

64. same content for all devices"
solid content strategy is crucial!"
64.!

65. responsive website"
scalable"
no changes CMS"
SEO"
1 single website"
complex for existing websites"
complex wireframing and design"
65.!

66. apps"
66.!

67. 67.!

68. apps"
rich user interface"
OS integration"
high performance"
app store monetization"
development for each platform"
app store approval and restrictions"
time to update"
68.!

69. open standards"
structured data"
scalability"
analytics"
69.!

70. Drupal references"
vtm.be" jim.be" iwatch.be" vmmtv.be" toerismevlaanderen.be"
capacity4dev.eu" base.be" muntpunt.be" uzleuven.be" serv.be"
ewi-vlaanderen.be" prettiggeleerd.be" m.uitinvlaanderen.be" infrabel.be" kinepolis.be/fr/es/ch"
70.!

71. Follow us"
@amplexorbelgium"
http://www.facebook.com/AmplexorBelgium"
http://www.slideshare.net/amplexor"
71.!