Migration Guide

• When your current website is cloned to the staging network, the clone on staging is a completely separate website. Edits to your live site will not be reflected on the staging site. So if you work on your staging site for any length of time, you will need to make the same edits on both your live and your staging sites separately to keep the sites in sync.
  • It’s best to coordinate with your site’s editors to either minimize updates or to plan a freeze on edits on your live site while you are reviewing and re-launching your site with the new theme.
• The majority of BU WordPress sites are using a version of the Flexi theme in WordPress. Flexi is still a relatively modern theme, and you will likely face few, if any, issues in migrating to Responsive Framework, but it’s best to plan for some time to test your site and request its re-launch.
  • But if your current site uses a custom Flexi theme, some of your site’s features/functions may not be included with the general Responsive Framework. If your current site uses a custom theme, please first submit a help ticket requesting an assessment of your current site and its readiness for Responsive Framework.
• Older BU WordPress sites may be using Classic BU themes or the original BUMC theme (both circa 2008–2010 timeframe). Editors of these sites may face a few more challenges in migrating to Responsive Framework. Old sites often used HTML tables for content layout within the page. This is not fluid design and should be converted to a responsive format (see the section on HTML tables below).

• Use the IS&T Help System to request the cloning of your site (or requesting a new blank site). The request should come from a Site Administrator (full-time staff or faculty). Always include the URL for your site in all requests. You and all current editors will have editing access to the staging site.
• Please use this WordPress Help Form to either request a blank site with Responsive Framework or to request a clone of your current site with Responsive Framework in the staging environment.
• When your staging site is ready to launch, please submit a new ticket to IS&T requesting the launch of your staging site.
• Use the guidelines below to fix common issues with migrating to Responsive Framework. The linked resources in these guidelines point to further self-help information on the IS&T website. If you encounter a problematic issue you cannot resolve yourself, submit a help ticket to IS&T for assistance. Always include the URL of the page where you have the problem. (HINT: When logged into the WP Dashboard, just click the Help link near the bottom of the WP sidebar—it’s a very handy and quick form to submit a help ticket.)
• When you request re-launch of your site, IS&T will also provide you with a link check report showing any broken links. It’s best practice to fix or remove broken links as soon as possible (and preferably before launch).

• First of all, ask yourself: Should I be using an HTML table? HTML tables are not very fluid and often do not transition well to responsive design. They are also problematic for accessibility issues.
  • Use HTML tables only for tabular data, where you have columns and rows with column headings and row headings and you need to show relationships between data in the columns and rows.
  • Avoid using HTML tables for content layout. This was a common practice in the 1990s. Nowadays it’s considered a bad practice.
• Make your HTML table structure as simple as possible. Use only the number of columns and rows you require. Minimize spanning of rows/columns, and do not use blank columns or rows for spacing purposes.
• If you must use an HTML table for layout, understand how screen reading software works, structure your table so a screen reader parses the information in a meaningful and easy-to-understand way, and learn how to publish an accessible HTML table.

Responsive HTML table support in the Responsive Framework BU theme

To make your tables as friendly as possible for responsive design, either make them simple and fluid, or size them specifically and use the class to signify a responsive table to make it horizontally scrollable.

• If you are using a simple table, first try setting your table tag to 100% width. <table width="100%">. Remove any other widths/sizing in your HTML tags for the table, headers or rows. Test this on desktop and mobile devices to see if it will work. For many simple tables, this will be all you need.
• If your table is more complex, use the proper structured HTML to define your widths in your table headers and add   <div class="responsive-table"> before your table opening tag, and  </div>  after your table closing tag. This snippet adds the horizontal scrolling on mobile devices.

Example HTML code for 4 x 4 responsive table that is 1000 pixels wide

<div class="responsive-table">
<table>
<tr>
<th style="width: 200px;">First Name</th>
<th style="width: 300px;">Last Name</th>
<th style="width: 100px;">ID</th>
<th style="width: 400px;">Address</th>
</tr>
<tr>
<td>Content A1</td>
<td>Content A2</td>
<td>Content A3</td>
<td>Content A4</td>
</tr>
<tr>
<td>Content B1</td>
<td>Content B2</td>
<td>Content B3</td>
<td>Content B4</td>
</tr>
<tr>
<td>Content C1</td>
<td>Content C2</td>
<td>Content C3</td>
<td>Content C4</td>
</tr>
</table>
</div>

• WordPress has significantly improved its image tools in the past couple of years. Some older sites that were published with previous versions of WordPress may have old HTML markup for embedding images. If you find an image looks distorted or is not fitting its content container, most issues will be resolved if you simply 1) delete the image from the page; and 2) re-embed the image from your WP Media Library.
• Our current version of WordPress natively supports embedding images in a way that makes them responsive. For most images, you will not need to do anything in order to make the image responsive.
• Be aware of the dimensions of your image—you generally do not need images wider than 1200 pixels (or 2400 pixels to support retina displays). Most modern digital cameras capture photos as least twice as large as needed for a website. Resize or scale your images down to a more appropriate size. Overly large images load slowly and are especially problematic for mobile devices, where bandwidth for downloading is both slower and costlier.

• Your footer menu (navigation links in the page footer) is now a Custom Menu. This moves functionality from a BU-customized location in older themes to a standard WordPress component in Responsive Framework.
• For those sites using a utility menu, it is also now migrated to a Custom Menu.
• Manage your Custom Menus via the WP Dashboard > Appearance > Menus or manage them in the Customize view (Appearance > Customize > Navigation)
• Custom Menus have three locations in Responsive Framework where they can be used: as utility navigation, footer links, or social media links.
• The new social media links area is configured to automatically detect all popular social media networks and display them as icons. The theme looks at the URL of your social media link and displays the appropriate icon (e.g. links to facebook.com will display a Facebook link, and so forth).

• Many old sites use a generic “Contact Us” form, which is a WordPress page with the “Contact Us” template applied. This was a BU-customized component of old themes that is being deprecated. In Responsive Framework, re-create your own “Contact Us” form and embed the new form on your contact page.
• Use the form-building tool in WordPress. The Gravity Forms plugin includes a walk-through of the easy-to-use interface where you just drag and drop your form fields into place.
• New/blank sites created with Responsive Framework will contain a basic “Contact Us” form already created in your forms library.
• Cloned sites will need to create a new form to replace your old contact form if you have not already replaced it with a Gravity Form.