“ You put a water into a cup, it becomes the cup.
You put water into a bottle, it becomes the bottle,
You put it in a teapot, it becomes the teapot.”
Responsive web design is the best and fastest way to serve desktop and mobile web users in a tailored and cost-effective manner. With one code base, one set of URLs and one design language, you can use your existing skills to deliver content that adapts to the smaller screen size and touch-input of mobile devices.
We realize developers need to build apps tailored to any screen size quickly, so we’ve built our Kendo UI for jQuery controls to do most of the work for you. Here’s how.
Kendo UI for jQuery saves you time and effort when implementing responsive design practices since the controls take care of them for you with the change of a single property:
Bootstrap is the most widely adopted framework for building responsive web projects. It provides a grid-layout framework, as well as dozens of custom HTML and CSS components.
Kendo UI for jQuery components integrate easily with Bootstrap. The widgets scale proportionately to the framework containers on different screen sizes, and they come with a Bootstrap theme developed specifically with design and dimensions similar to the Bootstrap components. These features enable you to achieve a consistent look and feel when using the two tool sets in applications side-by-side. In addition, released a tool this January enabling you to convert any Bootstrap theme on the web to a Progress theme with just a few clicks.
Check out the NorthWind Dashboard sample application for a showcase of the integration between Kendo UI for jQuery widgets and Bootstrap.
We’ve optimized the rendering of the most complex UI components,
such as Grid and Scheduler, for use on small screen sizes.
The Grid’s key advantage is its two types of rendering – one for desktop and one for mobile devices. To facilitate data operations on small screen sizes, the mobile rendering moves the behavior of editing, filtering, sorting and column operations to different views to provide users with a mobile native-like look and feel. Selection, column reordering and column resizing also happen in a more mobile-friendly way.
In addition, the Grid enables you to hide specific columns on mobile devices to help users monitor only what’s important.
Just like all other components in the suite, the Grid is responsive, which means it rearranges its elements for optimal presentation on the screen real estate and scales proportionately to the container in which it’s been placed.
Just like the Grid, the Scheduler features a mobile-optimized rendering presenting the appointment editing functionality in a separate view for more user-friendly manipulation. On smaller screens its navigation turns from a tabstrip into a dropdown and its elements rearrange for optimal presentation. The selection and appointment resizing also happen in a more mobile-friendly way.
The Responsive Panel is a container control enabling you to hide content on small screens behind a “hamburger” menu, thus optimizing the space your content takes in the viewable area on limited view ports. It comes especially useful in responsive navigation scenarios.