Responsive Web Apps withKendo UI

THE WAY OF HTML5

Introductions

Lohith G NDev Evangelist, TelerikMicrosoft MVP (ASP.NET/IIS)

Lohith.nagaraj@telerik.com@kashyapa

www.kashyapas.comwww.telerikhelper.net

RWDWhat is it ?

Responsive Web Design

“Approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)” - Wikipedia

Attribution: commons.Wikimedia.org Responsive Design Logo

RWD & Kendo UI

Attribution: Jon Polacek: What the Heck is Responsive Web Design?http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

“Responsive Kendo UI:” 3 pillars

• Responsive Widgets• Adaptive Widget Rendering• Modern UI Extensions

1) Responsive Widgets

1) Responsive Widgets

Responsive UI Widgets

• Built in responsive capabilities• Resizing API (kendo.resize)

DEMOResponsive Widgets

2) Adaptive Widget Rendering

Adaptive Widget Rendering

DEMOAdaptive Widgets

3) UI Extensions

• Kendo UI Bootstrap Theme• Works well with Twitter Bootstrap

DEMOBootstrap Theme

QUESTIONS ?Q&A

LOHITH.NAGARAJ@TELERIK.COM@KASHYAPA

Thank You !