Diseño web B2B
What Is a Responsive Website and Why Does Your Prospect Open It on a Phone?
Equipo Artisma
Agencia de Marketing B2B
On Tuesday, after a plant visit, the sales rep sends the purchasing manager at an auto parts manufacturer a WhatsApp message with the link to the page for the service they discussed. The manager opens it that afternoon on his phone, in an airport waiting area, and finds the desktop version forcibly shrunk: text that requires pinching the screen, a cut-off specifications table, a menu that does not open and a quote form where his finger always lands on the field next to the one he wants. In the same chat he has another supplier's link; that site fits the screen and lets him request a quote in a minute.
On Monday, when the committee puts together the shortlist, the manager proposes two suppliers. Nobody will tell the sales rep why his company was left out, and in the CRM the opportunity will remain marked as "in follow-up" for weeks. The service was good and the price competitive; the company lost the opportunity on a six-inch screen its website never accounted for.
A responsive website reorganizes its content so it reads and works well on any screen. It matters because your prospect often discovers your website on a phone, from a WhatsApp link, an email or LinkedIn.
Your prospect discovers your website on a phone and compares it later on the committee's computer
For years, B2B company websites were designed in front of a monitor, because it was assumed the buyer worked at a desk. That idea no longer describes the first contact well. The link your sales rep sends on WhatsApp, the email the manager reads between meetings, the LinkedIn post they check during a commute and the search they run from the plant floor almost always open on a phone. And in industry, many of the people who influence the purchase spend the workday away from a computer.
Earlier in this series we covered what the first screen of your home page should show when it opens on a phone. Here we widen the view to the whole website: what it means for a page to be responsive, how it works under the hood and at which specific points a website designed only for desktop lets the B2B buyer slip away.
The cross-device journey: the first visit decides whether there will be a second
A B2B purchase is rarely settled in a single visit. The buyer discovers the supplier on a phone, comes back days later on a computer to compare spec sheets and terms, and forwards the link to the people involved in the decision. That journey has one condition: the first visit has to earn the second. If your website looks broken, slow or unreadable on the phone, the prospect concludes that your company neglects details and never opens it on the computer, where it might have looked fine.
What a responsive page is and how it rearranges itself on each screen
A responsive page is a single page, with a single address and the same content, whose layout adapts to the width of the screen it opens on. On a computer it can show three columns of services side by side; on a phone, a single column read from top to bottom. The menu becomes a button that expands the options, images shrink without distorting and buttons grow large enough to tap with a thumb.
Fluid grids, flexible images and breakpoints: the mechanism that reorganizes content
Responsive design relies on three technical resources. Fluid grids define the width of each block in proportion to the screen instead of fixing it in pixels. Flexible images adjust to the available space and, when properly configured, let the phone download a lighter version. Breakpoints, written in the code as "media queries", indicate at what width the layout changes: when three columns become one or when a table switches format.
The viewport tag: the line of code that tells the phone how to display your page
One technical detail explains many shrunken websites like the one at the start of this article. When a page lacks the "viewport" tag, the phone's browser renders it as if the screen were as wide as a monitor and then shrinks it to fit. The result is a miniature desktop version, with tiny text and buttons that are impossible to tap. A single line of code prevents it, and its absence reveals that the website was never designed with the phone in mind.
Before responsive design, many companies solved the problem with a separate mobile version, such as m.yourcompany.com, with less content and its own maintenance. That model doubles the work and gets the information out of sync. Google recommends responsive design as the easiest pattern to implement and maintain, and it is the one we use on the websites we build.
Five points where a website that only shrinks lets the B2B buyer slip away
A website can rearrange itself on a phone and still fail at the tasks that matter to a B2B buyer. These are the points where we see the most losses.
Text that forces zooming
If the visitor has to pinch the screen to read, the page has already demanded an effort before convincing them of anything. Body text should be comfortable to read at the normal distance from the phone, with good contrast and paragraphs that have room to breathe. Blocks that look balanced on desktop become very long columns on a phone; breaking them up with subheadings helps the buyer find what they need while scrolling.
Specification tables that run off the screen
This is the problem most typical of industrial websites. A table with eight columns of dimensions, materials and capacities fits on a monitor, and on a phone it gets cut off or pushes the page sideways. The solutions depend on the content: turning each row into a card, allowing horizontal scrolling only within the table with the first column fixed, or showing the main columns with the full spec sheet available for download. Avoid letting the table disappear on the phone, because it contains exactly what the engineer was looking for.
Buttons and links smaller than a finger
On a touchscreen, the finger replaces the cursor and is far less precise. Apple's design guidelines call for touch targets of at least 44 by 44 points, and Google's, 48 by 48. When buttons are smaller or too close together, the visitor taps the wrong link, tries again and often gives up. On a phone, the contact number should also start a call with a single tap.
Quote forms designed for keyboard and mouse
On a phone, every extra form field weighs more. A well-adapted quote form shows one field per row with a visible label, opens the numeric keypad for the phone number and the keyboard with the @ sign for the email, lets the browser fill in data it already knows and allows attaching a drawing or a photo straight from the phone. Dropdowns with dozens of options and hard-to-read verification codes are usually the point where the request gets abandoned.
Floating elements that get in each other's way
The floating WhatsApp button, the cookie bar, the sticky header and the chat take up little space on a monitor. On a phone they can cover a quarter of the screen and hide the form's submit button. Check how they coexist on every page, beyond the home page.
Google evaluates your website through the eyes of a phone
The phone also decides how people find you. Google crawls and indexes websites mainly through their mobile version, a practice it calls "mobile first" indexing. If you removed text, tables or links from the phone version when adapting your website, that information loses weight with the search engine even if it is still visible on the computer. Content can be reorganized into tabs or expandable sections, as long as it is present in both versions.
Visual stability and tap response: two metrics measured on the phone
Besides the loading time of the first screen, Google measures two experience signals closely tied to responsive work. Cumulative Layout Shift records how much elements move while the page loads, like the button that drops just as the visitor was about to tap it, and considers a result of 0.1 or less good. Interaction to Next Paint measures how long the page takes to respond to a tap and considers a result of 200 milliseconds or less good.
How to check whether your website works on your buyer's phone
To verify it, all it takes is for someone on your team to spend a morning going through the website the way a prospect would:
Send yourself the link to a service page on WhatsApp and open it from the chat, because that is how many of your sales links arrive.
Go through three pages besides the home page on your phone: a service or product page, a spec sheet with a specifications table and the contact page.
Fill out and submit the quote form from the phone, with a file attached, and confirm that the request arrives complete.
Repeat the test on an Android phone and on an iPhone, and rotate the screen to landscape.
Compare visits and quote requests by device type in Google Analytics.
If the phone brings in a good share of your visits and almost no requests, review the mobile version before attributing the difference to the type of visitor.
At Artisma, all our plans include a prototype you review before paying, the page tested on phone, tablet and desktop, a WhatsApp button, click-to-call and a Lighthouse speed report with a score of 90 or higher. On our website you can analyze your web page in less than 30 seconds and see the score for its speed and its mobile experience.
Frequently Asked Questions
Do I need an app or a separate mobile version to serve my customers on their phones?
To present your company and receive quote requests, a responsive website covers the need with a single maintenance effort. An app is justified when your customers repeat operations frequently, such as checking orders or tracking shipments.
Can my current website be made responsive, or does it have to be rebuilt?
It depends on how it was built. If it uses a recent platform or template, adjusting styles, tables and forms is often enough. If it was built with fixed widths or older technology, adapting it can cost almost as much as redesigning it, and a redesign also lets you fix the structure and the messaging.
Does responsive mean the website looks identical on a phone and on a computer?
It means the content is the same and the layout changes according to the screen: columns stack, the menu becomes more compact and some images change proportions. The information, the hierarchy of the messages and the ease of taking the next step stay the same.
If your sales reps share links on WhatsApp every day and nobody at your company has filled out the quote form from a phone, your website could be losing opportunities you will never see in the CRM. Analyze your web page at https://www.artismamkt.com and we will show you how it behaves on your prospect's phone and which pages to fix first.