by Zach Davidson
Monuments fall; cliffs crumble into the sea; even stars, inevitably, supernova. The fact of the matter is, no matter how much we try to convince ourselves otherwise, nothing is permanent. The world (and everything within it) is constantly in flux, shifting, changing, adapting. Nowhere is this more prevalent than in new technology. Within months, masterpieces become obsolete, and the heroes who crafted them, if unable to adapt, become ancient relics themselves. If, as a designer, you build something that is stiff, unwavering, inadaptable to the necessary changes of technological advancement (both known and unknown), then you and your designs, too, will fall, will crumble into the sea, will supernova.
Dramatic? Yes. Accurate? Absolutely. According to A Dao of Web Design, “Designing adaptable pages is designing accessible pages” (Allsopp). Web analytics are characteristically specific—how many people left your site after only seeing one page (“bounce rate”), how many seconds (average) is each page viewed—meaning that it is crucial to maximize ease of interface. A difficult website is not like a difficult driving route, in which the driver will get frustrated but keep trying to find their destination. In an age of immediacy, if a website is tricky to use (AT ALL), ugly, or slow, a user will simply leave—within seconds. That’s why design is so important. The decision to stay or go is decided almost immediately, and if ANYTHING works improperly, it immediately costs you users—which are your main metric for the success of your site. So how does one design the perfect, user-friendly website? What benchmarks/measures are in place to improve interface, ease of use, and engagement? To answer this accurately, we must start by examining the very origins of web design.
When new technologies are established, it takes a while for their use to extend past duplicating previous technologies. Early television was little more than radio plays performed in front of a camera. This is a necessary step in the understanding of new media, but is certainly not the most fitting, organic, natural way to use these new media. If you are filming a radio play, you are not matching your content to your form, you are simply forcing what you know (actors standing around a microphone) into this new territory (cameras) because you have yet to figure out how to best create content for this new technology. This is what Benjamin Bratton refers to as “interface replication”, and it extends, too, into the birth of web design.
Web design began as a child of the printed page. Naturally, at its inception, designers were essentially creating fixed, print-based designs. These designs would have looked exactly the same on paper; they simply lived online. This was the digital age “interface replication”, and it lasted until about 2004 (more on that later). Several terms coined in this era, these mainstays of the digital experience are actually examples these vestigial remnants (or genetic hand-me-downs, if you’re an optimist). Many of them still exist, sometimes prevalently, often pointing at the comfort we take from our physical world–files, folders, spreadsheets, documents, trashcans/recycling bins, docks, sites, “home” pages, pages, cut/copy/paste, gallery, desktop—these terms are all near-archaic holdovers from a pre-digital world, which have stubbornly refused to die (or have subverted death by finding new, digital definitions). The most maligned of these terms, of course, is “above the fold”—a holdover from the old newspaper standard that your most important content must appear above the fold of the front page, so that a potential reader will see something that is engaging without having to open/move/flip the paper (or scroll/click/look around the website, as it currently exists).
Designing for the web poses some unique challenges. Unlike a canvas (or a sculpture, a building layout, a stage, or printed page), the web does not have set dimensions. Sure, you could accept something as a standard (like Macintosh’s default screen resolution of 72dpi, and a screen size of 1366×768p), but the web is pliable, it is fluid between mediums, so what happens when you (inevitably) bump into something that isn’t your standard (like Windows’ default resolution of 96dpi, or, even more extreme, the screen of a tablet, a smartphone, a smartwatch, or any other display that is surprisingly extreme in dimension)? Designers spent years trying to control the web, trying to find ways to equalize user experience across devices, across interfaces, attempting to make something look exactly the same for both Mac and PC users—but to no avail. Technology advances exponentially, and there were always new technologies that thwarted their seemingly all-encompassing code. Then things started to change.
The fluidity of web experience is part of what makes it unique; instead of viewing that as a weakness, something to be worked around, what if that the web’s greatest strength? John Allsopp thinks so:
“It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all.”
In 2004, Cameron Adams displayed for the world a new way of thinking, when he unveiled a site layout design that changed/adapted based on the width of the browser window (Adams). Within a few years, the design community was in hot pursuit of this new ideal, alive and engaged with words like “flexible” and “fluid”. Then, in 2010, the revolution was formalized: Ethan Marcotte published the book, “Responsive Web Design”, and with its title, coined the term that would come to define the modern digital era.
Ethan Marcotte is a Boston-based designer and developer. He was a literature major n school, but, by accident, ended up messing around in photoshop, and within ten years, became one of the most important theorists in the field. Inspired by John Allsopp and his essay, “A Dao of Web Design”, Marcotte quit focusing on the standard, which was a fixed-width approach, and began his attempts to meet the web on its own terms. In his book, “Responsive Web Design”, Marcotte unpacks everything you need in order to build a website that actively responds and adapts, based on how it is being viewed. There are three main requirements, when building a responsive design: a flexible, grid-based layout, flexible content, and media queries (Marcotte, 9). Through the book, he walks you through how to build these three things into your own site, as well as giving detailed explanations/reasons behind each tactic.
First on his list is building your site around a flexible, grid-based layout. Traditional web design (the one at tension with its parent, print design) is built around a fixed-width layout. “The site is x pixels wide. So I want my font to be this size, I want my margins to be y pixels, and I can specify the exact size of everything else.” The folly here, of course, is that on a tiny screen (a smartphone, for example), these set sizes will completely destroy the way the page looks—a tiny screen has way less pixels to work with, so the proportions will look way off. Marcotte suggests that you plot your site layout on a basic grid, and set all sizes as proportions (percentages of the full page) instead of as exact, specified sizes. “The site is x pixels wide. I want my margins to be 10% of that width on either side, I want my main font to be y percent of the page height, etc.” Coding like this gives you a website that shrinks or grows to remain proportionally equivalent based on any browser size. If the window shrinks, the page shrinks—and just like that, gone are the days of the ugly side-scroll.
His second requirement is flexible images/media. Once you’ve built your grid, it’s important to keep everything flexible. If your whole page is based on percentages and proportions, then you don’t want to start adding fixed-width content. A picture that is too wide for a smartphone (again, just the easiest example) will be awkwardly/unintentionally cut off. But an image/video that is, like the rest of the site, designed in proportion to the whole will look beautiful (and as intended) no matter the browser width.
Marcotte’s third and final ingredient: media queries. He suggests that, based on different screen sizes, you can infer different devices (and more importantly, expected uses) (Marcotte, 114). The example he gives is the difference between what someone primarily wants when they are visiting a restaurant website on their desktop/laptop, versus what the same person primarily wants when they are visiting the same website on their phone. The phone user is presumably on the go, and has different needs from the website. Marcotte suggests that, when designing a website, you should not only make your website look beautiful on any size screen (ingredients one and two), you should even go so far as to build what are essentially different versions of your site, based on different implied uses. This is where the media queries come in. As far as I can tell, you use these to add in what I understand as code parameters, which tell your site which version to display based on which screen size it is being viewed in. You now have a beautiful site that responds and adapts to the user and their perceived needs.
The web is liquid. It changes, based on how, where, and why you view it. This is what makes it unique, what makes it special, and where the truest opportunities lie in terms of using it to its fullest capacity. Responsive Web Design, in some for or other, is here to stay. Not necessarily in the exact terms that Marcotte defines it, but in the sense that starting in 2010, a new world was broken wide open for web designers—a flexible world, a customizable world, a world that can adapt and react to the specific needs of every individual user. This is the web of the future. This is what the web can, should, and will be. It can evolve over time. And evolution—the ability to grow, to learn, to adapt—is what will prevent this modern web from the inevitable fall, crumble, supernova.
Open the pod bay doors (to the future), HAL.
Adams, Cameron (September 21, 2004). “Resolution dependent layout: Varying layout according to browser width”. The Man in Blue.
Allsopp, John. “A Dao of Web Design.” A List Apart The Full. N.p., 07 Apr. 2000. Web. 29 Apr. 2015.
Bratton, Benjamin H. “What Do We Mean by Program?” BRATTON.INFO - Texts - What Do We Mean by Program? N.p., Dec. 2007. Web. 29 Apr. 2015.
Marcotte, Ethan. Responsive Web Design. New York: Book Apart, 2011. Print.