Mobile First – or How to Make it in the Mobile World
Mobile First is of course not a new topic. However, with Google’s announcement to base their index on Mobile First, the topic has become new relevance.
Mobile First as Frontend Service
Frontastic offers a Mobile First Frontend Service. This includes two promises:
- The delivered pages are developed with Mobile First in mind, i.e. optimised for a 3G data connection.
- 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 labelling 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!
Responsive Web Design
Also Responsive Webdesign 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 are 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 is 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 – i.e. to think Mobile First. But it is very difficult to do this consistently on the desktop.
For Web Developers
As web developer, for Responsive Design it is important to be meticulous that the layout of the website adapts to the width of the web browser – in simple terms. The four columns on the desktop are displayed one below the other on the smartphone.
The menu is often displayed as a “sticky” hamburger menu (the three superimposed strokes look like a stylised “hamburger”) and some elements, such as a mouse over, simply do not exist on the touch screens.
With all these peculiarities, it is imperative to make sure that the page loads very quickly anyway. Smartphone often still means a slow 3G connection, especially in Germany.
As Online Content Editor
As an online editor or eCommerce manager, I have to make sure that Responsive Web Design displays the graphics well, even on the narrow screen of smartphones.
Furthermore, the amount of information offered must match the screen size, and the interaction areas (buttons etc.) must be operable on a touch screen (keyword “sausage fingers”).
The real challenges of responsive web design are often only discovered in practice, i.e. when the eCommerce page is operated on a real smartphone (and not in the browser preview).
The Limits of Responsive Design
For the 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 will not only look out of place, but is usually also 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 one graphic is stored for each of the two types, desktop and smartphone.
Mobile First Design
Due to the strong increase of smartphones in the traffic of many websites, the trend goes towards a Mobile First development. The first eCommerce shops have started to offer Mobile Only experiences. This of course 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 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 are creating an application for a touch device. Accordingly, the buttons, menus, etc., have to be designed touch-friendly. But mobile first design goes far beyond that. It is 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 is not 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 is a Responsive application, it is important to make sure that it does not negatively influence the mobile variant (e.g. by large scripts etc.).
As Online Content Editor
From the editor’s point of view, there are also two 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 does not mean that pages can only be displayed on a smartphone. Instead, it means that there is 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 do not work on the other seems very sensible.
Mobile First as Frontend Service
Frontastic has put the experience from hundreds of projects into its frontend service to provide a solution that offers perfect Mobile First experience. Since the final solution is always developed by an agency or integration partner based on the Frontastic platform, we have 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.
The Frontastic team