The mobile revolution is alive and well and catching up with the mobile-first design wave is imperative nowadays. We already talked about Mobile UX trends. And we also mentioned that Google started indexing all new websites as mobile-first by default. It’s now time to dive deeper into mobile-first development and to explore what happens before a website is even ready for indexing.

Welcome to the world of mobile-first design.

It doesn’t matter if you’re an experienced website designer or if you’re venturing into the mobile web design sphere just now. These considerations will help you create a great site that is appealing, easy to use and that incorporates the top mobile UX best practices.

Let’s cover the basics first, shall we?

What is Mobile-First? You’ve probably heard of it or read about it multiple times, but let’s catch up on the basics.

Mobile-first is the development of a website thinking about its mobile interface first and foremost. Mobile first can also be explained a little more clearly with the help of two design principles that explore the adaptability from desktop to mobile and vice versa. We’re of course talking about Progressive Advancement and Graceful Degradation.

  • Progressive Advancement is a design strategy where you start building a website for the smallest applicable browser. This helps in solving how to use space in a more conservative manner. Working with a smaller screen helps to curate content, media and layouts, minimizing filler content and improving scannability. Progressive Advancement is, in other words, Mobile-First Web Development.
  • Graceful Degradation is a technical web approach where the website design starts from its desktop verison and designers make the product compatible for smaller browsers by cutting functions and contents. Graceful degradation (also known as Responsive Design) is more common in B2B companies. It’s better for SEO, it’s more cost effective and it needs less maintenance.

Now the real question is, if Responsive Design performs so well, why make the switch?

Easy. We are all changing our navigation habits at an incredibly fast pace, and this directly affects the way in which we buy online. You can see this for yourselves by doing this simple exercise: log into your Google Analytics account and check your audience’s behavior. You’ll see exactly how your audience browses and navigates within your website. Pro tip: make sure to set a date range of at least 3 months in order to have a solid analysis of behavior over time.

As promised, we’ll dig deeper into some of the best practices for developing a mobile-first website. It wasn’t easy, but after thorough investigation -and long deliberation-, here is our Top 9:

1. Continuity

Believe it or not, one of the most important things to consider when designing your desktop and mobile interfaces is continuity. Both versions of your website must have the same content. It sounds obvious, but in the heat of the moment we sometimes decide to block or cut certain features for our mobile version, assuming that users won’t make a good use of them.

We get it, though. There are some specific tasks that are more difficult to perform on mobile, but it’s important to make an effort to let the customer decide if they want to switch to a desktop to be more comfortable. Please, do not restrict content assuming that it’s not suitable for mobile. Hiding features from potential customers can end up costing you a sale.

2. Analytics is your friend

Before starting with any of the design process (be it UX or UI), we must understand who our audience will be. After all, UX and UI designers need to empathize with customers on new levels, anticipating their thoughts and needs before they know them themselves.

It’s imperative that we know the demographics of our audience:

  • Which operative system do they use?
  • Which are their preferred devices? Make? Model? Screen size? What about screen resolution? Everything matters.
  • Which are their most used browsers? Do they use the same browser on mobile and on desktop?

We can’t please everybody. To even try is a guaranteed recipe for stress and frustration. Don’t be afraid to lose customers, be afraid to lose your vision.

3. So long, Hamburger Menu 

The hamburger menu served its purpose when mobile was just an afterthought. We must now evolve and make the browsing experience more intuitive and personalized. We must say goodbye to the hamburger menu.

A rule of thumb to follow when it comes to the menu would be: try to keep your top level primary navigation links at five or less. 

For five links, you do not need a hamburger menu and you can have all of your choices out in the open. Depending on your type of site and content, you might want to evaluate using either a fixed header or a back to top button. Use only one, though. 

If you can’t keep the main navigation pages down to five or less, then you should condense them all in a hamburger menu. However, please keep navigation interesting with full screen layouts and interactive menus.

Also, keep your search bar always visible. Reduction in visibility often results in a drop of conversion. 

4. Navigation, made easier

Expectations for mobile sites are very high, even more so than their desktop counterparts. Mobile first development is particularly challenging because a lot of thought, time, energy and -gulp- resources are required to achieve a good result.

When it comes to navigation, it is especially important to pay attention to readability and scannability. Understanding the user’s journey is vital, as is thinking about how people navigate. How do they scroll? How do they touch their screens? What do they look at first? What do they ignore? Answering all these questions will help you in designing a website that your audience will actually enjoy visiting. 

5. UX, UX, UX

This could be an extension of the previous point but UX is so important in the mobile web development that it deserves its own distinction. As we were saying, you must make the browsing experience easy and enjoyable for users. Here are some UX tips that we guarantee will be of great help:

  • Forget about adding anything remotely similar to a banner. Banner blindness is real and it’s been proven that users ignore any content that they perceive to be a banner. This applies for full width buttons, too.
  • One of the things that you might want to add, though, is a progress indicator bar. It’s a neat detail that shows users their current status whenever they are perform long tasks, which in turn allows them to better manage their time.

  • Forms: do them right! A good form is a great tool to collect information from potential new customers. But a bad form can be worse than none at all. Keep form fields to a minimum and make sure that you only ask for information necessary for a first-time communication. Time is of the essence for mobile users and users are growing weary of giving too much personal information online. You don’t want to scare them off!
  • Last, but certainly not least, please serve the correct keyboard for the corresponding field type. Make everything flawless!

6. Design for the people, not the devices. 

It’s important to think about the device you’re designing for, sure. But ultimately, we’re designing for human beings. We need to work on actionable interfaces, and on anticipating the needs of users. Your website needs to become an extension of the user, so whatever appears on their screen must be current and relevant to them.

Try to avoid intrusive interstitials, too. They were OK -albeit annoying- for desktop versions but on mobile they’re downright irritating. They block the screen activity and they do more harm than good.

Finally: test, test, test! Test once and again and look for any flaws or problems that might make navigation less fluid. 

7. Does it spark joy? Embrace the minimal

Creating good, engaging and relevant content is not easy. It’s even harder to make it short and light for the reader.

The debate of long form vs short form content is never-ending. Longer content is proven to generate about nine times more leads than short content. However, when it comes to mobile websites, readers are looking at a tiny screen so you don’t want to overwhelm them, either. Any content designed in a mobile-first mindset needs to be concise and clear.

Keep your website simple: people love simplicity, it reduces anxiety, improves clarity of mind and makes us happier. In fact, minimalization is having a pop culture moment, too. Channel your own personal Marie Kondo and ask yourself: “Does it spark joy?”, and keep only the elements that are absolutely necessary.

To help you, here are six simplification tips to follow:

  • Reduce the number of pages
  • Use clean lines and wide borders
  • Use a simple font and make it large
  • Keep a maximum of two columns
  • Add a sleek (and improved) search feature
  • Increase the white space

Never sacrifice functionality over beauty, though. All text must be legible at every size, icons must be clearly distinguishable and users should instinctively know what to do and where they are at any given moment.

This is where creativity gets to play an important part by playing with negative spaces, highlights, colors, fonts and graphics to put the spotlight on important content. 

8. CTAs 2.0

As we mentioned a little earlier, we’ve become so used to doing everything on our mobiles that we’ve reached unparalleled levels of digital productivity. However, our attention span is as short as it will ever be so an immediate engagement is what you must work to obtain.

CTA animations, vibrations and full screen design features are just a few of the things that you can do to amp up your CTAs and make them more modern, attractive and engaging. 

9. Graphic design for mobile-first

A well designed website is memorable, friendly to use and -widely speaking- inspires more trust in the audience. So here are some elements that can definitely change your website design for the better:

  • Use vivid colors 
  • Use strong typographical elements
  • Incorporate geometric shapes and abstract patterns
  • Apply light and dark contrasting colors schemes
  • Experiment with gradients and duotones
  • Consider turning to bright minimalism
  • Develop original, hand drawn illustrations and designs
  • Use real photographs

Conclusion

Google’s decision to now index all new websites as mobile-first by default is helping to make the shift from desktop to mobile at a faster pace. Since mobile web design is all about the user, most of us already know what works and what doesn’t. And with these design considerations for mobile-first websites to guide you, you’ll become a pro in no time. The key, remember, is to always think of optimizing user experience.

Need help with mobile-first development? Drop us a line!