How to check if my website is responsive

Responsive problems are often not about layout. When a visitor taps a field on a phone, the on-screen keyboard takes up a large part of the screen, and the page may not scroll the field into view. A sticky header can then sit over the field, and the submit button can end up under the keyboard. A narrow desktop window never brings up a keyboard, so the owner sees the form fit and submits it without trouble. Other faults are simpler: an image or table with a fixed width forces a sideways scroll, or a menu opens past the right edge where no one can reach it.

• Open each main page at phone width and try to scroll sideways. Any sideways scroll is a fault.
• Tap into every field on the form and check the submit button stays reachable with the keyboard up.
• Open the menu and check every item is on screen and can be tapped.
• Turn the phone sideways and check the header does not cover the form.

Resizing a desktop browser checks the layout. It shows whether columns stack, whether an image shrinks and whether the menu collapses. It does not bring up the on-screen keyboard, move the address bar as the page scrolls, or make your finger the pointer. Those three things cause many of the failures a visitor meets on a phone. Use the narrow window to find the layout faults quickly, then check the flow on a real phone, from the first tap to the final button, because a page can look right at every width and still fail once a finger is on it.

A field near the bottom of the screen is the first casualty. The keyboard rises, the page either scrolls the field into view or it does not, and a fixed header can cover the field whichever way it goes. Wrong: a header that stays at full height over the form, with a submit button at the bottom of a long page. Right: a header that shrinks or hides as the visitor scrolls, and a form that lifts the active field above the keyboard. Test every field on the form, in order, with the keyboard open, because the field that fails is rarely the first one you tap.

A table with many columns, a code block or an image set to a fixed pixel width can each be wider than the phone screen. The page then scrolls sideways, and the visitor has to drag to find the rest of the content. A menu can open off the right edge, leaving its last items unreachable. Open each page at phone width and try to scroll sideways, then open the menu and tap each item. A break that shows up on one page only usually comes from something added to that page, such as a table or an image with a fixed width. A break on every page points to the shared header or menu.

Responsive breaks usually come from content: a wide table, a long link or an image with a fixed width. They show up on the page that received the new content, and sometimes on the header or footer that every page shares. Rerun the phone visitors on the pages that changed and on the form path after each update. The comparison is the step where each visitor could no longer reach the next button.