Responsive Web Design Isn't Just Mobile-First

There are countless blogs and books written about mobile-first responsive web design. Many of these books have really great ideas and strong logic behind this widely adopted web design philosophy. In the real world, however, this approach isn’t always as easy or as practical to implement as one might imagine.

Developing a website or brand from scratch is the ideal way to implement the mobile-first strategy. It gives us the ability to really think about what information is important to the end-user and build on top of it when needed. This, unfortunately, isn’t always the case. We’re in an age where websites are literally a way of life. Albeit, some of these websites are not always the greatest, but it is becoming increasingly rare to start a project completely from a blank slate.

Perhaps many of us don’t always think of ourselves as in the redesign business, but that’s usually exactly what we’re doing. Taking existing websites and brands to yet another level of web technology. Depending on the project and its stakeholders, how we actually move forward in these re-designs certainly doesn’t come without its own amount of red-tape.

Stakeholders have the innate ability to become consumed in the frivolous and minute details of how they perceive their project. It is after all their website... or is it? Envisioning how the website will impact their consumers across multiple devices (and the relationship between them) is usually of tertiary importance at best. This makes redesigning in a mobile mindset rather challenging, to say the least.

Progressive Enhancement or Graceful Degradation?


Why not both? Obviously the mobile-first concept is certainly the preferred progressive enhancement approach. However, redesigning complex websites and ensuring budgetary requirements are met sometimes also requires the skill of graceful degradation. So how do you accomplish mobile-first when a stakeholder’s knowledge of the concept may be limited? This is why I believe that there are actually use-cases for both.

Certain stylistic elements of a site are inherently structurally constant. The content inside them will rarely change or at least will follow expected markup output. These are things like headers, footers, sidebars, tabs, slideshows and other styling elements. Designing and theming these kinds of elements from a mobile-first approach is kind of automatic and doesn’t require a lot of input from stakeholders.

The elements should be accessible, legible and functional regardless of whatever width the site is being presented in. This is what probably gives you the 80% mobile approach that many people are so adamantly insisting on. However, there is more to a website than structure.

Websites also contain unique elements that don’t always conform to the rest of the site. Areas like the home page or other landing pages, navigational menus, click through actions (advertisements or many other things from a marketing department), user interactions (dashboards, shopping carts, faceted search) and also WYSIWYG content. These areas and elements are a little more unique/specific to a particular function of the website. Graceful degradation is probably a little more of a preferable solution here.

It is important to identify which components of your site should be designed with mobile in mind and which ones would be better suited for graceful degradation. Whatever methodology you determine the components of your website should be designed, ultimately this is simply specific to your workflow or project.

Responsive Web Design Isn’t Just Media Queries

Despite the various methodologies used for actually implementing a responsive website, there is also an inherent problem: CSS media queries is just a band-aid. CSS media queries currently only solves one logistical part of the multi-device website nightmare - the layout and design of the website. We need a better, all encompassing, solution to responsive web design for all technology stacks.

I like to think that “responsive web design” craze is kind of akin to the general public’s fascination with Twitter, Justin Bieber and the combination of the two. The human need for sharing every thought on the topic of a teenage heart-throb isn’t anything new, but the way we now do it has changed. Similarly, websites are also nothing new, but how or where we view them is.

Technology is literally increasing by the day and expectations are rising at an exponential rate. It’s now no longer suitable to only be able to access information over the air. That’s a given. We now want it tailored and streamlined in our everyday products. Whether it’s in a smart phone, smart TV, smart car, smart refrigerator or a smart ass... TV comedian persona.

This feverishly addictive demand of highly customizable content, for the first time, required websites on the internet to do some of the catching up. So we expanded media queries to include smarter detection of device meta information to accommodate this rapid evolution of technological devices. Ta ta ta da, responsive web design was born!

This birth of this relatively new age of web design is far from over though. In fact, it’s only beginning. There are tons of solutions (many are JavaScript based) roaming around the internet on how to solve other logistical issues like responsive images, lazy-loading, interchangeable content and other various components. However, it isn’t enough to just position elements around so they simply look better. We need to give the people who come to these websites the best user experience for that device and connection speed they came to us in.

We need better ways to reduce HTTP requests and bandwidth consumptions on smaller devices or slower connection speeds, natively in the browser. Who really wants to load unnecessary and extraneous data (HTML, CSS, JS, images or video) that is meant for being displayed on a desktop with a fiber connection? That’s what many “responsive designers” are doing, then hiding and repositioning it with CSS.

We all have a long road ahead of us, but hopefully soon we’ll all start seeing the bigger picture of what “responsive web design” really encompasses. Please share your thoughts below in the comments, I am always looking for new and exciting technologies to help this process along!

Photo credit: Device pile by adactio, on Flickr