Most free CSS templates claim to be responsive. That means the layout should adapt to the size of the screen it is viewed on. In practice, some do this well and some only partly. A few quick checks and fixes can make a big difference to how your site feels on a phone.
This matters for visitors and for search. Google uses the mobile version of a site’s content for indexing and ranking, which it calls mobile first indexing. So a template that works poorly on phones is worth fixing early. This guide covers what to look for and what to change.
Why responsive design is the safe choice
Google’s guidance mentions three ways to serve a site to mobile users. These are responsive design, dynamic serving and separate mobile URLs. Google recommends responsive web design because it is the easiest design pattern to implement and maintain. A responsive template uses one set of HTML for every device, and the CSS changes how it is laid out.
Our guide to mobile SEO factors looks at the wider search side of this. For template users, the main point is simple. Pick a template that is responsive from the start. Reworking a fixed width layout for phones is slow work.
Check the viewport tag first
Open the main HTML file and look in the head section for a meta tag named viewport. It controls how the page is sized on mobile browsers. W3C notes that desktop browsers ignore the viewport meta element. That means its effect is on phones and other mobile devices.
Also check that the tag does not block zooming. W3C accessibility test rules flag a viewport tag that turns user scaling off. They also flag a maximum scale value below 2, because it stops people zooming to 200 per cent. W3C notes that most modern mobile browsers ignore these limits or offer a setting to allow zoom, but it is still better to leave zoom switched on.
Make sure content reflows
The Web Content Accessibility Guidelines include a success criterion called Reflow at Level AA. It asks that content can be shown without loss of information or functionality at a width equal to 320 CSS pixels. The aim is to avoid scrolling in two directions to read content. W3C explains that this back and forth scrolling makes people lose their place and adds effort.
You can test this on a desktop computer. W3C notes that 320 CSS pixels matches a window 1280 CSS pixels wide zoomed to 400 per cent. Set your browser to that zoom and scroll down the page. If you have to scroll sideways to read paragraphs, the template needs work.
Some content is allowed an exception. W3C lists maps, diagrams, data tables, video and games among the things that may need a layout in both directions. Headings, search fields and other content around them should still reflow. Our post on accessible web design principles covers other ways to make a site easier to use.
Common fixes in the template CSS
Many layout problems on phones can be fixed with a handful of CSS tools. The W3C techniques listed for reflow point to the same ones again and again. They include media queries, CSS grid, flexbox and width limits on images. Here are the fixes worth trying first.
- Media queries that apply different CSS rules once the screen is narrower than a set width.
- CSS grid or flexbox, so columns can stack into a single column on small screens.
- A maximum width on images, so pictures shrink to fit their container instead of spilling out.
- Rules for long web addresses and strings of text, so they wrap rather than stretch the page.
- Media queries that stop sticky headers and footers taking up too much of a small screen.
Find where the template sets fixed widths in pixels and see whether a percentage or maximum width would work instead. Change one rule at a time and refresh the page on your phone. Keep a copy of the original CSS so you can roll back. Small careful edits are easier to track than a big rewrite.
Keep the same content on mobile and desktop
Some templates hide whole sections on small screens to make the layout fit. Google advises that your mobile site should contain the same content as your desktop site. Tabs and accordions are fine, as long as the content itself stays the same. Google also says not to lazy load primary content only when someone swipes, clicks or types, because its crawler will not do those things.
The same thinking applies to page titles and meta descriptions. Google suggests keeping them equivalent on both versions. Images should be high quality rather than small or low resolution, and in a supported format. Google also asks for the same alt text on images across mobile and desktop.
Test on real devices
Browser tools are useful, but nothing beats a real phone in your hand. Tap every menu item and button with your thumb. Check that text is easy to read without zooming and that links are not crammed too close together. Try the site held upright and turned on its side.
If the template still fights you, it may be time to look at other options. A drag and drop WordPress theme handles a lot of the responsive layout for you, at the cost of some control. Whatever you choose, keep the core web design principles for a new site in mind. A clean layout that reads well on a phone will serve visitors far better than a clever one that does not.
Frequently asked questions
How can I tell if a free CSS template is responsive?
Open the demo page and make your browser window narrower. A responsive layout will rearrange columns, menus and images as the width shrinks. Then open the same page on your phone. If you need to scroll sideways to read text, the template is not handling small screens well.
What is the viewport meta tag?
It is a line in the head of the HTML that controls how the page is sized on mobile browsers. W3C notes that desktop browsers ignore it. It should not include settings that stop people zooming. Most current templates include it already.
Should I hide content on mobile to keep things tidy?
Google advises against it. Its guidance says your mobile site should contain the same content as your desktop site. You can use tabs or accordions to keep the page compact. The content inside them should still match the desktop version.
Is 320 pixels the width I should test at?
It is a useful test width. The WCAG Reflow criterion uses 320 CSS pixels as its benchmark for content that scrolls down the page. Checking at that width is a good way to catch layout problems early.