DNN’s Secret Weapon - 51Degrees Mobile Device Optimisation
“Mobile First” has become the catch phrase for today's web designer and the usual response (excuse the pun) is to make your web design ‘responsive’. But Responsive Web Design (RWD) is not a single technique, it’s is a collection of measures that that can be implemented to optimise the content, layout and the design to suit the device viewing the site. But we do have to be careful in our pursuit of “mobile first” that we don’t negatively impact the experience for our desktops users. And with the proliferation of mobile devices today (“Is a Windows Surface Pro a tablet or a desktop?”), it never more important to start to develop a strategy to handle how you will drive greater engagement with your users, regardless of where they come from.
If you are a DNN or Evoq user, you may not be aware that you have the very powerful 51Degrees (https://51degrees.com/) device detection and image optimisation service built directly into the core of the platform, that takes only a few minutes to enable, and can deliver advanced RWD effects with very little effort on your part.
In general, basic RWD is about sending the same content and images to the viewer, regardless of their device, and then changing the layout and design on the device itself. Most themes today are ‘mobile friendly’ – but they should more accurately be described as “mobile user friendly” – it’s certainly not friendly to the device itself. Your small 7” screen still receives that large desktop sized banner image which slows the user down and uses more bandwidth than it really needs. And you may choose to not display some content, like sidebar information, on a mobile device – but you still send it anyway.
Device Detection in DNN
To enable Device Detection in DNN is simple. Login as a SuperUser and navigate to Host > Device Detection Management
51Degree device detection is bundled with all editions of DNN but Evoq users receive the premium version as part of their Evoq subscription. DNN Platform users can upgrade to premium at any time if they need the advanced features.
Rather than sending that large banner image design for the desktop, and squashing it on the mobile browser, image optimisation determines what size image the device needs, resizes it on the sever to set dimensions (within parameters you can define) and then sends only the image size needed for the device. These images are then cached to further improve performance. All this adds up to saving that golden second, as well as reducing bandwidth, that will keep your mobile users very happy.
51Degrees has a great article on how to “Make the most of Responsive Images” with practical examples on how to use this on your site. https://51degrees.com/blog/ArtMID/1641/ArticleID/312/make-the-most-of-responsive-images
51Degrees has a dedicated team constantly talking to and monitoring web enabled device vendors to keep their device library up to-date. They add over 200 new devices every week and have the largest device database in the world
Device detection happens server side and this allows you to start to personalise content based on very specific device attributes. https://51degrees.com/portals/0/images/DeviceDetection3.png?width=432
51Degrees will give you far more information about the viewing device than is obtainable through standard response headers.
What is the type of device? i.e. Smartphone, Tablet, e-Reader, TV, Desktop or Laptop
Does the device support “hover’ with a mouse pointer, or is it touch screen only? If the device supports hover you might want to keep that mega-menu for simpler navigation if the user is on a windows tablet.
A full list of the available properties can be found on the 51Degrees web site. https://51degrees.com/resources/property-dictionary
51Degrees Performance Monitoring tools let you know in real time how your web site is responding to customers. Not only can you track individual connection speeds and bandwidth rates, you can also monitor page response times, by device, by browser and by screen size. Most importantly the performance monitoring happens in real time, as part of normal page processing so technology doesn't get in the way of your brand conversations. This allows you to be proactive rather than re-active. e.g. if speeds drop down when a customer is buying, give them an option to call someone to complete the purchase rather than abandoning their cart.