Does anyone have a good master page template (HTML 5) that does responsive web design for .NET aspx pages. I have a new project and need it to scale from standard PC to tablet, to phone.
Also a general question, with modern phone screen resolutions approaching that of PC monitors how would media queries detect that in fact a user had switched to a smaller screen?
Personally, I haven't done much mobile work. I need to get up to par in that area, but I believe ASP.NET MVC4 transitions well from Desktop to Mobile platforms and allows you to focus closely on the raw HTML: http://www.asp.net/mvc/tutorials/mvc-4
Mostly, I use MVC for Desktop right now, but I really like MVC4's ability to keep the output clean and free from the junk that you might get with ASP.NET WebForms. If you are used to coding directly with HTML5/JavaScript, then MVC should come pretty naturally
to you. On the other hand, if you have spent a lot of time working with WebForms (like I have), then MVC *may* seem a bit weird at first.
My recommendation for everyone new to ASP.NET is to start with MVC and forget WebForms. While it is true that WebForms does a lot of things for you for free that MVC doesn't, the added layer of abstraction in WebForms tends to confuse novices
later on down the road and cause bloated and unresponsive applications. As HTML5 and EMCAScript continue to improve, the job of the MVC programmer should become even more enjoyable.
In regards to determining the capabilities of the user's hardware and browser, I would suggest you might look at the
HttpRequest object as it comes it.
Thanks Shawn for the input. Agreed MVC is the way to go for new projects. I am updating a WebForms app I originally wrote in 2004 and it is several hundred pages. I am hoping to just get by modifying the masterpage and css to get the desired result.
If you take the approach presented by Hanselman, you can slowly convert your WebForms app to MVC a few pages at a time and write all new pages in MVC. The approach is a bit tricky though and I think it will require you to maintain two separate sets of
master pages. One set of Master Pages would be for your legacy WebForms logic and the other set of Master Pages would be for your MVC Logic. When you finally get all of your pages converted over to MVC, you will be able to delete the Master Pages for your
WebForms logic.
Another thing to think about is that since WebForms does so much for you, it *might* be a bit problematic to get your CSS3 media queries just right. When you put a WebForms control on a page, you don't *necessarily* know what HTML that control will render
into. Sometimes, I wind up looking at the convoluted page source just to figure out what ASP.NET WebForms did. If I remember correctly, looking at the page source in a WebForms app typically revealed HTML elements with contorted Ids nested in strange locations.
With MVC on the other hand, there are fewer surprises. When you use HTML helpers to create elements on a page, it's very likely that you know how those helpers will render. Compare the page source for an MVC app vs a WebForms app. The page source for an
MVC app is much cleaner and easier to understand. This clean rendering that MVC provides makes it much easier to skillfully use CSS3 and JavaScript.
Again, my personal oppinion is to move away from WebForms and only use it when I am forced to...
webguy2000
Member
2 Points
9 Posts
Responsive Web Design for aspx web forms
Jan 25, 2013 01:48 PM|LINK
Does anyone have a good master page template (HTML 5) that does responsive web design for .NET aspx pages. I have a new project and need it to scale from standard PC to tablet, to phone.
Also a general question, with modern phone screen resolutions approaching that of PC monitors how would media queries detect that in fact a user had switched to a smaller screen?
Shawn Eary
Member
263 Points
46 Posts
Re: Responsive Web Design for aspx web forms
Jan 25, 2013 08:53 PM|LINK
Personally, I haven't done much mobile work. I need to get up to par in that area, but I believe ASP.NET MVC4 transitions well from Desktop to Mobile platforms and allows you to focus closely on the raw HTML:
http://www.asp.net/mvc/tutorials/mvc-4
Mostly, I use MVC for Desktop right now, but I really like MVC4's ability to keep the output clean and free from the junk that you might get with ASP.NET WebForms. If you are used to coding directly with HTML5/JavaScript, then MVC should come pretty naturally to you. On the other hand, if you have spent a lot of time working with WebForms (like I have), then MVC *may* seem a bit weird at first.
My recommendation for everyone new to ASP.NET is to start with MVC and forget WebForms. While it is true that WebForms does a lot of things for you for free that MVC doesn't, the added layer of abstraction in WebForms tends to confuse novices later on down the road and cause bloated and unresponsive applications. As HTML5 and EMCAScript continue to improve, the job of the MVC programmer should become even more enjoyable.
In regards to determining the capabilities of the user's hardware and browser, I would suggest you might look at the HttpRequest object as it comes it.
webguy2000
Member
2 Points
9 Posts
Re: Responsive Web Design for aspx web forms
Jan 25, 2013 09:10 PM|LINK
Thanks Shawn for the input. Agreed MVC is the way to go for new projects. I am updating a WebForms app I originally wrote in 2004 and it is several hundred pages. I am hoping to just get by modifying the masterpage and css to get the desired result.
Shawn Eary
Member
263 Points
46 Posts
Re: Responsive Web Design for aspx web forms
Jan 26, 2013 04:07 AM|LINK
Maybe this example of media queries by Microsoft Evangelist Jeremy Foster will help you design a single master page that displays well in many different devices:
http://codeshow.codeplex.com/SourceControl/changeset/view/17484#463363
Since the approach is CSS based, I think it would work wheither your switch to MVC or continue to use WebForms. Also, you might also want to look at this if you haven't already:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
I can't remember exactly which Microsoft Virtual Acadamey class this was in yet, but I think think media queries were covered either in:
http://www.microsoftvirtualacademy.com/tracks/developing-html5-apps-jump-start
or
http://www.microsoftvirtualacademy.com/tracks/developing-windows-store-apps-with-html5-jump-start
In regards to MVC, you don't necessarily have to dump your entire WebForms project and start all over. Microsoft Evangelist Scott Hansleman shows how you can mix and match MVC with WebForms here:
http://www.hanselman.com/blog/IntegratingASPNETMVC3IntoExistingUpgradedASPNET4WebFormsApplications.aspx
If you take the approach presented by Hanselman, you can slowly convert your WebForms app to MVC a few pages at a time and write all new pages in MVC. The approach is a bit tricky though and I think it will require you to maintain two separate sets of master pages. One set of Master Pages would be for your legacy WebForms logic and the other set of Master Pages would be for your MVC Logic. When you finally get all of your pages converted over to MVC, you will be able to delete the Master Pages for your WebForms logic.
Another thing to think about is that since WebForms does so much for you, it *might* be a bit problematic to get your CSS3 media queries just right. When you put a WebForms control on a page, you don't *necessarily* know what HTML that control will render into. Sometimes, I wind up looking at the convoluted page source just to figure out what ASP.NET WebForms did. If I remember correctly, looking at the page source in a WebForms app typically revealed HTML elements with contorted Ids nested in strange locations. With MVC on the other hand, there are fewer surprises. When you use HTML helpers to create elements on a page, it's very likely that you know how those helpers will render. Compare the page source for an MVC app vs a WebForms app. The page source for an MVC app is much cleaner and easier to understand. This clean rendering that MVC provides makes it much easier to skillfully use CSS3 and JavaScript.
Again, my personal oppinion is to move away from WebForms and only use it when I am forced to...
webguy2000
Member
2 Points
9 Posts
Re: Responsive Web Design for aspx web forms
Jan 26, 2013 12:27 PM|LINK
Thanks for all the leads Shawn, looks like I have a lot of research ahead