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 UI 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:

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

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:

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:

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.

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:

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

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:

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):

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:

• 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

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

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

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

Printing CSS

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

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:

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

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

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.

Free DevExpress Products - Get Your Copy Today