A New Look for The Front Door

One of the most significant changes made on the Home Page (cuba.htm) is the removal of the left side div which, for years, was the place where the logo would hang out. On small screens the div would disappear and the logo would relocate to the very top.

Removing it wasn’t an easy decision to make, but combined with other changes, it allowed for a more stream-lined page.  

The left side was there for over fifteen years, serving the larger screens of the time and going through various cosmetic updates along the way. But now that screens are both larger and smaller than ever, it’s time for an evolutionary change.

This change would invoke CSS grid and Flexbox to power the page. A new version of the home page is currently being developed, tested (and cursed at—in Spanish) for the near future. Here’s a peak, though it’s not quite ready for prime time.

But first, as they say in morning news, a little something about a 17-year-old home page that has recently retired.

Seventeen years is a long time for a home page (the “front door”). Over the years it has featured different looks, and for a brief time at the beginning, it even included pictures of Fidel Castro and Che Guevara.

Those were the early days, during the Clinton Administration, when I was still in denial about the hate that existed towards the only names and faces widely recognized in the U.S. as “Cubans.” A friend suggested that I use a picture of “Ricky Ricardo” instead.

“You mean, Desi Arnaz?” I said to her.

“Who!? No! Ricky Ricardo. Lucy’s first husband.”

The third most recognizable Cuban at the time was not even remembered by his own name. And the 2^nd most recognizable Cuban (Che) was born in Argentina. Castro and Che were evicted off the Home Page and replaced by Martí and Maceo. It didn’t matter that Americans didn’t know who they are. I would gladly tell them.

Eventually, as the site grew, the Front Door and the Timetables became the most worked pages.  

An early Home Page (Front Door) made
with HTML tables

Initially both were built with clumsy HTML tables for layout.  This early screenshot shows a tables layout with a JavaScript gallery showing a Martí stamp. At the top, next to the logo, a mouse-over effect invites you to wave the Cuban flag.

At some point David-Siegel-like single-pixel-Gifs were everywhere. I remember staying up nights with Siegel’s first book considering how to improve the look of the site.

As the specifications for HTML evolved, so did the timetables, though not the Front Door. The new HTML 4.01 pages (on the timetables), built with CSS and embracing floats and positioning became, almost by accident, mobile-friendly. The effort to adhere to the demands of assisted technologies paid off in unexpected ways, though I didn’t really “get it” at the time.

Today, the new CSS Grid frontdoor seems an awfully serious decision. Here’s what’s happening;

While I know what I want the small screen to do and look like (a variation of the current one shown at left, but more streamlined) it’s the large screen that’s giving me trouble. It’s always easier to throw things on top of each other than to assemble them into meaningful coherence.

Background Image

A background “hero” image is loaded with the body, depicting true heroes of Cuban history inone of their most heroic moments;

.bod2 {
background-image: url(http://historyofcuba.com/images/New/HoC-NewCover-4.jpg);
 background-repeat: no-repeat;
 background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}   

   Martí on the left side to greet us, with rebels behind him… this image appears at screens at least 600 pixels wide and disappear from smaller screens.

I used this image because of its “history” with the site. “Crossing of the Trocha, Jan 1, 1896,” symbolizes the relentless struggle for independence inspired by Martí and led by Maceo and Gómez… the image has been desaturated a bit for the front door.

Part of the central image is repeated on the .article2 div (without Martí) that appears on screens 1200 pixels or higher. The image links to the Gallery page in which this image is further explored.

On pages 900 pixels wide, Grid-template areas provide for a 6-column, 4-row grid, leaving the left area open for Martí.

 grid-template-columns: repeat(6, 1fr);

    grid-template-rows: 80px 180px 1fr 90px;

    grid-template-areas:

    " . header header  header  header  header"

    " . mainbar mainbar article article sidebar"

    " . article2   . article3 article3 sidebar"

    " . search footer footer footer footer";

The grid-template-areas reassemble themselves d for different screen sizes, leaving out sidebar1 and article2 from the smaller screens.

Firefox screen shot shows grid-template-areas

Various grid items feature semi-transparent colors (rgba) to separate and isolate the section. This includes article3, article, sidebar and mainbar. This is still in the testing stage.

SEARCH

The search window appears at the bottom… I want the visitor to glance through my offerings before they go searching for stuff. On the other places where it is used (contents.htm & content2.htm) the Google Search appears at the top right.

I don’t recall when the Google Search was established, but it must be approaching legal age and it still works like a Laker point guard in their prime.

Screen breaks come at screen widths of 500, 600, 800, 900 and 1200 pixels. Aside from reorganizing the grid-template-areas, they mostly adjust font sizes …

A Chrome screen shot shows the basic idea for the page

Along the way I came across various peculiarities in how the same exact page displays on Firefox and on Chrome…

On Chrome the page lays out as expected… and it shrinks as you’d want it to. The Firefox page is a different story.

Once established, this layout may be used on different menu pages… with slight variations relating to different site topics. I can’t wait to get there.

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.

How Big is This Site I’m Refactoring?

Last week I began the process of refactoring historyofcuba.com. The need for this had been there for years, but the will to do it was nowhere to be found.

Almost ten years ago (2010) I performed a statistical count of all items included on the site. The count was adjusted and finalized on 2014, and it’s unlikely that the numbers have changed since then.

This is what the count revealed;

historyofcuba.com consists of 1,021 total files distributed among 10 folders and 34 sub-folders. There are 571 graphic files and 450 text files (HTML, CSS, JavaScript).

The history is divided into the various periods, but the content itself is presented as timetables, timelines, articles, menus, image galleries, and book excerpts.

Initially there was only one style sheet for the whole site, but it grew cumbersome and over time I separated it into 4 different files (which will be described later).

According to those measurements, the site features a total word count of 207,097 words. This is actual “site content” and excludes any HTML, JavaScript, CSS or anything not seen by the site user.

The total word count can be divided as follows:

·        Timetables – 50,014

·        Timelines – 29,426

·        Articles -    59,731

·        Book Excerpts – 40,857

·        Misc Hist – 27,051

Counting Methods

A lot of care went into making sure that items were not double counted, as they might belong to different “types” of content. For example, the Martí section includes an article, various sidebars and a timeline. For the word count, the Marti article and corresponding sidebars are counted under “Articles” and the Martí Timeline is counted under “Timelines.” This convention is followed throughout the count.

The Articles word-count of 59,731 includes the history items not counted under Timetables or Timelines. These items include articles and sidebars, notes and abstracts.  

The site also features more than 40 book excerpts from 29 books. These books include: The Man Who Invented Fidel, by Anthony DePalma; Cuba: Between Reform and Revolution, by Louis A. Pérez, Jr.; Versos Sensillos – A New Translation by Anne Fountain; Family Portrait with Fidel and The Twelve, by Carlos Franqui; Little Man: Meyer Lansky and the Gangster Life, by Robert Lacy; and Kennedy by Theodore Sorensen.  

Another significant “chunk” of content is described as MISC, with 27,000 words. This includes historical documents that have played an important part in the country’s evolution, such as the Teller and Platt Amendments; the letter by ex-President Estrada Palma discussing his resignation from office in 1906; various treaties between the U.S. and Cuba; the proclamation issued by U.S. Secretary of War William H. Taft in September 1906 when he assumed leadership of the Cuban government; Martí’s thoughts on Antonio Maceo, and more.

Largest Content Segment

In terms of word-count, the site’s largest segment is the Timetables, with 50,014 words. Timetable coverage begins shortly before Spanish arrival in 1492 and continues all the way to 2005. Along the way, users can jump to articles, sections and galleries to learn more about the events depicted.

The 2^nd largest type of content is the Timelines with 29,426 words. There are seven distinct timelines, the largest of which is the Antonio Maceo Timeline with 14,391 words. In this unique timeline, users can follow Maceo’s life from birth in 1845 until his death in battle during Cuba’s War of Independence in 1896. Other timelines included: the Martí Timeline, Cuban Sports Timeline, Embargo Timeline, Missile Crisis Timeline, Race War of 1912 Timeline and the Che Guevara Timeline.

The Timetables provide a linear journey through five centuries of Cuban history. Here you'll encounter wars for independence, slave revolts and blind-with-power Captains-Generals, conquering Spanish soldiers thinking they’re on a mission from God, and many brave Cubans who contributed to the island’s long and complex past.

The timetables are spread out over 12 HTML files running 50,000 words. (The timetables stop at 2005)

Basic Timetable Organization

Early History: 1492 - 1775

Struggle for Independence: 1776 - 1928

Before the Revolution: 1933 - 1958

After the Revolution: 1959 - 1979

The Eighties and Beyond: 1980 – 2005

 As you might guess, the refactoring of this site may turn out to be more complicated than even I anticipated, but I’m still looking forward to it.

Refactoring an old web site

The process of refactoring historyofcuba.com has begun.

When I began to code the site way back during the first Clinton Administration, it never occurred to me that one day, in some near future, I would be browsing websites on a telephone… but here we are.

It’s not my favorite way to see something… but you can’t argue with the convenience of finding something you need right now. Still, you won’t catch me watching Star Wars on a phone screen while riding public transportation… I still prefer a big screen most of the times… but I can see wanting to browse the timetables during a long bus ride.

The process of bringing site up to full modern coding standards is not new. Last year minor coding updates were made here and there but had to be set aside… until now. The process seemed too large and overwhelming, since I’m doing everything myself.

This process will include:

·        Update to html5 as needed

·        Update various CSS files

·        Remove old JavaScripts (no firing squads, just a hand-shake)

·        Fixing/updating bad links

·        Perform minor structural maintenance & some file reorganization

·        Minor corrections

·        Review the pages

·        Update NAV systems

·        Re-do the Galleries

·        Re-do some of the timetables

·        Remove ads and old links

·        Implement mobile tech where appropriate

The first phase will be the home page, which is tied to the menu2.css stylesheet. Originally this page was designed for the large screen, but screen-breaks were added for smaller screens.

The first part of the change will be to convert the style sheet into a “mobile-first” style sheet.

Aside from styling the Home Page, menu2.css is used on various menu-type pages, offering brief introductions to sub-topics and lists of related content and topics.

We’ve come a long way since the emergence of the flat screen.