You are here: / / Mobile first — or how to make it in the mobile world

Mobile first — or how to make it in the mobile world

Mobile first isn’t a new topic. However, with Google’s announcement to base their index on mobile first, the topic has new relevance.

Mobile first frontend delivery

Frontastic offers mobile first frontend delivery. This includes 2 promises:

  1. The delivered pages are developed with mobile first in mind, which means they’re optimized for a 3G data connection
  2. Our technology supports web developers and designers to really develop mobile first on the desktop

Google’s mobile first index

In November 2016, Google announced that it would attach greater importance to the mobile first index. A little over a year later, the time has come:

“Mobile first indexing means that we’ll use the mobile version of the content for indexing and ranking, to better help our — primarily mobile — users find what they’re looking for.”

In principle, it’s also not rocket science to do well in the Google mobile first index (see the list on the right with Google’s official tips). Nevertheless, some basic craftsmanship must be respected. And when it comes to creating and labeling content, the mobile version of the website should not be neglected.

Ultimately, as always, it’s about creating a good website — only now for smartphones!

  • Content

    Pay attention to good content (text, images including alt attributes, videos) that’s easy to index.

  • Structured Data

    Structured data and rich cards are also very important for the mobile first index.

  • Metadata

    For metadata, the same requirements apply as for desktop pages.

  • Interlinking

    When internally linking to mobile pages (m.xyz.com), make sure to continue using the existing rel=canonical and rel=alternate elements.

  • International

    If rel=hreflang elements are used, ensure that the internal linking between desktop and desktop as well as mobile and mobile is established properly.

  • Performance

    Be prepared for an increased crawl rate — at least if a separate mobile site is used under its own subdomain like m.example.com.

Responsive web design

Responsive web design is an old hat. Nevertheless, the topic is by no means exhausted: Web pages should automatically adapt their appearance and behavior to the end device with which they’re displayed. Sounds simple, but it isn’t!

Responsive web design is always a compromise that should save time and reduce the possibility of (content) errors (keyword “double data maintenance”).

The basic question is: what’s my default, for which device do I mainly provide content. Since the usage of smartphones is ever increasing and already more than 50% of pages are opened on mobile devices, many agencies and web developers are moving on to take the smartphone as standard — to think mobile first. But it’s very difficult to do this consistently on the desktop.

For web developers

As a web developer, for responsive design, it’s important to be meticulous that the layout of the website adapts to the width of the web browser — in simple terms. The 4 columns on the desktop are displayed 1 below the other on the smartphone.

The menu is often displayed as a “sticky” hamburger menu (the 3 superimposed strokes look like a stylized “hamburger”) and some elements, such as a mouse-over, simply don’t exist on the touch screens.

With all these peculiarities, it’s imperative to make sure that the page loads very quickly anyway. Smartphone often still means a slow 3G connection, especially in Germany.

As an online content editor

As an online editor or eCommerce manager, you’ll have to make sure that responsive web design displays the graphics well, even on the narrow screen of smartphones.

Plus, the amount of information offered must match the screen size, and the interaction areas (buttons and so on) must be operable on a touch screen (keyword “sausage fingers”).

The real challenges of responsive web design are often only discovered in practice, so when the eCommerce page is operated on a real smartphone (and not in the browser preview).

The limits of responsive design

For a web developer, responsive design can only be a compromise. A website created exclusively for smartphones is always better than a responsive site. Elements can be developed much more specifically, the JavaScript can be greatly thinned out and the layout can be simplified to the essential elements.

The main challenge for online editors is the creation of the content. On mobile devices the willingness to read is considerably lower. And even with the graphics, a lot of manual work is required despite the responsive design: a banner created for the desktop scaled to the width of a mobile device won’t only look out of place but is usually no longer readable.

Own graphics for desktop and smartphone?

One quickly realizes that at least for the most important graphics, separate versions with a special aspect ratio have to be created. Services such as Cloudinary are able to define image-specific breakpoints for different resolutions or to preserve the supposedly important areas for the image detail with machine learning — but the results are usually sub-optimal, as can be seen from the examples on the right.

Either the text and button elements are converted as text so that they can be displayed specifically for each terminal device, or at least 1 graphic is stored for each of the 2 types, desktop and smartphone.

Mobile first design

Due to the strong increase of smartphones in the traffic of many websites, the trend goes towards mobile first development. The first eCommerce shops have started to offer mobile only experiences. This makes the development much easier and the result for smartphones much better.

One thing you have to be aware of: Mobile design is far more than the good presentation of websites on smartphones.

As a web developer and web designer

The challenges for web developers in mobile first design are manifold. An essential point is the size of the application. On mobile devices, the loading speed is much more critical, as you often don’t have more than 3G speed available.

Of course, the designer must always keep in mind (or better yet, check in real life) that they’re creating an application for a touch device. Accordingly, the buttons, menus, and so on, have to be designed touch-friendly. But mobile first design goes far beyond that. It’s best to orientate yourself on common apps and try to create derivations for the web application from them.

Attention: Differences between Android and iOS

One trap here is the operating concept of Google’s Android and Apple’s iOS, which differs in details. Here, the generic web application has to find a way that fits both camps. And: less is more.

If all this is said and done: Mobile first isn’t mobile only. Therefore, in the next step (but consequently only when the first step is finished), a derived design and a derived application for the desktop must be created. If it’s a responsive application, it’s important to make sure that it doesn’t negatively influence the mobile variant (for example, by large scripts and so on).

As an online content editor

From the editor’s point of view, there are also 2 things that need to be taken into account and which are interlinked: Content and design.

Does “mobile only” work?

Recently, various eCommerce agencies have also started communicating about “mobile only.” Of course, this doesn’t mean that pages can only be displayed on a smartphone. Instead, it means that there’s no longer a separate desktop design. The lowest common denominator is used, so to speak.

How consistently one goes this way naturally depends on the circumstances. From the point of view of consistent, device-independent user guidance, the approach of not using elements and functions that don’t work on the other seems very sensible.

“We advise our customers to use the principle of the smallest common denominator in the conception of design and functions: Only the design and functions that work both on the desktop and on the smartphone are allowed. However, the desktop design can benefit from the larger screen size. But it should only complement the smartphone design.”

Mobile first frontend delivery

Frontastic has put the experience from hundreds of projects into its Composable Frontend Platform to provide a solution that offers the perfect mobile first experience. Since the final solution is always developed by an agency or integration partner based on Frontastic, we’ve paid special attention to the developer experience.

Frontastic makes it easy for developers and online editors to create an outstanding, positive experience for visitors with smartphones — that’s our promise.

Stay in the loop

Subscribe to our newsletter to keep up-to-date on all the latest Frontastic news.

Related

operational efficiency as metric for headless commerce

Operational efficiency: The future metric for headless eCommerce platforms

,
This blog post explores how operational efficiency will be the future metric for headless eCommerce platforms. If you've moved to headless or are planning towards headless transition then this article will serve as the best guide for you.
Read more

Frontastic architecture: Frontastic studio

,
In our architecture blog series, we'll look at each part of the Frontastic architecture, how it works, and what you can do with it. In this post, we'll focus on the Frontastic studio.
Read more
MACH Alliance Logo