How to add to your site links to mobile website and mobile apps

Links will inform users of your site that you have a mobile site and mobile applications.

An example of the proposed design:

Comments to HTML:

  • onlick code in "mobile site" link - enables (if was disabled) automatic redirection to the mobile site, see also: How to add to your site redirect code to mobile site
  • Links to mobile applications (app_store_url, google_play_url, windows_phone_url) can be taken from the mobile site, Home page, Tab Categories
  • Class "MobileLinks-AppLogoDisabled" and href ="javascript:alert('comming soon ..')" are used when the mobile application is not yet ready or not passed moderation yet

HTML, to insert on your website:

<style>
.MobileLinks-Wrap {
  padding: 3px;
}
.MobileLinks-Site {
  border: 1px solid silver;
  border-radius: 7px;
  display: inline-block;
  height: 36px;
  margin-right: 5px;
  padding: 3px 6px;
  text-align: center;
  vertical-align: middle;
}
.MobileLinks-AppLogo {
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 45px;
  margin-right: 5px;
  vertical-align: middle;
  width: 130px;
}
.MobileLinks-AppLogoDisabled {
  opacity: 0.4;
}
.MobileLinks-AppStoreLogo {
  background-image: url(http://storemobilizer.com/common/AppStores/en/AppStore.png);
}
.MobileLinks-GooglePlayLogo {
  background-image: url(http://storemobilizer.com/common/AppStores/en/GooglePlay.png);
}
.MobileLinks-WinStoreLogo {
  background-image: url(http://storemobilizer.com/common/AppStores/en/WinStore.png);
}
</style>

<div class="MobileLinks-Wrap">
<a href ="http://mobile_site"
  onclick="if(window.localStorage&&(localStorage['mobile_state']=='not_redirect'))localStorage['mobile_state']='redirect'"><span
  class="MobileLinks-Site">mobile<br>site
</span></a><a href ="http://app_store_url" target="_blank"><span
  class="MobileLinks-AppLogo MobileLinks-AppStoreLogo">
</span></a><a href ="http://google_play_url" target="_blank"><span
  class="MobileLinks-AppLogo MobileLinks-GooglePlayLogo">
</span></a><a href ="http://windows_phone_url" target="_blank"><span
  class="MobileLinks-AppLogo MobileLinks-WinStoreLogo">
</span></a>
</div>