Limitations Can Drive Innovations

Jason Tennis

blog header image

It is amazing how design thinking changes over the years. The focus of design movements shifts across concepts as needs evolve and better technology introduces new tools to fresh minds. Sometimes though, it is the limitation of the medium that gives a design aesthetic its desirability.

When web design was a bit younger, in the 2000s, the challenge that faced web designers was how to create a richer experience within a limited amount of bandwidth. In those days the majority of people accessed the World Wide Web using a modem that you dialed into. Speeds were much slower than today, but the same cardinal user experience rule still applied—the page had to load quickly!

The difference in acceptable page size was quite large, whereas an individual page today might have a total size in the tens of megabytes, some items loaded as the page loads, some streamed in as needed—back then we tried to keep the entire page under 33 kilobytes for a single page that loaded everything at once. That small page data footprint included all page assets, images and background images, sound files, javascript, fonts and more.

CSS or Cascading Style Sheets were in their infancy, and did a good deal less than they can do today. They had no in-browser animations, no gradients, certainly you could not play with the colors or luminosity of an image in the browser, even simple rounded corners on buttons were years away, with the release of CSS3.

But these restrictions, instead of limiting design, fueled the drive to innovate. The big differentiator between websites was still the richness of the graphics and the apparent craft of the interface. Similar to pocket watches at the turn of the century, embellishment was applied wherever possible to demonstrate value.

Patterns on elements, drop-shadows, compartmentalized information and ubiquitous rounded corners on buttons especially were difficult and time consuming to create without css, but they gave pages a legitimacy and contemporary presence that users liked and engaged with.

And as page construction evolved, many creative and brilliant solutions were put forth almost all in the service of smaller page size. The use of repeating small files to create intricate or naturalistic patterns, stretching tall thin graphics to create drop-shadows and gradients, and the use of complex nested tables to create responsive (actually called fluid at the time) rounded corners on elements while keeping a bare minimum file size all contributed to a richer web visually.

New techniques were thought up to bring rollover states to menu items and buttons and to allow icons to change color and appearance. These were solutions borrowed from video games, that used specially created links and long sheets of page specific graphics called sprites. The long sheets contained the many different graphical states of the items on the page, buttons up buttons down, buttons rolled over. Each sprite link on a page would be a “see through” window of a defined size, and the appropriate sprite image would appear as the background that was showing through the window. By using that early css, an elements background image could have its position changed depending on whether it had been clicked or not, or even when it was rolled over, showing the various parts of the graphic sheet that were needed. The sheet with all the graphics loaded just once, cutting down on page load time and saving a few more precious kilobytes.

These are a few examples of the many, many innovative solutions to design problems that straddled the artistic and the technical world. It was the limitation of the design systems of yesterday, that spurred great thinking to solve difficult problems that eventually gave rise to the internet technology of today.

headshot

Jason Tennis

Creative Director

Creative