What a modern, responsive business website looks like

A modern, responsive business website is usually described by what you can see: white space, smooth animation, big photographs. Those are consequences, not causes. What makes a site still look modern in four years, rather than only in the month it launched, comes down to decisions you cannot see: where the design starts from, how the typography is built, whether there is a system behind it or just a series of separately drawn pages.

This article explains those decisions. At the end you get the list of seven signs by which a visitor knows, without knowing why, that a site is old — plus the uncomfortable part: what a modern site that brings in no enquiries at all looks like.

Modern does not mean fashionable
Mobile-first, concretely
What it means for a site to be responsive
Typography: measure, scale, diacritics
The 7 signs a site looks dated
A design system or a template
Motion in moderation
Colour as a system, not a preference
The four thresholds that matter
The menu: where most people get lost
Modern design that does not convert

Modern does not mean fashionable

Design trends have a life of two or three years. A site built to tick the trend of its launch year looks dated exactly when it starts to have paid for itself.

What does not go out of fashion: a clear hierarchy, good contrast, sufficient space, legible typography, speed. A site that respects those will still look reasonable in five years. One built on a passing visual effect ages with the effect.

The lifespan test

Before approving a mockup, ask: if I remove the animation, the gradient and the background photograph, does the page still work? If the answer is no, the design rests on decoration rather than structure.

Mobile-first, concretely

“Mobile-first” does not mean “it works on a phone too”. It means the design starts at 375 pixels wide and grows from there.

Why the order matters

When you draw the desktop version first, you have room for everything: four columns, a wide menu, a big image next to the text. Then all of that has to be squeezed into one column — and you end up hiding things, because they do not fit.

When you start from the phone, you are forced from the outset to establish what is essential. What survives the narrow version is what genuinely matters. The wide version adds comfort, not new content.

What the data shows

On this site, over the last two months of measurement, mobile traffic produced three times as many clicks as desktop, on a lower volume of impressions (0.35% against 0.11%). It is not an isolated case: for services companies in Romania, the phone is the device of decision.

The practical consequence: every page is validated on a phone first, one-handed. If the contact button is not within reach, the design is not finished, however good it looks on a monitor.

What it means for a site to be responsive

A responsive site reorganises its content according to the width of the screen: columns stack, the menu transforms, images resize, and the text size stays legible without zooming. It is not a separate version for phones, but the same content arranged differently. The simple test: if you have to pinch to read or scroll sideways, the site is not responsive.

The three basic mistakes

Horizontal scrolling. An element wider than the screen — usually a table or an image — forces the page to move sideways. Tables have to scroll inside their own container, not move the page.
Touch targets too small. A button under roughly 44×44 pixels is hard to hit with a thumb. Links in text, placed too close together, cause the same problem.
Text too small. Below 16 pixels, some mobile browsers automatically zoom the page when a field is focused. The result is a visual jump that looks like an error.

Typography: measure, scale, diacritics

Typography accounts for 90% of the impression of being “well made”. And it is where Romanian goes wrong most often.

The diacritics

The letters ș, ț, ă, î and â are not in a font’s basic latin set. They are in the latin-ext extension. A font loaded without that extension shows, at best, the Romanian letters from a fallback — at a different weight, a different width and a different height.

The result is text that “jumps” at every diacritic. Most people do not identify the problem, but they perceive it as carelessness.

There is also an older wrong variant: ş and ţ with a cedilla, instead of ș and ț with a comma. The comma forms are the correct ones for Romanian.

Line measure

A comfortable line of text runs to between 65 and 75 characters. Below 45 the eye jumps to the end of the line too often; above 90 it loses the start of the next.

Which is why an article does not stretch across the full width of a 27-inch monitor, even though the space is there.

Scale

Text sizes have to come from a restricted, consistent set — usually five or six values for the whole site. A site with fourteen different font sizes looks disordered even if each page, taken separately, seems fine.

The 7 signs a site looks dated

A visitor does not list them. They feel them.

An automatic carousel on the front page. Almost nobody reaches the second slide, and the automatic movement gets in the way of reading.
Text over a photograph, without enough contrast. Illegible on half of all screens, and a problem for accessibility.
Inconsistent corners, shadows and weights. The sure sign of an absent design system.
Obviously generic stock photographs — people in suits shaking hands, a glowing globe, charts going up.
A menu with twelve entries at the same level, with no hierarchy.
Small, cramped text, with lines pressed against each other.
Loading with jumps — the page settles, then the content moves because the images arrive later.

The last is also a factor Google measures, under the name of visual stability. See Core Web Vitals explained for business owners.

A design system or a template

A template is a set of ready-drawn pages you put your logo and your copy into. A design system is a set of pieces — colours, text sizes, spacings, buttons, cards, forms — that pages get composed from.

	Template	Design system
Initial cost	low	higher
Consistency	good at launch, degrades	preserved by construction
New pages a year later	visibly diverge	come out identical in style
Adaptation to your identity	limited	complete
Who else has it	anyone who bought it	only you

The difference does not show in the launch month. It shows in month fourteen, when you add three new pages and they have to look like the rest of the site.

What a minimum system covers

A palette with defined roles: background, surface, border, primary text, secondary text, accent.
A typographic scale of five or six steps.
A spacing scale. One set of values, used everywhere.
One button system, with its states: normal, hover, focused, pressed, disabled.
One card. One form.

Motion in moderation

Good animation is the animation you do not notice. It confirms an action, connects two states, guides attention — and it ends quickly.

Practical rules

Short. 150–300 milliseconds for most transitions.
With a reason. If the animation communicates nothing, it is decoration that delays.
No obligatory journey. Elements that appear only once you scroll to them delay reading and, sometimes, do not appear at all.
Respect the system preference. Users who have turned on reduced motion — for health reasons, not taste — must get the version without animation. It is a system setting the browser passes on; ignoring it is an accessibility problem.

Colour as a system, not a preference

A site with a well-built palette looks well made even with modest typography. A site with an improvised palette looks unfinished, whatever else is going on.

The difference between a palette and a set of colours

A set of colours is a list: “our blue, a grey, an orange”. When a new need comes up — a slightly different background, a dividing line, some secondary text — somebody chooses on the spot. After a year you have eleven shades of grey.

A palette defines roles, not colours:

Role	What it is	Example use
Background	the base surface	the body of the page
Surface	one level above the background	cards, panels
Border	a discreet division	rules, card edges
Primary text	maximum contrast	body copy
Secondary text	reduced contrast, but above the threshold	subheadings, notes
Accent	the brand colour	buttons, links
Accent on a dark ground	the lightened variant	the same accent, on dark sections

When a new need comes up, you do not choose a colour — you choose a role. There is no way to end up with eleven greys.

The contrast rule

Every text/background pair gets checked. The threshold is 4.5:1 for normal text and 3:1 for large text. Secondary text is where it goes wrong most often: “discreet grey” comes out, in practice, at 2.8:1 and becomes illegible on a screen in bright light — which is to say, on a phone, outdoors.

It is not only an accessibility requirement; it is a legibility requirement for everyone. See Web accessibility becoming mandatory.

Dark sections

A dark band between light sections gives a long page rhythm and separates it visually. The rule: the accent has to have its own variant for dark grounds. The same colour that works on white usually becomes too dark on black.

The four thresholds that matter

Concrete checks you can run yourself.

Threshold	Value	How to check
Minimum usable width	320 px	narrow the browser window
Minimum touch target	44 × 44 px	tap with your thumb, not your forefinger
Minimum text size	16 px for body copy	if the browser zooms on focus, it is too small
Line measure	65–75 characters	count them in a paragraph on your page

320 pixels

It is the width of the smallest screen you still encounter. A site that produces horizontal scrolling at 320 px almost certainly has an element with a fixed width — usually a table or an image.

44 pixels

The standard for a comfortably tappable target. It applies to links in text too: two links one below the other, close together, produce mis-taps.

Zooming to 200%

A quick and revealing test: zoom the page to 200% in the browser. The content has to reorganise, not disappear or run off the screen. Many sites pass the phone test and fail this one.

The number of entries

Above eight entries at the same level, a menu becomes a list to be scanned rather than navigation. The solution is not to hide half of them but to group: four to six main entries, with submenus where appropriate.

The names

A menu is named in the customer’s language, not the company’s internal one. “Services”, not “Solutions portfolio”. “Contact”, not “Get in touch with us”.

The three names people look for instinctively — Services, Portfolio, Contact — are worth keeping exactly as they are. Originality in menu naming costs clicks.

Three requirements, all frequently broken:

It opens and closes from the keyboard, with Esc.
It traps focus while open — pressing Tab does not take you into the content behind.
Parent buttons that lead nowhere are not links. An entry like “Web Design” that only opens a submenu is a group label or a button, not a link to #.

A header that stays visible while scrolling is useful if it is slim. A 120-pixel header permanently occupying a fifth of a phone screen is not a feature, it is a loss.

Modern design that does not convert

The final trap. A site can be visually immaculate and completely useless commercially.

The signs:

The first section is a large image with an abstract slogan from which it is impossible to tell what the company sells.
There is no visible call to action without scrolling.
The phone number appears only on the contact page.
The form asks for eleven fields for a simple enquiry.
The copy talks about the company (“we are leaders”, “we are dedicated to excellence”) instead of talking about the customer’s problem.

The five-second test: show the front page to someone who knows nothing about the company, for five seconds, then ask what the company sells and what they would do next. If they cannot answer, the design is beautiful and wrong.

Want an opinion on your current site, and on what can be improved without a rebuild? Write to us. You can also see how our work looks in the portfolio, or what the business website service includes.