Have you got a business-objective?

We have a solution.

Get a consultation right now!

contact us

request a quote
Enter your name
Your contact number
Enter your message
Natalya Brinza Project Manager

Mobile First - complex approach to development or 2019 web design tend only?

Columns

Mobile First - complex approach to development or 2019 web design tend only?

The mobile first metodology is based on placing priority on paying attention to mobile version during all the process of development so that web architecture is built on the basis of mobile one.

When the question is about adaptation website to mobile version, developers hide all the excess elements that don`t fit in a small screen. When It`s about mobile first, there isn`t a need of hiding as the initial version is already concise and focused on the content and interests of consumers.

After opening such page in a broadsheet, informational blocs realign. For instance, carousels unfold in horizontal blocs of cards, navigation fills the place in a header without moving to burger menu.

Important point: after moving mobile first to broadsheet new blocs of information don`t appear. Fulfilling is achieved with quantity, design and placing of those data.

Pro and cons

Such topics bring a storm of emotions among web designers and developers. After reading hundreds of similar holivars, we`ve pointed out the most common replicas of fans and opponents of mobile first.

Pros:

  • the interface is easy and concise, usability is improved;
  • the method works at the very early stages, you can immediately cut off unnecessary functionality;
  • there will be no loss of content on the way from the desktop to the mobile screen;
  • organic mobile first ranking by search engines;
  • mobile users receive the content that is needed here and now without a ton of hidden styles, code and pictures;
  • more and more industries where the share of mobile users prevail;
  • the volume of such traffic is growing and the market has perspectives to develop;
  • it’s easier to accustom a person to mobile than to force to install an application that repeats the functions of a web resource.

Objections:

  • there are industries where this is not applicable;
  • the abundance of different devices, so mobile first should be realized for all of them.;
  • It`s harder to make prototypes and concept in the early stages;
  • customers have little knowledge of the specifics and do not want to overpay for cool methodologies;
  • it is not easy to overcome the psychological barrier in design with MB;
  • there are technical differences for Android and iOS;
  • specialists of a higher class are needed because making a high-quality mobile first is more difficult;
  • It`s possible to make a budget mobile site on a subdomain, rather than create an adaptive design for an existing one;
  • such traffic is overrated, most are in social networks and instant messengers.

Traffic “for a rainy day”

One hundred people account for an average of 96 mobile phones. The highest concentration in Hong Kong is up to two and a half telephones per person, the smallest - in Cuba and North Korea, where statistics show twelve phones per group of the same volume. More than half of the total number of smartphones provide the ability to view web resources. At the same time, only 48% of the world's population is provided with stationary Internet access.

Almost half of users need a smartphone only for traditional methods of use - calls and messages. They do not download new applications and almost do not browse sites. Such people constitute a reserve for the capacity of the mobile Internet audience for a rainy day.

Statistics of habits and behavior from the agency ThinSlices:

  • 68% of operations with a smartphone are carried out at home;
  • 72% of users constantly keep their smartphone at hand;
  • an ordinary user interacts with the phone about 150 times a day;
  • Europeans are more likely to use the gadget during the day, Americans in the evening, and Chinese during lunch;
  • the most popular services to use on the go: Facebook, YouTube, Gmail, WeChat, Twitter, Skype, Whatsapp and Instagram, but Google Maps remains the record holder.

To create a web site with high chances of becoming popular is much easier with an understanding of the behavioural mechanisms of its target audience and what people are willing to spend time on under certain conditions. Trends in website design in 2019 are changing and focus on the end consumer always remains relevant.

Rating of various activities using a smartphone:

  • leisure and entertainment - 46%;
  • communication - 19%;
  • purchases - 12%;
  • management of other activities - 11%;
  • preparation for other activities - 7%;
  • information search - 4%;
  • interests and hobbies - 1%.

The first three categories of the list concentrate 77% of the total time spent with the phone in hand.

Components of the mobile first method

To make a quality product, taking into account not only the 2019 web design trends, but also the convenience of the end user, a number of technical recommendations must be observed. They affect not only content but also menus, page weight optimization, object recognition.

Content comes first

!!!!“As a general rule, content takes precedence over navigation on mobile”!!! - Luke Wroblewski “Mobile First”

A mobile user wants to get the result immediately, not specifying questions. A very good illustration: imagine a person asking a question and holding a stack of answer cards. He takes out a card, studies it for two or three seconds and takes a new one. We do not know how many cards he looked before. And we don’t know how many more cards he is ready to view.

In most cases, smartphone users get to the site via a link from a search, email, messenger or social network. An open web page should immediately give a satisfying answer and draw attention to the further viewing of the page.

In addition to the time limit, people are constantly constrained by modest screen sizes. Therefore, it is doubly important to filter out content that does not lead the consumer to the goal.

Any decorative element, any extra picture is a weighty cobblestone on the way to solving the visitor's task. Not without reason, the interface of smartphone operating systems has come to reasonable minimalism - it completely lacks decorations. The new trends in web design in 2019 are functionality, minimalism and an abundance of “air”.

The similar concept should be adhered by developers during the process of developing mobile first web sites. It`s enough typography and color coding to highlight the important and emphasize. A picture without content is an extra load. Creating animations for the site should also be included in the concept of helping users move towards the goal.

Almost any adaptive website made by specialists has a minimalistic upper part and hidden navigation. Almost the entire visible area is given to the content.

Simple and responsive navigation

Sometimes the part of navigation is placed on the main page to improve perception so that the user clearly understands what he wants and what he can get.

In other cases, navigation looks traditional: a modest icon and a burger menu that opens over the contents. But there are some tricks here.

  • The burger icon should change view when the menu is open and give the opportunity to close the navigation.
  • If the menu items differ in importance, it is recommended to visually highlight the accents - highlight the item with the product catalogue or the main landing page with information about the service / product with an icon or colour.
  • When the site structure is complex, the menu can be multi-level, with the transition to additional blocks with links to subcategories.
  • For long menus of the second level, it is better to take a separate block in the burger with the ability to scroll down the screen.
  • If there are few links on the second level, an excellent option would be to simply unfold the catalogue into a tree structure.
  • With multi-level navigation, it should always be possible to go back one step without closing the menu.
  • If you are planning a large nesting, you should limit yourself to the first two points in the burger, and then place links to deeper levels of the catalogue right at the beginning of the page. Of course, you can hide 4-5 different screens with links to the burger menu. But according to the test results, such navigation is difficult to use because of the long sequence of steps.
  • Trends in modern web site design are about convenience, so in the footer, it is advisable to make a duplicate navigation structure in a different form - to implement it with an accordion, with the deployment of the page tree.

Proven fact: the burger menu is a dubious decision that negatively affects the depth of page views, but often there is simply no alternative to it. To improve the user experience a bit, you can duplicate important navigation items right on the page. Alternatively, add on the first page a clearly visible “Product Catalog” button that opens the desired level of basic navigation without having to search for an icon or open a separate catalogue menu.

When working with mobile navigation, you must definitely track the path of movement on the site. It is important to adjust the design of the menu if, in terms of items, people move much less frequently.

Buttons and calls to action on a small screen

Before committing any activity, the reader scans the space for several seconds in search of the necessary / interesting information. In this case, attention is directed along a well-defined path - from top to bottom, with periodic movements from left to right.

Renowned newspaper designer Edmund Arnold called this the “Gutenberg Principle." It illustrates well the gravity of reading, which helps determine the right places for any important blocks and calls to action.

Down or up

The most natural option is to place a button at the end of the screen or block that calls for action. The gaze moves down and easily finds the active element that completes the logical construction. If you place it at the top, you have to come back and lose valuable time.

If the button implies repeated steps (settings, editing, mark “favourites”), it will be logical to place it at the top. In the case of the online store, only the shopping cart icon is added to the header, and “buy” to the bottom of the product card.

Horizontally and vertically

Call to action buttons can be grouped in a mobile screen. If two such elements are placed side by side, most often this implies that they are connected by a common task. For example, yes / no, forward / backward, accept / skip.

People got used to the idea that nearby things are somehow connected, so the choice of one object from two will be more understandable and appropriate. Also, the horizontal arrangement of the two buttons in a row carries the implication that they are equally important.

If you place them one under the other, it is perceived differently - as primary and secondary, with a completely different context. A good example is “Buy” and “Write to the seller” in the marketplace. One team does not cancel the other, but “Buy” looks more priority.

Call-to-action visual language

The main button does not always need to be tied to a strict position. A person will understand if it is highlighted in colour, differs in shape and size.

For example, the button “Start” literally gives the signals that it`s the main one.

Don`t forget: If the interface of the website is complex with dozen of different buttons, the visual hierarchy must be thought through to make their role intuitive.

A simple example: all the confirming buttons are green, all the rejecting ones are red. Button “Buy premium” is blue in order to emphasize exceptionality. After viewing several pages, the user is supposed to rely on visual hierarchy without reading the text on the buttons. It`s important not to break the habit after situation when user will find a green button “delete my account”.

Stick buttons

We got used to “sticky” menu and other tools that take exact place on the screen despite scrolling. In a case with a smartphone, you should be attentive using the trick for fixation “Call-to-action” button.

The question is that mobile browsers automatically hide their interface If the user doesn`t interact with the lower or upper edge of the screen. It is implemented in order to create more free space.

Sometimes a developer puts a “sticky button” with an important target action at the bottom, thinking that the visitor will inevitably notice and react to it. And then it suddenly jumps up, because the phone regarded clicking at the bottom of the screen as a request to show the browser interface. It is worth remembering that web development trends do not matter if the user experiences discomfort when using the product.

Check-list for mobile site optimization:

  1. Images are correctly selected for being shown on different types of screens. Photo content has sufficient quality to be displayed on the retina display of the smartphone without blurring.
  2. Banners have the correct aspect ratio on different gadgets. If the banner on the phone takes square or portrait shape, then on the desktop it tends to be wider horizontally.
  3. All buttons are large enough and not too close to prevent accidental pressing.
  4. Optimized the speed of loading the site, removed all unnecessary.
  5. The input fields are defined correctly, taking into consideration the type. It is especially important for entering phone numbers and credit cards - on a smartphone it is advisable to open exclusively a numeric keypad.
  6. Native input tools are used to indicate the date, time, and other special formats. This is also achieved by correctly specifying the type of input field.
  7. If the links are arranged in a list, one below the other, they have clickable areas around the text so that the user does not look for where to put the finger.
  8. For the content, reasonable space from the edge and a comfortable line spacing are indicated.
  9. Technical data are downloaded gradually or on demand, using “lazy load” - this is especially true for large carousels with product cards.

A few points in favour of Google Mobile First Indexing:

  • reasonable font size according to Google - at least 14-16px;
  • text content is structured and paragraphed;
  • sentences no longer than 50-60 characters;
  • the text has a suitable contrast relative to the background;
  • the mobile and desktop versions are equally filled with content;
  • all clickable elements have an active area that you can actually reach with your finger - at least 44px high;
  • HTML5 standards are used to display media content;
  • there is enough free space between objects;
  • Pop-ups do not interfere with learning content;
  • micro-marking is observed, especially on the pages of online stores, as well as in breadcrumbs and on pages with contacts;
  • the site loads quickly;
  • there is no additional scrolling due to elements wider horizontally than the phone screen (exception: galleries and blocks of cards with the ability to swipe).

One finger and one eye

The pace of interaction with the phone is much higher than with a computer. In addition, the smartphone is used in a distracting and annoying environment.

Google Product Director and author of Mobile First, Luc Wroblesci, noted that mobile interfaces must combine high-speed interaction with simple functions and crystal clear presentation of information. A typical user operates with a smartphone with one finger, capturing the screen with almost only one eye for frequent, but short sessions. Therefore, the trends in the 2019 UX design are more and more focused on the speed and use of gadgets in transport.

The “one finger and one eye” rule can be applied for a qualitative estimation of the design of a mobile application or adaptive website. Completely this principle sounds like a question: “Can a user in sixty seconds complete the necessary action with one finger and one eye?”
Why only in a minute? People who use a smartphone with different tasks more than 150 times a day do not have 5-10 minutes to master an incomprehensible interface. If you did not manage to meet the deadline for interaction or did not manage to take over the necessary information, the user will simply go to the one who was able to do this. The need for speed and accessibility is the cornerstone of mobile user motivation.

A good example is the experience of Luke Wobleski in working on the Polar service, designed to instantly create photo polls. Designers made a decision to give the user the opportunity to create a new poll with simple manipulations in just a minute.

The development of the Polar mobile application allowed us to conduct research and prove the shortcomings of the vector of development of interfaces in voice control. In an annoying environment, the high sensitivity of voice input becomes an insurmountable barrier - it’s worth activating Siri, when someone starts talking, and the sounds overlap, causing confusion among the voice assistant.

Brief conclusions for those who have not read the text entirely

  1. The essence of the mobile first method in the initial development of an adaptive with the optimal set of content and functions.
  2. When working on the desktop version, the new one is not added, it is only reformatted and executed differently.
  3. In the world at the moment, almost everyone has a phone, half uses it as the main device for surfing and communication. So the prospects for developing mobile friendly sites are gigantic.
  4. 77% of mobile traffic comes from entertainment, communication, and shopping.
  5. The mobile first method is in demand and has the right to life if the product has at least a hint of an audience with smartphones.
  6. Website development requires more skills and time, which means it will be more expensive for the customer.
  7. Competent and well-developed development of responsive sites leads to increased conversions and greater user loyalty.
  8. When using a smartphone, people spend a few seconds making a decision, so the pages need to be filled with extremely useful content.
  9. Navigation on the website for a smartphone must be made as clear as possible, without much nesting.
  10. Burger menu is a necessary evil. Priority navigation elements can be duplicated on the pages of the site.
  11. There is a “reading gravity” - attention is directed from top to bottom, with deviations from left to right. This must be considered when placing calls to action.
  12. The buttons located next to each other need to support each other and not compete (ideally - one button without options).
  13. Specialists make active objects so large that they are comfortable for pressing with a finger.
  14. Page loading speed is the most important. It is achieved not only through page optimization, but also through competent content design and the use of gradual data loading.
  15. Google Mobile First Indexing on the side of Goodness in the face of mobile site developers.
  16. Often ask yourself the question: "Can a user in sixty seconds complete the necessary action with one finger and one eye?"
  17. This is a good article.
Enter your name
E-mail
Message
cosmo