Mobile-first is the baseline, not a buzzword
Over 70% of web traffic in New Zealand now comes from mobile devices. That figure has been climbing steadily for years. In 2026 it has stopped being a trend to watch and become the reality your site either handles or ignores at its peril. Designing for desktop first and hoping it 'works on mobile' is like building a restaurant and hoping the food is edible.
Mobile-first design means starting your layout, your content hierarchy and your interaction patterns with the smallest screen. Everything that matters fits on a 390-pixel-wide viewport first. Then you expand outward, adding complexity and visual richness as the screen allows. It's a constraint that produces better design at every breakpoint.
Core Web Vitals: Google's non-negotiable performance bar
Google's Core Web Vitals are Largest Contentful Paint (LCP), Interaction to Next Paint (INP) and Cumulative Layout Shift (CLS). They're confirmed ranking factors in 2026, and they hit mobile sites the hardest. A desktop site that loads in 1.5 seconds might take 4 seconds on a mid-range Android phone over a 4G connection. That's the difference between ranking and vanishing.
Hit these benchmarks or accept the consequences: LCP under 2.5 seconds, INP under 200 milliseconds, CLS under 0.1. Achieving them requires optimised images, minimal render-blocking resources, efficient JavaScript and a hosting setup that serves content from a CDN close to your users. Every millisecond you shave improves both your rankings and your conversion rate.
Responsive images: stop sending desktop files to phones
One of the most common, and most expensive, responsive design failures is serving the same 2MB hero image to a 4K desktop monitor and a phone on a rural connection. Modern responsive images use the srcset attribute and the <picture> element to serve the right size of file for each device, which saves bandwidth and cuts load times sharply.
Use next-generation formats like AVIF and WebP with JPEG fallbacks. Implement lazy loading for anything below the fold. And consider art direction: the crop that works in a widescreen hero might be incomprehensible at 390 pixels wide. Sometimes mobile needs a completely different image, not just a smaller one.
Fluid typography: design that breathes across screens
Fixed font sizes break at the edges. A heading that looks commanding at 1440 pixels becomes comically oversized on a phone or awkwardly small on a 4K display. Fluid typography uses CSS clamp() functions to scale text smoothly between a minimum and maximum size, so it looks deliberately sized at every viewport width.
The formula is simple: clamp(minimum, preferred, maximum), where the preferred value is typically a viewport-width-based calculation. Apply it to headings, body text and spacing. The result is a site that feels cohesive on a 13-inch laptop or a 27-inch iMac, with smooth, proportional scaling instead of jarring breakpoint jumps.
