Reprogramming
The modernization of a site by recoding the existing HTML
 

This page presents several technical issues related to static to responsive (smartphone ready) conversion; and of conversion to WordPress for better content management.

Other pages present:

A Short description of the project steps to convert is given here Project Steps 

A Guide to getting started to contact us for an estimate is giver here Get Started 

A Frequently asked questions section for answers to most questions is here FAQ 

A Description of a commercial site converted by Theta Systems is here Case in Point 

 
The technical issues
 

Modern websites need to be able to respond to screens of different sizes by modifying their layouts. This is known as "Responsive Web Design (RWD)". A CSS framework such as Twitter Bootstrap provides this styling. Good website management demands that page content be managed in a convenient, organized manner. WordPress provides that capability.

 

To achieve each of these goals for a site that is not yet responsive, or is not a WordPress site, a conversion process is necessary. The following sections present the two individual concepts of this conversion: responsive web design and WordPress content management. These are short descriptions of those two concepts, and each of the conversion processes.

 
Static Pages Versus Responsive Pages

Conversion to a Responsive Page Style

WordPress - and Conversion to WordPress

Case in Point: Conversion of a Commercial Site

Static Pages Versus Responsive Pages


This section explains the behavior of a responsive page as seen in different sized screens, compared to the behavior of a static page.
 

  Two simple pages are compared: A static page static_example_page.html and a responsive page responsive_example_page.html . By viewing these pages in a browser and watching how the page layout changes as the browser width changes will demonstrate the difference in behavior. The changes are also explained below.

Here's the static page:

 
A static web page, seen at 1200px width.
 
A static web page, seen at 800px width.

The right hand side of the screen is lost as the screen shrinks.
 
A static web page, seen at 400px width.

Most of the screen is lost at this small size.
 
A static web page, seen on iPhone5 screen..
Smartphone browsers are not the same as laptop browsers - they can display a static page differently. For example, this image is the same static screen seen on an iPhone5.
 
The images below present a responsive version of the screen at several screen sizes to contrast the behavior of the browsers.
 
A responsive web page, seen at 1200px width.
 
A responsive web page, seen at 800px width.

Note the manner in which the page collapses for the tablet sized screen (about 800px).
 
A responsive web page, seen at 400px width.

As the width shrinks to 400px, the nav bar collapses to an icon for a dropdown version, and the columns stack for easy viewing. This is the essential behavior of a responsive page, to be seen properly on any sized screen.
 
A responsive web page, seen on iPhone5 screen..
This image is the same responsive screen seen on an iPhone5.
 

Conversion to a Responsive Page Style
This section presents the code changes from static HTML pages to responsive pages.

To illustrate the conversion process, compare the two code sections below.

The first one is the code for the static page, static_example_page.html. It uses a <table> construct, which allows the placing of elements into a grid of a specific size.

It is this ability to paint the web page with specific sizes and places that makes it a popular style. However, it is just this specification of size and placement that causes the layout to be rigid and inflexible.

HTML code for the static page

<table width=700px height=50px> <tr> <td> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> </ul> </td> </tr> </table> <img src="seashore1.jpg" style="width: 100%" alt="Wave"> <table width=1024px> <tr> <td style="width: 250px; height: 250px; padding: 0 10px 0 10px;"><center>Column 1</center><br>Sed vitae felis non ... </td> <td style="width: 250px; height: 250px; padding: 0 10px 0 10px;"><center>Column 2</center><br>Duis adipiscing laoreet ...</td> <td style="width: 250px; height: 250px; padding: 0 10px 0 10px;"><center>Column 3</center><br>Sed at arcu non tortor ...</td> <td style="width: 250px; height: 250px; padding: 0 10px 0 10px;"><center>Column 4</center><br>Nam convallis, metus ...</td> </tr> </table>
The second sample is the code for the responsive_example_page.html . The <table> markup has been replaced with <div> tags, and each section has one or more class specifications. The classes refer to Twitter Bootstrap 3 classes (See below for a short description of Bootstrap, or go to the website Bootstrap 3 for more info), which use CSS and javascript to create a fluid grid; the fluid CSS allows the individual <div>sections to move around as the browser screen changes size for different devices.

HTML code for the responsive page

<!-- NAV SECTION --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container" style="margin: 0 0 0 0; "> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar" style="color: blue;"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-left"> <li><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> </ul> </div> </div> </div> <!--END NAV SECTION --> <div class="figure" style="margin-top: 50px;"> <img src="seashore1.jpg" alt="Wave"> </div> <div style="clear: both;">&nbsp;<br>&nbsp;<br>&nbsp;</div> <div class="container"> <div class="row" style="max-width: 1024px;"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 colw"> <center>Column 1</center><br>Sed vitae felis non sapien ...<br>&nbsp; </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 colw"> <center>Column 2</center><br>Duis adipiscing laoreet arcu,..<br>&nbsp; </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 colw"> <center>Column 3</center><br>Sed at arcu non tortor accumsan...<br>&nbsp; </div> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 colw"> <center>Column 4</center><br>Nam convallis, metus eget posuere ...<br>&nbsp; </div> </div> </div>
 
 
The steps for conversion of static HTML to responsive HTML
 
Step 1
Locate and remove <table> tags; replace with <div> tags with appropriate classes.
(If this sounds like an over-simplification of a complicated process, you're right. It is.)

Step 2
Locate and remove hard coded sizes and screen placement. Replace with fluid grid elements.
(Same comment as above.)

Step 3
Use % sizing for images and fonts.

Step 4
Use Bootstrap 3 classes to format the screen back to it's original look.

Step 5
Refine and repeat steps 1-4 until screen is a responsive form of its old static format.
 

The steps are labor intensive. There are no automated tools for doing the work. Each page must be considered as its own separate design challenge.

 
Bootstrap 3 is used as a framework to create our responsive sites
 

A simple view of Bootstrap is that it is a CSS file and a JS file, used with HTML constructs, to give HTML code the ability to guide a web page's layout when resizing is required. It also provides a consistent way to create dropdown lists, menus, and many common page components. See: Bootstrap - from Wikipedia To get a copy and read the documentation directly, see: Bootstrap 3

 

WordPress - and Conversion to WordPress
 

There are three basic questions related to WordPress, and how to get from a non-WordPress site to one that is managed by WordPress (WP).

Why use WordPress?

Why convert the existing site instead of starting with a new WordPress theme?

How do you take a site and convert it to a WordPress theme?

Why use WordPress? What is WordPress?


If you're already a WordPress user, or you are already sold on the idea of using WordPress for your site, you can skip over this section. Next section

In simple terms, WordPress is an open-source web application that provides a convenient way to create, publish, and manage content online. It is widely used in building and maintaining websites. An organized, web accessible program to manage a site's content is called a Content Management System (CMS).

Benefits of WordPress

WordPress is free, easy-to-use, feature rich, SEO friendly, and most importantly, WordPress is widely supported. The system itself is supported by a huge group of talented volunteers; and there are hundreds of thousands (if not millions) of developers and web designers working on WordPress plugins and templates.

To read about how WordPress came to be: https://wordpress.org/about/ 

There are a gazillion websites related to WordPress (a gazillion is a bazillion times 1000). If you really want to spend a lot of quality time reading about all the ins and outs of using WordPress, developing WordPress themes, plugins, and gadgets, go right ahead. It's not hard to develop a website with WordPress by starting with a free or commercial theme, and there are thousands of themes to choose from.

 

The primary benefit of using WordPress is that it is a Content Management System


OK, WordPress is a Content Management System (CMS). What's a CMS and why do I want one?

A content management system, or CMS, is a web application designed to make it easy for non-technical users to add, edit and manage a website.

The look-and-feel of the pages is stored in a template, and the subject matter of each page, or "content", is stored is a named place for each different page. The separation of the template from the named page content areas is what makes a CMS such a powerful tool in reducing the effort to maintain a website.

Not only do content management systems such as WordPress help website administrators with maintaining content, they may also take care of a lot of "behind the scenes" work such as:

 
  • Automatically generate navigation dropdowns or menu sidebars
  • Making content searchable
  • Support for SEO by using meaningful link names
  • Providing a simple means to add plugins to upgrade the site operation
Just to name a few of a CMS's background functions.
 
If you're really new to WordPress, here are some tutorials on using WordPress

CTD-WordPress-101.pdf      wordpress-101.pdf 

Or just Google "WordPress 101" and enjoy.

Why convert an existing site into a WordPress site, rather than starting with an existing WordPress theme?


Good question. The appeal of slick looking and glamorous new templates is very great. It may seem that you could just drop your old content into a new WP theme and have a brand new site. If only it were that easy. There are several reasons to convert, not start over:

Reason #1.

A new WP template will be a very new look and feel for your site. It may not work well with your content, and it discards all the value of your current look and feel.

Reason #2.

Commercial and free WP templates often have lots of plugins and features builtin which are not ever used or needed. It often takes time to remove unwanted "features", and leaving them there interferes with your management of the theme.

Reason #3.

Your existing look and feel can be easily converted to a WP theme, and will keep your current site looking much as it does now to users familiar with it. You will have the advantage of managing your content easily, but keeping all the goodwill value your current site's design has created. Keep the good design, add to the content management.

In summary...

If you like your current site but just want a better way to manage it, just keep your current look and feel by converting it to a WP template.

Now for the real question:

How do you take my site and make it into a WordPress theme?

First let's look at what a WordPress theme is. It is a small group of PHP programs and a CSS file that create every page of your site by doing pieces of the page. The following schematic identifies the large sections and the associated PHP programs of a typical WordPress web page:



Your current website may not have a footer, or may have a sidebar on the left instead of the right, but it does have an overall look which can be extracted as a template. Once we identify the sections of your page's layout, we take the HTML for each section, and program the appropriate PHP function to create that HTML.

We create a page.php, which is the primary driver program for each page's creation, programming it to insert your content into the proper place for presentation by the browser.

Rather than giving a detailed view of the conversion process, you can get a good feel for it using the schematic and description above. In short the process is:

 
The steps for conversion of a site to WordPress
 
Step 1
Analyze current site pages, locating header, footer, and sidebar(s) (and any other feature needed).

Step 2
Start with a skeleton WordPress template (there are many of these around).

Step 3
Program the header.php, ... and other functions of the WP template to produce the desired layout.

Step 4
Extract and preserve all images and CSS from the original site, in the template PHP functions.

Step 5
For each of the current site's pages, extract the content, and create a WP page (in the WordPress Admin section). Test for visual effect.

Step 6
Search for and correct all on-site links to the proper form for Permalinks so that these references are appropriate for SEO meaning.

Step 7
(Optional) If desired, many additional features from the large inventory of WP plugins and features can be added to the new WP site.

The steps are labor intensive. There are no automated tools for doing the work. Each page must be considered as its own separate design challenge.

Case in Point: Conversion of a Commercial Site

This section documents a recent conversion of a commercial site by Theta Systems.
See Redstart Systems Inc at http://redstartsystems.com.

Redstart Systems Inc., a recognized leader in speech access technology, recently decided to convert its existing site to using responsive pages for easy smartphone viewing, and to convert the static HTML to WordPress, keeping the exact content and look-and-feel of the original site. Redstart Systems makes Utter Command, intuitive speech interface software that makes hands-free computer control practical – and faster than the keyboard and mouse.

The process of conversion took place in two steps: convert to RWD using bootstrap 3, and then convert this new code to WordPress.

Inspection of the index page for the original site (an archived copy of the original site) shows that there were several challenges to be overcome. The before and after index pages are also shown below.

Step 1. Conversion to responsive code.

Following the steps presented in the section on conversion to responsive code (see Responsive Conversion Steps above), each section of the original page needed to be recast into a fluid grid. Outlines were removed, borders were softened, and each section was checked for its appearance in several screen sizes.

Step 2. Conversion to WordPress code.

The steps involved were to break up the Dreamweaver pages into sidebar, header, and footer, then extract the contents of all site pages (see WordPress Conversion Steps above).

The preservation of the original look and feel seen in the "before" and "after" images below illustrates the "Convert. Don't start over from scratch." approach we take.

 
Before


Link to original Redstart index page

After


Link to converted Redstart index page,
(now the working site), after conversion to RWD
and to WordPress .


Note that the final page looks almost exactly like the original page. It has not been redesigned or modified to make it responsive, or to convert it to a WordPress template. It preserves the original look and feel exactly.

To get the full effect for the RWD conversion, look at the current site (here )in a smartphone to see how much more readable it is than it would have been in its static form.

The truest sense of accomplishment comes from a satisfied client.

"Alan did a great job of converting our site to WordPress, kept us in the loop during the conversion with clear communications and explanations, and left us with clear written instructions that will allow us to easily maintain the site. I very highly recommend Alan and Theta Systems to anyone considering converting a site or creating a new one."
- Kim Patch, president and founder of Redstart Systems.

 
 

~~~ Theta Systems Inc ~~~