Time for Responsive Web Design

Mario is a Digital Media Designer at Graphic Mint.

Almost 3 years have passed since Ethan Marcotte coined the term Responsive Web Design (RWD) in 2010. He defined it as an approach to web design when a site is crafted to provide an optimal viewing experience—easier reading and simplified navigation with minimal resizing, panning, and scrolling—across a wide range of devices.  So, how has this approach to design fared so far?

Wireframes-Laptop-Tablet-Smartphone

Just 30 years ago, almost every piece of written content was delivered in printed form. Newspapers, books, posters, etc. all shared and followed the same basic design elements: rigid grid, static images and almost zero input from the reader. The internet revolution arrived a decade later, and information sources started slowly but steadily moving to the screen format. Designers could now add a little bit more interactivity to their design, or add new elements like videos and sounds. However, the mentality of designing everything in a rigid grid was still very fixed in the designer’s mind. Most people accesed websites through desktop or laptop computers, which more or less would have the same screen resolution, so the rigid structure continued it’s reign.

Flexibility of Formats

The term ‘Responsive Web Design’ first appeared in Ethan Marcotte’s mind. Taking already existing technologies, like fluid grids, flexible images and media queries, Ethan united them all under a single umbrella, creating a new paradigm in web design. Flexibility was finally part of web design’s basic characteristics.

Responsive web design is based on three main elements: fluid grids, flexible images and media queries. All these ingredients enable us to improve the presentation of the content on very different viewing contexts, without having to focus on a specific device. In case you are wondering, a media query is a CSS3 that makes it possible to the designer to adapt the rendering of the webpages to different resolutions ranging from a small smartphone to the largest desktop screen.

Problems So Far

When browsing websites that feature a mobile version or a responsive design layout from your smartphone, occasionally users have the option of switching to the desktop version of the site. But, why switch to the default (desktop) version of a site when the customised mobile design version should work better on your mobile, right?

It seems some people are used to visting their favourite website on a desktop / laptop computer – say a newspaper or movie theater site, and already know where the main navigation and the location of each service or feature is. When they visit the same site on a mobile device they encounter a very different layout (one column instead of the usual two, three, or whatever) and cause some confusion, frustration or may decide to stop browsing immediately and jump on the laptop instead.

This has been such an important issue that some developers have decided to add a “Turn off Responsive Design” option on their sites for people that prefer the desktop version, even if they have to manually zoom in into the different parts of the sites. The thing is, with Responsive Web Design there shouldn’t be a “Desktop Version” of the site, but instead these various experiences need to be isolated, researched and designed to meet the needs of the users depending on the context of when and how they’re being used.. How to tackle this problem?

Problems don’t come just from a viewport, platform, or resolution aspects of the design but more importantly from the interface itself.  Microsoft latest OS, Windows 8, has been critisized as being great to use with touchscreen devices but not so much for mouse and keyboard, which negatively impacts a large portion of users.

We need to think of this digital explosion, which we begun to cover in a previous blog post, not just as a general bomb that explodes and quickly fades away, but rather as the Big Bang: a continuous process that keeps growing, evolving and creating new and exciting things in the process. Many obstacles will come but many ways to fix them or avoid them will also come.