When possible, I formatted the site to make it not so wide. On the old site I often had tables with 4 columns to make the information appear less cluttered. For example, on the minutes for our annual meeting I had:

Now to make this fit on a smaller screen, now I only use 2 columns.

Because it was too wide for devices like iPhones, I replaced the navigation menu that used to appear across the top of the page with one that is hidden but pops out from the left side:

Old menu:

New menu:

The new left-side menu is invoked by clicking on:

or:

The blue image appears at the top of the screen, and the black one always stays in the same spot. For long pages, after you have scrolled down, if you want to use the menu to navigate to another page, you can use the black one without having to scroll back up to the top of page. Very handy.

To get rid of the menu, click on:

I created a strict separation between "what the site says" and "how the site looks." In other words, all of the formatting comes from a separate cascading style sheet (CSS) instead of being sprinkled among the site content. This is considered standard practice nowadays, but the Crown Harbor site is 5 years old. It used to have HTML that looked like:

Old Page:

Now it looks like:

New Page:

CSS:

The site has 233 HTML files. Using the TextPad editor, I could make many of the changes en masse, but some of the changes had to be applied individually. Painful.

Since styling is in a separate CSS file, it can be customized to the device (i.e. mobile versus desktop). This means that pages that look like this on a PC or Mac:

can appear like:

on an iPhone. The decorative images can be dropped since they are not essential but take up space. The images used to provide a grouping mechanism to identify one topic from the next. Since the images disappear on a mobile device, I added header level 3 items to separate the topics.

The disappearing images strategy had an interesting side-effect. I used to provide some visual separation between table rows by using horizontal lines. For example, in a table that had 3 columns, I would have:

Now that one of the columns is optional based on display width, I had to change this slightly. I now have to use:

To show you how geeky I really am, try viewing the http://crownharbor.org/windows.html - exterior windows page on an iPad (not iPhone) in portrait mode. Now turn the iPad to landscape mode and watch the little images suddenly appear. Then go back to portrait mode and watch them magically disappear. Totally captivating.