Intellectual Ponderings: Reflections: Table Based Layout To Responsive Design Layout Conversion

I recently had the pleasure of converting a web application to a responsive design layout. The goal was to only change the structure of the HTML. I was able to stick to this with the exception of the Modal Popup Extender, but the changes were very minimal.

Considerations

Used the Modal Popup Extender
XHTML
CSS files, inline CSS styling, HTML style tags
Ridged table layout
All buttons are images

Expected Outcome

Use Bootstrap 2.3.x
HTML5
Responsive design layout
Must maintain support for IE8+ (potentially IE7)
Layout organization and text should be as close as possible to the original. Styles and structure implementation will be completely different.
Limit the code changes as much as possible.

The update process

The update process had a logical progression. Below I detail the highlights.

Update master page

I thought it was important to start with the master page; seemed logical. Below is the highlights on the things that I updated.

Update the DocType
Add meta tags
Add new style tags to Bootstrap styles and place a ContentPlaceholder for styles after it
Remove any tags which don't have 'runat="server"' or isn't a control. Leave the content.
Put the content in the following div tag: <div class="container">
Structure the header area
Convert the menu bar/navigation section to the Bootstrap navbar
Implement the design with Bootstrap design patterns/style
Add Bootstrap scripts to the bottom of the page and place a ContentPlaceholder for scripts after it

The beginning of the page is the pretty boilerplate. I do as much as possible to promote other developers putting style code at the top of the page and the scripts at the bottom of the page. With Web Forms, this isn't always possible, but I try to stick to it when possible.

<!DOCTYPE  html>
<html lang="eng">
<head id="header" runat="server">
    <meta charset="utf-8" />
 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
 <meta content="on" http-equiv="cleartype" />
 <meta content="True" name="HandheldFriendly" />
 <meta content="320" name="MobileOptimized" />
 <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="iphon_tetris_icon.png"/>
    <link rel="apple-touch-startup-image" href="startup.png" />
 <title />
    <link rel="stylesheet" href="/Content/style.css" type="text/css" />
    <asp:ContentPlaceHolder ID="StylesPlaceHolder" runat="server" />

I put the following .snippet as close to the bottom of the page as possible.

<script src="/bundles/bootstrap.js"></script>
<asp:ContentPlaceHolder ID="ScriptPlaceHolder" runat="server" />

Update ASPX pages and User Controls

The process for updating the rest of the pages and user controls were pretty consistent.

Remove any tags which don't have 'runat="server"' or isn't a control. Leave the content.
Reimplement the design with Bootstrap design patterns/style
Move any needed scripts specific for that page to the scripts placeholder

Updating Modals

These are in the ASPX pages and User controls, but I thought it deserved a separate section because the process is a bit more involved. It assumes that the above points have been completed on the modal sections.

There were 2 different processes for this.

Modal which can be populated at page load
Modal which must be populated with information from an item select from a grid view

Below is the general process for converting the modals.

Remove the Modal Popup Extender tags and any dummy links tied to it.

Implement the design with Bootstrap design patterns/style. Below is a template.

<div class="modal fade" style="display: none" id="pDemo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header" style="vertical-align: middle">
   <asp:Button ID="Button3" class="close" data-dismiss="modal" aria-hidden="true" Text="×" runat="server" />
   <h4 class="modal-title">Header Text</h4>
  </div>
  <div class="modal-body form-horizontal">
   <!-- Modal Content -->
  </div>
  <div class="modal-footer">
   <div class="control-group">
   <div class="controls">
    <asp:Button ID="btnSave" CssClass="btn btn-success" Text="Save" OnClick="btnSave_Click" runat="server" />
    <asp:Button ID="btnClose" CssClass="btn" data-dismiss="modal" Text="Close" runat="server" />
   </div>
   </div>
  </div>
 </div>
 </div>
</div>

IF the data was already loaded at the page load, update the link like the following:
```
<a data-toggle="modal" href="#pDemo">
```
There can be other attributes in the link, but the "data-toggle" and the "href" are the important points.
IF the data needs to be loaded, wrap the modal in an UpdatePanel and follow the pattern in my previous blog post Handling Twitter Bootstrap Modals and UpdatePanels with PostBacks. If you can get into the code more than I could, you could omit a bunch of JavaScript using the following link in your code behind:
```
AjaxControlToolkit.ToolkitScriptManager.RegisterStartupScript(this, typeof(System.Web.UI.Page), "pDemo", "$('#pDemo').modal('show');", true);
```

There are other little things, but these were the most important parts.

All in all, I found the conversion to be very easy to implement and it gave the old page layout a new breath of life.

Intellectual Ponderings

Pages

Tuesday, October 15, 2013

Reflections: Table Based Layout To Responsive Design Layout Conversion