{"id":3268,"date":"2023-08-02T14:56:35","date_gmt":"2023-08-02T14:56:35","guid":{"rendered":"https:\/\/oneline.ch\/en\/?p=3268"},"modified":"2024-01-08T07:05:07","modified_gmt":"2024-01-08T07:05:07","slug":"mobile-first-webdesign","status":"publish","type":"post","link":"https:\/\/oneline.ch\/en\/mobile-first-webdesign\/","title":{"rendered":"Mobile-First Design – Essential Foundation for Web Design"},"content":{"rendered":"\n

What exactly is mobile-first web design?<\/strong><\/h2>\n\n\n\n

The English term makes the basic concept behind this design approach clear. When designing the website, the developer assumes that the greater part of the users of the web offer will access the content via mobile devices such as smartphones and tablets. This does not exclude users of notebooks and desktop PCs. However, the web design<\/a><\/strong> should be created to primarily cater to mobile device users<\/strong>.<\/p>\n\n\n\n

The approach makes sense if we take a look at how the Internet has evolved over the past decade. In 2012, about one in ten visits to a website took place via a mobile device. At that time, Internet use via PC and laptop was still much more widespread. The trend has now changed, and the proportion of mobile calls has remained constant at between 50-60 % for years.<\/p>\n\n\n\n

Depending on the target group and the content of the website, it therefore makes sense to think “mobile-first<\/a>“. What is obligatory for the creation of new internet presences is even more true for outdated websites without an appealing mobile presence.<\/p>\n\n\n\n

What distinguishes this type of web design?<\/strong><\/h2>\n\n\n\n

Of course, companies expect a professionally developed website to work for mobile and stationary users and to reflect the corporate design optimally. Therefore, under the “mobile-first design<\/strong>” approach, the appearance on larger screens does not suffer. Nevertheless, there are some features and characteristics that are essential for a mobile-optimized website<\/strong>:<\/p>\n\n\n\n

1. The navigation <\/strong>is kept very slim and intuitive to use. Larger menus with numerous entries are not used. Instead, the page includes only a few menu items that can be called up quickly and easily. The so-called “hamburger menu” with three dashes, which allows the navigation to be shown and hidden, can also be discovered on many desktop versions of the site.<\/p>\n\n\n\n

2. The content is designed as a one-pager<\/strong>. Here, the user no longer has to scroll back and forth between different subpages, but finds all the information presented compactly on a single web page. Clicking on a menu item automatically scrolls to the entry on the single page. This structure corresponds to the usage behavior of smartphone owners and will be continued for the desktop variant.<\/p>\n\n\n\n

3. A straightforward method of contacting<\/strong> the company is possible via the website. If you assume that the user accesses the page via smartphone, the option to call or send a message on WhatsApp can be linked directly. If the user of a desktop PC were in the foreground, it would be more likely to work with an e-mail address.<\/p>\n\n\n\n

4. Media content<\/strong> such as images and videos are created in small formats with manageable resolution. This reduces content loading times<\/a> and ensures that the user does not bounce while waiting. Good page development provides the same media files in different sizes depending on the end user device.<\/p>\n\n\n\n

Mobile-first web design – advantages at a glance<\/strong><\/h2>\n\n\n\n