2026-05-20 · en

What is responsive design and why it is mandatory in 2025

What is responsive design

Responsive design is the technique that allows a website to automatically adapt to the screen size on which it is being viewed. Whether on a 27-inch monitor, a tablet, or a phone, the content reorganises itself to provide the best possible experience.

This is not about creating different versions of the same site. It is about building one site that works well on any device, with a single code base.

The term was popularised by Ethan Marcotte in 2010. Since then, it has become an industry standard. In 2025, it is not a differentiator. It is a basic requirement.

How it works in practice

Responsive design relies on three main technical elements.

Fluid grids

Instead of defining fixed widths in pixels, the layout is built with percentages or relative units. A column that occupies 50 percent of the screen width on a monitor shifts to 100 percent on a phone, stacking content vertically.

Flexible images

Images resize automatically so they do not exceed the width of their container. A large image that fills half the screen on a desktop appears smaller but readable on a mobile device.

Media queries

These are instructions in the CSS code that apply different styles based on device characteristics. For example, increasing font size on small screens or hiding elements that take up unnecessary space.

Why it is mandatory in 2025

Mobile dominates global traffic

Over 60 percent of global web traffic comes from mobile devices. In some markets, such as Brazil and Portugal, this number is even higher. Ignoring these users means ignoring the majority of your potential audience.

Google requires it

Since 2015, Google has used mobile compatibility as a ranking factor. In 2020, it switched to mobile-first indexing. This means Google evaluates your site as if it were a mobile user. If the mobile experience is poor, your rankings suffer.

User experience

A website that is not responsive forces users to zoom, scroll horizontally, and deal with buttons too small to tap with a finger. The resulting frustration leads to page abandonment.

Conversion

Studies show that conversion rates on mobile devices are lower than on desktop when the site is not optimised for mobile. A well-implemented responsive design reduces this gap and maximises the return from every visit.

What a responsive site must guarantee

  • Text is readable without zooming.
  • Buttons and links are appropriately sized for touch.
  • The navigation menu adapts to small screens.
  • Images load optimally for each device.
  • Loading time is acceptable on mobile networks.

If your site fails on any of these points, you are losing visitors and customers.

---

Need a website that works well on every device? Lanoar builds responsive websites with modern technology, tailored for the Portuguese and European market.

FAQ

What is responsive design?

Responsive design is a web development approach that makes a website automatically adapt to any screen size: desktop, tablet, or phone. The layout reorganises itself according to the device width.

What is the difference between responsive and adaptive design?

Responsive design adjusts the layout fluidly and continuously to screen width. Adaptive design uses predefined fixed layouts for specific screen sizes. Responsive is more flexible and currently the most used approach.

Why is responsive design mandatory?

Google has used mobile compatibility as a ranking factor since 2015. Over 60 percent of global web traffic comes from mobile devices. A website that does not work well on phones loses visitors, sales, and Google rankings.

Does a responsive website cost more?

Developing a responsive website can cost between 10 and 30 percent more than a fixed layout site. However, this is less than maintaining separate desktop and mobile versions, and the return in traffic and conversion justifies the investment.

How can I tell if my website is responsive?

Open your site on a phone. If the content appears cut off, with very small text or horizontal scrolling, the site is not responsive. You can also use Google's mobile-friendly test, which analyses the site automatically.

Does responsive design affect SEO?

Yes. Google favours responsive websites in search results. A website that is not responsive is less likely to appear in top positions, especially for searches conducted on mobile devices.