Technology RadarTechnology Radar

Shared-First Approach

Shared First is an alternative to the Mobile First approach that has been conceived from our practice.

In principle, the mobile-first approach can be differentiated between the technical implementation of a mobile-first approach and a design and user-centered mobile-first approach.

In the design and user-centered mobile-first approach, page layout and interaction patterns are primarily designed with the mobile usability of the website in mind. Placing important and frequently searched elements in the visible area of the website is the first key, as users can find the content they want more quickly and do not have to scroll through the website or menus for a long time. A central search can also increase user satisfaction because it can provide a direct shortcut to the desired topic. A flat menu hierarchy and directly visible links to topics even at deeper levels offer comparable benefits. Avoiding horizontal scrollers and sliders makes it easier to capture the offer. In addition to design aspects, attention should be paid to short texts when creating content, especially on landing pages, in order to increase the usability of the mobile site. Thanks to faster loading times, mobile users are not held up by long waiting times and the mobile data volume is conserved through reduced data volumes.

From a design perspective, the use of large, easy-to-read fonts and Providing sufficiently large touch areas for good accessibility is essential. In addition, it is important to ensure that there is sufficient contrast, as sunlight or reflections, for example, can impair the readability of the content, especially in a mobile context. Easily accessible contact options help particularly restricted users to receive help or information quickly and easily if necessary.

The technical-conceptual mobile-first approach was the standard in front-end development for many years. There were technical reasons for this: Some browsers at the time did not yet support the necessary technology (so-called media queries), so they wanted to ensure an appropriate display for the users of these browsers.

The disadvantage of this approach, however, is that it is relatively error-prone - visual adjustments can easily have unwanted side effects.

Since all browsers now support media queries, mobile-first development is no longer absolutely necessary. At Factorial we therefore use an approach that we call shared-first. This has proven to be very stable for us in many projects without generating any additional effort.

Factorial's Frontend Lead Michael Großklaus has described more detailed technical details in a blog post: Mobile First versus Shared First CSS

It's also worth mentioning that at Factorial we don't rely on fixed layouts for smartphones, tablets and desktop devices. Due to the extremely large number of different devices with different screen sizes, we design and implement the websites in such a way that they adapt smoothly to the size of the browser. This makes optimal use of the available space and different zoom levels deliver optimal results on every device. By the way, this is also an important aspect of accessibility, which we will discuss below.

Updates

Trial