Mobile layouts in Kentico 7

   —   
Hi everyone, my name is Jeroen Fürst and I am Kentico MVP & lead engineer at IBL-Software in The Netherlands. With this post I would like to share my view on the new mobile features of Kentico version 7. For more information, tips & tricks and my overall Kentico experiences I would like to invite you to follow my blog.
One of the exciting features of Kentico version 7 is the enhanced support for Mobile websites. The CMS contains built-in tools that allow you to easily create, map and preview the website on mobile devices like the iPad, iPhone and Android. With these new features, Kentico covers mobilizing of your business out-of-the-box.
Please find below a brief guide for enabling the mobile development features, accompanied with some tips.
  • Enable device profiles
    Via Settings / Content / Content Management.

    Tip: get familiar with the CurrentDevice and CurrentDeviceProfile macro objects.
  • Configure device profiles
    If you are interested in creating your own device profile, then take a look at the following blog post where I will guide you through the steps for adding a custom profile for Windows Phone devices.
     
  • Create page layouts for devices
    Easily map convertible shared layouts or create individual device layouts.

    Tip: get familiar with the conditional & device layout controls.
     
  • Optimize device detection
    Automatically redirect visitors to the correspondent layouts via the built-in mobile device redirection web part.

    Tip: additional config is possible via: ~/App_Data/CMSModules/DeviceProfile/devices.xml or Settings / Integration / 51degrees.mobi
Share this article on   LinkedIn

Jeroen Fürst

Hi! I am Kentico Xperience MVP and Architect for TrueLime in the Netherlands.

Comments

Jeroen Fürst commented on

Hi Brenden,

Thanks, I am glad you liked it :)

In your case I would recommend 1 template in combination with conditional/device layouts. This allows you to easily configure different conditions and render the needed HTML. You can even apply some K# to render different versions of the CSS.

I hope that my advice will help you with the decision making. Feel free to contact me if you need any further info.

Good luck with your projects!

Best Regards,
Jeroen

Brenden commented on

Great post Jeroen!

Question for you, when creating master pages, how would one setup the webparts for the main items (header, footer,navigation)? Conditional Layouts? Macros? Something else?

Here's a scenario:
Say I have 3 width ranges (or devices) I'm dealing with:
> 1028px wide (desktop)
750px - 1028px (tablet)
< 750px (phone)

This site has is fixed with at 940px, centered and has left vertical navigation. When I view on a tablet, I want to change the navigation to horizontal with smaller font, just under the header. When phone, I want the navigation to have a button with 3 lines and expand to vertical in-line (push content down) when clicked.