When Ethan Marcotte wrote a piece about responsive web design in A List Apart on May 25, 2010, it changed how websites were built, forever. Web designers and developers across the world consumed his article voraciously. Design patterns were evolved. New standards were introduced such as the <picture> element. And as a result, website designers and developers now have a plethora of framework options to choose from. All of these frameworks make it easier to build responsive websites. Oh, and you must be familiar with the terms “Mobile First” and “Device Agnostic”. These emerged as part of the after-effect of the article Ethan wrote.

The Man Who Started It All

Ethan is an independent web designer who has worked with biggies like People Magazine, Sundance Film Festival, The Boston Globe and New York Magazine. He has a book on responsive web design which was not only a groundbreaking release but an encyclopedia-like source of information for anyone working on websites. He is not your average freelance web designer working from his home basement. Well, maybe he is working from his very fancy basement, but he is definitely not your average freelance web designer. He is a passionate professional who made an impact so vast that today, every responsive web design service out there depends massively on media queries.

He Talks About Media Query

“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. But how? Meet the media query.”

Why Media Query?

Because it helps the layout and other elements to adapt to the viewport size like clockwork. No one has to create a separate set of code or files. New websites are automatically responsive! This makes them equally enjoyable not only on desktops and mobile devices but a number of different devices with different screen sizes.

A Few Facts Predicted By Ethan

Within the next 3-5 years, mobile browsing is expected to outrun desktop browsing (Which has happened in 2014, 4 years after he predicted it). And it won’t stop there (it won’t. Stats say that it’ll continue to grow). 2 of the 3 major video game consoles already come with web browsers. Designing for T9 keypads, mice, touch interfaces and handheld game controllers is already a thing. That means we already have a variety of devices, input methods and browsers to cater to.

So the bottom line is…

Even though they are widely popular, media queries are not enough. While they allow us to mould the layout to suit different screen sizes, the more you work with them, you’ll realize how overrated they are.

Media queries are not the go-to solution for every situation you can face in your responsive web design service projects. They were not meant to be so either. As the line between desktop and mobile devices gets blurrier and blurrier every day (hybrid laptops, anyone?) maintaining the aesthetics, UX and performance of websites becomes more and more challenging. Add to that things like tables, ads and legacy and you have the recipe for utter chaos. And this is when you’ll see the not-so-great side of media queries.

So What To Do? What Exactly is the Future of Responsive Web Design?

Meet element queries.

Element queries work in a fashion that’s similar to media queries. But instead of browser viewport, they are governed by element size. This helps responsive web design service professionals create a true modular UI system with DRY-er code base.

With element queries, you don’t have to care about the viewport width. As long as the UI is 480 px or wider, you go ahead and show .avatar and the .bio side-by-side. And when the UI width is less than 480 px, stack the .avatar and the .bio and bring the content alignment to the center.

Media queries, flexible images and fluid grids are not enough if you want to deliver the best user experience possible. In the future, media queries and element queries can coexist to provide the best UX. But element queries need to evolve a lot more before they can be called a “web standard”. And designers have to have to an open mind to adapt to that evolution.

By the end of 2020, the number of mobile Internet users is likely to increase to another billion people. The evolution of element queries will lead to a complete reimagining of the way content is delivered. And the biggest challenge will be to figure out what content needs to be delivered to which user, on what device and at what time.