In an age when mobile is dominating internet traffic usage, it makes sense to get a mobile-friendly website to ensure that your website fulfills the mobile-friendly criteria. Mobile-friendliness is a crucial factor in determining your online success, so it is important to ensure that your website passes the mobile-friendly test for users and search engines.
What you should know:
- The mobile share of web traffic is growing by 30% per year, and most this growth is in developing countries (Hootsuite).
- More than half of all searches are now done via mobile, and that number continues to increase (Search Engine Land).
- 57.3% of all internet traffic is from mobile devices/tablets; 42.7% is from desktop (Stat Counter).
- The number of U.S. users who only use desktops is decreasing. The number fell from 25 million in 2015 to 18 million in 2017. It should drop to 11 million by 2021 (Wiredseo).
- On the contrary, the number of mobile internet users has increased by 28% over the last two years, reaching 41 million in the United States in 2017 (eMarketer).
A quick overview:
About MOBILOOK (Mobile View). This plugin, which is an extension of Google DEVTOOL, enables you to instantly check the visual responsive design of your pages, your articles, or your products on mobile, and with different formats (Apple, Samsung, Google devices) (including foldable screen phones like the Samsung Galaxy Fold with PRO version).
Once installed, MOBILOOK (Mobile View) deploys on each of your pages. A section appears just below the WordPress Content Editor; once your content is published, immediately shows you the rendering on mobile according to the format you will have defined.
It is no longer necessary to check what your site looks like on your mobile to see if it is well suited to phones, tablets, and other media (responsive).
MOBILOOK PRO (Mobile View) offers several features:
- Activation of the plugin for your pages generated by WooCommerce, for your online shop so you can instantly see if the product page design is responsive
- Activation of additional formats – The PRO version enables you to access a large list of mobile/tablet formats (15), even for foldable screen phones (DualScreen).
- Activation of three very useful features
- LinkedIn Post Inspector enables you to have your pages crawled by LinkedIn’s bots to generate up-to-date OpenGraphs
- Google Mobile-Friendly Test Tool enables you to have your page analyzed by Google to identify if it meets all the criteria of effectiveness.
- Mobile SEO (zoom website on mobile) – This feature adds an optimized viewport meta tag on all your pages allowing users zooming permission with mobile browsers.
DEVICE FORMATS AVAILABLE (Mobile View)
- Samsung Galaxy S9 = 360 x 740
- iPhone 6/7/8 = 375 x 667
- Google Pixel 2 = 441 x 731
- Samsung Galaxy FOLD (Dualscreen – Exp) = 585 x 668
- iPhone 6/7/8 plus = 414 x 736
- Samsung Galaxy S8 Plus = 360 x 740
- iPhone XS Max = 414 x 896
- Google Pixel 3 XL = 411 x 823
- Samsung Galaxy S8 = 360 x 740
- Samsung Galaxy Note 9 = 414 x 846
- iPhone X = 375 x 812
- Ipad = 768 x 1024
- Ipad PRO = 1024 x 1366
- iPhone 5/SE = 320 x 568
- Galaxy S5 = 360 x 640
When you do internet marketing on a daily basis, you have to learn little tricks to speed things up.
What is LinkedIn Post Inspector? Did you happen to share your website link on LinkedIn and see incorrect link preview title, description, or image? That’s normal! Basically, when you share a link from WordPress, LinkedIn bots fetch the images and other content information. LinkedIn usually scrapes every URL that users and pages share and shows the featured image, title, and description.
However, when you create a fresh new page and post it directly to LinkedIn (or change the content of an existing page), LinkedIn is not always able to display your metadata (image preview, title, and description) and the rendering is not ideal (often, the “featured image” does not appear). Once your content is published, the features available on each of your pages enable you to have your URL crawled by LinkedIn Post Inspector to generate up-to-date OpenGraphs so that it looks perfect on social media.
What is Google Mobile-Friendly Test Tool? This tool, compared to Google DEVTOOL, actually tells you how Googlebot (Google spider) sees your page, rather than how your mobile users might see it. That itself is very helpful because you can use the feedback for SEO purposes as well. If your website passes the test, then you will see a green message that says “Awesome! This page is mobile-friendly.” If it does not pass, then the message will be red and say “Not mobile-friendly.”
In the event that your website does not pass the mobile test, it will also provide the reasons for which it failed, such as the content being wider than the screen or links being too close together. This is THE TOOL that shows you whether Google considers your page to be mobile friendly. This feature (available on each of your pages) enables you to have your URL analyzed by Google once your content is published.
What is a responsive site?
Responsive web design is the practice of building websites that suitably work on every device and every screen size, no matter how large or small, mobile or desktop. Responsive web design is focused on providing intuitive and gratifying experiences to everyone.
In recent years, Google has been increasingly pushing to ensure that all websites are mobile friendly. This makes sense because mobile searches have consistently been on the rise since 2009 and finally surpassed desktop searches in 2018 (in 2018, 52.2% of global web traffic came from cellphones).
Why is it important for SEO?
Since April 2015, Google officially started rewarding mobile-friendly websites and penalizing sites that were not mobile-friendly in its the search rankings. A study by Blue Corona revealed that websites that did not switch to mobile-friendly platforms before the update in 2015 were hit with a hefty 50%+ traffic reduction penalty. This penalty came because Google dropped their SEO rankings, which resulted in fewer people seeing and clicking these websites.
The same study revealed that in 2015, 70% of websites on the first page of Google were optimized for mobile device viewing. Among these 70% of first-page search results that were mobile friendly, conversion rates tended to skyrocket after the switch.
PS: Pagup recommends Site kit by Google plugin for insights & SEO performance.
Ảnh màn hình
- Unzip all files to the
- Log into WordPress admin and activate the ‘MOBILOOK’ plugin through the ‘Plugins’ menu
- Go to “Settings > Mobilook” in the left-hand menu to start work on it.
Người đóng góp & Lập trình viên
“Mobile View for Responsive web design optimization (UX design) + Mobile Friendly Test” là mã nguồn mở. Những người sau đã đóng góp vào plugin này.Những người đóng góp
“Mobile View for Responsive web design optimization (UX design) + Mobile Friendly Test” đã được dịch qua 4 ngôn ngữ. Cảm ơn những người tham gia dịch vì đóng góp của họ.
Muốn tham gia phát triển?
Nhật ký thay đổi
- Initial release.
- Added debugger tool
- Added Affiliate Program
- Fixed some styling issues
- Fixed conflict issue with Guttenberg editor.
- Fixed some styling issue for drop-down select and width/height box
- Fixed php notice (in php log) for $active_tab variable
- Sanitized post request for active tab
- Added Mobile SEO (zoom website on mobile) feature for Pro version
- Fixed a bug on single post types and settings page
- Fixed issues related to some trademarks
- Performed a full security and standards review on mobilook code
- Updated Freemius SDK to v2.3.2
- 🔥 NEW: Responsive option to freely resize the window
- 🔥 NEW: Set width/height manually with input fields for responsive option
- 🔥 NEW: Zoom option to make mobile/tablet view smaller or bigger
- 🔥 NEW: Rotate the view between portrait and landscape
- 👌 IMPROVE: Code, Layout and Styles
- 👌 IMPROVE: Updated freemius to latest version 2.4.1
- 👌 IMPROVE: Updated freemius to latest version 2.4.2
- 🔥 NEW: Meta Tags for SEO promotion
* 👌 IMPROVE: Notifications for opt-in
- 🐛 FIX: Security issue
- 🐛 FIX: Vuejs, scripts and styles to load only on edit page
- 🐛 FIX: Styling issue on Settings page