The document discusses responsive layouts for ASP.NET WebForms, emphasizing the importance of adapting applications to various client devices like desktops, tablets, and mobiles. It introduces Telerik UI for ASP.NET AJAX and the RadPageLayout control, which aids in creating responsive designs through a server-side and client-side layout system. The document also highlights techniques such as media queries and device detection frameworks to optimize layout for different screen sizes and reduce bandwidth usage.

1. Responsive Layouts for ASP.NET
WebForms
Lohith G N

2. About Me
Technical Evangelist
Microsoft MVP (ASP.NET/IIS)
lohith.nagaraj@telerik.com
@kashyapa
http://www.kashyapas.com
http://www.telerikhelper.net
Lohith G N
http://www.telerik.com

3. Agenda
• What is Responsive Layout?
• Introduction to Telerik UI for ASP.NET AJAX
• Introduction to RadPageLayout
• Demo

4. Responsive Design/Layout
Lets be responsive

5. Responsive Layout
• Adapt your application to client device
• Desktop, Tablet, Mobile Browsers
• 2 ways to achieve responsiveness
• Resize content placeholders
• Hide content placeholders
• Bootstrap
• Client Side Layout System
• Hides content placeholders

6. Media Queries
• Rule to define different style rules for different media
types/devices
• Part of CSS3
• Syntax:
@media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}

7. UI for ASP.NET AJAX
Complete Toolbox for AJAX Applications

8. UI for ASP.NET AJAX

9. Key Features

10. 80+ AJAX Controls

11. Page Layout
Server Side Layout Control

12. RadPageLayout
• AJAX Server Control
• Page Layout Capability
• Simple & Light Weight
• Modelled after Grid System
• Supported Devices
• Extra Large,
• Large,
• Medium,
• Small
• Extra Small

13. Elements
• Container
• Outermost Element Rendered – Div
• Rows
• Containers for Columns.
• <telerik:LayoutRow />
• Columns
• Structural Unit
• <telerik:LayoutColumn />

14. Demo

15. Device Detection Framework
Which Device ?

16. Device Detection Framework
• Determine Screen Resolution Elegantly
• Pass UserAgent String to get the Screen Size:
• Small – 600px
• Medium – 601 to 1024px
• Large – 1025 to 1366px
• ExtraLarge - >1366px
• Detector.GetScreenSize(UserAgent)
• Telerik.Web.Device.Detection.dll

17. Reducing Bandwidth
• Use DDF to Get the Screen Size
• Hide portions not required
• Reduces content sent to client
• Bandwidth saved

18. Demo

19. Thanks !
Lohith.Nagaraj@Telerik.com