How the evolution of baseball stadiums might inform the future of web design

When you think of baseball parks in the early part of the twentieth century, you might think of Wrigley Field, Fenway Park, Yankee Stadium, or Ebbets Field. Most historians today consider these venues baseball cathedrals---there was a romantic, mystical quality to them.

These places of baseball worship were---if anything---distinctive. Only at Fenway could you see a 37-foot green wall separating right field from its neighboring street. Only at Yankee Stadium could you hit a 460-foot flyball for an out in one at-bat, and then hit a 298-foot home run to the short porch in right field. Seeing the ivy walls and rooftop patrons across Waveland Avenue meant you could only be at one place in the world---Wrigley Field.

Baseball stadiums of the past were designed within the constraints of the time, and, with the purpose of hosting one specific sporting event---baseball. These parks weren’t, at all, perfect. Due to the state of engineering back then, seats obstructed by pillars were commonplace. Stadiums often had to be built with strange configurations to conform to the land around them.

In many ways, this era of stadium design reminds me of the era of web design in the mid-to-late 1990s. Bound by the restrictions of 800-pixel 256-color displays, 56K modems, and primitive design languages, web design during this era was all about being creative with what we had. I marveled at what designers were doing back then. There may not have been any design standards, but we built comparatively amazing experiences with what was available to us at the time.

Before the era of modern CSS, making a link highlight when you rolled over it involved converting all of your links into images, and then writing some javascript code to swap out images when hovering over an item. By replacing an image of white text with a structurally identical image with, say, yellow, text, you could create the illusion of highlighting text. To convert a design into HTML, you'd have to delicately splice your Photoshop file into smaller pieces, and then shimmy them together by positioning all of these pieces into a gigantic labyrinth of <table>-based HTML.

Though these techniques are antiquated today, I remember feeling like I had learned the secret to an ancient magic trick the first time I broke apart the source code to see how all of these seemingly impossible designs were done. They were made possible in spite of the constraints of the technology and languages available to us then.

Then, Flash emerged. Then DHTML and advanced CSS came to be. As screen size, color displays, and bandwidth kept increasing, the landscape was changing quickly and the bar for innovative design kept getting higher and higher (sometimes, admittedly, at the expense of good usability). Yet, there was still that mystical and inventive feeling to web design. Websites were still a canvas of experimentation.

The era of stadium standardization

In the 1960s, the number of Major League Baseball teams expanded from 16 to 24. New stadiums were sprouting up across the country each year. The idyllic ballparks of the past were aging and giving way to a modern kind of baseball venue---the multi-purpose stadium. These were behemoths compared to their predecessors. They were also intended to host baseball games as well as football games and other large-scale events. Many of them were also built away from the cities, where space was more plentiful.

The end result? Nearly all of these multi-purpose stadiums looked identical. Out were the strange design quirks and in was a ubiquitous form of design---the circular exteriors, uniform distances to the outfield walls, and the pillar-less, symmetrically perfect, but strangely uninviting seating configurations.

In this era of stadium design, standardization trumped all other design goals. Venues like Veterans Stadium in Philadelphia, Three Rivers Stadium in Pittsburgh, Busch Stadium in St. Louis, Fulton County Stadium in Atlanta, and Riverfront Stadium in Cincinnati could now play host to both baseball and football, soccer and outdoor concerts. You could get a lot more use out of these stadiums, all year round.

But, what was lost in this era was the quality of the fan experience. While these stadiums could support different kinds of events, the experience at those events suffered tremendously.

In both their baseball and football configurations, the closest seats to the playing field were set much further back. It was also common to see entire sections of unsold and undesirable seats closed off during a regular season baseball game. Most of these stadiums also replaced natural grass for a more durable, but far-less forgiving, artificial turf surface. These stadiums began to acquire not-so-flattering nicknames like "cookie-cutter stadiums" and "concrete donuts" while their predecessors became known as "jewel box" ballparks.

A return to focused design

It only took a few decades before teams started replacing those multi-purpose stadiums with ballparks that reflected the romantic quality of the first half of the twentieth century. In 1993, Baltimore's Camden Yards became the first in a long list of baseball-only ballparks to replace the multi-purpose stadium.

Since the 1990s, cities like Philadelphia, Pittsburgh, St. Louis, Seattle, Houston, Atlanta, and Cincinnati replaced their concrete donuts with stadiums designed specifically for baseball or football. The idea of trying to consolidate the fan experience for entirely different events into a single venue just couldn't withstand the test of time. There was too much lost in the design.

Portending the future of web design

Having seen the past 20 years in web design firsthand, it's crystal clear that we are currently in an era of extreme web design standardization. Like multi-purpose stadiums, this era of design has some of the same characteristics.

There's the need to cater a single design to multiple devices like phones, tablets and desktops, much like stadiums catered a single design to multiple kinds of entertainment events. Frameworks like Bootstrap and Foundation  lend itself to a certain kind of design that's easy to scale down to a tablet or phone.

This has led to a kind of cookie-cutter design that we see everywhere today: Full-width sites with a large hero image header set behind some white text and a centered call-to-action button. As you scroll down, you're presented with a few more full-width panes of informational bits and finally to a full-width farm of footer links at the bottom.

Not everyone believes this conformity in design is a bad thing. Antonio Pratas makes the case that ubiquitous design levels the playing field for designers and non-designers alike:

It is evolving in such a way that a “user” isn’t just a “visitor” anymore. They are creators as well, creating content and sharing their own ideas and points of view, be it through text, video or sound. And while everyone can create and share content, not everyone knows how to design or develop a website. So it’s for those people that resources like themes and templates are especially useful.

To me, I see this era of design in much the same way as the cookie-cutter stadium design of the 1960s. While it has its benefits, it also will have its drawbacks. A singular, conforming design might make applications more readily responsive to all devices, but doesn't necessarily take advantage of the specific qualities of a single device.

But, more importantly, that daring, thought-provoking style of design that existed years ago seems to have left the industry. It may very well be for the better. The ubiquitous design aesthetic we see with so many sites today has been successful for a reason. But, if the history of baseball parks tells us anything, we may just be in a standardization era that's overdue for a change.