In the early 2000s, responsive design was revolutionary. The driving thought was that websites should adapt according to the environment in which they were being used, like the browser, device and viewport (screen size).

In a traditional responsive design, breakpoints are used to adjust layout transitions, but many elements still rely on predefined structures that may not be fully fluid. While modern CSS techniques such as flexbox and grid allow for more flexibility, many responsive designs still depend on fixed breakpoints for major layout changes.

However, poorly implemented responsive design can lead to code bloat and performance issues, especially when excessive breakpoints and redundant CSS rules are used.

Today's challenge is that screens are no longer standard. We must accommodate ever-changing mobile screens to large desktop monitors and we can’t predict what’s coming next as personal devices get smaller and display screens get larger.

Designing well for all viewing experiences without compromising performance and the user experience is challenging because of the way we code responsive websites.

Coded breakpoints prompt a website to change the layout when it reaches a specific size. 

To see this in action, slowly move your browser from the widest size to the smallest you will see the layout jump at key stages. These are the breakpoints.

Each custom breakpoint adds more code to a website. If you consider the number of viewports we have today, a website can very quickly develop code bloat (too much unnecessary code), which reduces load times and increases memory usage and processing power.

Intrinsic designs need significantly fewer breakpoints, meaning they are more code-efficient and adapt smoothly to viewports.

With this design approach, we view websites as a series of fluid components that together make the whole. Instead of the breakpoints dictating when the layout changes, each component has its own rules that tell it how to behave according to the available space. They can be fixed or fluid.

This allows designers to create a single flexible layout that works on all devices rather than designing separate layouts for every breakpoint. This method allows for more nuanced and fine-tuned adjustments and creates a more natural and adaptable design.

For example, a responsive website needs multiple image sizes for the different breakpoints. Intrinsic design allows images and media to scale naturally with available space, reducing the reliance on predefined breakpoints and minimising unnecessary image requests. When combined with modern image optimisation techniques, this approach ensures better performance across all devices.

It also enhances typography adaptability, ensuring text scales naturally with available space rather than being constrained by fixed sizes or breakpoints. Instead of setting specific font sizes for phones, tablets, and desktops, the text smoothly scales up or down based on the space available. This means better readability, a more polished look, and a consistent experience across all devices—without the need for complex adjustments.

What’s great about intrinsic design is that it allows us to think outside conventional restraints and to take a content-first rather than container-led approach to design.

Our clients benefit from a more efficient code base, which doesn’t use more processing power than needed and reduces the website’s environmental impact. When combined with a design system, an intrinsic website is also easier and more cost-effective to manage

A design system is a codified library of visual design and code wrapped in governance that determines ownership and operational practices. This system is ideally suited to intrinsic websites.

With a design system, designers and coders draw from an agreed library of components. Any changes to the approved library go through a sign-off procedure before being transferred into code and added to the website.

A well-governed design system provides the framework for website design and build, meaning changes can be deployed faster and for less money.

Our design system is intrinsic and provides the foundations on which we build branded website experiences for our clients. We believe an intrinsic design system is superior to responsive and will become the dominant website design and build approach.