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:

.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(;
.MobileLinks-GooglePlayLogo {
  background-image: url(;
.MobileLinks-WinStoreLogo {
  background-image: url(;

<div class="MobileLinks-Wrap">
<a href ="http://mobile_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">