ASP.NET - New Responsive Project Template (v18.2)

As a web developer these days, it's difficult to plan for the many different screen sizes that your website can be viewed on. That's why a site that's optimized and responsive makes for a more pleasant end-user experience.

To help you meet the needs of a modern website, we've created a new responsive ASP.NET web application project template. As you know, a project application template helps you to get started quickly by giving you a fully working, if content-free, application.

Our new template provides several great features including:

  • Ready-made web application with DevExpress ASP.NET controls
  • Responsive design
  • Visual Studio integration
  • Easy-to-use wizard UI
  • Adaptive features of DevExpress ASP.NET Controls
  • DevExpress themed (CSS rules) for standard text content

It also looks great on various screens sizes whether desktop, tablet, or mobile:

DevExpress ASP.NET Responsive Project Template

Let's take a deeper look into the new project template's design, layout elements, and pages.

Mobile-First

When we sat down to design the new project template, we mainly focused on providing responsive features. So after researching support tickets and customer feedback, we found that most customers are working on complex desktop-oriented applications development. However, traffic from mobile devices is increasing daily. That is why we decided to use the "mobile first" approach for this template:

The mobile-first approach is exactly as it sounds: designing for the smallest screen and working your way up. It is one of the best strategies to create either a responsive or adaptive design. -UXPin

DevExpress ASP.NET Responsive Project Template

With a responsive layout and DevExpress ASP.NET controls' adaptive features, our new template provides full functionality for desktop and mobile browsers. This helps you to develop complex business web applications for nearly any screen size.

Check out the online demo:

QR code

Scan this QR Code above to experience the demo in your mobile browser.

Appearance/Theme

By default, our new template uses the DevExpress ASP.NET Office365 theme, however, you can choose a different base color and font. To make it even easier, we've also prepared a set of predefined base colors and a list of several font-families to use with our template. Set your own base color and font using the wizard:

DevExpress ASP.NET Responsive Project Template

Layout Elements

Now, let's discuss the four main layout elements. The template's home page leverages several DevExpress ASP.NET controls to help build these base UI elements:

  • Navigation Bar
  • Sidebars
  • Adaptive Toolbar
  • Sticky Footer

This setup allows our template to provide for adaptive layouts. Later, we'll look into the four main pages: GridView, Scheduler, Article, and SignIn/Register.

Let's start with the layout elements:

Navigation Bar

A navigation bar (navbar) is a fixed-height toolbar at the top of a page. This template uses a "sticky" navbar - this element "sticks" to the top of the page and does not move when end users scroll the page.

DevExpress ASP.NET Responsive Project Template

The navigation bar contains:

  • A hamburger button - collapses/expands a left sidebar
  • An image with the company's logo and title. Only the logo is displayed on mobile devices
  • A responsive menu that transforms into a button on devices with narrow screens. When this button is clicked, menu items are displayed in a popup window
  • A Sign In button that displays a popup window when clicked. The window displays the Sign In/Register buttons or the user's profile
  • An additional hamburger button that, when clicked, collapses/expands the right sidebar (shown only for the GridView page)

The main menu also collapses on small screens to provide for a better end-user experience.

Sidebars - Collapsible Panels

A sidebar is a collapsible panel that displays additional UI elements on the page's left or right side. In this template, the sidebars are automatically collapsed. End users can click the hamburger button to invoke a sidebar on a mobile device:

DevExpress ASP.NET Responsive Project Template

The Home, GridView, Scheduler, and Article pages include a left sidebar. The GridView page also includes a right sidebar.

Sticky Top Toolbar

The GridView and Scheduler pages include a toolbar under the navbar. Use this toolbar as a container for UI elements that should be attached to the top of the page.

The toolbar provides two adaptive modes:

  • the menu hides items' text and displays only icons
  • the menu hides its items, one-by-one, to the popup menu. This popup menu is hidden under the ellipse button when the browser width is changed

DevExpress ASP.NET Responsive Project Template

Sticky Footer

A fixed-height footer is pinned to the bottom of either the browser window or the content pages when it’s height is greater than the window.

Adaptive Page Layout - Content

For the content, we had a key decision to make. You see there are two general concepts of embedding content inside an adaptive page layout:

  1. Scrolling only a part of the page - the main content area can fit the special content area without overall page scrolling. When the browser window resizes, the content size is updated to fit the new area size. You can see this demonstrated for the Scheduler page in "Desktop" screen resolution: DevExpress ASP.NET Responsive Project Template

  2. Scrolling the whole page (with sticky elements) - the main content is still scrolled in the special content area. However, this is a more universal approach and can be used for several controls or text blocks placed one after another. For example, you can place a FormLayout, text blocks, grids, etc. When the special content area's height exceeds the screen height, then the page will display a vertical scroll bar (instead of only the special content area): DevExpress ASP.NET Responsive Project Template

These days, the second approach is widely used in many 'real-world' (aka production) applications. Therefore, we decided to use this approach with our new responsive template too. Except, of course, for scenarios like the Scheduler page, where it makes sense to use the first approach.

Readability

To improve readability, we used special margins for the content. The size of these margins will adapt based on the screen size and provide for a better reading experience.

We designed a set of CSS rules for control block elements (HTML div elements: <div class="text-content" ...> and <div class="control-area-block">) that can be used for text or content placement.

For example, here are the divs wrapping the FormLayout control:

<asp:Content ID="Content5" ContentPlaceHolderID="PageContent" runat="server">
    <div class="text-content" runat="server" id="TextContent">
        <h1 class="title">Multiple Controls</h1>
        <h2>Some Control</h2>
        <div class="control-area-block">
            <dx:ASPxFormLayout runat="server" ID="ASPxFormLayout" Width="100%" ClientInstanceName="FormLayout">
            ...
            </dx:ASPxFormLayout>
        </div>
        <h2>Some Text</h2>
            ...
    </div>
</asp:Content>

Content Pages

There are four pages in this demo. Two of these use our powerful controls: the GridView and Scheduler pages positioned inside an adaptive layout.

GridView

The GridView page layout includes the following features:

  • A collapsible search panel expanding under the toolbar. You can place custom filtering UI elements here:

DevExpress ASP.NET Responsive Project Template

  • A left sidebar that incorporates a filtering interface
  • Vertical and horizontal touch scrolling
  • Data pagination and the control’s built-in pager
  • An edit form implemented as an adaptive modal window

DevExpress ASP.NET Responsive Project Template

Scheduler

The Scheduler page’s layout includes the following features:

  • A top fixed toolbar that stores filtering and exporting UI
  • A built-in adaptive toolbar that allows end-users to switch dates and views
  • A floating action button that provides fast access to event management

DevExpress ASP.NET Responsive Project Template

  • A left sidebar that incorporates a calendar (implemented using the DateNavigator) and the resource filtering interface (implemented using the ListBox)

DevExpress ASP.NET Responsive Project Template

Article

The Article page demonstrates an adaptive reader for formatted texts. The page's layout is built using CSS styles and adapted for the browser's window size: margins and images are reduced for small screens. CSS styles applied to the Article page are stored in a separate file (Content.css) so that you can reuse them in other projects. This CSS file (Content.css) has a set of CSS rules that can be used to format your custom text content to a similar style used by our controls.

Learn more here: Article Page Demo

DevExpress ASP.NET Responsive Project Template

Printing CSS

Our CSS styles also contain settings to help improve printing by hiding unnecessary UI elements:

DevExpress ASP.NET Responsive Project Template

Login/Register Forms

We designed two forms to support authentication inside the template application. We used the FormLayout control for these forms to support adaptivity.

These forms can be extended to meet your requirements. They also support custom authentication logic that can be implemented in code-behind:

DevExpress ASP.NET Responsive Project Template

Authorized users can access their profiles by clicking on their photo in the top right corner:

DevExpress ASP.NET Responsive Project Template

If a user's photo is unavailable, the profile icon displays a user's initials:

DevExpress ASP.NET Responsive Project Template

Feedback

With this new template, we focused on combining adaptive layouts into a web application, yet still providing your end users with the functionality of a desktop app. We'd love to hear your feedback on the new template. Drop me a line below, thanks.

13 comment(s)
CharlesM

This I great.   Do you have plans for one with DevExtreme and ASP.NET Core ?   This is all we develop in now.

29 November, 2018
Ajay Bal 1

You must be congratulated for the great job done !

I ask the same question - Do you have plans for similar one with DevExtreme and ASP.NET Core ?

30 November, 2018
Tom Mcd

nice project template but I only use DevExtreme and ASP.NET Core.

30 November, 2018
Igor Laktic

ASP.NET Core?

30 November, 2018
Alex B (DevExpress)

Hi all,

> Do you have plans for similar one with DevExtreme and ASP.NET Core ?

Yes, we are going to make the responsive project templates a part of the DevExtreme 2019 Roadmap.

30 November, 2018
CharlesM

Alex, thanks for the info.  That seems along time off.  ASP.NET Web Forms is a technology that any serious development shop would not use unless it was to maintain legacy.  We don't use MVC 5 any more either except to maintain existing apps and are converting those in ASP.Net Core.

30 November, 2018
Customer37575

Good work, but there is no separate integrated page of the DetailView type with a toolbar. Multiple Controls tab can not be called it. What you need is a template for a similar page with a good design. And again, it's time to move towards ASP.NET Core. Or leave users nothing but DevExtreme :)

In any case, you need a similar template for DevExtreme ASP.NET Core, and not just Angular. Thinking about going to him, because Components under ASP.NET WebForms / MVC are very slow. This can be seen even on your demo.

1 December, 2018
Mehul Harry (DevExpress)

CharlesM,

I love the new technology too but WebForms is still heavily used by many ASP.NET devs. The DevExpress ASP.NET WebForms stack has and continues to be innovative for its customers.

However, and as Alex mentioned, we have plans to bring this to our other modern web platforms too. Thanks.

2 December, 2018
Mehul Harry (DevExpress)

@Customer37575,

Appreciate your feedback. The template is only a starting point and you're free to extend or change any aspect of it.

As for ASP.NET Core, we have plans to keep an eye on this blog for future updates. Thanks.

2 December, 2018
Alfred Rakgole 2

Hi Mehul,

This is some awesome work. Well done DX.

Is it possible to have templates install separately from the controls such that they can be updated independently similar to Coderush's  .vsix? That way templates can be introduced to other platforms using existing controls without needing to update or wait for the entire controls suite.

Regards,

Alfred

3 December, 2018
Mehul Harry (DevExpress)

@Alfred,

Thanks. Once we provide a template for a platform, then the team maintaining the template can and may update it in a major or minor release (depending on how big the changes are). This new template replaces an older responsive template but it's a completely new template so we packed it in a major release.

3 December, 2018
Konstantin Balashov

+1 for DevExtreme ASP.NET Core template

3 December, 2018
FlugerSoft

+1  ASP.NET Core template

4 December, 2018

Please login or register to post comments.