How to Develop Mobile Websites? – Easy to Understand Guide

commas-left

Are you thinking to develop mobile site for your business?

Must say, you are in right track to promote your business at different level.

In this post, we have discussed some important points that help you to create an excellent mobile website by your own.

commas-right

Mobile Website

Everybody knows how important to have mobile optimized websites, and how it impacts for future business growth. The leading search engines support three different configurations to attract mobile traffic i.e.

  • Dynamic serving sites with one URL to serve different HTML and CSS, depending on the user agent.
  • Websites with responsive design that serve same HTML for mobile and desktop devices by using CSS to change page as per the device.
  • Separate mobile URLs that would have an equivalent mobile-optimized URL

It is not compulsory to use m. subdomain for your mobile URL. You could use any subdomain, subfolder (example.com/mobi) or TLD (example.mobi) according to your requirements. no doubt Google recommends for responsive design, but above configuration comes with pros and cons. Let’s check in details.

Dynamic Serving Websites

User agent detection is utilized to serve various CSS and HTML in this scenario as per the user agents that are requesting them. One can default desktop version. User agents are used by the server to do this. User-agent detection could lead to mistakes as the list of smartphone user-agent strings to be matched requirements to be updated as soon as possible.

Keep in mind that user-agent detection could lead to mistakes, as the list of Smartphone user-agent strings to be matched needs to be updated as soon as a new Smartphone model is on the market. It is not so possible and list is destined to become decayed very soon. Moreover, it is bit difficult to search out user-agent string for new mobile until it becomes popular. In between, you may already lost precious traffic.

A hint should be sent to search engines when serving different HTML to smartphone users that help them to understand hidden mobile content. Using the Vary HTTP header, you can simply understand such hint
Serving
Pros:

  • No need for redirection
  • There’s only one URL

Cons:

  • Bots require crawling pages with different user agents
  • User agent redirection is prone to mistakes

Responsive Design Websites

CSS3 media queries are used by Responsive web design to look device’s capability and re-architect the content. One can also use the screen’s width and height, resolution or orientation as well. A CSS3 media query Google recommends is:
Responsive Design
One can have to change the curly brackets alternate CSS for small devices like iPhones. It is advisable to put this section at the bottom of your CSS, so any rules set earlier for desktop browsers can be overwrote easily. The orientation of the device doesn’t affect the style, if you are setting the max width at 640px. Moreover, iPhone have a pixel width of 480px, 640px in the landscape in portrait mode. Note: such pixels are not corresponded to the actual pixel density but to CSS pixels.

In case, you want to go more granular then set min-width and max-width intervals for targeting various devices. In case, Google is detecting responsive web design, then it’s Googlebot and Googlebot-Mobile should be permitted crawl a website’s JavaScript, CSS, and images. It is advisable to not disallow the bots in the robots.txt file!

It would be amazing to rearrange content according to the screen size. But, if page has sidebar then it becomes far too long. In such case, you have to use display: none for the HTML block that needs to be hidden.

Screen Size

Pros:

  • A single URL easier to share and interact
  • Don’t require to redirect users using user agents
  • One time crawling is needed

Cons:

  • Less differentiation of mobile content
  • Takes more time and technical resources to be implemented

Mobile URLs

Each desktop URL has an equivalent URL using this method that serve mobile-optimized content. Moreover, user agent detection is employed to redirect mobile users landing on the desktop version. Each of desktop’s versions comes with a rel=”alternate” tag that point at the mobile version in the <head> section. It helps to search engine bots to understand the mobile version and crawl it. See the example
Alternate
One can find a good old canonical tag that point at the desktop version than the mobile version. It helps users to understand Google and the other bots that those pages are bit different versions of same pages and can be considered as one entity.
Canonical
One can also done the sitemap level easily no matter whether the rel=canonical has to be in the HTML of the mobile page, rel=alternate on the desktop pages.
Sitemap
Pros:

  • Mobile-dedicated content can be served by a mobile
  • Easy to implement

Cons:

  • Waste of crawling resources.
  • Redirection is prone to mistakes.

CSS media queries don’t support feature devices and thus, responsive web design can be utilized. On otherside, you will find support for two configurations. A list of possible cases is placed by Google. The desktop version is always shown by Google in regards to tablet users; it totally doesn’t matter whether or not which configuration you are using.

Perception System is one of the leading mobile web app development service providers, having some marvelous ideas to evaluate your requirements and setting a mobile strategy as per your business needs. If you are looking for any solution regarding to develop mobile site then feel free to contact us.

Contact Us

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA

*