What is the first thing you do when you wake up in the morning? One of the answers is definitely “I look at my mobile phone first. I check the messages that have come and scroll through Instagram. I want to see what is happening in the world while I am sleeping at night.” Let me ask another related question: What do you not separate from yourself during the day? Again, definitely one of the answers is “my mobile”.
In the beginning, mobile phones were just a means to communicate with others. But today, mobile phones have become a means of work, education and entertainment for many of its users around the world. Many internet users connect to the internet with smart phones and use it. Many people who have online businesses (for example, someone who sells homemade sweets through his Instagram account) only run their business on a mobile.
“Therefore, it is not an exaggeration to say that the mobile has become an integral part of our lives.”
The widespread presence of mobile phones in the work, education and life of people around the world has various consequences. When most people use mobile phones to interact with sites and apps and virtual networks, shouldn’t sites and apps be designed and built to be mobile friendly? Yes, websites should not be designed only for desktops. Designers and developers of a site when they build a site should pay attention to another type of web design called Mobile First Design.
What is mobile-first or mobile-centric design? What are its features and why is it important? What are the principles of mobile first website design and what are the differences with desktop first website design? Read the answers to these questions in the rest of this article and get to know Mobile First Design completely.
Table of Contents
What is mobile-centric design?
When websites were just born, they were visited by a limited number of people with a limited number of devices. But gradually and with the advances that happened in different technologies, all kinds of computers, laptops, and then mobile phones, smart TVs, and tablets came to the market. Both the number of Internet users and sites increased, as well as the devices with which users visited the sites. So, web designers face the challenge of having to design a site to be displayed on several different types of devices with different features.
Website designers and developers have proposed and reviewed various solutions to solve that challenge. The result of suggestions and reviews was that very important concepts were created in the field of web design: Device Friendly websites, responsive design and mobile first design. All these concepts revolve around the fact that sites should be designed to be compatible and suitable for display on different devices and not just one specific device.
Therefore, the definition of mobile-first design is that the site designer in mobile-oriented design first designs the site to be compatible and suitable for display on the small mobile screen, and after making sure that the site is displayed correctly on different mobile screens, he goes on to adapt the design for devices with larger screens.
“Designing and developing for small screens compels designers to remove anything that isn’t necessary for seamless website rendering and navigation.”
Why is mobile-centric site design important?
I think in the introduction, I answered the question why mobile site design is important. But let me explain a little more about the importance of mobile-first design. Look at the diagram below. More than 50% of website traffic comes from smart phones. These statistics show that more and more people around the world are using mobile phones to open different sites every day. According to other global statistics, this increase will continue because the number of people who have mobile phones will increase every day, and as a result, more people will have access to the Internet with mobile phones.
Imagine you want to buy from a store site. You enter the site on a mobile phone and you see that nothing is displayed correctly and you can’t even find the menu. The menu you find is not complete and does not have all the products. What are you doing? You leave the site unsatisfied. So, if the site is not mobile-friendly, it will not have a good user experience.
An unsatisfied user of that store site means losing customers and sales, and in the long run, it may lead to the destruction of the business. When internet and website users prefer the mobile to the desktop, then product designers and web designers should give priority to the mobile in designing digital products (websites and apps). Otherwise, the product (like that store site) will fail.
How should the site be designed mobile-centric?
Before addressing the principles of mobile first design or methods for mobile first website design, I must say that this type of design was first introduced to the world by a famous product designer named Luke Wroblewski in a book called Mobile First in 2011. In this book, he talked about the importance of mobile site design instead of desktop and laptop, and also gave suggestions to site and product designers to implement mobile-first design.
“Mobile-first design is a multidimensional concept, which means it is related to both product design and web design and its user experience design, and as a result, it is indirectly related to site SEO and sales. Because search engines also like sites that are designed for mobile first.”
In order for the designer to be able to design the mobile site, he must follow a set of principles (the principles of mobile-first design) in web design. As mentioned, mobile-first design is an approach to website design and a concept in which priority is given to mobile screens and mobile users in website design. So, the web designer is not supposed to use a special technique or technology in mobile-oriented design. Rather, he should remember the mobile users and design the site for them first. This means that the site designer does not have much space and must include elements in the site design that are useful and practical for the mobile user and he is looking for them on the site.
What are the principles of mobile-oriented design?
Mobile-first design has 4 principles that the website designer should follow from the beginning of the web design process based on these 4 principles. By observing the following principles in website design, the web designer makes the best use of space and elements. Of course, in some sources, the fifth principle may be added to the following list: responsive design.
Mobile-centric design is different from responsive website design. In responsive design, the point is that the site should be designed to be compatible with the screens of different devices, not just mobile phones. The site must be responsive so that it can be displayed correctly and completely on tablets, mobile phones and even smart TVs (on any screen of any size) and it must be designed mobile-centric.
1. In mobile first design, priority is given to the content that the user wants
What information is important for the user when he enters a store site? What is he looking for? When the site designer does not have enough space to display all the information and elements, he must choose those that are essential for the site user to know.
2. On mobile first, the design should be simple and the visual hierarchy of the content should be clear.
As is known and mentioned, in the design of a mobile, the first web designer only had space for essential elements. There should not be any additional, decorative or disturbing elements that disrupt the interaction between the user and the site in the structure of the site page. Everything should be designed with simplicity and transparency, that is:
- Do not display pop-ups;
- The font size should not be too small and should be readable and clear for the mobile user;
- Use white space to separate elements;
- The visual hierarchy of the content is so clear and detailed that the user can find the most important information at a glance;
- Use hamburger menus;
- Care must be taken to place CTA buttons. The design, number and location of these buttons is important. Their numbers should be few and very clearly and impressively designed. Their location should be the same on all pages and somewhere on the page where the user can easily click on it.
3. In mobile-first design, the main focus is on UI and UX.
To design the structure and arrangement of elements, the web designer should take help from the rules and principles of user interface and user experience design. For example, to organize the navigation on the site, it can work based on the hack law. By using the results of UX research, the web designer can easily use the space he has in the best way. Also, user experience says that the site should load quickly and not keep the user waiting. As a result, the designer should not have heavy elements in a mobile first design.
4. The designed site must be tested
When a web designer finishes designing a mobile-first site, he must test it. That is, he must make sure that the principles are followed and that the mobile user does not have any problems with the site. There are different ways to evaluate a mobile-first design. The easiest way is to open the site with different mobile phones and browsers and see its performance. Another way is to get help from tools, powerful tools like IT browsers.
Examples of mobile first design
Well, it is not difficult to find sites that are designed for the mobile first. Just open the site with your mobile phone and see what happens. But for example, I will introduce some very famous sites that were designed very well for mobile and mobile users.
- YouTube
- Apple
- Nike
- Tesla motors