Designing for multiple screen sizes, Going mobile first can save you time and money

Why designing for mobile will save your next website project time and money

Imagine a new website project is underway at a web design agency.

The designer is sitting at their desk. They’re spending most of their time making a beautiful desktop layout on their large screen. Their designs are going to look brilliant.

The client begins signing off on the desktop designs. They’re not thinking about how their new site will look on mobiles and tablets. They want “the real work” to begin.

The project manager is under pressure. They’re keen for development to start, right away. The developer can adjust the designs for mobile later, they tell themselves.

Then web development starts. And the project slows down.

Even today, this is a common progression in website design. Despite approximately 50% of users viewing websites on mobile devices, the mobile experience remains an afterthought in many web development projects.

Budgets can be tight and clients and project managers might be looking to save money. So it’s often left to the developer to create the design for other screen sizes. At first glance, this can seem like a time and cost-effective measure.

It’s a smart shortcut, surely?

Early project shortcuts cost more later

The assumption is that other screen resolutions will inherit the layout and branding from the beautiful desktop site.

This may be the case when it comes to colours and fonts. However, when it comes to font sizes, line heights, paddings and margins, desktop sizes rarely translate well to smaller mobile screens. The developer will need to reduce these sizes, taking design considerations into their own hands.

The problem is, this puts too much pressure on the developer. They need to create consistency, keep the CSS organised, and create a fluid width for all devices. All this, when they have only the desktop design to extract information from.

This extra work later in the project is what ends up costing time and money in the long run. As soon as the code gets disorganised, the development stage takes longer. More development tricks and hacks have to be used, complicating the project even further.

This is when the developer’s interest in the project starts to fade.

Designing for mobile first

Designing for multiple screen sizes may seem like overkill. It may seem like a poor use of time and an unnecessary stretching of a tight budget.

But better design at the start of the project actually speeds up development and testing later on. It results in fewer bug fixes and a higher-quality end product.

To ensure fast development and fewer bugs, we need to give the developer as much detail as possible in the design stage. Using a tool like Zeplin.io, the developer can extract CSS font sizes, font line heights, margins and padding specifications for each screen size. This speeds up development and can make for a spectacular end result.

Good design saves money and time

Design, wireframing and planning shouldn’t be rushed. Under the pressures of a project, it’s tempting to insist on cutting corners in the design and planning stages and get to the “real work”. But the investment at the start of the project will save headaches later down the track.

The best website projects start with the designers working on mobile concepts, and scaling up screen sizes to desktop. This is what we call a ‘mobile first’ design process. It can work especially well in agile workflows where the team builds incrementally and improves as the project moves towards completion.

The key takeaway? Start small. Because from little things, big things grow.
Interested in learning more about our design process? Speak with us today.