How to Make a Mobile Friendly Website in 11 Steps - Hallo Dear, elisa-head.blogspot.com, This article that you read this time with the title How to Make a Mobile Friendly Website in 11 Steps, We have prepared this article well for you to read and retrieve the information in it. hopefully the contents of
this article Website,
this article Website amp; Blog,
this article Wordpress, we write can be understood by you. Alright, happy reading.
Title : How to Make a Mobile Friendly Website in 11 Steps
link : How to Make a Mobile Friendly Website in 11 Steps
How to Make a Mobile Friendly Website in 11 Steps
[ad_1]Having a mobile friendly website is important. Necessary, in fact. So if you haven't had time to optimize your website to mobile friendly, get ready to do it now.
There are three reasons why websites should be mobile friendly. Approximately this is the brief explanation:
- The amount of traffic from cellphones has skyrocketed ━ More than half of the people in the world access the internet via smartphones. Statista predicted, the number will continue to grow each year. This is because the number of smartphone users also increases with time.
- Mobile-first index ━ Google prioritizes indexing website on the mobile version. From the results of this index, Google determines the search ranking of a website.
- Mobile Search Engine Optimization (SEO) ━ The mobile SEO logic is slightly different from the desktop version. Through the mobile version of SEO, you can better capture traffic opportunities.
Such as you do not have a mobile friendly website version, so it's over. You can lose visitors, search engine rankings, leads, and cuan from the buyer.
So before it's over, you should move quickly to avoid it. So, how do you create a mobile friendly website? Here are the answers:
- Install responsive themes;
- Make a simple menu;
- Include search fields;
- Choose the right type of font;
- Make sure there is whitespace enough;
- Make the form short;
- Perform image optimization;
- Reduce pop-ups;
- Use AMP;
- Leave Flash
- Make speed a priority;
No need to worry about the many ways above. We will accompany you to do everything step by step.
Is Your Website Mobile Friendly?
Before rushing to do optimization, you should first answer the questions above.
From there, you can know how much needs to be done. Therefore, you avoid doing everything from zero. Then, you can focus on things that really need to be fixed.
To answer the question above, you can use the Mobile-Friendly Test from Google. Just enter the website URL and wait a few moments.
This platform works using Googlebot. Googlebot will access JavaScript, CSS, and image documents on the web.
From there, we can be sure whether your website is mobile friendly or not. Through this tool too, you can find out specific problems that make a website not mobile friendly.
After waiting a few moments, you will find a page like the one above. On that page you can get info in the form of:
- Information on test time and results;
- Screenshot of a page that appears from a cellphone;
- HTML that is visible to Googlebot;
- Issues encountered when loading page;
- Other important articles.
Make sure you click the section Page loading issues at the bottom it says Test results. There, there is a complete list of issues encountered by Googlebot.
From there, you can start turning websites to be mobile-friendly. Make sure, you do the optimization recommendations that Goole prescribes on the website.
How to Make a Mobile Friendly Website
After knowing the specific issues that need to be addressed, turn to do a thorough optimization. Here, we will show 11 ways you can do to create a mobile-friendly website.
1. Install responsive themes
The theme has a big influence on the website. Both in terms of website performance, and visiting experience.
Technically, responsive themes help cut loading time. Because, Google does not need to do redirect to the optimized website version.
The same theme criteria also help Googlebot index the website pages. Therefore, this has a direct effect on website ranking in search results.
From the side user experience, the installation of responsive themes makes it easy for users to share content. Website owners only have one type of URL that applies consistently. If the user shares the URL from the mobile version, the same URL can be opened via the desktop with the right display.
So, clearly the reason why responsive themes must be installed on the website.
But in fact, not all themes are responsive. Some themes (unfortunately) only function as makeup. They only focus on beautifying the look of the website.
Then, what is the responsive theme? Here are three main criteria to keep in mind:
- Can adjust web appearance automatically;
- Have a simple design and appearance;
- Have an intuitive user interface (button, slider, and form).
For more convenience, you can get responsive themes in WordPress Directory. All you have to do is type the URL: https://wordpress.org/. Then click Options Themes and enter the keyword "Responsive" in the search field.
Instantly, you get thousands of choices of responsive themes that can be used free of charge.
Desktop screen size is clearly different from cellphones. When the desktop has a minimum resolution of 1080p, the phone's screen resolution is only 720p. For this reason, the website menu needs to be designed differently from the one on the desktop.
If you want to simplify the appearance of the menu, there are several principles you need to follow:
- Only show important menus. Too many menus make visitors confused when browsing websites (decision paralysis);
- Put the other menus inside collapsible navigation sidebar or navigation menus that can be hidden;
- Write a call-to-action (CTA) briefly and clearly;
- Make buttons large;
- Avoid using the sidebar for content. Content located in the sidebar will usually be displayed at the very bottom of the mobile version of the page.
Whereas for best practiceFor example, you can use Pizza Hut Delivery's web example. Below, you can compare the website in the mobile and desktop versions.
In the mobile version, menu Order Now and Order Status shown at the top. Because of his expectations, the user is ready to place orders via mobile.
Only then, the food and beverage menu is placed at the bottom. Precisely, after the slider contains promotional photos. Rows of product menus are still easily accessible even if placed at the bottom.
Do not forget, there is a hidden navigation menu in the upper left corner. The navigation menu contains the exact same menu on the front page of the website. However, navigation does not mean a waste of space. In fact, this navigation works similar to breadcrumbs that make it easy for users to go back and forth from one page to another.
On the desktop version, the look of the website looks more detailed. Menu Order Now are both placed at the top. It's just that its position is on the right side of the page.
This position makes product menus and promotional sliders much more striking. With this kind of display, users are more eager to find out what products are served by Pizza Hut Delivery.
3. Include a search field
Not everything can be made simple. This includes the menu and website content. Especially if the website in question is a marketplace or online store. Inevitably, there are so many menus and pages containing products for sale.
If you have a website like that, it's good to add a search field. The search field can make it easier for customers to find the product they really need. After all, you also might not have visitors to search for content or products manually, right?
4. Choose the right font type
Similar to the theme, fonts also have an influence on the level of mobile-friendly website. Because of the limited space on mobile phones, font choices affect the overall appearance of the website.
With the right font, website content can be easily read. In addition, fonts can also affect the impression, mood, and branding of the website itself.
Fonts that are decorative are usually not included in the category of mobile friendly. Indeed, the appearance of this classic font is usually very interesting. It's just that, when viewed from a cellphone the appearance will be very large and less beautiful.
To find out what fonts are good to use, try reading the Perfect Font Combination article for your Website.
5. Make sure there is whitespace sufficient
This one might not have anything to do with technical issues. However, it's good that you keep remembering and practicing this.
Plain white appearance gives a clean and elegant impression on the website. Especially if the website is seen through a cellphone.
At the same time, a white background also makes visitors focus on the main object on the website page. If you have an online store, a white background helps your product look more striking.
If the content in question is a paragraph, then the paragraph will be easier to read. As long as you write in short paragraphs.
6. Make the form short
The form on the website must be concise in principle. But when it comes to mobile friendly, you need to take extra steps.
Trim all form fields that are less important to the user. When you ask for information for leads and contacts, including just two forms: name and email address.
Also read: Create a WordPress Contact Form with Contact Form 7
If the context is for shipping goods, make the form what is necessary. Focus on the important information needed. You don't need to know your favorite color or where buyers get info about your business.
7. Perform image optimization
In creating a mobile friendly website, images are usually a scourge. Because, there are still many people who just put pictures on the website. No matter the image format or size.
As a result, the website is slow. Not to mention the server disk memory so wasteful. Therefore, image optimization becomes an important thing to do.
There are several things that need to be done in optimizing an image, namely:
- choose image format right. To save disk space, you should use JPG or JPEG format images. If you need detailed images like screenshots, then use images with PNG extensions;
- Perform image compression. Upload images to TinyPNG or TinyJPG Both will compress file size by reducing color complexity and less relevant information about the image;
- Reduce the dimensions of the image. For extra steps, you can also minimize the dimensions of the image before uploading it to the web. Use software such as Paint or Picasa to make it easier for you;
- Install the image optimizer plugin like WP Smush. This step can be done such as you need help doing image optimization. This plugin can also be used to check image resolutions that are not optimal;
- Add title text and alt text for SEO. Bots cannot see pictures. You can help by adding the appropriate title text and alt text. Include keywords for the title text, then describe the appearance of the image for the alt text.
8. Avoid pop-ups
The pop-up is eating place. Just imagine a cellphone screen as small as it is crammed full of pop-ups. It's annoying, right?
Even worse, pop-ups are very difficult to close. Button close (X) usually too small or hard to find. Double sucks it happens.
You don't need another reason. As much as possible, avoid pop-ups on the mobile version of the website.
9. Use AMP
Accelerated Mobile Pages (AMP) is a project led by Google. AMP is claimed to make website loading times super fast.
This is because AMP works using cache. Cache is used to store website data in gadgets. In addition, AMP Cache is also able to optimize the work of the server by:
- Limiting the dimensions or resolution of images;
- Change the image format to a size suitable for mobile display;
- Reducing image quality to speed up loading;
- Securing websites via the HTTPS protocol.
Through the methods above, it's no wonder that AMP is able to cut website data up to eight times smaller.
As a Google project, AMP certainly has advantages in the Google search engine. Websites with AMP have priority to appear at the top of search pages. As can be seen in the picture above.
To find out more about optimization via AMP, please read How to Increase Blog Visitors with Google AMP.
10. Leave Flash
Flash is outdated and outdated. Everyone does not like him.
Even on a desktop, the experience of browsing websites with Flash is very frustrating. The website is unresponsive and loading time is too long. I was so annoying, both iOS and Android did not support Flash.
Therefore, never use Flash. Instead, use the latest technology that is more compatible. HTML, for example.
11. Make speed a priority
The essence of mobile friendly is a matter of speed. Therefore, website speed must be a priority.
If your website does not appear quickly within three seconds, the possibility of non-accessing visitors increases by 32 percent. The longer the load time is needed, the higher the possibility of the bounce rate. As shown in the infographic below.
Luckily, it did not matter. Especially if you have successfully implemented 10 ways to create a mobile friendly website above. Thankfully you also take additional steps such as:
- Reducing the number of posts that appear on the front page;
- Eliminating unnecessary widgets;
- Uninstall plugins that are rarely used.
However, there are times when all these steps are less effective. If so, it means something is wrong with the server performance that you are using.
Then what is the solution?
You can upgrade your hosting package to unlimited web hosting services as needed. If you can give advice, we recommend the hosting package Personal for service shared hosting.
This package includes unlimited disk space, unlimited website, and unlimited email accounts. The price is more skewed than the other two packages.
If you need more, you can choose cloud hosting services. This service promises topnotch server performance. Suitable for online store websites to marketplaces.
Ready to Create a Mobile Friendly Website?
Oh of course! We hope that the 11 ways to create a mobile friendly website above are really useful for you.
Eiits, not only that. We also provide a free ebook to download. All you have to do is enter your name and email address on page 20+ Tips to Make WordPress Super Fast. It didn't take long for the ebook to arrive in your email inbox.
Finally, congratulations on optimizing the website!
[ad_2]
Thus the article How to Make a Mobile Friendly Website in 11 Steps
You are now reading the article How to Make a Mobile Friendly Website in 11 Steps with the link address https://elisa-head.blogspot.com/2019/10/how-to-make-mobile-friendly-website-in_8.html
