Mobile First

Featuring a creative and vibrant web design with unique graphics.

For as long as web designers can remember their projects were always about building a desktop website. Anyway, there were no smartphones or tablets at the beginning of the Internet, right?

Starting with the first smartphones, web designers soon realized that they have to adapt their projects to also fit mobile devices. This gave birth to responsive design, but many of us continued to start with the full size website and to leave the mobile part for later. Until NOW!

The Present

With over 1.9 billion mobile web users, it’s obvious for all of us that mobile is no longer a trend. In 2008 we predicted that mobile is the future. Today 1 in 5 Internet users don’t use a computer. Odds are that 20% of users will only see the mobile version of your website. And according to numerous surveys, the numbers are on a continuous growth. That’s astounding and it is The Present! Are you prepared for this?

Responsive Design

The rise of responsive design allowed us to optimize our websites for mobile devices. This web design concept is based on media queries and viewport sizes and you normally use it to build large and then adapt for small screens.

It shouldn’t surprise you that this is not enough. In a world where web is something that we carry in our pockets we have to shift our web design paradigm to something that is mainly focused on mobile.

Graceful Degradation vs. Progressive Enhancement

Before embracing the mobile first web design strategy you should first understand its importance with a simple comparison between two main concepts: Graceful Degradation and Progressive Enhancement.

Both concepts share the same purpose: keep up with the technological advances, and still have a design that works on as many browsers and platforms as possible. As the names suggest (“degradation” vs. “enhancement”), the difference between them is where you starting point is.

Graceful degradation starts with building for the latest and greatest, and just then ensure basic functionality on less capable devices. In other words, design a standard desktop website and then gradually remove content and features as the viewport gets smaller.

Progressive enhancement starts exactly at the opposite end: build a basic website, then add enhancements for those who can handle them. In other words, create an amazing experience for the mobile platform and gradually add enhancements for larger platforms.

Which one to choose?

You can probably answer this yourself. Which sounds better: “to degrade” or “to enhance”? Leaving the words behind, what we do care about is the result, right? With the imminent growth of the mobile industry, the result should favor the mobile users.

When you start with the desktop platform you will most likely build an amazing product that takes advantage of all this platform has to offer. Then you start the “degradation” until you reach a point where the adjective “graceful” cannot be applied anymore and your main nightmare becomes reality: everything is falling apart.

By changing your starting point, you change the whole story. All your creative energy will be focused towards the mobile platform and will allow you to create an astounding mobile product. Taking it to the desktop platforms means adding in even more functionality, making in more robust and eventually designing a better product.

Are you ready?

Even though “to enhance” sounds and proves to be better, it is a lot harder to accomplish. Probably the new generation of web designers, the one that was born with a smartphone in their hands will find in naturally.

Ready or not the mobile industry growth is not waiting for anyone. With mobile user experience in mind will you accept the mobile first challenge? Leave a comment bellow and let us know.

Posted on November 3, 2015

Nitin Verma

Nitin Vermaa former writer for Froala, showcased exceptional talent and dedication during their tenure with the company.

No comment yet, add your voice below!

Add a Comment

Your email address will not be published.

    Hide Show