The job was so much easier for web UI/UX designers about a decade ago, when screens had nearly standard dimensions, and everybody used either a desktop or a laptop computer. Nowadays, UI design is a lot more complicated with the proliferation of smartphones and tablets that have wildly diverse display sizes and dimensions. And, the fact that more people now browse the internet on these devices and favour mobile apps only exacerbates the situation.

Developers have to design web interfaces that fit and run indiscriminately on all these devices. Some developers and clients believe that a mobile-first design philosophy is the way to go — a mentality that seems to align with Google’s Mobile-First Indexing. Others prefer what most people call responsive or adaptive design — automatically scaling existing desktop interfaces depending on the user device, which coincidentally involves little effort.

Frankly, neither approach fully works.

The problem with responsive design

Responsive design means different things depending on who you ask, so let's not discredit the whole concept altogether. To us developers, it has a deep meaning. Generally, though, the term has lost its definition and become a cheap selling point for those who care little about what it entails.

Some automated tools and add-ons, for instance, promise smooth responsiveness once embedded in a webpage. But these tools — those that work at least — only focus on scaling content and text while completely disregarding the page’s user experience and functionality. Besides, modern browsers, advanced CMS, and most coding platforms, like Bootstrap, handle scaling quite easily unassisted.

The point is, you cannot just manage automatic resizing and call it a day — this barely scratches the surface of responsive design, from our perspective. An adaptive webpage must negotiate the different input schemes, layout architectures, navigation styles, interaction points, visual consistency, viewport efficiency, and general UX of various devices. In essence, responsive design starts from the ground up, deep in the core of the UI development process. Retrofitting any meaningful adaptivity to a rigid site will probably require an overhaul of the entire UI structure.

How we approach responsive design

Neither desktop-first nor mobile-first makes sense when designing a universally responsive site. Keep in mind that the canvas can be a mobile screen, desktop monitor, or anything in between. Basing the design on one end of the spectrum adds unnecessary limitations, and you end up with a site that looks and behaves splendidly on mobile but poorly on desktop, or vice versa. We approach UI design with equal appreciation for both desktop and mobile users.

Here is how we do it:

We embed responsiveness at the root of a website during the UI development stage. Adding responsiveness to stiff webpages takes a lot more than just resizing and rearranging content and elements to fit on different screens.

We carefully customize the properties of adaptive automation for each UI element in its base code and fundamental design.
In some cases, we completely replace or rebuild some of the features to meet acceptable responsiveness standards.

All that is needed to preserve and represent the website's functionality and user experience on every device. A genuinely responsive site must also retain its appeal despite constantly adjusting the UI.

Our responsive design approach avoids the misleading notion of designing websites for specific platforms and any lazy techniques based on generic auto-scaling. And yes, such a design process is long and painstaking, but we believe the results justify the means.

Responsive design is not dead, only misunderstood

The meaning of responsive design has indeed changed over the years, and there is a lot more to it than most people dare to admit — this is only an eye-opener to what web responsiveness entails. The amount of intricate work that goes into designing a responsive webpage largely depends on its content, features, and functionality. Surely, no generic tool can automatically program a page on the fly to adjust flawlessly to every device, at least not yet.

More good reads related to web design, UX, and UI.