Responsive and mobile-first design

Responsive web design, a term first coined by Ethan Marcotte, is about building a website in a way that adapts to whatever device or screen size it’s viewed on.

Take the BBC website. The site looks different if you view it on a laptop or a mobile device, despite the site serving up the same code. It's responds to screen size, appropriately serving up an optimal layout.

Before you start a redesign, dig into your analytics to see what devices people use to visit your site. On many of the projects we work on, more than half of visitors visit on a mobile device. Yet mobile is often treated as an afterthought. If the majority of your audience is using smaller screens, that should be front and centre in the design process.

Search engines reward mobile-friendly designs in search rankings.

The problem is that most websites are still designed desktop-first. That makes it much harder to create a good experience on mobile.

A mobile-first approach flips that thinking: start with the smallest screen (a mobile phone) and then scale up for tablets, laptops, and desktops.

Designing mobile-first means embracing constraints such as smaller screens, slow connections, and people on the move.

It forces you to focus on what matters: clear and well-structured content, simple navigation, and fast performance.

Once that's in place, you can enhance the design for larger screens by adding extra features, layouts, and imagery.

It’s much easier to scale a well-designed mobile site up than it is to shrink a desktop-heavy design down.