Adieu IE7, bonjour smartphones & tablets!

Microsoft has finally turned on silent upgrade for Internet Explorer. So, while IE8 will still be around for quite a while, IE6 and IE7 are doomed to disappear faster than expected. We can afford to progressively stop supporting legacy browsers and focus on mobile user experience instead.

Smartphones and tablets sales are literally taking off and overtook PC's in 2011. By 2015, tablets sales, only, will top personal computer's and smartphones will reach 1 billion units sold.

It's no news, the web goes mobile.

Adapt or die…

It would be foolish not to take in consideration the exponential rise of mobile browsing. We must now design and develop our web pages according to it.

Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else.

— Andy Clarke

But responsiveness is the tip of the iceberg as it solves only a layout issue.

As web designers we want to make sure that our web pages and applications work for as many people as possible and the challenge lies in the fact that we don't know who's going to access our web pages or how. When developing for the web, you need to keep in mind some unknown parameters like:

• Device used to access the content or interact with it.
• Browser with its capabilities.
• Bandwidth is the speed of the network connection.
• Disability can be visual, auditory, motor or cognitive.

Progressive enhancement is meant to face this challenge.

Progressive enhancement ensure that our web pages and their content will be seen and understood by all so no user are left away. It is applied to a project in a layered fashion way where each layer increases the level of interaction and therefore raises the user experience.

Content always first.

Because not all browser or user or device has the same capabilities, progressive enhancement focus on what is understood by everyone: the content.

A great content will always survive a shitty UI and will always be supported by the last high-tech device. Therefore it is extremely important to work — when we can — together with copy-writers, authors, redactors to produce a high quality and focused content.

Be semantic.

Picking appropriate HTML elements and attributes to wrap in our content is the best way to ensure readability and accessibility.

Some extensions of HTML even allow us to add meaning beyond the simple markup:

• Microdata and Microformats help search engines and other softwares better understand what information is contained in a web page and therefore providing a better SEO.
• ARIA adds semantics to HTML in order to make UI controls and dynamic content more accessible.

Do it with style.

The degree of support for CSS in modern browsers allow us to shape already great user experience with a minimum amount of code. What we could only build with Flash or JS is now possible in CSS reducing dependencies to its minimum. CSS has become a valuable friend when it comes to low-bandwidth browsing.

Add some magic.

With the ever growing web API, this layer is the most interactive one and is also, almost entirely, relying on JS.

Reach perfection.

Because capabilities differ from one browser to another, it can be somehow tricky to ensure backward compatibility. With progressive enhancement, we'll solve this issue simply by applying visual and interactive effects from bottom up.

Each user might not be experiencing the same but progressive enhancement ensures that all users will be served properly according to their own capabilities, those of their browser or their device.

Content always first. Bis.

Responsive design uses breakpoints to adjust the layout and we often peek arbitrary breakpoints which match the width of so famous devices.

Embrace the fluidity of the web. Design layouts and systems that can cope to whatever environment they may find themselves in. But the only way we can do any of this is to shed ways of thinking that have been shackles around our necks. They’re holding us back.

— Mark Boulton

We've been developing websites based on 960 pixels for ages and it seems hard to get rid of this bad habit. Devices shouldn't rule. Content should dictate the way our layout adapts.

Another valuable point will be that the future of screens is far too uncertain to design for one size or another. There's already more than 200 different kind of screen dimensions only for Android devices.

Mobile first

Feature phone browsers do not understand the technology on which responsive design is based. In order to make our websites accessible on those devices we need to start by developing for them, from the narrowest width to the widest.