Necessary techniques for Designing website for smartphones

What are Smartphone optimized websites

Smartphone optimized websites are the ones made for smartphones which will display only the most relevant content and that too in such a manner so that the user is able to navigate the page with ideally no horizontal scrolling.

Why you should to build smartphone optimized websites

It is necessary to design smartphone optimized websites in this growing world of mobile technology as almost everyone now owns a mobile phone with a huge percentage owning a smartphone. By using a smartphone, they can not only communicate with others but surf the internet, which poses a problem to website designers since they have to design such websites that will load into any screen size of a smartphone.

Necessary techniques for Designing website for smartphones


The following are necessary techniques which helps website designers to create smartphone optimized websites:

  • Currently, the most important and widely used technique being used by website designers in building a smartphone optimized website is using Responsive Web Design (RWD).
  • Building smartphone optimized websites is to create a complete mobile-specific website. This means that you will create two versions of your website; one for desktop and the other for a smartphone.
  • Creating a website that is smartphone ready. Web designers can build a website with the same web address for both desktop and mobile but different HTML or asp pages. This way, if a user is accessing the website through a smart phone, a different HTML will be opened.
  • Optimizing your images and other graphics for smartphones. Even if you have a separate website or separate CSS for mobile phones, the images should not take much time to load and they should be displayed properly. Same goes for flash movies and multimedia movies which should be minimized to reduce the loading time. Similar is the case with other graphics such as the layout and buttons. They should be tried to be placed in a vertical layout so that there is the minimum amount of horizontal navigation.
  • Another way s is to use certain tools which can let you test your website on different screen sizes and resolutions, thus enabling you to optimize your website for different devices. One such tool is the Opera Mobile Emulator.

Google’s Recommendations for building smartphone-optimized websites

When building a smartphone optimized website, Google supports three different configurations:

  • Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device.
  • Sites that dynamically serve all devices on the same set of URLs, but each URL serves different HTML (and CSS) depending on whether the user agent is a desktop or a mobile device.
  • Sites that have a separate mobile and desktop sites.

Responsive web design (RWD)

Responsive web design is a technique to build web pages that alter how they look using CSS3 media queries. That is, there is one HTML code for the page regardless of the device accessing it, but its presentation changes using CSS media queries to specify which CSS rules apply for the browser displaying the page.
·    Advantages of Responsive Web Design
o    Content parity: Your site contains the same content and HTML markup regardless of the device being used, providing your users with a similar experience. This will grow in importance as more people rely on their smartphone as their primary means of accessing the Web.
o    A single URL for web pages: This makes it easier to share and link to your content. No redirection is needed to get devices to their optimized view (compared to a dedicated mobile site).
·    Disadvantages of Responsive Web Design
o    Content won’t be fully optimized for mobile devices
o    Slower performance
o    It can be more difficult to navigate the site blog techniques.

Device-specific HTML

However, Google appreciates that for many situations it may not be possible or appropriate to use responsive web design. That’s why it supports having websites serve equivalent content using different, device-specific, HTML. The device-specific HTML can be served on the same URL (a configuration called dynamic serving) or different URLs (such as and
If your website uses a dynamic serving configuration, you should use the Vary HTTP header to communicate to caching servers and our algorithms that the content may change for different user agents requesting the page.

As for the separate mobile site configuration, since there are many ways to do this, our recommendation introduces annotations that communicate to our algorithms that your desktop and mobile pages are equivalent in purpose; that is, the new annotations describe the relationship between the desktop and mobile content as alternatives of each other and should be treated as a single entity with each alternative targeting a specific class of device.
These annotations will help us discover your smartphone-optimized content and help our algorithms understand the structure of your content, giving it the best chance of performing well in our search results.

Related Posts:

One thought on “Necessary techniques for Designing website for smartphones

  1. So many focus on doing nothing more than building
    up their fan base, without taking time out to become friends with the experts out there.
    New and improved techniques are constantly being introduced into the world of affiliate marketing,
    resulting in increased effectiveness and the ability to better entice potential customers.

    This has been mainly due to the pioneering efforts of
    people like Joseph P.

Leave a comment