Dino's Ultima Page

The Evolution of Web Design at Dino's Ultima Page

By Daniel D'Agostino on 10th February 2021

Introduction

With less than a year and a half to go to its 20th anniversary, Dino's Ultima Page has changed a lot over the years. As it is currently in advanced stages of a technical migration that is consolidating a new layout across the entire site, and thus replacing the last remnants of its earlier incarnations, I felt it would be interesting to offer a historical perspective on its design.

A First Year of Rapid Innovation (2002-2003)

The evolution of Dino's Ultima Page through its first year is documented not only in its news archives, but also in two dedicated articles. "The First Move" and "The First Anniversary" describe the progress made after six months and one year, respectively. It's unfortunate that I did not keep up the tradition of writing these summaries.

Dino's Ultima Page, second design
Dino's Ultima Page, second design
Source: "The First Move"
Dino's Ultima Page, third design
Dino's Ultima Page, third design
Source: "The First Move"
Dino's Ultima 8 Guide, fourth design
Dino's Ultima 8 Guide, fourth design
Source: "The First Move"

Dino's Ultima Page went through its first four designs within six months. Starting with humble origins on Geocities in July 2002, the first design was a very plain one. Within a few months, the site adopted a basic design sporting a fiery logo and grey scrolls. This was the basis of the second and third designs, with the only difference between them being the underlying technical structure.

The fourth design originated from another site I was making at the time called D-Scripts, which is the precursor to Gigi's Computer Corner. Variations of the layout I developed for D-Scripts were used in a number of websites I built at the time, and my Ultima 8 Guide was the first part of Dino's Ultima Page to use it. Eventually, it was applied to the rest of the site and replaced the design with the grey scrolls.

You can see examples of pages from the second, third and fourth design in "The First Anniversary".

The Fifth Design (2004)

I first hinted at a new design iteration on 7th January 2004. It's not entirely clear what triggered this, but it appears that the main intention was to grow the website beyond the initial two guides (the Ultima 8 and Mt. Drash ones), and also take advantage of PHP scripts to add more dynamic capabilities to the site, such as to organise old news.

The transition between the fourth and fifth design is not well-documented, especially since the Wayback Machine did not do a very good job at preserving the site's images during its early days on Shiftedphase as well as its brief sojourn at TimeImmortal. However, it appears that I worked on the new site in the background for a few months, according to a development log showing progress between 18th March and 23rd August 2004. A few fellow dragons were given access to this early preview, and helped test it out.

Whatever my plans were, they were disrupted by a server crash sometime around the end of August or beginning of September 2004. While Dino's Ultima Page moved temporarily to TimeImmortal (courtesy of Withstand the Fury Dragon) until late October 2004, I accelerated my plans to adopt the fifth design, and gradually rebuilt Dino's Ultima Page from scratch around it.

Homepage with fifth design in November 2007
Homepage with fifth design in November 2007
Source: Wayback Machine
Ultima 7 Guide still with fifth design in 2020
Ultima 7 Guide still with fifth design in 2020
Source: Wayback Machine
Tale of the Mystics with fifth design today
Tale of the Mystics with fifth design today

Visually, the fifth design was a small increment over the fourth, with the main noticeable difference being the breadcrumb navigation replacing the usual page title below the site's logo. It has survived for a long time, and while most major parts of the site that still used it have been migrated to the seventh design in the past few months, it is still used by my Tale of the Mystics and The Return fanfictions, and it's also the basis of the design currently used by the Ultima 8 Guide.

The Sixth Design (2008)

A few more years passed, and the site grew further, adding other Guides among other things. The dark theme that seemed so suitable to the Ultima 8 Guide was feeling rather dull and dated.

In September 2008, Dino's Ultima Page adopted its sixth design, including a lighter colour scheme, new front page images (logo, news and navigation images), and favicon. The underlying HTML structure remained mostly the same, with only minor enhancements. The transition also included the migration of the site's news from an XML file to a MySQL database.

Several parts of the site adopted this new design in the months that followed, but many others never did. Some of the larger sections such as the unfinished Ultima 7 Guide had certain technical complications that made migration difficult, and kept the fifth design until they were migrated to the seventh very recently.

Homepage with sixth design in September 2009
Homepage with sixth design in September 2009
Source: Wayback Machine
Savage Empire Guide with a variant of the sixth design today
Savage Empire Guide with a variant of the sixth design today

Other parts of Dino's Ultima Page that did adopt the sixth design ended up with their own variant of it. You can still see this in the Savage Empire Guide, which uses a slightly different layout from that of the homepage under the sixth design.

The sixth design has endured for a long time. It was used throughout Dino's Ultima Page (except for those parts still on the fifth design) until the recent migration to the seventh design. The Savage Empire Guide is the last part of the site still using a variant of the sixth design.

Dino's Guide to Ultima 1 (2014)

By the end of 2011, after a long time struggling to keep up with Ultima news, I finally decided to set Dino's Ultima Page aside in favour of real-life priorities. The next update took place over two years later, in early February 2014, when I relaunched the Ultima 1 Guide.

Main page of the Ultima 1 Guide today
Main page of the Ultima 1 Guide today
Mobile view of the Ultima 1 Guide today
Mobile view of the Ultima 1 Guide today
Ultima 1 Projects page showing an image gallery
Ultima 1 Projects page showing an image gallery

From a design perspective, the new Ultima 1 Guide was revolutionary in a number of ways. Its structure and visual appearance were unlike anything Dino's Ultima Page had ever seen before, clearly the result of an attempt at embracing some of the more recent web standards in a site that had otherwise not kept up with the times.

However, it is also the first part of Dino's Ultima Page to attempt to embrace responsive design by catering for mobile devices. While the execution of this has a lot of room for improvement to this day, it was a step in the direction of catering for the new reality of people browsing the web from their smartphones, a project that Dino's Ultima Page is still actively pursuing today with the adoption of the seventh design.

The new Ultima 1 Guide is also the first part of Dino's Ultima Page to adopt a dual navigation system, with left and right navigation.

Ultima 8 Guide Overhaul (2015)

By 2015, the fifth design (the dark theme) was still in use in many parts of Dino's Ultima Page, despite the sixth design having been around for several years. Even in the Ultima 8 Guide, to which the fourth design (earlier dark theme) was initially applied back in 2003, the fifth design was looking very tired.

Main page of the Ultima 8 Guide today
Main page of the Ultima 8 Guide today

Thus, the Ultima 8 Guide got an overhaul in August 2015. This resulted in the current design you see today, which uses the same kind of structure of the Ultima 1 Guide's design, but looking like an enhanced version of the fifth design. The Ultima 8 Guide still kept the dark theme, but its logo, navigation and headings look a lot better. It also adopted a dual navigation system like the Ultima 1 Guide, but didn't similarly carry over the mobile support.

The Seventh Design (2020-2021)

By 2020, Dino's Ultima Page was a huge mess. Some parts of the site were using XHTML 1.1, and others HTML 5. All of it looked terrible on mobile, including the Ultima 1 Guide which had a responsive layout (screen resolutions on mobile devices had changed completely over the years). But worst of all, the site was an inconsistent bundle of different layouts. The Ultima 1 and 8 Guides had their own layout. The Savage Empire Guide was using a variant of the sixth design, and everything else was using either the fifth or sixth design.

I had been wanting to fix all this for many years, but I didn't have the time. This problem was solved in 2020 when COVID19 appeared. By March 2020 I was working remotely from home, leaving me with a lot of free time I didn't have before. In April 2020, I started working on modernising and consolidating Dino's Ultima Page, a project that is in advanced stages but still ongoing today.

Homepage with seventh design today
Homepage with seventh design today
Mobile view of the seventh design today
Mobile view of the seventh design today
Ultima 6 Fun page with its new layout today
Ultima 6 Fun page with its new layout today

The seventh design, which is what most of the site is using today, is an incremental update of the sixth design. Aside from minor visual improvements, The most important changes it brings include:

Since April, most of Dino's Ultima Page has been migrated to the seventh layout, but there are still a few exceptions:

Dino's Ultima Page has come a long way in the past year, yet there is always room for improvement. Even after the Savage Empire Guide is migrated to the new layout, I have a long list of improvements that I hope to gradually make. In the meantime, I hope that this article serves as a historical view of how things have changed, and it will endure even after the seventh design has been superceded.

© by Daniel D'Agostino 2002-2021