For a Future-Friendly Web
Issue № 346

For a Future-Friendly Web

It is time to move toward a future-friendly web. Our current device landscape is a plethora of desktops, laptops, netbooks, tablets, feature phones, smartphones, and more, but this is just the beginning. The rapid pace of technological change is accelerating, and our current processes, standards, and infrastructure are quickly reaching their breaking points. But while this era of ubiquitous connectivity creates new challenges, it also creates tremendous opportunities to reach people wherever they may be.

Article Continues Below

No one knows what the landscape will look like even just two years down the road, so it would be foolish to say that we can create anything that is truly future proof. But while there aren’t cut-and-dried prescriptive solutions for dealing with this increasing diversity, there are things we can do as web creators to better prepare for what’s in store.

We must acknowledge and embrace unpredictability to become more future friendly. We need to abandon comfortable assumptions that say disruption is temporary and that, given time, things will normalize. With more and more connected devices emerging every day, we’re entering an era of perpetual diversity and constant change. These facts require us to rethink the content we create and the contexts in which people interact with our products and services.

The rise of relevance#section2

People’s capacity for bullshit is rapidly diminishing. Americans on average get firehosed with over 34GB worth of content a day, so out of necessity they’re finding ways to reduce their exposure to noise. Automatic bill payments reduce the flow of junk that once clogged physical mailboxes. DVR, Netflix Instant, Ad Block Plus, and BitTorrent allow people to sidestep time slots, video advertising, and filler content. Tools like Instapaper, Readability, Safari Reader, and Flipboard offer readers an escape from the bombardment of social widgets, blogrolls, animated ads, and obnoxious overlays.

Mobile is also a huge catalyst in this rise of relevance. Most Americans sleep with their mobile phone, where it becomes the last thing they touch before they go to sleep and the first thing they reach for when they wake up. Because we have such an intimate relationship with our mobile devices, we expect them to be extensions of ourselves. We count on them to deliver only the content and utility we desire at precisely the instant we request it. There’s simply not enough time, bandwidth, or screen real estate to trouble ourselves with extraneous noise.

As web creators, we need to embrace these trends to create worthwhile experiences that respect users’ time, or risk getting tuned out.

Laser focus#section3

So how can we deal with increasing device diversity and decreasing attention spans? Perhaps the most significant thing we can do to become more future friendly is to focus. We must pinpoint what really matters to our users and our businesses.

Over the years, we’ve become the virtual equivalent of hoarders, tacking on content and features without stopping to clean house. As a result, sites and services have become obese and sluggish to adapt to this fast-moving landscape. Users bear the burden as they slog through slow page loads, awkwardly huge navigation, sidebar clutter, and a kitchen sink full of half-baked features.

To remedy these problems we need to analyze our content and establish strong content strategies to ensure our content is meaningful to our users and our businesses. Every product feature, every line of copy, every included script needs to have purpose and needs to be relevant to a growing number of contexts. We need to be ruthless in stripping away cruft to deliver strong, focused user experiences.

Former Ford and Chrysler CEO Lee Iacocca asked “Where is it working?” when determining which automotive features, products, and initiatives to stick with or scrap. We need to apply Mr. Iacocca’s test to our web products and services and ask “Where is it working?” when we consider content and functionality. Does this really enhance the user experience? How does this make good business sense?

Shedding dead weight frees us up to develop core features and content that users really want and that sets our products apart from the competition. And from a user perspective, focused sites and apps offer clarity, faster page loads, and streamlined user flows.

Users have very little patience and even less so on small mobile screens. Unless you focus your design, users will simply give up on your product before they even know what it can do. —Marcos Lara

If we want to be agile enough to keep up with all this change, we need to shed some weight. Focusing our experiences makes it easier for our content to go anywhere, which is important because it is going everywhere.

Content like water#section4

Whether we’re prepared or not, people are already interacting with our creations on devices that in many cases didn’t exist when we originally built them. This realization led mobile interaction designer Josh Clark to proclaim that we need to think of our content like water that can be poured into a multitude of containers.

Fighting a losing game#section5

In many ways organizations simply react to whatever gets thrown at them: new devices, browsers, native platforms, social media channels, and more. We’re starting to look like Lucy Ricardo on the assembly line, frantically trying to keep up with an increasing number of channels. Instead of chasing down the platforms du jour, we should recognize the fact that our content now needs to reach a lot more places and turn inward to invest in our content infrastructure. It’s an investment in the future.

The need for agnostic content#section6

Creating more fluid content requires migrating away from WYSIWYG-centric, word processor-emulating web publishing tools, and into systems that are more modular, platform-agnostic, and enriched with metadata. Better content management tools and robust APIs generate more portable data that’s better prepared for the future without being overly dependent on a specific technology.

Content portability ensures that the content can actually live and thrive in all platforms to which it gets distributed (even those that do not yet exist).  —Daniel Jacobson

NPR’s COPE (Create Once Publish Everywhere) system has become the poster child for next-generation content management systems because it separates content from presentation and as a result is able to reach a host of web, native, and display environments. While authors can still write markup, content gets stored by the CMS in a language-agnostic format. By avoiding storing “dirty” content (content that contains markup and presentation styles) and keeping everything modular, the content becomes more portable and can get served up in the format best suited for the particular context. Best of all, NPR doesn’t have to completely overhaul their system to account for whatever platforms are bound to emerge.

Striving toward clean, flexible data gives our products and services a better chance at being viable in the future, even if we find ourselves interacting with holograms and hover car dashboards ten years from now.

A progressive approach#section7

“Content like water” overflows into web experience design and construction. People are accessing the web on an increasingly diverse range of devices and the fact is capabilities, form factors, and resolutions are not going to normalize.

And while gizmos will get faster and more powerful over time, the decreasing cost factor of Moore’s Law is in full effect and a new Zombie Apocalypse of inexpensive, “good-enough” web-enabled devices is upon us.

Technology pros know about Moore’s Law but often forget a critical aspect: it’s not just about increasing power, it’s also about decreasing cost. —Scott Jenson

Because the barrier to entry is so low (free OS and dirt-cheap hardware) we’re seeing a proliferation of cheap connected devices. So while iPad 5 will certainly be more capable than iPad 2, we need to consider a huge diversity in capabilities: the good, the bad, and everything in between. Because behind all these screens are people—people who want to interact, explore, learn, and enjoy.

To deal with such diversity, we need to take progressive enhancement to the next level. Right now it’s common to detect for bleeding-edge features, but we need to take it further and apply progressive enhancement to things as basic as screen size, bandwidth, JavaScript support, and performance. By abandoning comfortable assumptions, thinking mobile first, and building up a core experience, we’re able to create a solid foundation that can support more platforms while optimizing for best of breed browsers and devices. While there are certainly situations where more focused experiences make more sense (Angry Birds on an old Blackberry just isn’t the same), progressive enhancement is a smart default that allows us to take advantage of the web’s ubiquity to reach more people.

Structured content#section8

It all starts with markup. Even the most heinous browsers can digest semantic markup. Authoring semantic HTML5 code opens doors to enhanced experiences (displaying the right virtual keyboard based on HTML5 input type is just a small example of what’s possible). Dealing with the inconsistencies of myriad devices reminds us that fundamental, clean, meaningful markup is one of the best ways to reach many platforms.

The device landscape is constantly changing. Capabilities are constantly changing. Properly structured content is portable to future platforms. —Stephen Hay

Style flexibly#section9

We’re finally realizing that the web isn’t a 960-pixel-wide box and are taking steps to return the web to its inherently fluid nature. Thankfully, responsive web design provides concrete techniques to accommodate multiple screen sizes while maintaining some level of control over layout and presentation. What’s perhaps more important, responsive design gives us a much-needed language with which to talk about designing beyond a single screen size and context.

Responsive web design isn’t a panacea for the diversity challenges we face (nor did it ever claim to be), but it’s an important step. We still have to tackle content hierarchy issues across contexts, source order, input methods, media, cross-context interface conventions, and much more.

Address context, exploit opportunities#section10

While flexible layouts are extremely important, mobile and other emerging platforms are so much more than different screen sizes. Each context provides its own unique opportunities and limitations which require careful consideration. Providing universal access to content is incredibly important, but that doesn’t mean we should only serve one-size-fits-all experiences to all users.

Understand user context#section11

Users are interacting with our creations in more ways, and user context can dramatically influence intent. We shouldn’t exclude content or functionality simply based on the user’s device, but we should be cognizant of the user’s context and use it as an opportunity to enhance and prioritize. Ask questions. How can a user on the go benefit from my service? Why would someone visit my site on their TV? How might a laptop user interact with my site differently than a tablet user? Asking these questions helps us establish priorities and avoid missed opportunities.

Take advantage of device capabilities#section12

Some of our current browsers support touch events, geolocation, or accelerometers, and hopefully browsers will soon have access to even more device APIs. All these features provide opportunities to enhance the user experience based on the device’s capabilities. For example, we tend to forget that mobile phones are communication tools capable of making phone calls and sending text messages. How can we use these features to better engage our audiences?

Today, certain devices can make phone calls, but perhaps tomorrow’s devices can tap into Kinect-esque gestural events, speech input, and even other yet-to-be-conceived capabilities. Our emerging multi-screen world provides exciting opportunities to interact among screens. Let’s tap into all these features and contexts to take the web to new and exciting places.

The future is ours to make… friendly#section13

Future-friendly thinking encompasses lots of ideas: web standards, content strategy, progressive enhancement, responsive design, and more. However, it’s far bigger than any one approach, technology or technique. It’s here to help us think beyond our current project scopes and help us prepare for a future filled with innovation and constant change.

As we enter the age of ubiquitous connectivity, the browser-based web finds itself in a very interesting place. One one hand, its long-term relevance is being challenged, but on the other hand, the browser is the one consistent feature across all of these connected devices. There is the very real risk that the browser-based web can’t keep up with the times, but there’s also a tremendous opportunity for the web to serve as the glue that holds this connected world together. It’s up to us to ensure the web’s long-term viability.

While the road ahead will be difficult, it’s 100% necessary. We’ll need to rethink our processes, tools, and systems, but most importantly we’ll need to communicate and collaborate like never before to address the myriad diversity challenges we will face. It’s an exciting opportunity to redefine what the web is and what it can do.

Let’s plan for the unknown and celebrate the ubiquity of the web. By crafting meaningful content and adaptive experiences, we’re better prepared for what lies ahead. The future is ours to make… friendly.

About the Author

Brad Frost

Brad Frost is a front-end designer, consultant and speaker located in beautiful Pittsburgh, PA. He is the creator of This Is Responsive, a collection of patterns, resources and news to help people create great responsive web experiences. He also created Mobile Web Best Practices, a resource site that lays out considerations for creating great mobile web experiences. He curates WTF Mobile Web, a site that teaches by example what not to do when working with the mobile web. He is passionate about the Web and is constantly tweeting, writing, and speaking about it.

16 Reader Comments

  1. Brad,

    In regards to device proliferation there was an article published yesterday on the BBC website regarding a new super microprocessor that

    bq. …will pave the way for the “internet of things” – the spread of the net to a wider range of devices.

    bq. It suggests that fridges and other white goods, medical equipment, energy meters, and home and office lighting will all benefit from the innovation

    We will live in a ultra-connected world where the web, if isn’t in our pocket, will be accessed on our fridges, radios and car dashboards.

    “http://www.bbc.co.uk/news/technology-17345934”:http://www.bbc.co.uk/news/technology-17345934

  2. Excellent article! There’s so much information in here I read it twice. And the graphic by Kevin Cornell is a real mind bender…

  3. I agree with your philosophy. I read this article using the Clearly Chrome extension, started writing this reply on the go using Evernote on my iPhone then finished in the ALA website.

    Very quickly, people are becoming platform agnostic. They don’t care what they use, or when they use it, they want to reach things ASAP and people are less dependent on the overly designed desktop web that has bloated in the last 10 years with the jump from 56k to widespread broadband. Your article makes me remember this article (http://www.smashingmagazine.com/2010/09/24/does-the-future-of-the-internet-have-room-for-web-designers/). As people are connected with small screens, large screens, e-ink devices, the design itself it becoming more and more irrelevant. This makes your point on future friendly content only more important.

    It’s been 5 years since the iPhone, and as you mentioned, in 5 more years, it could be an entirely new landscape. Content needs to be published with not only clean markup, but the content creators need to be more than ever concerned with composition and punctuation in their writing to ensure the content can be relevant outside it’s original published platform. In 5 years time it may be commonplace for a non-‘techie’ person to start reading a long-form NY Times article on their desktop at work, continue reading it on the subway then have a text-to-speech program read the rest aloud to them as they walk from the subway to their apartment.

    My point is, it’s about thinking beyond it’s original form factor. Semantic markup is necessary today for accessibility for visually impaired users, but even more stress must be put on this to make it future friendly for tomorrow’s widespread audience. The beauty of the web is it’s man’s most amazing content distribution platform ever created, we need to embrace that fact.

  4. Comfort of visitors – the main purpose of the website or any application.
    After all, one way or another users define,how useful, understandable and easy to use web-based resource is. The web design isn’t important if the visitor doesn’t find the necessary or interesting information.

  5. I am wondering with all the smart devices out there, and more on the horizon, if they can actually start to tell the web what kind of environment they are operating – so on the server side we can start delivering with some idea of context. It seems the heavy lifting is done from the site at the moment, and that’s if the site has a query or two setup – would it be better for the device to perhaps manage some of this and maybe push some context our? So rather than a Zombie Apocalypse of dumb connected devices we can actually have smart and intelligent devices and services having conversations with each other.

  6. “Americans on average get firehosed with over 34GB worth of content a day…”

    Brad, the USA is not the world. It’s not just yanks who put up with bullshit.

  7. @himedlooff

    > Any CMS recommendations that offer clean content storing?

    All major CMS do a pretty good job in that regard nowadays, eg Joomla, WordPress, or PHP-Nuke.

  8. @djfarrelly

    bq. I read this article using the Clearly Chrome extension, started writing this reply on the go using Evernote on my iPhone then finished in the ALA website.

    It’s quite amazing the routes we now take to consume, interact and share. Thanks for sharing your path; it really drives these points home.

    In “Thieves Are Your Best Customers in Waiting”:http://stuntbox.com/blog/2012/03/thieves-are-your-best-customers-in-waiting/ , David Sleight predicts that the companies that will rule the future are ones that give the user what they want on every device for a reasonable price.

    I think he’s spot on.

  9. @jezen thomas

    bq. Brad, the USA is not the world. It’s not just yanks who put up with bullshit.

    Everyone is definitely enduring bullshit. I only used “Americans” because the article was talking about the US. No doubt in my mind it’s happening elsewhere (unless you happen to live in an isolated house upon a mountain cut off from the outside world).

    Here’s to the death of bullshit!

  10. @timkaplor
    You’re absolutely right that we need better ways of determining context. This falls in line with the “Unknown Vessel: Identify”:http://futurefriend.ly/thinking.html#unknown-vessel section of Future Friendly thinking.

    There’s definitely been talk about using the server to serve up more contextually-aware experiences:
    “Adaptation: Why responsive design actually begins on the server”:http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server,
    “RESS, Server-Side Feature-Detection and the Evolution of Responsive Web Design”:http://www.dmolsen.com/mobile-in-higher-ed/2012/02/21/ress-and-the-evolution-of-responsive-web-design/
    “RESS: Responsive Design + Server Side Components”:http://www.lukew.com/ff/entry.asp?1392

    It’s becoming more of an issue, especially with things like the new iPad screen. As Jason Grigsby recently pointed out, Apple.com will unfortunately “serve up multiple images”:http://cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/ to users, mostly because there’s no way for the server to know that the device has a hi-res screen right out of the gate.

    In order for us to deal with this huge amount of diversity, we need to be able to fire on all cylinders. I think we’ve got a long way to go to get to what you’re describing, but at the same time we need to keep pushing to make more sense of it all.

  11. @himedlooff

    bq. Any CMS recommendations that offer clean content storing?

    This is a really good question, and I wish I had a short list of well-defined solutions to give you. I think that ultimately it comes down to using the tools in the right way and considering the right things when implementing a CMS.

    Keep your eyes on @karenmcgrane, @lyzadanger, and @jensimmons as they talk a lot about CMSes as they relate to future friendly thinking. In the meantime, I’ll see what I can do to find out more resources and insight.

  12. I think we (as an industry) need to embrace the “content like water” concept, and realize that content strategy, user experience, layout, design, and development are more tightly integrated than ever before. It is difficult for many to accept this loss of control – over how the page appears, and how the users are accessing the content and the pages.

    We need to be adaptable to whatever comes next, and willing to learn new ways of going through our process.

    Thanks Brad, for this insightful article, and the myriad of resources you put out there for the web industry.

  13. Thanks, Brad. The Create Once Publish Everywhere method only makes sense when dealing with vehicles like website, app, etc., but does this methodology work for things like parent company site to child company site? Would this result in redundant content?

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA

I am a creative.

A List Apart founder and web design OG Zeldman ponders the moments of inspiration, the hours of plodding, and the ultimate mystery at the heart of a creative career.
Career