Mobile First

The term “mobile first” is a concept used in web design and the conception of websites. Based on this concept, an optimized version for mobile devices is created first and then expanded. Thus the “mobile first” strategy follows the trend that more and more users are surfing the Internet with their smartphone or tablet, and not with the desktop.

600x400-mobilefirst-en-01.png

Background

Web development and web design have focused from the outset solely on designing sites for stationary desktops. First, such designs were relatively simple because of the smaller downstream bandwidth, since the connection to the Internet in the 1990s was still done via dial-up modem with a maximum speed of up to 54 kbit/s. Consequently, design and functionality had to be matched to the surfing speed. Eventually websites were able to offer more and more features, because downloading became faster thanks to DSL. With high-speed Internet via VDSL, speeds in excess of 100 Mbit/s could be achieved depending on the region. The loading speeds of modern websites could not be realized today with a conventional dial-up modem.

But while the Internet access at home quickly evolved, the mobile Internet developed parallel to it, which was operable from the beginning with the GSM standard and underwent a first specialization with WAP. After mobile data connections became successively faster and now at its current peak (as of May 2014) with the fourth generation mobile LTE, mobile Internet has become increasingly popular. In Germany, for example, more than 70 percent of Internet users surf the Internet on their smartphone as of 2013.

In the course of this parallel development, web designers, webmasters, and SEOs must ask themselves more often how content can be optimized for mobile devices. Mobile optimization is a consequence of the above considerations. The “mobile first” strategy has a different approach, specifically at the beginning of all considerations. Trends like responsive design pick up on these ideas.

Google has once again increase the meaning of mobile first since making the Mobile Friendliness 2016 a ranking factor, and then later making the mobile index to the primary index.

The principle

Websites are usually designed for desktops. Web designers and programmers develop extensive functionality and graphics, which are designed for both large screens as well as fast data connections. A mobile version of an online shops or a website was planned only as the second step and was usually only some kind of “appendage” to the main website. For the purposes of mobile first, the priorities are reversed.

First, the following questions need to be answered:

  • What is the central aspect of my website?
  • What elements of my website are absolutely necessary for the website design?
  • Which areas must work on desktops and mobile devices?
  • For which screen size is my content made?

The design of a website is thus limited to the rudimentary and essential. Only that which is actually necessary is programmed and set up to maximize functionality on all devices. Sketches of websites are designed directly for smartphone screens. This leaves no room for large images or functions, which means the areas that are visually immediately obvious get cut down radically, as well as the source code. Features such as JavaScript are usually not taken into account in mobile first. The site itself can be immediately programmed in HTML5.

The advantages

If you follow the mobile first strategy, you will benefit from many advantages. For one, it would follow the current trend of browsing the Internet with smart phones. A mobile optimization will thus take place automatically at the beginning of website design. But even the desktop version can benefit from mobile first because basically it is not a design approach, but a content-based approach with only the most important content going on the site and only what’s essential is shown. If you want to expand your site later to include additional functions, you can do that without any problems. Moreover, a webpage that is optimized for mobile devices can be more easily adapted to new developments since its structure is much leaner than a conventionally programmed website.

Weblinks

Category

Do you need further help?
Send feedback