Experts at our development agency have a solid background in web development and want to share their expertise with you, explaining what works and what does not in smartphone website development and the basic search engine optimisation principles your website should comply with.  

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:

  • Responsive development for smartphones and tablets: 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.
  • Dynamic serving sites: Different HTML and CSS are displayed by the URL according to the visitor’s device.
  • 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.

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 anything posh, 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. However, 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 you want them to have.

The Advantages and Disadvantages of Responsive Web Design

  • 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.

The Advantages and Disadvantages of the Dynamic Serving

When you decide to go for a dynamic serving site, make sure to let the search engine know that there is some hidden mobile content it needs to take into account. You can do it on the server side through the Vary HTTP response header. The pros of this approach are:

  • A single URL
  • No need to redirect users

And the cons are as follows:

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

Mobile URL Websites

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 <head> section. In such a way, search engine robots will know that there is a mobile-optimised version of the page and index it too.

Key Tags to Use

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.

How Are Users Redirected to the Mobile URL?

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.

The Advantages and Disadvantages of Mobile URLs

  • Advantages
    • Mobile URL websites are natively designed for smartphones
    • 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.  

READ ALSO
iOS development
Hire an app developer | Top Mobile Programmers | Contact us - Magora
iPhone app Development UK Based - Mobile App Development Company
App developers UK|Magora app development company London
How to Design an App
Mobile app design
App designer
Mobile Application Marketing Company: Magora UK
How to Simplify an App Making
How to create iPhone apps?
Magora: Mobile app development company in London, UK
Software development services, provided by Magora team
Magora UK: Website Designers London | Web App Developers
Magora agency: Web Design London | Web App Development London
Magora UK: Designing Engaging Business Software
Website Design & Web Development in London: Magora agency
Web Application Development Company - Magora
Smartphones Applications Development in London | Magora
Business Application Development Services - Magora
Magora systems: The ideal platform for iPad app programmers
Magora Systems is one of the leading iOS App Development Companies
Magora Android app developers Android development: cover 80% of users with Android bespoke app
Magora UK - web developer company London Magora: Bespoke Web Development Company in London, UK
You message has been successfully sent

Still have questions? We are ready to help

Please fill in at least one field!