How to Target Mobile Traffic

Without a doubt, smartphone sites are a must in today's smartphone-centric world, where the use of mobile devices has surpassed desktop usage and development of a site optimised for mobile is a must for every business. So let’s get to the bottom of the issue. Major search engines like Google has three ways to tell whether a visitor accesses the website via desktop or via a pocket device:

1
Responsive development
HTML contains both mobile and desktop versions of the website, and the server defines which one to show to the visitors depending on the devices they use.
2
Dynamic serving
sites
Different HTML and CSS are displayed by the URL according to the visitor’s device. This solution has some difficulties with SEO, which is negative for the ranking in SERP.
3
Separate mobile
site
A desktop URL has a related smartphone-friendly web address, such as www.google.com and m.google.com, for instance.

Which Option To Choose?

Although, we must dispel a myth that all mobile URLs start from “m.”: you are not restricted to this. You can use any top-level domain (google.mbl), subdomain or subfolder (google.com/mbl) that you like best for your web development project. Google favours responsively designed websites above other types, but of course, each of the options has its advantages and downfalls, and it is up to you to decide what fits you best.

Our Achievements:

322 App Development Projects
413 Mobile Applications
75 Enterprise Software Solutions

Responsive Web Design

A responsively designed website sends data to a server to show one version or another, looking at the device’s configurations and display size. The CSS3 media queries used in this case also include such aspects as the display’s height, orientation, width, and resolution. A CSS3 media query recommended by Google is “@media only screen and (max-width: 640px) {...}”. An alternative CSS for smaller screen devices like iPhone or Android smartphones goes in-between the brackets. During development, make sure that the mobile version is placed beneath the major CSS so that it overwrites any settings defined for desktop computers

Max-Width And Min-Width Properties

If you set the max-width property at 640px, there is no difference whether devices is oriented horizontally or vertically. For example, iPhones have a width of 640px in landscape road and 480px in the portrait. It may sound tricky, but actually, these pixel sizes are not the actual pixel density of a smartphone, but CSS pixels. If you want to go into details, you can make your site to respond to the size of every device - you just have to set the intervals of min width and max width on the stage of development.

How To Hide Bulky Elements

To detect responsive websites, Google uses bots - Googlebot and Googlebot-Mobile - which look through websites’ images, CSS and Javascript to find out whether they are optimised for smartphones. That is why you should never exclude the robots in the robots.txt standard during web development. It is great if you rearrange the elements on a page to fit different screen sizes, do you want what to do if there are sidebars on some of the pages? You cannot allow such bulky elements on a mobile page. There is a way out: just use the “display: none” property for a text box or other element you want to hide. Content displayed on wider screens is hidden when minimized, and then replaced with links.

Web Development Tools:
Pros And Cons

To design a responsive site, you need to have a considerable knowledge of different IT technologies, so if you are not a programming pro, you should better hire a professional team of web developers. On the other hand, if you need a simple solution without, you can use web-building tools like WP Touch for Wordpress, which can provide smartphone users with a very basic version of your website optimised for their devices. If your web development project targets for a wider audience such tools are not the best option as they cannot provide users with an outstanding experience.

Clients

unilever
yandex
danone
cisco
trivago
mandara

Responsive Web Design

Responsive design is a version of a web site, which represents to the user specially designed version of the site depending on what device he is visiting the page. All this views are integrated in one code.

Advantages

  • A single URL is handier to share and memorize
  • You do not need to redirect the visitors of your website with user agents, which minimizes your risks
  • The robots crawl your site only once, they will not look through all user agents. This approach allows them to index a website much more resource and time efficiently.

Disadvantages

  • The content of your mobile page is similar to the website’s (which is hardly a disadvantage, but still)
  • If you want to go for responsive site development, you need to have a lot of development expertise in tools and technologies, which can be tricky and challenging. A responsive design is a complex development task that requires much time and resources.

Whether you choose to make your website responsive or go for any other version of a smartphone-friendly site, it will not hurt your rankings much if you have a proper marketing campaign and your content is optimised for search engines.

Dynamic Serving Sites Development

Dynamic serving sites use the desktop version as a default one, while CSS and HTML that need to be served are detected by user agents according to browsers and devices that request them.

Therefore, user agents play a key role in dynamic serving. However, you should be aware that detection by user agents may lead to mistakes because new smartphones are launched to the market every day, and it is impossible to include every model in the list of user-agent strings. So the chances are high that soon your list will become obsolete, as well as the mobile version of your website. Moreover, it can be extremely hard to find the right user-agent string for a smartphone that has just been released until it gains some popularity. And wasting your precious time inevitably results in missing out on valuable traffic.

Advantages

  • A single URL
  • No need to redirect users

Disadvantages

  • Robots need to index many pages with different user agents
  • User-agent redirection has high risks of mistake

When you create a mobile version of your website it means that each URL used for desktop computers has a relevant page with a smartphone-friendly content. Once again, the server read the information about the users’ device and redirects them to a suitable version. The desktop version of every page of your site should have a rel=”alternate” tag leading to the mobile version in the section. In such a way, search engine robots will know that there is a mobile-optimised version of the page and index it too.

Do not forget that the smartphone version should necessarily have a canonical tag leading to the desktop version. This will help Google bots understand that they are two versions of a single page and do not need to be indexed separately, otherwise, your mobile version will be viewed as plagiarism and punished by the search engine, sinking in ranks. rel=canonical should be implemented on the mobile website, while rel=alternate can also be put at the sitemap level. Myth Busting Alert: if the rel=canonical is implemented, having two separate URLs doesn’t cause any link dilution and hurt rankings.

Let us shatter another myth - adding the rel=canonical tag to your website, would not affect your search engine rankings or cause link dilution. So, how does the browser redirect the visitors of your site to the smartphone URL? There are two ways it is done:

  • Redirection by HTTP according to the HTTP headers
  • JavaScript redirection, although this method is slower because the smartphone has to go through the entire script before it is redirected to the mobile version.

Mobile URLs

Mobile websites are natively designed for smartphones

Advantages

  • They are easier to build and deploy
  • A separately standing mobile website offers the best user experience for your customers because you are free to design every element and every feature to look good and work intuitively on small screens without thinking of the desktop version of these elements, which is a must when you create a responsive or a dynamic serving solution.

Disadvantages

  • Not efficient in terms of robot crawling. This leads to the risks that the mobile version is outdated at the time it is being indexed.
  • Risk of mistakes during redirection

What is Next?

Contact our mobile website developers to see into your business need and advice you on the best smartphone strategy to implement.

We will answer any of your questions without obligation and if you choose to hire us, we will create stunning digital products to expand your business including mobile sites, bespoke software, corporate systems, e-commerce platforms, native mobile apps and other solutions and services.
Logo Magora LTD
close
Get in touch