Achieve Responsive Web Applications With Ease Using Kendo UI

17
Responsive Web Apps with Kendo UI THE WAY OF HTML5

description

Slide deck used for my webinar titled "Achieve Responsive Web Applications with Ease Using Kendo UI" held on Jan 16 2014.

Transcript of Achieve Responsive Web Applications With Ease Using Kendo UI

Page 1: Achieve Responsive Web Applications With Ease Using Kendo UI

Responsive Web Apps withKendo UI

THE WAY OF HTML5

Page 2: Achieve Responsive Web Applications With Ease Using Kendo UI

Introductions

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

[email protected]@kashyapa

www.kashyapas.comwww.telerikhelper.net

Page 3: Achieve Responsive Web Applications With Ease Using Kendo UI

RWDWhat is it ?

Page 4: Achieve Responsive Web Applications With Ease Using Kendo UI

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

Page 5: Achieve Responsive Web Applications With Ease Using Kendo UI

RWD & Kendo UI

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

Page 6: Achieve Responsive Web Applications With Ease Using Kendo UI

“Responsive Kendo UI:” 3 pillars

• Responsive Widgets• Adaptive Widget Rendering• Modern UI Extensions

Page 7: Achieve Responsive Web Applications With Ease Using Kendo UI

1) Responsive Widgets

Page 8: Achieve Responsive Web Applications With Ease Using Kendo UI

1) Responsive Widgets

Page 9: Achieve Responsive Web Applications With Ease Using Kendo UI

Responsive UI Widgets

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

Page 10: Achieve Responsive Web Applications With Ease Using Kendo UI

DEMOResponsive Widgets

Page 11: Achieve Responsive Web Applications With Ease Using Kendo UI

2) Adaptive Widget Rendering

Page 12: Achieve Responsive Web Applications With Ease Using Kendo UI

Adaptive Widget Rendering

Page 13: Achieve Responsive Web Applications With Ease Using Kendo UI

DEMOAdaptive Widgets

Page 14: Achieve Responsive Web Applications With Ease Using Kendo UI

3) UI Extensions

• Kendo UI Bootstrap Theme• Works well with Twitter Bootstrap

Page 15: Achieve Responsive Web Applications With Ease Using Kendo UI

DEMOBootstrap Theme

Page 16: Achieve Responsive Web Applications With Ease Using Kendo UI

QUESTIONS ?Q&A

Page 17: Achieve Responsive Web Applications With Ease Using Kendo UI

[email protected]@KASHYAPA

Thank You !