Hallucinations of a Static Web
People often ask about what the current standard width for websites is these days. But rules of thumb like this no longer apply, and perhaps they never did. We establish these defaults to give us greater control over the design, but these are not defaults so much as blanket assumptions. It’s what Jeremy Keith referred to as “the consensual hallucination that we’ve all agreed to participate in.” The hallucination being the knowledge we pretend to have about how, where or with what device people are accessing our web content. The web is an open canvas with no explicit dimensions. Imposing rigid dimensions on our designs based on the screen sizes of popular devices is both short sighted and impractical. It’s encouraging therefore to see philosophies like progressive enhancement, responsive design, and mobile first gain so much traction. We are finally embracing methods that help us to design forward instead of back, methods that encourage us to be future friendly.
Forward Thinking Methods
For those not familiar, and at the risk of over-simplification, let me break down a few of these concepts.
- Progressive enhancement means delivering the best experience a device can natively support while keeping content accessible. It’s the acknowledgement that websites do not and should not need to look or function the same across every browser or device. More advanced browsers can take advantage of supported features, while older less capable devices need not try to emulate them.
- Mobile first is the concept that we should be anticipating mobile usage and design for that experience first. Thinking about mobile first allows us to bring the relevance of our content into greater focus. Because of our preconceptions about mobile use, it also tends to get everyone involved to become more conscious of things like our users’ tasks and overall site performance—things we should be considering anyway. With mobile context addressed, it is much easier to build up for bigger screens and other devices than it is to build big and then try to edit down.
- Responsive designs reject the rigidity of fixed width layouts, and instead adapt intelligently to different screen sizes and different types of devices. Releasing constraints allows content to become flexible, sensing the shape of its container and restructuring itself accordingly. As the viewing screen becomes smaller, the layout is not the only thing that must adapt. Large images should be replaced with smaller images, conserving bandwidth and reducing page load time. Scripts should be loaded judiciously.
Accepting the Unknown
So how do these concepts lead us to a more future friendly approach to design? To me, it means acceptance of the following:
- Device class warfare is not going away. The playing field will never be level. Browsers and web-enabled devices will never behave the same, support the same features, or possess the same functional capabilities. And that’s okay.
- Technology is perpetually two steps ahead of us. We don’t know what new devices will emerge, only that when a new device does comes out, someone somewhere will eventually use it in the bathroom. No judgements here.
- We don’t know what we don’t know, and if we accept that then we can design for it. Or better, as a colleague pointed out, we can avoid designing against it.
A More Responsive Future
So where might this type of thinking lead us? I think that the intriguing concept of responsiveness expands beyond design. We naturally think of ways that we can shape technology to serve us and to help us perform tasks. We’ve become used to a one way interaction with technology. The command prompt is a perfect example...although the example shouldn’t be limited to computers. We push a button, turn a knob, or type some keys to give a machine a prompt and it returns some form of feedback.
We still struggle to break free from this unidirectional mental model of technological device as a service tool. They have evolved beyond that. Responsive designs prompt us for feedback—about our browser, our screen size or device capabilities—and adapt accordingly. Two people going to Amazon.com will see different items on the page, because the site knows you and uses that information to decide what products you might like to buy. This is also responsive, but in a different sense. Architects are designing buildings that sense the movement of humans and respond by making spatial adjustments or adaptations to the lighting. Physical objects pull virtual data stored about us to make decisions about how to behave. Information stored on the web is approaching us through the objects we surround ourselves with. We are not just responding to technology any longer. Technology is responding to us. We are becoming networked into a larger system—nodes connected by synapses of data.
It’s ALIVE!
From our earliest childhood days, response has been the indicator of life. You poke something with a stick. If it moves, it’s alive. Popular science fiction has painted a picture where intelligent technology endeavors to become more human—an asymptotic quest through the uncanny valley. Meanwhile, it’s quietly permeating into our daily lives, not trying to be us or serve us but rather to respond to us. The devices that will emerge may provide us with multi-directional connections to each other and to other devices (here’s a must read: “The Coming Zombie Apocalypse” by Scott Jenson). Smart-cities will respond to the actions of their inhabitants, using people as real-time sensors to collect data. You’ll communicate with the physical spaces around you as you travel. These aren’t day dreams of the future, this is the emerging present. What this will mean for the future of the web is unclear, but one thing is certain: it will be full of possibility.
Regardless of what project you are working on next, take a few minutes to reflect on what you’re designing and how you’re making it. Are you looking forward to the future and accepting the unknowns, or are you clinging to deprecated conventions of the past?
Let today be the day we break the shackles of convention and try something new.
Related Post
- Design Beyond Device
Resources to learn more
- Future Friend.ly
- Ethan Marcotte: "Responsive Web Design"
- Luke Wroblewski: "Mobile First"
- Brad Frost: For a Future Friendly Web
