Would you like to see a menu?

Most of us can appreciate an attractive menu. They give us the opportunity to make choices and give us a unique way to express ourselves, sometimes serving us happy surprises along the way.  Pages that offer lots of links and few paragraphs of information are vital to historyofcuba.com. I call these Menu Pages.

The Menu page for the José Martí section (http://historyofcuba.com/history/havana/Marti.htm), for example, features many articles by and about the “Maestro” as well as related offerings. This may be a user’s first stop on the road to learning about Martí, and it may be the page bookmarked for further exploration.

At least 21 pages (so far) on the site use menu2.css, the stylesheet designated for these pages. They all basically do the same thing, with slight variations due to their specific content.  Their topics include: Struggle for Independence; Antonio Maceo; early history, Cuban sugar; Bay of Pigs; etc. These are not just menu pages, but important topics in a long and complex history.

Most of these pages were made at different times and with different tools, but now that they’ve been “refactored” to use menu2.css, this will be the first time they all march to the same drummer.

-

Initially I thought of this work as an “overhaul or redesign” but I like the word “refactoring” much better. It sounds like something Scotty would do in Engineering to give Captain Kirk more speed;

“I need warp speed NOW, Scotty!”

“Yes, Keptin, but it’ll take time… I’ll need to refactor the CSS, upgrade the pages to HTML5 and remove tons of analog JavaScript from the mid-1960s… this is delicate work, Keptin. One syntax error and the engines could blow!”

“Make it quick, Scotty, or we’re all dead!”

There’s no way that I can work as fast as Scotty. He had Roddenberry on his side.

But don’t be fooled… lots of what falls under “refactoring” is grunt work that Scotty would have assigned to a first-year cadet;

·        removing hotspots & re-writing links

·        Grouping font styles to eliminate clutter

·        “zeroing out” margins and removing margin measurements from html tags

·        removing old JavaScript

·        change all-caps HTML tags to lower-case

·        replacing or removing deprecated HTML (hspace, vspace, i, b, etc)

·        removing “target=_n” from hyperlinks  

·        sweeping dust under the rug

·        …and making sure pizza is ordered by 6 so it will arrive by 7

But that’s not all. Once the cadet is done, there’s still more to do. Here’s the next challenge;

·        exchanging ids for classes

·        Updating CSS order and reviewing the cascade

·        Removing ids and classes no longer in use…

·        Correcting/updating remaining classes to fit within the boundaries of a new decade

·        Thinking about what this page might be asked to do in the next few years

·        Normalizing “footers” across the pages; all of which have been wearing different shoes until recently

·        Removing outdated/unwanted/broken links

·        Adjusting/updating design elements for different screens: borders, corners, shadows, shading…

And just when you think you’re done with the page you notice something else that must be... refactored.

menu2.css

With the menu2.css style sheet, the first step was to reorganize it into a “mobile-first” model, which meant making some serious order changes, taking a sober look at all measurements provided and “drumming” up some new screen breaks. Once these changes were made, each of the connected pages was tested and adjusted. This is where the major HTML updates took place.

This may not have been the best approach… but I learned my lesson. I did rethink the complexity of the stylesheet and simplified it as much as possible. You would not believe how much crap I threw out.

For the articles3.css stylesheet, which is attached to many more (and more varied) pages, I’m exploring a different approach that I will describe later.

Old Enough to Buy a Drink

Over the twenty-plus year life of the site, the code has been refactored at various times, though back then this process was called “updating.” From HTML 2.0 to HTML 3.1 to HTML 4.1… from no-CSS to CSS2 and then CSS3… things slowed down about then, as my time was challenged by work that actually helped pay my rent.

The site performed well, leading me to think that a transition to HTML5 would be “easier and faster” than it is turning out to be.

Implementing a mobile-first ideology across all menu pages so that they perform in a consistent manner has made a major different in site performance. It has also led to minor cosmetic improvements.

Most of the pages on the site still need a lot of work. And looking at some of that old code feels like traveling back in time.

This “refactoring” mostly involves stuff under the hood… but it has already affected some of the visual elements, though I wouldn’t call it a “redesign” or a “revisioning” but a sharpening of the edges.