Overview of mobile friendliness website topic

How to customize for mobile friendly

Now I show you how to customize a WordPress web page for mobile-friendly using the Elementor page builder.

This is a web page https://wigmarketing.com/website-design/  viewing this on desktop view here we see how to customize this page mobile-friendly. Let’s go to this page on your site and open this on Edit with Elementor. Open it on the responsive mood on mobile devices that see now like-

Advanced tips for mobile friendly website

• Use responsive theme
• Think simple
• Use more small images
• Avoid auto refresh
• Don’t use flash
• Enable AMP
• Try to use stranded fonts
• Space out of link

Avoid common mistake a mobile friendly website page design

• Slow mobile pages
• JS, CSS and image file disallowed Googlebot robot.txt
• Small font-size
• Set up web page URL desktop users access but not mobile users
• Use some content that not support on mobile devices
• Incorrectly redirection URL
• Irrevilant cross link set up your website
• Don’t use media queries on website
• Unoptimized image using
• Make sure all content same as desktop and mobile devices

How to make a image mobile devices

•  When you use your site on mobile devices, you must remain that you’re using file size of image because mobile devices always allow small size images on its view ports. Here you must include a small file size on your website images.

• Should image relative and absolute units- This is one of the most important parts of a website mobile responsive image relative and absolute units of the property. If you use a fixed size image like 500 px on your website that does not work as responsive on mobile devices. So you should indicate perfect size images on your website.

• Using media queries on CSS- Mobile fast design means the pages are creating faster any small devices. Now I show how to do this just using HTML and CSS on your website.

When you use a 600px or smaller browser, here you use this media queries for fit small devices.

      @media only screen and (max-width: 600px){

        body {

           background-color: #ff0089;

             }

            }

When you use the browser that screen 768px or larger than you use this CSS to fit for mobile device

/*mobile phones:*/

       [class*=”col-“] {

        width: 100%;

       }

    @media only screen and (min-width: 768px) {

        /*desktop:*/

        .col-1{width: 8.33%;}

        .col-2{width: 16.66%;}

        .col-3{width: 25%;}

        .col-4{width: 33.33%;}

        .col-5{width: 41.66%;}

        .col-6{width: 50%;}

        .col-7{width: 58.33%;}

        .col-8{width: 66.66%;}

        .col-9{width: 75%;}

        .col-10{width: 83.33%;}

        .col-11{width: 91.66%;}

        .col-12{width: 100%;}

    }

• Fit property- When you need more property on image control at a time you can call CSS property object-fit. It can help all kinds of image problems. Just go to Additional CSS and type here these CSS object-fit properties.

  img{

    height: 300px;

    width: 100%;

    object-fit: cover;

    object-position: bottom;

    }