Broadplace

How To Choose The Right Architecture For Mobile

Mobile Site Optimisation Part II

Choosing the Right Technology or Architecture

Warning - Construction Ahead   Image: Flickr

Warning – Construction Ahead Image: Flickr

  The following are the three architectures recommended by Google:
  1. Responsive Web Design Technique (One-size fits all)

This design uses the CSS3 Media Queries & a 3*3 fluid grid with relative units that organize themselves according to screen-size.

The grid will appear like this on one screen – Mobile Site Optimisation 6

and like this on another –Mobile Site Optimisation

Example: https://mashable.com/ (sample image: Apple I phone 5)

Mobile Site Optimisation

Advantages

  • Same set of URLs as the desktop version served to all devices, so no duplication issue

  • Each URL serves the same HTML to all devices, just the CSS changes as the design layout has to adapt mechanically to the device used by the visitor

  • No redirections needed as the URLs for both versions remain the same

  • In terms of inbound links, the link popularity and authority gained by the desktop version is applied to the mobile version as well

  • Site maintenance is easy and cheap

Disadvantages

  • If the user intent in accessing the mobile site differs from its desktop version, then the mobile version will have to be re-designed

  • The page load time increases as the mobile version will also load the same heavy content, images as the desktop, which could be an issue as the mobile internet connection isn’t as good as the one used on computers

   
  1. Dynamic Serving Technique

This technique needs the implementation of Vary https response header, which signals to caching servers used in ISPs and elsewhere as to which cache i.e. cache of the desktop HTML page or the cache of mobile HTML page should be displayed to the visitor based on the user-agent of the device from which the request is made.

Example: https://edition.cnn.com/ (sample image: Apple I phone 5)

Mobile Site Optimisation

Advantages

  • Dynamically, same set of URLs serve all devices but each URL serves different HTML depending on whether the user agent is a desktop or a mobile device. This implies that there is no duplication seen.

  • The content that is loaded a particular (url is common b/w desktop & mobile) URL is completely different depending on the device type

  • Page load time is greatly reduced to enhance the user-experience

  • In terms of inbound links, the link popularity and authority gained by the desktop version is applied to the mobile version as well

Disadvantages

  • Implementation of this technique is complicated

  • Cost of maintenance is high

   
  1. Parallel Mobile Site

This technique needs the creation of a totally different website of the main desktop site. A visitor or a Google search-bot accessing a particular page of the website through his/her mobile device will be 301 redirected to the relevant mobile page and vice-versa.

Example: www.huffingtonpost.com/mobileweb/ (sample image: Apple I phone 5)

Mobile Site Optimisation

Advantages

  • Separate/different URLs for the mobile version and the desktop version.

  • Pieces of content that visitors frequently read through could be served a little differently than the desktop version to visitors

  • Page load time is immensely reduced in this case also, so the user experience becomes better

Disadvantages

  • Link popularity or authority is split as both the versions serve different URLs

  • A duplication issue may arise

  • Cost of maintenance is very high

Reference link for building smartphone optimised website: httpss://developers.google.com/webmasters/smartphone-sites/details

P.S: We must let Google know that it’s a mobile site and not duplicate content by implementing rel=”canonical” and rel=”alternate” tags (as shown in the snapshot below)

Mobile Site Optimisation

IMAGE CREDIT – https://www.smartinsights.com/search-engine-optimisation-seo/mobile-seo/googles-changing-recommendations-on-seo-for-mobile/ Reference link for URL configuration: httpss://developers.google.com/webmasters/smartphone-sites/feature-phones

Verify your mobile site layout using Mobile Emulators

Following are the pointers to be kept in mind-

  • Large images, JavaScript, videos, content, navigation menus should be properly displayed

  • Important information should be displayed above the fold

  • Major part of the site should fit mostly every smartphone or feature phone screen for better user experience

Next time… Mobile Site Optimisation Part III – Keywords, SEO and Health Checks Previous Post… Should You Build a Mobile Site?