“Mobile last” strategy approach with “Multilayered webforms presentation architecture” for ASP.NET Webforms and #EPiServer CMS 9, 8 and 7,5 #EpiDev #MobileLast

Hey EPiServer World, with you in mind! Stuck with an ASP.NET WebForms-solution with no responsive layout? And the owner won’t redo all web to MVC? Then here is the simpler way to go responsive… without rebuilding all and immoderate job effort from editors… only fun work for the web developers.

There can be several reasons why you just can’t upgrade, or you just don’t want a big project redoing all the web, involving editor redoing their content. If you’re pleased with your web, but missing a responsive site the easiest way is to only implement a responsive/mobile channel. Since you probably also stuck with Webforms instead of MVC, there is a way of implementing responsive channels without touching the web logic.

Are you still on CMS 6? check this instead.

Solution: Implement an alternate presentation layer, reusing the aspx code behind and display it for your target devices.

How can we do that? I call it “Multilayered webforms presentation architecture

  1. For each .aspx and .ascx, make a .resp.aspx and .resp.ascx and point it to the same code behind. The .resp.aspx uses a masterpage with appropriate html and style. The resp.aspx uses reference to .resp.ascx. or original ascx (not all ascx needs to be changed if there only is CSS changes).
  2. Register an DisplayChannel for “Mobile”
  3. You have to register your responsive template with a descriptor, put it where you have the original page descriptor: Important put the TAGS on the resp version and Default=true on the default.
  4. Thats it!

Advanced option:

EPiServer 7.5 and later has a build in TemplateResolver. The template resolver is responsible to find what template to use for a certain type. You can high jack it and implement your own logic. This is done by attaching on an event in Application_Start in global asax.

Conclusion: With this mobile strategy approach you gain the following

  • No need for immoderate contributions from editors (probably only the communication part)
  • You could start with the most important mobile pages first, since the fallback is the desktop version.
  • Quite small overhead to get started
  • The URL in browser will be the same for the desktop site and in the mobile phone. Just like you want it.
  • It opens the possibility to go full responsive with the new channel.

Downside: When you work in Visual Studio projects in your .resp.aspx page, and you add new server controls, it may override the designer.cs of the page, so be attentive. Continue reading ““Mobile last” strategy approach with “Multilayered webforms presentation architecture” for ASP.NET Webforms and #EPiServer CMS 9, 8 and 7,5 #EpiDev #MobileLast”

“Mobile last” strategy approach for ASP.NET Webforms with “Multilayered webforms presentation architecture” #MobileLast

Stuck on an old ASP.Net Webform solution? Without a responsive web? Then here is the simplest way to go responsive… without redoing all…

There can be several reasons why you just can’t upgrade, or you just don’t want a big project redoing all the web, involving editor redoing their content. If you’re pleased with your web, but missing a responsive site the easiest way is to only implement a responsive/mobile channel. Since you probably also stuck with Webforms instead of MVC, there is a way of implementing responsive channels without touching the web logic.

I haven’t seen many out there using this type of strategy, but I can tell it’s working, and in just one month we built our large scale site a new responsive mobile channel. This can applicable to all asp.net webforms project, and to EPiServer CMS 6. For later EPiServer version blog post coming soon.

Solution: Implement an alternate presentation layer and reusing the aspx code behind.

How can we do that? I call it “Multilayered webforms presentation architecture

  1. For each .aspx and .ascx, make a .resp.aspx and .resp.ascx and point it to the same code behind. The .resp.ascx uses a masterpage with appropriate html and style. The resp.aspx uses reference to .resp.ascx. or original ascx (not all ascx needs to be changed if there only is CSS changes).multilayered-webform-presentation-architecture
  2. Transfer the request to a “responsive” mobile template. With help of Server.TransferRequest method (not Request.Redirect).  TransferRequest  is transferring the request without the browser knowing anything about it, the browser request a page, but the server returns another page, in EPiServer, an other aspx-template.On each page code behind implement a logic in OnPreInit to transfer the page if you are on a mobile device.
  3. Thats it! And it works!

Conclusion: With this mobile strategy approach you gain the following

  • No need for immoderate contributions from editors (probably only the communication part)
  • You could start with the most important mobile pages first, since the fallback is the desktop version.
  • Quite small overhead to get started
  • The URL in browser will be the same for the desktop site and in the mobile phone. Just like you want it.
  • It opens the possibility to go full responsive with the new channel.

Downside: When you work in Visual Studio projects in your .resp.aspx page, and you add new server controls, it may override the designer.cs of the page, so be attentive.

Another TIP: you could put the OnPreInit globaly in a basepage-class (this is an EPiServer example)

 

Implement your own IsMobile check with handy dev functionality

Example code of IsMobile (determining device), with some handy dev functionality, see comments in code snippet.