Is Mobile-First, Desktop-First, or Element-First Best for Credit Union Web Design?

For the past few years, the debate on the Internet has raged on. Which is superior: “mobile-first” design or “desktop-first” design. In the last few years, “element-first” design has also stepped forth as a contender. At first it seems like a clear-cut issue: which option will bring the best overall results? But the reality is far more nuanced. In this post, we’ll discuss the differences between the three approaches, and then dive into what we believe is the true solution for credit union web design.

 

Desktop-First Design

What is desktop-first design?

Desktop-first is the way all credit union websites were designed in the primitive era—the era when smartphones and tablets didn’t exist. Gasp! When mobile devices finally rolled onto the scene, the typical approach was to design a desktop version of a website, then reduce its elements and content when being rendered for mobile. This process is best known as graceful degradation: starting with all the bells and whistles, and then getting rid of some of them as you make concessions for different devices and browsers.

Advantages:

A potential advantage of desktop-first design is the brainstorming phase. If you don’t feel limited in your approach from the start, then you may be more creative. You might find a new way of looking at your site or customer base that you could have missed during mobile-only.

Disadvantages:

In terms of flow, it’s usually easier to smart small and build bigger, but desktop-first does just the opposite. Its main advantage can also turn into a curse: in the creative phase you might get overly excited about nonessential items and ignore your core content.

 

Mobile-First Design

What is mobile-first design?

Mobile-first design means that you first design the mobile version of the site, and then move on to the desktop version. In this way, rather than stripping down a desktop version to work on mobile devices, you start with the mobile version and do “progressive enhancement.” Progressive enhancement means you can add more features and elements as screen sizes and computing power increases.

Advantages:

• Creativity loves constraint. The biggest advantage of mobile-first design is that it forces you to focus on the most important content. Indeed, you it forces you to ask, “Which elements must to be on the page?” The constraints of mobile bring greater direction and simplicity to your design.
• With a mobile-first approach, the performance of your website is more likely to work well on mobile and desktop, because you start by thinking about mobile devices, which have less performance capacity than desktop machines.
• Adding to a design is always easier than subtracting.

Disadvantages:

• One possible concern is that mobile-first may cut out many bells and whistles a credit union or designer may have hoped for. While many see the simplicity forced by mobile-first design as an advantage, some may see it as a disadvantage.
• Another possible disadvantage is that halfway through the design process, your designer gets hit by a bus—God forbid—and all you have is the mobile version. Though it would bring upon you the disdain and curses of all Millennials, users can access desktop sites on their phones, whereas a mobile site on a laptop looks even more out of place.

 

Element-First Design

What is element-first design?

As the name implies, element-first design focuses on elements rather than devices. So, you first think about the elements you want to present to users, then consider how they would be displayed on devices of different sizes. Each heading, image, text box, etc. changes based on the context. You might also choose to make some elements display only on phones and others only on desktop.

Advantages:

Since element-first design is initially agnostic to devices, you can ignore screen sizes and just focus on content and elements. Once you’ve decided on the content and elements, then you design how they will work on mobile or desktop. After all, content should always come before design (and that’s true no matter which design methodology you choose).

Disadvantages:

• The biggest drawback of element-first design is that it’s abstract, initially. Without the context of a screen, deciding on elements can be very challenging.
• With element-first design, you could lose focus of the big picture: you spend all your time reviewing individual elements instead of the user’s overall experience.

 

So, which approach is the best?

As we’ve pointed out above, each methodology has pros and cons. That’s why we are seeing a shift in the design community. More and more people are dropping out of the two-sided (or three-sided) debate and taking a contextual approach. The truth is, any of these approaches can be the right choice, depending on your situation. Smashing Magazine calls this philosophy “journey-first” design.

To accomplish journey-first design, use research to decide which approach is best for your credit union website design. Creating personas and gathering customer data will help inform your decision.

For example, let’s say your primary goals are to show the contact info and hours for your credit union, and to get users to download your app. You discover that the vast majority of your audience visits your current website on smartphones. In this case, you should prioritize mobile. The desktop version can be progressively enhanced starting from the mobile-first foundation.

On the other hand, if your credit union serves lots of businesses and includes complicated financial calculators, you might want to go with desktop-first. In this case, even though your users have smartphones and frequently use them, they likely access your site at work—which means they’re probably using a laptop or desktop. In addition, your users may want more functionality and more content.

If the device usage of your membership isn’t clear-cut in the direction of mobile or desktop, you might consider an element-first approach, where you ignore devices initially and just focus on content and design elements.

Context is everything and will help you choose the best design approach for your credit union website design. For your credit union, which approach do you think is best?