Moving off of Microsoft Office Live Small Business (Website Hosting)

Microsoft is one of those “Great relationship while it lasted” kind of things. Missed in one of my live.com honeypot e-mail Inboxes was a missive about “At Microsoft we love you …but we’re discontinuing Office Live Small Business starting February 2012.

Read more on this OLSB blog while it’s still up: http://small-business.web.officelive.com/default.aspx#O365replaceOLSB Image

Anyway, so I went about figuring out how to move this massively IIS-oriented site which leveraged tons of pre-built widgets in OLSB:

To somewhere else: https://sites.google.com/site/jhlui12/

Image

Open the OLSB website in a browser. Save each page using File -> Save… [Webpage, complete]
This creates a copy of the base page, with a folder containing all of the images and CSS sheets in-use. (e.g. default.aspx.htm and [default.aspx_files])

Fix the References:
Using Firefox was more successful and IE8/9, which complained about being unable to save everything properly.

Open the HTML file (e.g. default.aspx.htm) in a text editor:
Search for jameslui.org -> replace with “.” (make current domain dynamic)
Search for .aspx” -> .aspx.htm” (change to HTML file reference)
Search for %_files/ -> images/ (migrated all *_files directories to a single images/ folder for ease of transport)

Needed to freeze the header as a banner.jpg for the time being until figuring out how to code the header.

Easiest so far seems to be to open the html version in another browser.

Set the new page layout to be sort of close to the original (Layout -> 1/2/3-column w/Left or Right sidebars).

Copy/paste from the html version frames to the new frame in Google Sites. Some images come over, but usually need to be re-uploaded into Google sites to get the references correct.

Forms are registered as data entry forms in Google Docs Spreadsheet Forms (which are spreadsheets with a single-row data entry page); Once re-created as a Spreadsheet Form, you can use Insert Spreadsheet Form to place it into the website.

Change Site Layout:

Horizontal navigation (checked) – have to add each page to go across the menu individually.

Sidebar (unchecked) – gets rid of the menu on the side.

Couldn’t really embed a WAV audio file. Can upload to Google Docs and create a Share link for it. Or attach files as Attachments to the page.

Sub-Tab/Sub-Menus
Layout Left-Sidebar to insert a Sub-page navigator that floats correctly.
Used 100 pixel width; no Title <leave blank>; Appearance: Traditional TOC

Fast text reformat – place “–” delimiters in proper paragraph break places. Replace ^p with <space>, Replace “–” with ^p^p, Replace ^p<space> with ^p

Forms are semi-editable. To Change Field Order, Open the Spreadsheet (SS), Open the Form Edit Window (but don’t close either one).
Return to the SS, Form -> Delete, Return to the Form Editor, change something, Save, the SS version should update accordingly and re-connect itself. Cannot do much about spacing or field width so far.

The Google Sites editor isn’t exactly WYSIWYG – getting those widgets and images to stay put where you want them can be a little daunting unless you crack open the raw HTML and disconnect the Themes and Templates from the site. But keep playing with Left/Right/Center Justification on an object, usually with Wrap ON and it will flow better.

One strength of Google Sites is that it is pre-built for designing Mobile-compatible sites. So the emphasis is NOT on making everything 800×600 pixel formatted automatically anymore. You should be able to re-size the browser and still be able to read the page regardless of browser window size. That’s a Mobile-ready configuration.

One page/sub-page at a time, some easier than others, and eventually it’s done!  Have patience!

Another example, here’s the migrated version of the Southwest Regional Oracle Applications Users Group (SROAUG) site:

http://www.sroaug.org

versus the OLSB version:

http://southwestregionaloracleapplicationsusergroup.tech.officelive.com

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.