What's actually going wrong under the bonnet.
No jargon and no sales pitch. Just a clear, visual explanation of what people mean by mobile rendering, why a website built in 2011 cannot work properly on a phone, and the handful of things that decide whether a visitor stays or leaves.
- Written for people, not developers
- Every point has a picture
- All of it built into every renewal
What people mean by mobile rendering
Rendering is simply the process a browser goes through to turn a website into the picture you see on screen. Before it can draw anything, it has to answer one question: how wide is this page?
On a desktop that is easy, it is the width of the window. On a phone it is a decision, and older websites never told the browser how to make it. So the phone falls back on an assumption from the early 2000s: it pretends to be a large desktop monitor and shrinks everything down to fit. Nothing is missing. It is just far too small to read.
A site built before phones Broken
Harbourside Joinery Ltd
Tel: 0191 ... ...
Fax: 0191 ... ...
Opening Hours:
Mon to Fri 8am to 5pm
The whole desktop page has been squeezed onto a phone screen. The visitor has to pinch, zoom and drag around just to find the phone number. Most of them will not bother.
The same content, renewed Readable
The page now matches the real width of the device. Columns become a single stack, the menu collapses into a button, and the phone number becomes a large, tappable target. Nothing was lost. It was reorganised for the screen it is actually on.
A modern page rearranges itself
Responsive design means one page that knows how to behave at any size, rather than a separate mobile site sitting alongside a desktop one. Three columns become one. A row of menu links becomes a button. Headlines scale down. The content stays the same; the arrangement changes.
Drag the slider below to change the width of the demo site and watch it reorganise in real time. This is exactly what happens when somebody turns their phone sideways, or opens your site on a tablet instead of a laptop.
Watch what happens as it narrows: the menu collapses, the cards stack, and the headline shrinks. A three column grid on a phone just means three unreadable columns.
Google measures how your site feels to use
Search engines no longer judge a page purely on what it says. They also measure what it is like to actually use, based on data from real visitors. Three things matter, and each has a published target. Miss them and you are competing with one hand behind your back.
How fast it appears
The time until the main thing on the page, usually the headline or the hero image, is actually visible. Older sites routinely take six to ten seconds on a phone.
How fast it reacts
When somebody taps a button, how long before the page visibly responds. Anything sluggish makes people tap a second time, then give up entirely.
How steady it stays
How much the page shifts about while it loads. If you have ever gone to tap a link and hit something else because the layout moved, that is this one.
These are Google's published Core Web Vitals thresholds, measured across real visits on mobile and desktop separately. Source: Google, web.dev.
| What we look at | Typical old site | After a renewal |
|---|---|---|
| Page weight | Several megabytes of unoptimised photos | A fraction of that, modern formats |
| Load time on mobile data | Six to twelve seconds | Under two seconds |
| Mobile layout | Fixed width, needs pinching and zooming | Reflows cleanly to any screen |
| Connection | Browser warns that it is not secure | Padlock shown, secure by default |
| Contact details | Buried, or trapped inside an image | Tap to call, in the header of every page |
| Structure | Styled text with no real hierarchy | Proper headings, readable by Google and screen readers |
| Text size | Tiny type, weak contrast | Comfortable size, contrast that passes the standards |
A mouse pointer is one pixel. A fingertip is not.
A desktop site was designed for a cursor that can hit a target three pixels wide. A finger covers something closer to fifty. That is why old navigation menus are almost unusable on a phone: the links are physically too small, and too close together, to hit reliably.
The accessibility guidelines are specific about this, and there is a comfortable standard that everyone in the industry recognises. We build to the comfortable one, with real space around every button, because a menu you keep mis-tapping is a menu you stop using.
Too small
Old site link spacing. Miss it and you land on the wrong page, or on nothing at all. Try tapping it on a phone.
Comfortable
A proper tap target with breathing room around it. Hit first time, every time, one handed, on a bus.
The single biggest reason old sites are slow
Nine times out of ten, when we are sent a slow website, it is the pictures. A photo straight off a camera can be several megabytes and thousands of pixels wide, being displayed in a box a few hundred pixels across. The phone downloads all of it, over mobile data, then throws almost all of it away.
The fix has three parts. Compress the file properly. Use modern image formats, which are far smaller for the same visible quality. And serve a genuinely smaller picture to smaller screens instead of one enormous file to everybody.
- ✓Right sized so the phone downloads a phone-sized picture.
- ✓Modern formats instead of decade-old files straight from a camera.
- ✓Loaded when needed so pictures further down the page wait until you scroll.
- ✓Space reserved so nothing jumps around as the page fills in.
- ✓Described so screen readers and search engines both understand them.
The same photograph, two ways
Roughly nine seconds on a weak mobile signal, for one picture.
Visually identical on the screen it is shown at. Arrives instantly.
Multiply that across a gallery page of twenty photographs and you have the difference between a site people use and a site people abandon.
“Not secure” is the worst first impression there is
If a site still runs on an old, unencrypted connection, modern browsers actively warn people before they have seen a single word of the content. Chrome, Safari, Edge and Firefox all do it, and some will interrupt with a full screen warning. For a small business trading on trust that is fatal, and it is one of the quickest things to put right.
⚠ Your connection is not private
Attackers might be trying to steal your information from this site. Anything typed into a form here, including a simple contact enquiry, travels across the internet as plain readable text.
What visitors are shown today on an unsecured site.
✓ Connection is secure
A valid certificate that renews itself, with every visitor sent to the secure version automatically. No warnings, no interruptions, and enquiry forms that cannot be read in transit.
What we set up as standard on every renewal.
Accessible is not a nice to have. It is more customers.
Around one in four UK adults reports a disability. Add everybody reading in bright sunlight, using one hand on a train, on an ageing phone, or simply over fifty with the text size turned up, and accessible design stops being a niche concern. It becomes most of your audience.
Research into UK online retail has repeatedly found that shoppers who hit accessibility barriers do not struggle on. They leave and spend the money somewhere else. It is known as the “click-away pound”, and it runs into billions every year.
- ✓Real text, not pictures of textText inside an image cannot be enlarged, read aloud, translated, copied or indexed by Google. It is still remarkably common on older sites.
- ✓Contrast that actually worksLight grey on white looks elegant on a designer's monitor and disappears completely in sunlight. Every colour pairing is checked against the published standards.
- ✓Usable without a mouseEverything reachable by keyboard, with a clearly visible highlight. Essential for motor impairments, and useful for anyone who simply prefers it.
- ✓A proper heading structureScreen reader users navigate by headings in the same way sighted visitors skim a page. Google reads exactly the same structure.
- ✓Links that make sense alone“Download our brochure” rather than “click here”, plus a genuine description of every meaningful image.
- ✓Respects reduced motionIf somebody has asked their device to tone down animation, often because it triggers nausea or migraines, the site quietly obliges.
Google looks at the mobile version. Only.
This one catches a lot of people out. Google now crawls and indexes the web as though it were a smartphone, and has done for every site since 2023. Whatever your site looks like on a phone is what Google sees. If content is hidden, unreadable or missing on mobile then as far as search is concerned it does not exist.
That is why a renewal generally helps rankings rather than hurting them, provided the changeover is handled carefully. The steps on the right are the ones that protect everything you have already earned.
- 1Map every pageOld address to new address, agreed before anything moves.
- 2Redirect the old addressesSo existing links, bookmarks and search results all keep working.
- 3Preserve what already ranksKeep the titles and headings that are working; improve only the ones that are not.
- 4Tell Google about the new siteA fresh sitemap submitted on launch day, so the new structure gets picked up quickly.
- 5Watch it for a monthSearch performance monitored after launch, so anything unexpected is caught early.
Where the numbers on this site come from
- ·Google, Web Vitals (web.dev). The published thresholds for loading, responsiveness and visual stability.
- ·Google & Deloitte, Milliseconds Make Millions, 2020. Conversion impact of a 0.1 second mobile speed improvement.
- ·Google / SOASTA, mobile page speed research, 2017. Bounce probability against load time.
- ·Lindgaard, Fernandes, Dudek & Brown, Behaviour & Information Technology, 2006. Visual first impressions formed in 50 milliseconds.
- ·Stanford Web Credibility Research, Stanford University. Design as the leading factor in credibility judgements.
- ·Adobe, State of Content, 2015. Disengagement from unattractive layouts.
- ·StatCounter Global Stats. Desktop against mobile platform market share.
- ·W3C, Web Content Accessibility Guidelines (WCAG) 2.2. Contrast ratios and target sizes.
- ·UK Government, Family Resources Survey. Proportion of UK adults reporting a disability.
- ·Click-Away Pound survey. Spend lost by UK retailers to inaccessible websites.
Every one of these is built into a renewal.
Mobile rendering, responsive layout, speed, tap targets, images, security, accessibility and search. They are not extras or upgrades, they are simply how we build. Send us your web address and we will tell you honestly where your current site stands.
info@renewedweb.co.uk