Why you should make website mobile friendly

If you are working daily on Google webmaster then google approx check every website mobile friendly or not & most of website get notice to make your website mobile friendly.If you get some kind of notice for your website then you should follow that & implement on Google instruction to be regular on Google search engine most up in search rank.Every where you listen such kind of information about google penguin/panda algorithm update on 21 april 2015. All these due to google mobile friendly notice to every web masters & some noise from internet marketers.

Google concentrate on mobile friendly website because of these statics:

Source: Smartinsights.com

More mobile internet surf survey images collection.

From Last 2-3 year after ios, android ,window smart phone comes in market then Mobile usability increase suddenly high. As seeing these Google want to prefer first mobile friendly website as compared to other website for mobile users. This is advisable story for your to update your website for mobile users.

  • Check your website mobile friendly

Google make a tool for checking website mobile usability ,By this tool you get response of your liveurwebsite for mobile user.Check your website

If you are using google search in mobile then you see google have made some change in google search engine for mobile.Like :

  • Google search show results with your gmail mail

    Source: Moz.com
    Source: Moz.com
  • Google play store app show in different way as direct link to playstore app
    Source: Moz.com
    Source: Moz.com

     

What should you do for mobile friendly website

  • If you are using CMS:

CMS like wordpress,joomla etc already have plugin for making mobile friendly website.WordPress have jetpack your theme automatically change in mobile platform.

These CMS also have free/premium themes that are mobile friendly & well configured.

  • For Normal non-responsive website:

If you have simple pages website & most of the user come from mobile then you make your website responsive.Here i give you a start demo for making your website as responsive

Make responsive header tutorial:-

  • Make simple navigation bar in html
 <nav id="nav">
      <ul>
        <li>
                            <a href="http://www.liveurlifehere.com/" >Home</a>
                        </li>
                        <li  >
                            <a href="http://www.liveurlifehere.com/software" >Software</a>
                        </li>
                        <li>
                            <a href="https://liveurlifehere.com" >Blog</a>
                        </li>
                        <li>
                            <a href="http://www.liveurlifehere.com/tools" >Tools</a>
                        </li>
                        <li >
                            <a href="http://www.liveurlifehere.com/wallpaper" >Wallpaper</a>
                        </li>
                        <li >
                            <a href="http://www.liveurlifehere.com/QAbook">QAbook</a>
                        </li>
      </ul>
    </nav>
  •  Make Css for simple page
html {
  background: #E8E8E8;
}
.container {
  position: relative;
  margin: 0 auto;
  width: 94%;
  max-width: 1100px;
  font-family: helvetica, sans-serif;
}
.content {
  position: relative;
  padding-top: 80px;
}
.content p {
  margin-bottom: 10px;
}
#header {
  z-index: 2;
  position: fixed;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #222;
  color: white;
}
#header h1 {
  position: absolute;
  top: 0;
  left: 0;
  text-transform: uppercase;
}
#nav {
  position: absolute;
  right: 0;
}
#nav ul li {
  float: left;
}
#nav ul li a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 0 10px;
}
  •  Now change this css when page size reduce i.e in mobile or tab
@media (max-width: 499px) {
  #header .container {
    width: 100%;
  }
  #header h1 {
    left: 3%;
  }
  #nav {
    width: 100%;
    top: 60px;
  }
  #nav:before {
    content: '\2630';
    display: block;
    position: absolute;
    right: 3%;
    top: -50px;
    line-height: 40px;
    cursor: pointer;
  }
  #nav ul {
    background: #222;
    width: 100%;
  }
  #nav ul li {
    float: none;
  }
  #nav ul li a {
    padding: 10px 3%;
    line-height: 20px;
    border-top: 1px solid #333;
  }
  #nav ul {
    transition: 350ms;
    -moz-transition: 350ms;
    -webkit-transition: 350ms;
    transform: perspective(600) rotate3d(0, 0, 0, 0);
    -moz-transform: perspective(600) rotate3d(0, 0, 0, 0);
    -webkit-transform: perspective(600) rotate3d(1, 0, 0, -90deg);
    transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    -webkit-transform-origin: 50% 0;
  }
  #nav.open ul {
    transform: translateY(0px);
    -moz-transform: translateY(0px);
    -webkit-transform: perspective(600) rotate3d(0, 0, 0, 0);
  }
}

Leave a Comment