1. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Improve Performance Responsive Images James Rosewell

2. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi

3. Magnificent Seven

4. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi

6. Guess the weight of the Magnificent Seven?

7. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Magnificent Seven 2.4mb

8. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi

10. €0.10 - €0.05

11. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Responsive Images

12. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Configure DNN 7.3 web.config 51degrees.[mobi].config

13. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi …becomes… web.config Enables the module to intercept requests for images

14. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi 51Degrees.config

15. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi <imageOptimisation maxWidth="1000" maxHeight="1000” widthParam="width" heightParam="height“ factor="1" /> 51Degrees.config Controls possible permutations of generated images

16. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi PART ONE Fixed Size Images

17. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi 250px

18. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Image URLs …becomes…

19. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Reduction BaseFixed Size Page Weight2.4mb1.5mb HTTP Requests35 Reduction-0.9mb Method-?width=x

20. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi But what about responsive web design? We don’t know the size.

21. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi PART TWO Automatic Images

22. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Image URLs …becomes…

23. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi

24. Reductions BasePartialAutomatic Page Weight2.4mb1.5mb811kb HTTP Requests35 36 Reduction-0.9mb1.6mb Method-?width=x?width=auto

25. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Magnificent Seven From 2.4mb to < 1mb

26. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Benefits Significant saving. Important for mobile. – Saves radio. Golden second. – Saves battery. Less CPU. Very easy to deploy and saves time.

27. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Questions Impact on the server? – Images are cached and tracked. Open to abuse? – Image optimisation element limits permutations. Will it work with CDNs? – Yes where dynamic images provided. Client impact? – Simple client side JavaScript. No jQuery. When will be available? – DNN 7.3 – not enabled by default. What image formats are supported? – PNG and JPG at the moment.

28. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Questions – Version 1.1 Does it work with Azure / CDN storage? – Maybe and not yet! Does it support cropping? – Not yet. What about retina displays? – Some issues with pixels densities. Probable upgrade.

29. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi display:none

30. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Your Feedback

31. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Dynamic Containers Server Side James Rosewell

32. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Web Pages Vary by… Screen size User attributes (beyond role) Examples include: Adverts Videos Business Processes

33. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi How to display / remove containers based on server side rules?

34. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi What we need 1.Skin that can change view 2.Containers that respond to active view

35. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi skin_controller.ascx

36. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi How to default the view?

37. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi

39. skin_controller.ascx public string CurrentView { get { var value = Request.QueryString["ViewType"]; if (value == null) { value = Session["ViewType"] as string; }

40. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi skin_controller.ascx if (value == null) { if (Request.Browser["IsSmartPhone"] == "True" || Request.Browser["IsSmallScreen"] == "True") { value = "smartphone"; } else { value = "desktop"; }

41. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi skin_controller.ascx Session["ViewType"] = value; return value; }

42. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Title_h2 - Desktop Only.ascx protected override void OnLoad(EventArgs e) { base.OnLoad(e); Visible = FiftyOneController.CurrentView == "desktop" || FiftyOneController.IsEditMode; PanelEditWarning.Visible = FiftyOneController.IsEditMode; }

43. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Title_h2 – Mobile Only.ascx protected override void OnLoad(EventArgs e) { base.OnLoad(e); Visible = FiftyOneController.CurrentView == "smartphone" || FiftyOneController.IsEditMode; PanelEditWarning.Visible = FiftyOneController.IsEditMode; }

44. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi

47. Next Steps Add A/B testing for screen sizes for adverts. More categories of device. However… Display rules based on container name are too simple, need rules engine.

48. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi DNN Sharp – My Tokens & Easy Container

49. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi Thank you to Graham Murkett – Some Grey Bloke

50. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi DEVICE FRAGMENTATION

51. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi

52. Other Important Factors Device CapabilitiesNetwork Conditions

53. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi DEVICE DETECTION

54. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi

57. WHO USES 51DEGREES?

58. 18 th May 2014 – DNN 2014 Connect – Italy - @51degreesmobi 1.5 Million Web Sites. Including…