Adaptive Rendering – ASP.NET MVC 4

adaptive-rendering responsive-design
Sat May 05 2012

In the previous post we talked about Responsive Design. It is when your website is aware of the browser’s proportions and corresponds to them, so it can present its content as user-friendly as possible. You can open this site http://bstavroulakis.com/demos/responsive/ and minimize/maximize the width to get a feeling how it adapts to change.

This solution is great for a blog or a very simple site. However, what happens with facebook? Or for a site loaded with Images/JavaScript and a lot of data? While designing for the mobile it is known that data is still an issue and will be for the near future. So when you load a responsive design although the design adapts you load all of the Images/CSS/JavaScript of the full-blown site.

So, instead of going native (to create navice apps I mean) why not load a different site when the user is loading the site from their mobile? This way it can fully adapt to the device and load only the simplest of data needed for the user to interact with the site.

With CSS

So Adaptive Rendering is displaying the website differently for the phone using css to respond to the proportions of the screen (responsive design).

Here are some important features we can use in our website for the phone.

Viewport metatag

First of all we can configure the viewport metatag. With this metatag we can fully scale the page on the phone’s screen.

Without: <meta name=”viewport” content=”width=device-width” />

With: <meta name=”viewport” content=”width=device-width” />

CSS @media queries

We used the media queries in the responsive design as well. With these queries you can
conditionally apply CSS depending on the browser size.
@media screen and (min-width: 150px) and (max-width: 600px) { css here }

 

Beyond CSS

Is CSS enough for the phone? Of course not!

A user interacts with the phone in a completely different way than the PC. He wants big buttons, extremely focused and clean design, very quick browsing and only a few basic choices per pageload.

To achieve all of these we have to load a completely different site for the phone and not only an “adaptive” version of it.

Mobile Specific Views

In ASP.NET MVC 3 in a project we had we would override all of the controllers with a basecontroller. When in the header we would find a mobile user we would return a specific mobile view.

In ASP.NET MVC 4 that can be done easily. Now by convention (continuing the good habit of convention over configuration) if you create a View.mobile.cshtml it will serve that to the user when he enters with his mobile.

Mobile Browser Specific Views

In addition, at some cases a browser differs from device to device. For example a site may render well on the iphone and not well on an android. Having this in mind we must serve different views depending the device and not only if it is mobile or not.

We can do this by addind a displaymodeprovider in the Application_Start method.

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode(“windowsPhone”){
ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf(“windowsPhone”, StringComparison.OrdinalIgnoreCase) >= 0)
});

So now we can use View.windowsPhone.cshtml to serve the view specifically for WindowsPhone. We can do the same for the iPhone e.t.c.

jQuery Mobile/ jQuery Mobile MVC

To not create a view for every device out there there is a solution to this. We can use jQuery Mobile which is a HTML5-based user interface system. This means that we can use various attributes in html (e.x. data-role=”listview”) so the jQuery Mobile library can render it and display it per device correctly.

You can see the jQuery demo site in various devices here http://www.responsinator.com/?url=http%3A%2F%2Fjquerymobile.com%2Fdemos%2F1.1.0%2F

Another library you can check out is jqTouch. You can see an example here http://www.responsinator.com/?url=http%3A%2F%2Fjqtouch.com%2Fpreview%2Fdemos%2Fmain%2F%23home

Ending

Seeing the trend on mobile browsing we can understand why such attention is given to display your site correctly on the phone. Using a responsive design for your site and implementing custom views per device or libraries such as jQuery Mobile is the way to go to reach your full audience.

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!