What is a responsive website and why do you need one?

A responsive website changes its layout to fit the screen it's viewed on. The pages, the content and the address stay the same on a phone, a tablet and a desktop. Three columns side by side on a desktop, for example, become a single column you scroll through on a phone. Your visitors can read every page on their phone without zooming in. That matters to them, and it's generally in line with what Google's ranking systems look to reward.

What responsive means for a website

For a website, responsive means the browser arranges each page to fit the space it has on the screen. Google defines responsive design the same way: the same code on the same address, displayed differently depending on the screen size.

The older alternative is a separate mobile site at its own web address, such as m.marlowtonbakery.co.uk. That site serves different code, so every page has a mobile copy to build and maintain. The copy can also end up with less content than the desktop page. With a responsive site, there's one version of each page to update.

How responsive web design works

Responsive website design is a way of building pages rather than a single feature you switch on. Four parts work together to make a page fit the screen.

• The viewport setting. A short line in the page's code tells a phone's browser to use the width of the screen. Without it, mobile browsers lay the page out at a desktop width and scale it down, so visitors have to zoom in to read.
• A flexible layout. Columns and boxes are sized as proportions of the screen rather than fixed widths. They grow and shrink with the screen instead of running off the edge.
• Flexible images and video. Pictures shrink to fit the space they're in, so nothing pushes the page wider than the screen. Choosing images that still work at a small size helps, and if you embed videos, check that they resize with the page.
• Media queries. These are rules in the site's style sheet, the file that sets how its pages look. They apply a different layout when the screen is wider than a certain size, which is how the three desktop columns become one on a phone.

Designing for mobile screen sizes before desktop ones is called mobile-first design. You plan each page for a small screen first, then add columns as the screen gets wider. With a website builder or a ready-made theme, you don't write any of this code yourself. It's still worth deciding what a visitor should see first on a phone.

Why you need a mobile responsive website

On a site that isn't responsive, your visitors may have to pinch, zoom and scroll sideways on their phone. That can be what it takes just to read a paragraph or tap a button.

It matters for search too, because Google looks at your pages as a phone shows them when it indexes and ranks them. Google calls this mobile-first indexing. Google recommends responsive design over the other ways to build a site for phones, because it's the easiest to set up and maintain.

On a small screen, you can tuck text into tabs or accordions, but your pages still need the same content as on a desktop. If the phone layout leaves content out, you can expect to lose some search traffic, because that layout is what Google indexes.

What a responsive site needs to work well on a phone

A layout that fits the screen doesn't yet make your site easy to use on a phone. Good website design for a small screen also gets these four things right.

• Keep a short navigation menu with a handful of clear links, rather than a long menu with several levels.
• Keep your text large enough to read comfortably on a small screen.
• Give buttons and links enough space around them, so a finger doesn't hit the one next to them.
• Put what your visitors came for at the top, such as your services, prices or contact details.

How to check if your website is responsive

The quickest check is to open your website on your own phone and go through it as a visitor would. Look for any page that's hard to read or wider than the screen.

To try other screen sizes on a computer, open DevTools, the developer tools built into Chrome. Its Toggle device toolbar button then shows your page at the size of a phone or tablet you pick.

If a page fails, you don't have to fix the code by hand. The routes below also work for a site you already have. You can rebuild it with a website builder or have it rebuilt for you. A WordPress site can also move to a theme that works on a phone. The new theme changes how your site looks, while your pages and posts stay in WordPress.

How to make a responsive website

If you know HTML and CSS, you can build the four parts above yourself. If you don't, there are three ways to get a responsive website without writing code.

Build it yourself without code

With our Aida AI Website Builder, you describe your business in a chat and Aida builds the website. You can still change it yourself before you publish. In the editor, you can switch between desktop, tablet and mobile view to see how each page looks before it goes live.

Build it with WordPress

With WordPress, you can install one of thousands of WordPress themes and add features with plugins. A theme sets how your site looks. A plugin is an extra piece of software that gives your site a feature it doesn't have yet, such as a contact form. Pick a theme that works on a phone: before you install one, open its demo on your phone and check it against the points above. You can install WordPress and set it up yourself. Or you can create a WordPress website with Aida AI Website Builder for WordPress, which creates the site from a description of your business.

Have it built for you

With Create It For Me, our website design service, we build the site for you, so you can spend your time on the business instead. We make it work on phones, tablets and desktops, and you can still make changes yourself later.

Which route should you take?

The right route depends on how much of the work you want to do yourself. If you don't code and want your site online soon, choose our Aida AI Website Builder. You can build and manage the site without any coding or design experience. Choose WordPress, with a theme that works on a phone, if you want to add features with plugins. Keep in mind that you usually update WordPress, your theme and your plugins yourself. If you have no time to build anything, choose Create It For Me and we build the site for you.

If your site failed the phone check, or you don't have one yet, build your website with our Aida AI Website Builder. Then open every page on your own phone before you share the address.

Tell Aida about your business, and Aida builds your website. You change what you like and publish when you're happy.