Nowadays, if your site is not optimized for mobile phones, you will lose a lot of customers and your SEO ranking will be bad. So how to make website mobile friendly ?
Mobile Friendly ( mobile responsive ) web design is very important and easier to achieve if you make a website from scratch.
It is also possible to optimize for mobile and old websites with old designs that are even made with tables (convert existing website to mobile friendly). All you need is knowledge, patience and action.
What should be avoided if you want to make website mobile friendly?
1- The first thing you should avoid is using adobe flash.
Today’s Internet browsers do not support adobe flash and it will be blocked and will not be displayed.
2- Avoid creating a site with absolute positioning.
If the whole site is done with absolute positioning (which is the case with exports from Photoshop and most web design tools at hosting companies), you will hardly be able to get everything in order for mobile phones.
3- Avoid large files.
Large files (usually images) will take a long time to load on the site. Therefore, the performance of the site will be significantly worse.
Ok, then what is important to include in the site ?
1- The most important tag for mobile friendly site!
If there is no meta viewport tag on the site, there is no mobile friendly site also.
What does it look like and where to include it?
It is best to insert the meta viewport tag into the head tag of each page on the site, preferably at the very top, even before the title tag. And it looks like this:
<meta content=”width=device-width, initial-scale=1, maximum-scale=1″ name=”viewport”>
2- Media break points
Media breakpoints are very important and an integral part of css files. You use them to determine the behavior of blocks on the site when reducing or increasing the screen width. Example:
@media screen and (max-width:767px){ /* some css */ }
Additional information that can improve your mobile friendly design
The parameters that I recommend you to adjust and make the user experience complete on small screens, which will also improve the position of your site on search engines are as follows:
The loading speed of your site
The loading speed of the site is an important factor in the final user experience. If the site loads quickly, users will be happy to visit your site and search engines will position you better. Set up caching for your site pages and use compressed images.
Readable fonts
Use a larger font size, as well as the space between them. Of course, don’t overdo it because everything has to be compact. Links in the text should be of a size that can easily hit with your finger on the screen.
Make Your Button Sizes Large Enough to Work on Mobile
The size of the button on the site should be large enough for the user to easily click on it.
The most important content at the top of the page
The most important content on your page should be at the top of the page and easily visible and accessible to users.
If you need help with mobile friendly design, you can contact me at any time here.