Website Redesign of 2023

10-8-2023

Over the summer of 2023, Dave Funk and I, Barry Hansen, modernized the entire website's presentation style. As an experienced web developer I'll provide some perspective on what, how and why we made changes.

TL;DR examples:

• Original Edway Topics
• Restyled Edway Topics

How the Website Started

In the mid 1980s, Dave started this site using a dial-up via a telephone handset as a modem in an acoustic cradle. The current web-authoring software was Adobe PageMill and he dabbled with Adobe Dreamweaver. The look and feel was like most other websites of the 80s and 90s: backgrounds with interesting colors and textures, some animated icons, a few "under construction" icons, and so forth.

Over the next three decades, the website grew and grew with the addition of interesting technical topics and a great deal of Morse Code training material. This was all great stuff and garnered a large number of page views.

As it grew organically, website navigation was via in-page links with the home page as the main landing page with links to all topics. Some web pages contained helpful links at the bottom to relevant topics; these were hand-generated. Dave, as the author, of course knew his way around and didn't need much more than that. Besides, the current web visitation style was to colorize links you've visited as a visual clue to where you've been and how you got there.

Fast-forward to the early 2020s, and Dave became involved with the Edmonds-Woodway amateur radio club  and we were delighted that a ham of such experience and accomplishments joined us!

The Situation

In the spring of 2023, Dave put out a call to see if anyone would like to help with his website. He wanted to ensure the longevity of all his material published online. Since I was a professional webmaster myself and loved Morse Code, I jumped at the chance to help preserve this treasure. We both figured it would be a straight-forward matter of transferring the domain and its web hosting account from one person to another.

I looked closely at this website and its HTML, and realized:

• Page navigation is via in-page links which are manually maintained. There is no navigation bar among main topics and no comprehensive site map.
• It is not "responsive," that is, it adjust its layout for small screens or mobile devices.
• The font size and layout has links positioned too closely together, making it even more difficult to use on tablets and smartphones.
• The HTML doesn't meet modern standards, that is, problems such as mis-matched tags causes it to fail W3C Validation. 
• The HTML is not semantic, that is, important structural elements and headings are decorated with <FONT> and <BOLD> and color and italic tags instead of <H1> through <H4> headings. Search engines are unable to make sense of the page structure and what things were.
• There are a number of broken internal links, as happens in the normal course of website growth over time.
• There are no visitor-tracking or Google Analytics tags. (I inserted some analytics tags on a few main pages in the production server to get a sense of current traffic.)
• Google isn't indexing any of these pages due to the problems listed above. As a result, all this great training resources and Morse Code practice tools are not findable. Current visitor traffic is practically zero.

This is a big website. There are over 250 HTML pages, 240 PDF files, 45 Arduino sketches, 2,200 audio files, 800 text files, 23 document files, 35 executable files, 128 bmp illustrations, 15 zip files, and 670 jpg images.

Goals

Here's my chosen scope of website modernization:

• Keep the current content as-is.
• Keep the current background texture unchanged.
• Keep the current URL names as-is, as much as possible.
• Keep the home page style (just only this one page) as a nostalgic look at the 1990s look.
• Fix file names that contain punctuation or problematic characters like apostrophe, ampersand, hash-tag or m-dash.
• Fix internal broken links.
• Make it responsive to various screen size using a mobile-first template.
• Fix HTML semantics - use modern and appropriate tags for headings, sections, quotes, source code, etc.
• Eliminate "under construction" items. In modern times, everyone knows that all websites are always under construction.
• Eliminate obsolete tags like <FONT> and <CENTER> and more.

A few things I chose not to address:

• No technical review. No research. No expansion on topics.
• No optimizing page performance. No converting or compressing images.
• No review of external links or fixing "link rot".
• No renaming folders or pages, unless the current name causes problems.
• No work on resolving duplicate files or web pages.

Bottom line: My intention is to bring the website up to modern standards without getting tangled in updating content. This alone will keep us plenty busy enough.

New Website Look and Feel

Bootstrap Framework  is the world's most popular framework for building responsive, mobile-first websites. They've pre-configured the fonts and page layout so that it works well and looks good on all major standards-compliant web browsers. Bootstrap is expressive; it has a good set of classes for styling common elements in interesting ways.

I built a template page using Bootstrap 5. As new ideas ocurred to me, I updated the template then re-edited every web page to reflect the new approach.

Navigation

It was a good puzzle to come up with an appropriate navigation for a website that's grown organically for 30 years. It's never had a consolidated navigation menu -- it's always used in-page links and a few manually-maintained pages that serve as landing pages for certain topics or chosen audiences.

I didn't want to reorganize all the web pages or force them into some preconceived categories; this is a big website and it would take forever. We have quite a number of almost-duplicate pages that were written for one group, then duplicated and modified slightly for a different audience. The pages tend to be saved in folders by target audience, even though they have similar subject matter. And how should all the unlinked and orphaned be organized? I don't want to delete original documents or PDF files that were the first-pass HTML page. I do want to help find all the pages for given topics together.

My goal was to write server-side scripts (PHP) and a single lookup table to generate all navigation.

The most sensible navigation bar turned out to be:

• Figure out the seven most common topics.
• Add Home, About, and Site Map.
• Which results in 10 items in the top nav bar, which is busy but manageable.
• Further refinement discovered very many pages will be under each common topic, too many to make drop-down lists useful.
• We subdivided pages into second-level groups, and linked the main topics to a these index pages.
• Finally, a site map page shows all seven most common topics together with sub-topics and their web pages. "One index to rule them all."

The top nav bar and topic indexes was great for knowing where to go. But it doesn't help you keep track of where you came from. Personally, I really like breadcrumb trails. So I added a line under the top nav bar for "You are here" and the navigation path from the current page back through the structure to return to the Home page. The breadcrumb trail is automatically generated by server-side PHP scripting.

Modifying the Monster

I manually updated every HTML file to match the template. I changed upper-case tags to lower-case. I replaced obsolete tags like <FONT> and <center> with Bootstrap classes and modern CSS. I reflowed source code with Visual Code, checked syntax with HTML Tidy  and checked grammar with W3C Markup Validation Service  I corrected some spelling errors when Visual Code flagged them. I added Google Analytics tags to find out if our changes result in new visitors making use of the resources, and what turns out to be popular.

The tasks were expedited using Visual Studio Code  and Beyond Compare. 

We learned that Mozilla KompoZer  and Adobe PageMill  are old obsolete Cuisinarts of wysiwyg editors. They don't understand HTML5 or PHP and they break the tags we use, like <main> and <title>.

Dave reorganized the thousands of MP3 files into a new folders that make it easier to link, and with folder names that make more sense to him.

We reviewed every internal link using Xenu Link Sleuth.  We started with 1,710 broken links (out of 7,650 URLs) and finished with less than a hundred broken links, mostly to missing files that we were unable to recover.

Yes, this took awhile since it's a very big website. Dave and I worked together closely from mid-July through mid-October. It's been lots of fun (really!) to review these topics, prettify the pages and make this valuable resource so much more usable.

~ Barry Hansen K7BWH ~