Responsive web design
Responsive web design means a website automatically adapts to any screen size — from smartphone to tablet to large monitor — without content being cut off or users having to zoom.
Layouts, images, font sizes and navigation rearrange depending on the screen. Today design is usually “mobile first”: first for the smartphone, then for larger screens.
Google mostly evaluates websites based on their mobile version. A site that works poorly on phones therefore loses both visitors and visibility.
Besides layout, small screens also need sufficiently large tap targets, short loading times and forms that are easy to fill in with a thumb.
What to look out for
- Design for the smartphone first, then extend to larger screens.
- Test on real devices, not just in a shrunken browser window.
- Make tap targets large enough and well spaced.
- Deliver images in the right size for each screen.
- Prepare tables and wide content so the page does not scroll sideways.
Common mistakes
- The desktop page is simply scaled down — text and buttons are too small on phones.
- Important content is hidden on mobile.
- Pop-ups and banners cover the content on small screens.
Frequently asked questions
It is a start but does not guarantee good mobile usability. What matters is whether content, forms and loading times really work on a smartphone — only a test on real devices shows that.
Click through it on several real smartphones: is everything legible, are buttons easy to hit, can the form be filled in comfortably, does the page load quickly? PageSpeed Insights and Search Console help additionally.