Posts Tagged ‘buildwindows’

While rushing from one XAML session to another at BUILD, I also tried to attend a few HTML5/Javascript/CSS sessions. Today I also made it into the super-crowded “Progressively enable the mobile web with ASP.NET MVC 4, HTML5, and jQuery Mobile” session presented by Phil Haack. The presentation was very informative and I decided to share some of the links and details about the discussed topics.

The session mainly focused on the following topics in ASP.NET MVC 4:

  • How to use the HTML5 viewport attribute and adaptive rendering to improve display on mobile devices
  • How to create mobile-specific views
  • How to create a view switcher that lets users toggle between a mobile view and a desktop view of the application

Useful Terms

ViewPort Meta Tag:

Mobile browsers define a virtual browser window width (the viewport), which can be larger than the actual width of the mobile device. The viewport <meta> tag in the ASP.NET MVC 4 layout file sets the viewport to the device width. This tag can be used in any web application and is not ASP.NET MVC 4 specific.

The following line shows the viewport <meta> tag in the ASP.NET MVC 4 layout file: <meta name=”viewport” content=”width=device-width”>

Mobile-specific views

ASP.NET MVC 4 provides a new feature with which you can override layout and partial views for mobile browsers as well as specific browsers. If you need a different view for the mobile browser, you simply copy a view file and add .Mobile to the file name. Then you need to create a mobile-specific view. I provided a link to a sample on ASP.NET/MVC , which outlines the entire process in detail.


This is a package for easily converting views to mobile, when creating mobile-specific views. This package should be available through the new Recipes feature for ASP.NET MVC 4, which can be installed using NuGet.

Jquery Mobile

This library provides a user interface framework that works on all the major mobile browsers; it applies progressive enhancement to mobile browsers that support CSS and JavaScript. With progressive enhancement, all browsers may display the basic content of a web page, however more powerful browsers and devices may display an enhanced version of the page with its actual rich feature-set. The jQuery Mobile’s Javascript and CSS files can style many elements especially for mobile browsers and without any further markup changes.

You can install JQuery.Mobile.MVC  for ASP.NET MVC 4 as a NuGet package.


This is a partial view, which provides a link at the top of each page to switch from desktop view to mobile view and vice versa. The desktop layout does not include a view switcher by default, so there is no link to browse to the mobile version of a view from the desktop layout.

Useful Links

Download link for ASP.NET MVC 4 Developer Preview:


Release Notes for ASP.NET MVC 4:


Link to ASP.NET MVC RoadMap:


Sample to follow along (sample files available for download):


Download link for Windows Phone SDK 7.1 (for the emulator):


Install NuGet for ASP.NET MVC4 recipes:


On a side note:

I started off web development with HTML and in-house Javascript libraries, then moved to Java/JSP and even did some development with Grails. Grails delivers developer productivity by applying principles like Convention over Configuration and it is built based on the MVC paradigm. It provides view templates, scaffolding, dynamic tag libraries etc. I am not quite certain about the underlying factors, it may be Java and Grails, which make me feel so sympathetic towards ASP.NET MVC. It is surely different from my relation with ASP.NET Web forms; which ever so often gets the cold shoulder from me.

Read Full Post »

One of the sessions I thoroughly enjoyed was “Designing Metro style apps that are touch-optimized” by Jan-Kristian Markiewicz and Kay Hofmeester. You can browse to the session’s information/recording on Channel 9. But until then, feel free to check out some of the slides I captured during their session.

Read Full Post »

BUILD has finally arrived and all attendees survived the opening day; may it be due to the excitement of  Windows 8, metro style UX in full action or the Samsung tablet with the Windows Developer Preview. Actually, I doubt it has anything to do with the tablet:)

There are already numerous blog entries related to the announcements; which were published throughout today. Conclusively, I decided to share some of the moments I captured during the day with very few comments.

Tadaaaa! – XAML & C#/C++, HTML/CSS+Javascript.. all side by side; unified.

Templates to simplify the design process for Metro style apps.

Woaaah! – HTML/CSS support in Expression Blend.

Better overview of app certification process in App Store.

 App store built in in HTML5/CSS/Javascript.

Traditional web apps also have a place in the App Store.

 Search contract; requires only few lines of code.

lots of details to decipher.

be ready for continuous updates.

Keyword: opportunity

App store coming soon.

go Metro!

 Grid template is your best friend.

many controls for metro-style apps.

do you speak “touch”?


We are all ears.

  Metro is your future.

 Start today.

 Session suggestions by Jensen Harris

built-in metro style controls

Action Plan following BUILD Day#1

Check out the opening Keynote for BUILD here. The Wednesday keynote will be probably available from the same link.

Download Windows Developer Preview.

Check out Tim Heuer’s XAML session list. You can watch recorded sessions online.

Take a look at the Channel 9 – Build Videos.

Register for Telerik‘s BUILD Demystified: Telerik Senior Leadership Tell All live webinar chat in October.

Let’s get ready for BUILD day#2.

Read Full Post »