# Screen sizes

Our experiences are designed mobile first as that's where the majority of our website traffic comes from

# Mobile first?

Nearly 80% of traffic to our websites comes from a mobile device. That number will likely increase further, which is why it's important to design for mobile first.

This approach forces the designer to really focus on what the most important features are. It helps us consider what the customer needs, removing a lot of the noise and clutter that creeps in on desktop designs.

Mobile first doesn't mean "mobile only" - we should think about tablet and desktop as well. Our customers must have a consistent experience regardless of the device they're using. Many users switch devices mid-task(e.g. from their phone to their tablet).

# Designing campaigns for speed

So it’s important to think about our customers visiting on mobile when designing for free format campaign pages. A mobile-first approach also means these pages are naturally designed for speed: images optimised, text sizes considered and so on. Let's build quicker websites and make our customers happy!

# Screen sizes and platforms

360px wide is our standard screen size, but there are artboards for smaller (320px) and larger (375px, 414px) screens to test your design. 360px is also the screen size we use when creating prototypes customer testing.

Breakpoint (px) Columns Margin / Gutter-X / Gutter-Y
320 8 16 / 16 / 24
* 360 8
375 8
414 8
768 12
1024 12
1366 16
1920 16

For efficiency and with future screen sizes in mind, NBUX defines either 8, 12 or 16 columns. Margins and gutters remain the same at all breakpoints.

Progressive enhancement

We design for the lowest capabilities - usually old browsers & slow internet speeds. The website's capabilities are then expanded upon as the browser upgrades or device advances. This is usually through newer devices or an increase in screen size.

As our market expands across the globe, people living in less developed countries (and so with less capable technologies) may use our products. With this in mind, we have to be sure our sites can degrade gracefully to offer these users the best possible experience.

Last Updated: 10/6/2020, 8:34:39 AM