Web Solutions Blog: A Short Guide to Mobile-First Web Design

There is no way to go around the fact that modern websites have to provide a quality user experience on a variety of devices. Four out of five people who would visit your website use both mobile and desktop devices. Even though mobile-only is a trend that has been exhibiting growth, it still makes the most sense to provide a good experience across to board.

But that doesn’t mean that you should go to desktop by default as a starting point for web design. When you are thinking about the web design services that are important today, mobile user experience is an increasingly important starting point for web design.

Graceful Degradation vs. Progressive Enhancement

There are two important paradigms of multi-device design. Neither of them is particularly new — people have been speaking about them for the better part of the decade, if not for even longer. They share the goal of enabling designers to create websites that provide good user experience across different devices. They don’t share the starting point, though.

Graceful degradation is the design technique where you start from the fullest possible version of a website. That usually means the desktop version that is displayed using up-to-date browsers, with support for every type of feature. From there, the website would adapt to less powerful setups by gradually removing features while trying to keep the core functionalities. It is very much about creating the best possible version of the website and then taking away from it.

Progressive enhancement does things the other way around. It starts with developing the core functionalities designers would like to see displayed on any device. From there, it progressively adds more functionalities as the viewing device allows it. This approach would have designers first develop the website as they would like to have it displayed on mobile devices. Then, they would add functionalities to create versions that take advantage of bigger and more powerful devices.

Is It Time for Mobile First?

One of the common arguments against adopting mobile-first as a design philosophy is that it is not necessary yet. People might be spending more time looking at their mobile devices, but it is mostly due to things like social media and apps, not websites.

That argument simply does not stand in 2018. The data on European users’ habits shows that the only two types of activities where desktop usage is significantly ahead of mobile usage are shopping and research. And even there, mobile is still a significant platform. We are also getting data from various industries saying that the smartphone’s share of their website visits is rising.

The tech giants would also agree that the mobile future is happening now. In 2016, Google announced that mobile search overtook desktop search for the first time. In the same year, the company launched Accelerated Mobile Pages, an open source project that enables web pages to load very quickly on mobile devices.

Taking an Inventory of What Counts the Most

Apart from the climate that is increasingly favoring mobile experience, a mobile-first approach has other innate traits that are beneficial to the web design process. The art of developing a good mobile website is in working within a very limited space to create the biggest possible impact. That informs the choices you make as a designer and makes you think hard about your priorities.

Creating an inventory of content is usually among the first couple of steps in mobile-first design. You need to list every piece of content you want to appear on, for example, a front page. Most likely, you will have to cut some of it out. You cannot use large horizontally orientated images. You cannot use many videos. You might not have enough space to include social proof. Because there is so little real estate on a mobile screen, you have to prioritize the most important content and make sure you develop a clear visual hierarchy to display it. Everything you end up including on your mobile front page will have to be as effective and efficient as possible.

People are spending more time using their mobile devices for an increasing number of activities. Your ability to develop a website that provides them with a good experience is paramount. Mobile-first web design is the type of design that puts the mobile experience at the beginning of website design and builds on it to create an experience for other devices. It can also make you improve the most important elements of your website. As far as design paradigms go, mobile-first has plenty to offer to web designers.

The post A Short Guide to Mobile-First Web Design appeared first on SpyreStudios.