Mobile First: the new approach in webdesign

In 2015, Google announced that, for the very first time, mobile search queries outnumbered traditional desktop searches. The online sector has since reacted to this news by integrating new, more robust, mobile-oriented concepts into its web design. As a result, a fundamental shift in web design is currently taking place, and website optimization for mobile devices has taken a more assertive step into the foreground of the industry. One example of this trend is the increasingly popular mobile first approach that many developers have decided to follow. Be it design, usability or performance, what counts here is one basic principle: mobile comes first – and sometimes less is more.

Put simply, mobile first is a concept for mobile optimized web design. As the name suggests with this strategy, mobile oriented sites are given priority, and the development of desktop browser versions are postponed for later completion. Until now, industry practices favored developing desktop oriented websites, which commonly accompanied a wide range features and functions, such as special graphics, visual, and audio aids. Such methods cater to layouts with large computer screens and more robust data connections. As a result, mobile sites often remained a mere afterthought for many developers. The mobile first strategy rearranges this dogma and puts it on its head, affecting not only a site’s look, but also the technical infrastructure behind the website.

You can download the infographic on mobile data traffic worldwide here.

This does not mean the desktop should be ignored; but those seeking more potential customers and greater web traffic should focus on the mobile strategy. Slimming down your tactic to focus on a mobile first approach is by no means a technological step backwards. By focusing on the fundamentals of web design and employing a sleek structure, web presence can be adjusted more efficiently at later times and new developments are easier to integrate.

Additionally, web designers can lighten their work load by using preprocessors when generating CSS designs. With the help of CSS preprocessors, parameters are easily changeable, lending themselves to adjustments in color and font, as well as sparing the user the painstaking task of changing CSS code.

The main advantage of the mobile first strategy is the way it turns supposed setbacks into advantages. Although smaller screens carry with them the natural implications of providing less space for ad as well as some formatting restrictions, a loss of substance is compensated for by leaving out unimportant or distracting control elements. What remains is a reduced and therefore more user-friendly solution. By making the move to a mobile first strategy, website operators are better adapted to the latest developments in user behavior and at the same time also lay down a solid foundation for a successful mobile first concept.

Baring the large displays commonly associated with desktop development, creating new concepts for mobile use presents a unique host of challenges for web designers. New demands for creating a solid mobile first approach entail understanding new principles in user friendliness. And as Google mobile update shows these new practices also play a role in search-engine related topics. Identical search queries on a mobile device and on a desktop will now yield different SERPs. The main factor here is the local context of search functions. It may not be a surprise to know that smartphones are more commonly used to search for the opening hours of a restaurant or addresses of businesses and other locations. Furthermore, the type of operating system used for different tablets and smartphones also has an effect.

In addition to key tenets such as responsive design and adhering to proper technical requirements, relevant and appealing content also remains an essential factor for an optimal mobile user experience. Experience shows that good readability is evaluated, and shorter, more condensed content ranks better when searching on mobile devices. Equally important are clear, well-organized structures that bring the reader directly to the content he or she has searched for. Interactive features, such as a well-thought out link structure, also should not be forgotten. What is clear is that backlinks on mobile sites are now ceding their prominence to increasingly relevant aspects like faster page displays.

This does not mean, however, that content should be used sparingly when following a mobile first strategy. Pictures, texts, graphics, as well as other content elements are still relevant for a website. What counts is that texts need to be laid out in a manner that allows them to be easily consumed on a smaller screen. Texts should be organized into smaller, more compact paragraphs that are clearly identified with titles so user is able to quickly grasp the information he or she needs. These are general guidelines. Pictures and other forms of media need to be set up to load as quickly as possible without sacrificing quality on HD displays. 

There are many advantages that speak in favor of a mobile first approach to web design. But some businesses may not find that going through the effort of a complete relaunch always pays off. Setting up a successful mobile first strategy can prove to be a very demanding technical enterprise. As a way of avoiding these cost and energy intensive relaunches, some companies opt to create a completely separate mobile site. In the long run, every business needs to rethink their approach to mobile devices and understand that mobile is here to stay.

Mobile will most likely play an ever increasingly central role for web developers. Entire business models and processes will also go mobile in the future. Developers still need to know that adopting a mobile first strategy is not always the perfect panacea for a company’s internet needs.  Websites, such as those of large online stores, especially seem to be drawn towards the trend of creating new apps. Remembering to practice responsive web design should still remain a high priority; not every smartphone user is interested in constantly downloading new apps.