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 optimisation 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.

eCommerce Website Design
Your online store, built by experts
  • Focus on your business while we set up your shop
  • Copywriting, SEO, maintenance and more included
  • Learn how to manage your site with free training

New approach in web design: mobile first instead of desktop first

Put simply, mobile first is a concept for mobile optimised 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 favoured 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 turns it on its head, affecting not only a site’s look, but also the technical infrastructure behind the website.

The mobile first principle

When developing a mobile first strategy, all of the main aspects relating to product, brand, or provider as well as the web site are laid out at the start. In contrast to more traditional web design, less emphasis is placed on content and pictures. Instead, a stronger focus is placed on core functions and modules that must be fully integrated into the website. The message here is simple: focus on the essentials and do not invest more time and energy in programming than necessary.

The mobile first principle at a glance

  • Less is more: focus on the bare bones of the project
  • Keep time and energy spent on programming to a minimum
  • Maximum performance on all mobile devices
  • Faster Access to Information
  • Design that caters to smartphone displays
  • Avoid large pictures and unnecessary pictures
  • Scale back source code
  • Avoid using JavaScript, programme the page directly in HTML5

The key message here is to focus on developing optimal solutions for mobile devices. Laptop and desktop displays are of secondary importance and should be optimised according to the principle of progressive enhancement. So-called grids are often created in a smartphone format when implementing this strategy. The next step involves scaling up the website so that it is suitable for larger displays as well. And of course, no matter what device you are programming for, practicing good responsive web design is essential when optimising the display of content.

What are the advantages of a mobile first approach?

The sheer number of mobile internet users alone speaks volumes, especially when compared with the situation of years past. No longer a niche sector, mobile web design has proven to be an indispensable market that marketers and business alike can no longer ignore. According to experts, mobile data traffic worldwide will increase fivefold to 49 exabytes by 2021.

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.

Turning perceived weaknesses into advantages

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 ads 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.

The new criteria of usability

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.

What is mobile friendly?

Testing whether a site is considered mobile friendly by Google is easy and can be tested simply by entering the URL of the mobile or responsive site into the following tool: Google-Webmaster-Tool. Through this function, web designers gain further insight into how Google Crawler taps into websites and evaluates important factors.

A website is mobile friendly…

  • if content is recorded and collected as quickly as possible
  • if content is responsive and understandable right off the bat
  • if the website has a short loading time
  • if links are easily readable and can be clicked on without a struggle

A website is not mobile friendly…

  • if they contain uncommonly used software (Flash, for example)
  • if the font is too small and difficult to read
  • if the links are packed too close together
  • if the content is too wide for the display

Mobile first means content first…

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-organised 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, should also 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 organised into smaller, more compact paragraphs that are clearly identified with titles so users are able to quickly grasp the information they need. 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. 

Mobile websites as an alternative?

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.

Page top