Mobile First: What’s in your name?

What could mobile phones do 20 years ago? They could call and send messages. Only two main features.
What had changed 10 years later? In addition to the above, you could listen to music via MP3 player, take photos and even connect to the internet - that is, only to its WAP-version.

Now, let's go back to present days. Today, we have tools that are more than just phones: they’ve become fully functional computers with all the capacities that were previously available only on desktop PC’s. You can manage emails, read news on your favorite sites, watch movies and even do complex paperwork with the help of word processor apps.

Smartphones and tablets are intensively replacing massive desktop PC’s and laptops. The role of “Internet gateways” is now successfully transferred to mobile devices. But with great convenience also come some issues, such as the relatively small display size, for instance. Moreover, a smartphone’s price may be appealingly lower than that of a fully “loaded” gaming PC, but that is because it is less powerful; therefore, “heavy” sites may load slower than you’d wish. Besides, if you are not connected via Wi-Fi and want high loading speed on your device, you will need to opt for the more expensive solution of carriers’ 3G or LTE-connection.

Everything listed above has given us an opportunity to create new technologies for web development. Many services became oriented on smartphones and tablets. Nowadays, people who would like to check their credit card balance or order pizza delivery will usually do it via mobile apps. When there is no mobile app for a particular service, the user has no desire to turn to their computer and wait for the operative system to load with all its services. In this situation, users will be more likely to visit the website using their mobile web browser. This is where a big problem appears: if the site is not optimized for smaller display proportions, it will look terrible to users. Therefore, during development, you need to dedicate extra time towards the mobile design, so that your site will look just as good on smaller displays.
Nowadays, developers often begin by designing websites to suit smartphones before making the site for larger displays. This approach of prioritizing the development of the mobile version is called “Mobile first”.

The term was first used in April 2009 on “Web 2.0 Expo” by Marc Davis, employed at “Yahoo!” at the time. He reminded the audience that their mobile phones have ceased to only be “something to make calls”, but rather that they have become powerful multimedia devices. And this power should be used properly. Development methods that are considered acceptable or common for the monitor screen will not necessarily look good on smaller displays: it needs a completely different approach.

Therefore, based on the distinctiveness of mobile devices, we deal with development for PCs and laptops.
User-friendly techniques and the users themselves are the center of attention. The level of convenience when dealing with a website is extremely important. Because displays are usually between 3.6 to 5 inches, there must be no redundancy: everything should be useful and intuitive! It is nearly impossible to fit a nice-looking and fully functional slider within such tiny dimensions. The pictures displayed can be too small and loading might be a complicated task for less powerful devices.

In 2015 Google launched a new algorithm for its mobile search-engine. The community named it “Mobilegeddon”. As a result, mobile-friendly pages are now displayed in priority in the search results, only later followed with regular websites. In order not to affect PC and laptop users, this update only had an impact on mobile devices; while nothing transpired on computers. Google’s well doing in this situation is shown below:

We suggest to dig deeper into the principles of the “Mobile First”.

First, let’s have a look at the usual “Desktop first” method. It represents a manufacturing decomposition approach “from complex to simple”:

At a first glance it looks like there is no difference at all. Elements on the picture will simply go in the opposite direction. However, the developing approach is entirely different.

The main advantage of “Mobile First” is that it does not clash with adaptive design. Adaptive design is meant for bigger screens but has multiple layouts to adjust to the size of the screen. However if you view such a website on smartphone some content may be hidden.

Front-end development of such websites involves additional challenges due to the availability of the hidden content. You will have to use ajax-requests or follow LazyLoad JavaScript plug-in rules in order to display pictures, for example.

With the principles of “Mobile First”, the process of creating a website layout is the same, only, we begin with a mobile version first.

For the adaptation it would be best to use media-requests:

Also, depending on project, these methods can turn out to be useful:

We cannot forget about cross-browser support:
https://caniuse.com/#search=orientation

If we specify “device-width” for the “viewport” meta tag in the “width” value of the element, this setting will be updated and put to use when the user switches device orientation of the phone or tablet.

Combined with media-requests, this feature allows us to change the page layout when device orientation changes.

In addition, we could use a JavaScript library for device recognition. There are plenty of them, you could use device.js, for instance.

https://github.com/borismus/device.js/tree/master

The separation of the mobile and desktop version to different files is a complicated issue, however, the following method can be used to solve it:

This will be useful in case the customer wishes to separate desktop and mobile versions of their website.

“Mobile First” is mostly dependent on the budget since its development will take additional time and expenses. This method can be used as a separate tool, if we consider only the front-end part. If utilized incorrectly, “Mobile First” could transform into “Mobile Only”, which would not be appealing.

This should be avoided at all costs; the amount of content shown should increase with display size rather than be stretched.

To sum up the article, we would like to give a reminder that you can always ask questions via our social media pages. We will try to answer all of them.
We wish more spotless code and stunning designs to the rest of you!