18 th May 2014 – DNN 2014 Connect – Italy Improve Performance Responsive Images James Rosewell

18 th May 2014 – DNN 2014 Connect – Italy

Magnificent Seven

18 th May 2014 – DNN 2014 Connect – Italy

Guess the weight of the Magnificent Seven?

18 th May 2014 – DNN 2014 Connect – Italy Magnificent Seven 2.4mb

18 th May 2014 – DNN 2014 Connect – Italy

€ €0.05

18 th May 2014 – DNN 2014 Connect – Italy Responsive Images

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

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

18 th May 2014 – DNN 2014 Connect – Italy 51Degrees.config

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

18 th May 2014 – DNN 2014 Connect – Italy PART ONE Fixed Size Images

18 th May 2014 – DNN 2014 Connect – Italy 250px

18 th May 2014 – DNN 2014 Connect – Italy Image URLs …becomes…

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

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

18 th May 2014 – DNN 2014 Connect – Italy PART TWO Automatic Images

18 th May 2014 – DNN 2014 Connect – Italy Image URLs …becomes…

18 th May 2014 – DNN 2014 Connect – Italy

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

18 th May 2014 – DNN 2014 Connect – Italy Magnificent Seven From 2.4mb to < 1mb

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

18 th May 2014 – DNN 2014 Connect – Italy 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.

18 th May 2014 – DNN 2014 Connect – Italy 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.

18 th May 2014 – DNN 2014 Connect – Italy display:none

18 th May 2014 – DNN 2014 Connect – Italy Your Feedback

18 th May 2014 – DNN 2014 Connect – Italy Dynamic Containers Server Side James Rosewell

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

18 th May 2014 – DNN 2014 Connect – Italy How to display / remove containers based on server side rules?

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

18 th May 2014 – DNN 2014 Connect – Italy skin_controller.ascx

18 th May 2014 – DNN 2014 Connect – Italy How to default the view?

18 th May 2014 – DNN 2014 Connect – Italy

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

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

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

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

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

18 th May 2014 – DNN 2014 Connect – Italy

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.

18 th May 2014 – DNN 2014 Connect – Italy DNN Sharp – My Tokens & Easy Container

18 th May 2014 – DNN 2014 Connect – Italy Thank you to Graham Murkett – Some Grey Bloke

18 th May 2014 – DNN 2014 Connect – Italy DEVICE FRAGMENTATION

18 th May 2014 – DNN 2014 Connect – Italy

Other Important Factors Device CapabilitiesNetwork Conditions

18 th May 2014 – DNN 2014 Connect – Italy DEVICE DETECTION

18 th May 2014 – DNN 2014 Connect – Italy

WHO USES 51DEGREES?

18 th May 2014 – DNN 2014 Connect – Italy 1.5 Million Web Sites. Including…