Why Mobile First?
Much has been written about Mobile First and there are good books on this topic. Still, most developers and companies do not use it in their projects or do not know about this approach at all.
Therefore I want to tell you about him briefly and with examples, it will be useful information for those who have not heard about this approach.
I will try to answer three basic questions:
This year, the number of users using mobile devices to access the Internet has reached 60%. Therefore, mobile traffic becomes more significant and website owners should reckon with these statistics. As practice shows, users of mobile phones and tablets spend less time on the network and prefer sites from the first lines of search results. While PC users can spend more time looking for information. Therefore, your website should be well optimized for search engines (SEO) and meet all the requirements of Mobile First, so that the user’s stay on your website is as convenient and clear as possible through his mobile device.
')
Therefore, one of the most important requirements in Mobile First development is:
So, Mobile First is a method of developing an optimized website for various mobile devices, taking into account the speed of connection to the network. And the importance of displaying the main content to the end user.
The importance of this approach was recently written by the search giant Google:
Video about the importance of Mobile First from Olivier Rabenschlag - the head of the Agency of Creative Development Google.
Let me remind you that today the number of users using mobile devices to surf the Internet has reached 60%. And so the use of Mobile First in the development of the website gives great advantages to these users in the first place.
The implementation of the approach will be demonstrated using the Moff.js framework (Mobile First Framework) . This is a JavaScript framework that is sharpened for Mobile First development.
We will consider the approach on the example of a page with detailed information about the car.
Usually on this page a lot of data. And we have to decide what is important from this first of all for the user.
Detailed list of data on the page:
Imagine that the main thing from this list is the main picture, the name of the manufacturer, model, equipment, price, list of features and equipment.
Next we impose a page in which we add only this information.
Ideally, this is the amount of traffic that can be spent by the user to obtain this data. And we will try to achieve this with the minimum difference.
First of all, we will write styles for displaying pages on mobile devices. And only after that styles are adjusted to other screen sizes via media query.
Now we have to add the remaining data in such a way that the user knows about it and can get the data by requesting it.
And here Data Events helpers and AMD capabilities from Moff.js framework come to the rescue
We have to show the user that there are additional images available for viewing. To do this, we need to add a link under the main picture, which leads to the thumbs.
Here we use Data Events helpers that help to get information when it is requested. When clicking on a link, an ajax request will be sent to the address specified in the
When clicking on a link, the following actions occur:
Next, consider the registration of this module.
Moff framework has a modularity system with the help of which we implement the vehicle-gallery module class.
Modules in Moff are independent application elements that have their own business logic and may have dependencies on external libraries.
During class initialization, we launch a slick-carousel to create a carousel from our bollards and install a handler to view them.
A module is registered using an object that contains a unique identifier, which may contain dependencies of the module and the main file of the module class.
In our example, we specified jQuery dependencies and its slick-carousel plugin, which creates a carousel from thumbs. Dependencies are loaded synchronously, in the order in which you specify. And after the dependencies, the class of the module vehicle-gallery.js is loaded. Further, after loading the module file and its dependencies, we initialize the module in using the afterInclude event.
Let's summarize the results of creating a Mobile First page.
The lower graph shows that an un-optimized page is 73% heavier than a page adapted to the requirements of Mobile First. Thus, we can save 186.94 KB , which the user may not need when viewing your page.
Thus, we get rid of the download of a large number of secondary resources, but which will be available at the request of the user.
This article describes only one example of loading additional information. A complete example can be viewed on the framework website.
Mobile First First Sample
Example of no mobile first page
PS In this article I wanted to show how to correctly use the Mobile First approach using the Moff.js framework
Therefore I want to tell you about him briefly and with examples, it will be useful information for those who have not heard about this approach.
I will try to answer three basic questions:
- What is Mobile First and its advantages
- Implementation of the approach
- Results statistics
What is Mobile First?
This year, the number of users using mobile devices to access the Internet has reached 60%. Therefore, mobile traffic becomes more significant and website owners should reckon with these statistics. As practice shows, users of mobile phones and tablets spend less time on the network and prefer sites from the first lines of search results. While PC users can spend more time looking for information. Therefore, your website should be well optimized for search engines (SEO) and meet all the requirements of Mobile First, so that the user’s stay on your website is as convenient and clear as possible through his mobile device.
')
Therefore, one of the most important requirements in Mobile First development is:
- Show the most important content first
- The website should be lightweight and optimized, because Mobile network connection speed may be weak depending on the location of the user
- The website should not load more resources than the user needs to obtain the necessary information, because Mobile Internet is still expensive. Additional information should be loaded only at the request of the user.
So, Mobile First is a method of developing an optimized website for various mobile devices, taking into account the speed of connection to the network. And the importance of displaying the main content to the end user.
The importance of this approach was recently written by the search giant Google:
“We will increase the value of mobile-friendly in our ranking of results. These changes will affect mobile search in all languages of the world and will have a significant impact on search results. Therefore, it will be easier for users to find results optimized for their devices. ”
Video about the importance of Mobile First from Olivier Rabenschlag - the head of the Agency of Creative Development Google.
Pros Mobile First Approach
Let me remind you that today the number of users using mobile devices to surf the Internet has reached 60%. And so the use of Mobile First in the development of the website gives great advantages to these users in the first place.
- One website for all devices
- Users will get important page content first.
- Fast page loading with low connection speed
- Convenient interface for mobile screen navigation
- The minimum amount of web resources required to display the main content - saving mobile Internet traffic
- Top positions in Google search results
Implementation
The implementation of the approach will be demonstrated using the Moff.js framework (Mobile First Framework) . This is a JavaScript framework that is sharpened for Mobile First development.
We will consider the approach on the example of a page with detailed information about the car.
We determine the important part of the content.
Usually on this page a lot of data. And we have to decide what is important from this first of all for the user.
Detailed list of data on the page:
- Main picture of the car
- Small pedestals additional images
- Price
- Description
- Feature List
- Equipment
- Social services Facebook, Twitter, g +
- List of similar machines
Imagine that the main thing from this list is the main picture, the name of the manufacturer, model, equipment, price, list of features and equipment.
Next we impose a page in which we add only this information.
<!DOCTYPE html> <html lang="en"> <head> <title>Mobile First page.</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles/styles.css"> </head> <body> <div class="container"> <header role="banner"> <div class="header"> <div class="header_logo"><img src="images/logo.jpg"></div> <div class="header_info"> <div class="header_info_company-name">Company Name</div> <div class="header_info_description">Company description</div> </div> </div> </header> <main role="main"> <div class="vehicle"> <div class="vehicle_images"> <div class="vehicle_images_main"> <img src="images/preview1.jpg"> </div> </div> <div class="vehicle_info"> <h1 class="vehicle_info_title">2015 Nissan Versa Note</h1> <p class="vehicle_info_description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> <div class="vehicle_details"> <ul class="vehicle_details_list"> <li><span class="vehicle_details_label">Model:</span> Versa Note</li> <li><span class="vehicle_details_label">Body:</span> 4D Hatchback</li> <li><span class="vehicle_details_label">Engine:</span> 1.6L 4-Cylinder DOHC 16V</li> <li><span class="vehicle_details_label">Fuel:</span> Gasoline</li> </ul> </div> <div class="vehicle_equipment"> <h3>Standard</h3> <ul class="vehicle_equipment_list"> <li>Brake assist</li> <li>Dual front side impact airbags</li> <li>Rear window defroster</li> <li>Passenger door bin</li> <li>Driver door bin</li> <li>Occupant sensing airbag</li> <li>Traction control</li> <li>CD player</li> <li>Trip computer</li> <li>Electronic Stability Control</li> <li>Front anti-roll bar</li> <li>Power steering</li> <li>Rear window wiper</li> <li>Front reading lights</li> <li>Overhead airbag</li> <li>ABS brakes</li> </ul> </div> </div> </main> <footer role="contentinfo"> <div class="footer"> <div class="footer_created"> Created by Company.com </div> <div class="footer_copy"> <ul class="footer_copy_list"> <li class="footer_copy_item"><a href="#">Copyright</a></li> <li class="footer_copy_item"><a href="#">Contact</a></li> <li class="footer_copy_item"><a href="#">Sitemap</a></li> </ul> </div> </div> </footer> </div> </body> </html> Ideally, this is the amount of traffic that can be spent by the user to obtain this data. And we will try to achieve this with the minimum difference.
First of all, we will write styles for displaying pages on mobile devices. And only after that styles are adjusted to other screen sizes via media query.
@media (min-width: 768px) { /*Tablet and desktop styles*/ } Add additional information
Now we have to add the remaining data in such a way that the user knows about it and can get the data by requesting it.
And here Data Events helpers and AMD capabilities from Moff.js framework come to the rescue
Add thumbs for the main picture
We have to show the user that there are additional images available for viewing. To do this, we need to add a link under the main picture, which leads to the thumbs.
<div class="vehicle_images"> <div class="vehicle_images_main"> <img src="images/preview1.jpg"> </div> <div class="vehicle_images_thumbs"> <a href="thumbs.html" data-load-target=".vehicle_images_thumbs" data-load-screen="sm md lg" data-load-module="vehicle-gallery"> See more images... </a> </div> </div> Here we use Data Events helpers that help to get information when it is requested. When clicking on a link, an ajax request will be sent to the address specified in the
href attribute. The result of the query will be written to the element that is specified in the data-load-target attribute. The important point is that the data-load-screen attribute indicates at what screen values the thumbs will be loaded automatically. Screen sizes are taken from the Twitter Bootstrap CSS framework. And in the data-load-module attribute, specify the identifier of the registered module, which will be connected after inserting the result of the ajax request.When clicking on a link, the following actions occur:
- Ajax request is sent to the URL specified in the link and the result is inserted into the page.
- A registered module is connected (vehicle-gallery)
- Dependencies are connected (jQuery and Slick-carousel)
- The main file of the module is loaded.
- Module initialization
Next, consider the registration of this module.
Module class declaration
Moff framework has a modularity system with the help of which we implement the vehicle-gallery module class.
Modules in Moff are independent application elements that have their own business logic and may have dependencies on external libraries.
Moff.modules.create('VehicleGallery', function() { var _module = this; var _mainImage; function setMainImage() { _mainImage = _module.find('.vehicle_images_main img')[0]; } function initializeSlickJs() { $(_module.find('.vehicle_images_thumbs-list')).slick({ infinite: true, slidesToShow: 5, slidesToScroll: 1 }) } function handleMainImage() { $(_module.scope).on('click', '.vehicle_images_thumbs-item img', changePreview); } function changePreview() { var index = this.src.match(/thumb(\d+)/); _mainImage.src = 'images/preview' + index[1] + '.jpg'; } this.scopeSelector = '.vehicle_images'; this.init = function() { setMainImage(); initializeSlickJs(); handleMainImage(); }; }); During class initialization, we launch a slick-carousel to create a carousel from our bollards and install a handler to view them.
Registration of the module
A module is registered using an object that contains a unique identifier, which may contain dependencies of the module and the main file of the module class.
<script src="/bower_components/moff/dist/moff.min.js"></script> <script> Moff.amd.register({ id: 'vehicle-gallery', depend: { js: ['/bower_components/jquery/dist/jquery.min.js', '/bower_components/slick-carousel/slick/slick.min.js'], css: ['/bower_components/slick-carousel/slick/slick.css'] }, file: { js: ['js/vehicle-gallery.js'] }, afterInclude: function() { Moff.module.initClass('VehicleGallery'); } }); </script> In our example, we specified jQuery dependencies and its slick-carousel plugin, which creates a carousel from thumbs. Dependencies are loaded synchronously, in the order in which you specify. And after the dependencies, the class of the module vehicle-gallery.js is loaded. Further, after loading the module file and its dependencies, we initialize the module in using the afterInclude event.
Statistics of the results.
Let's summarize the results of creating a Mobile First page.
The lower graph shows that an un-optimized page is 73% heavier than a page adapted to the requirements of Mobile First. Thus, we can save 186.94 KB , which the user may not need when viewing your page.
Conclusion
Thus, we get rid of the download of a large number of secondary resources, but which will be available at the request of the user.
This article describes only one example of loading additional information. A complete example can be viewed on the framework website.
Mobile First First Sample
Example of no mobile first page
PS In this article I wanted to show how to correctly use the Mobile First approach using the Moff.js framework
Source: https://habr.com/ru/post/269419/
All Articles