Our blog

We often like to look back at points which caused paradigm shifts in our practise. The introduction of responsive design by Ethan Marcotte was one of the big ones.

We’d long known that the web was about embracing flexibility and about a dynamic, infinite canvas rather than fixed paper sizes. There were a fair share of designers practising this too by designing fluid, scalable websites. To the mainstream however, embracing flexibility meant little beyond supporting a few different browsers and two different screen resolutions.

That was then. It’d been three years since the iPhone’s release. Tablets had made their debut, but smartphones were about to reach critical mass. Diversity in the shape, size and form factor of devices accessing the web was now a ripe reality. And Ethan struck on hot metal with the idea to ​“design for an optimal viewing experience” by querying for and adapting to the user’s environment.

While responsive design might’ve initially arrived as a primer on using media queries, it feels more like a philosophy than a specific technique. The philosophy being, to recognise and build for web design’s known unknowns, to secede certain control to the user, meet them in their environment of choice rather than dictate one particular context on to them via your design choices.

The responsive web design philosophy fits so well with the principles of the web that it is now as ingrained in our processes as using CSS instead of <table>s for layout.

There are known knowns. These are things we know that we know. There are known unknowns. That is to say, there are things that we know we don’t know. But there are also unknown unknowns. There are things we don’t know we don’t know.

— Donald Rumsfeld

Earlier this year, in the month of February, I attended Meta Refresh in Bangalore where I emphasised the importance of progressive enhancement through a workshop and a talk at the conference. It is quite unfortunate that many web designers and developers continue to carry forth the old approach of designing websites for a known system configuration. Only later do they test their websites on alternate browsers / devices and patch issues that are detected. This practise is known as graceful degradation.

This site is best viewed in IE6, 800×600.

About a decade back there was very little variation in hardware and software and one could have got away with making assumptions about client systems – though that doesn’t really justify this practice even at that time. Over the years, the devices (and software) connected to the web have come a long way. New waves have swept across the ecosystem – frequently and unpredictably – bringing in newer hardware, device capabilities, screens, browsers and other software. Today it is hard to keep up with the speed at which things are changing. We don’t know what will storm the ecosystem next but something surely will. Assumptions about a system configuration, today, are far from safe.

At a time when technology is changing faster than what we can keep up with, it’s worth noting that the fundamental principles of the web have remained unchanged since its inception about 25 years ago. These principles have stood the test of time and can perhaps be described as strictly liberal. In many ways they have been responsible for letting the web evolve and improve over time without any major impediments. Even today the very first website on the internet works flawlessly across all standards compliant web browsers on every device.

Perhaps ironically the more backwards compatible your web site is, the more future friendly it is. #ffly

— Luke Wroblewski (@lukew) December 29, 2011

The onus of embracing these principles lies on us. If we look closely, there are only a handful of knowns in a traditional web communication — the presence of a client and a server that talk over HTTP, and the fact that client is running a web browser that will understand a hypertext document. Everything else is either a known unknown or an unknown unknown.

Progressive enhancement is a fundamentally opposite approach to the widely adopted method of graceful degradation. It was introduced in the year 2003, by Steve Champeon and Nick Finck in a talk titled Inclusive Web Design for the Future. In short, start with healthy markup, add the styles around it, and finally layer the interactivity around it. How does that help? The outer layers do not interfere with the inner ones, and therefore basic systems can access the content in the markup layer and deliver a base experience to the user. More powerful systems can further take advantage of the outer layers to enhance the user experience. No one’s excluded.

The idea of starting with the most basic system was expectedly rebutted by many in the audience. After all, hardly anyone uses a vanilla HTML browser today. Pretty much everyone has the bells and whistles of CSS and JavaScript. But as the Principle of Least Power suggests, the less powerful a language the more widely it can be adopted. And further, if I may add, less powerful languages have low chances of failure. The fact that a system can continue working even if one of the technology fails is a huge benefit derived from adopting progressive enhancement. Christian Heilmann’s elevator vs escalator analogy perhaps best exposes the elephant in the room.

Progressive enhancement is more about dealing with technology failing than technology not being supported. And you can quote me on that.

— Andy Hume (@andyhume) June 3, 2013

Last year, all of a sudden, there was a revival of the progressive enhancement debate on the internet. Since then, it’s been regularly discussed at many reputed conferences around the world. Having to defend the values of the web (such as inclusiveness) 25 years after we began this journey by letting go of control, and becoming flexible is a tad disheartening. I wish the community rests this debate and upholds the spirit of the web. This talk is an effort to urge everyone to do just that.

We had a great time attending and speaking at Meta Refresh last year. Souvik has been given another opportunity and will be presenting once again at HasGeek’s annual web design conference. This year he is conducting a workshop that will revisit the spirit of the web to demonstrate what makes the web special, and show how to embrace the principle of progressive enhancement to build robust websites.

Here’s a short introduction:

If you design or build for the web, you should definitely try and attend. Come to the workshop and learn why and how to adopt this foundational philosophy of developing for the web, or participate in some of the other great workshops and talks on the roster. The most compelling reason to attend though is the chance to meet fellow peers in person — a rare privilege for us digital workers.

Meta Refresh 2014 takes place from the 11^th to 15^th of February. Souvik’s workshop is on the 13^th (Thursday) at The Energy And Research Institute (TERI) in Bangalore, and tickets are still on sale.

Designers think about the fine details of stuff, so that users don’t have to worry about them.

— Adapted from The Genius of Design: Ghosts in the Machine

Creators — be it designers or business owners — build tools that make it simpler for people to do a job. Every tool has two sides: one that does the job, and another that exposes an interface to users. It is our responsibility to maintain a gap between the two so that users are not hassled by the complexities involved in the task.

At Meta Refresh 2013, I gave a talk to highlight the problem of unnecessarily exposing implementation details to users. Little details that are easily overlooked while worrying about the larger scheme of things, e.g. URLs, button labels, error messages, etc. Sometimes we build a solution that simply passes on the problem to users.

We’re not just fairly competent at designing systems but also extremely competent at using them. Clearly we differ from our users. This often limits our ability to recognise goof ups. We need to constantly question the effectiveness of our decisions to ensure that our designs are meaningful for users.