Nowadays, more and more people prefer to visit the Internet using mobile devices and tablets. Therefore, designers and developers today are much more important to think about how their sites will be presented on these devices. Today, we look at some of the components that you need to consider while website optimization for mobile devices.

  1. Tag meta viewport – page width in the mobile browser

Meta tag Meta viewport is a HTML-tag is needed to determine the width of the viewport and zoom controls page. With this tag, we can set the scale of the page when you boot, specify the maximum allowable increase, as well as to completely disable the increase.

Optimize site for Mobile Users (2)

Below I want to give an example of how the Meta viewport tag is usually added into the tag.

1 <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;”>

You can also add it into your cascading style sheet:

123     @-viewport {width: device-width;}

The tag Meta viewport – an indispensable tag (with Media Queries), if you are going to develop an adaptive website. However, technically, you can use the tag in the non-adaptive designs.

  1. Media Queries

Media Queries allows you to change the style of your site using certain points of refraction. Not all components of your traditional website will fit on a small screen mobile device.

Using Media Queries, you can add some styles for specific screens width. We can also add different kinds, based on the orientation of the device and the density of display pixels.

You can embed Media Queries or directly in code page using the link:

1 <link href=”style.css” rel=”stylesheet” media=”screen and (orientation: portrait) and (min-width: 960px), projection” />

Either use the correct code directly in Cascading Style Sheets (this method is most often used by developers).

123  @media screen and (max-width: 960px) {/** Style Rules here **/}
  1. Modernizr

Modernizr – is a JavaScript-tool for determining the ability of the browser / device. Browsers are different from each other and support offers not identical properties. When designing a website for mobile devices, you may want to take advantage of modern and comfortable properties CSS3 and HTML5, which, unfortunately, is not supported by all browsers (even today not all use the latest versions of browsers).

Also See : Ways to Optimize Content for Online Store

Modernizr allows you to provide users with older browsers as a fallback site, devoid of various modern features and functions.

  1. Touch Control on the site.

TouchSwipe is a jQuery-plugin that allows you to implement support for touch control on the site (on mobile devices or tablets). It supports a set of the most popular kind of gestures, pinch, zoom and scroll.

Because today almost all mobile device manufacturers refuse a physical keyboard, and provides support for touch, you definitely should think about in order to realize on your own site support for touch control.

  1. iOS icons

The first thing you see when you unlock your iPhone (or iPad), – this icon applications. In addition to application icons in iOS can also see icons of web sites that have been added to the screen “Home”.

To create an icon for your web site, simply add the following link in the head section of the code to your site:

123                                          <link href=”touch-icon-iphone.png” rel=”apple-touch-icon” /><link href=”touch-icon-ipad.png” rel=”apple-touch-icon” sizes=”72×72″ /><link href=”touch-icon-iphone-retina.png” rel=”apple-touch-icon” sizes=”114×114″ />

On the other hand, you can simply remove the references, but at the same time make sure that the icons are stored in the root directory and have the prefix apple-touch-icon- * in the title.

  1. The screen saver

Screen saver – it’s the first image that appears when the application starts. This screen informs users about the current application loads. Often recommended to use the screen saver, which also touted to your brand.

To add wallpaper to your website, just insert the following lines in the head.

1                                          <link href=”splash-screen.png” rel=”apple-touch-startup-image” />

When a user opens your site across the screen “Home”, the image specified in this link will be quickly displayed on the screen.

Despite the fact that the use of the screen saver as several advertising violates the rules, if you use a beautiful screensaver that will show only a couple of seconds – it will create even more good interaction experience.

  1. Windows 8 icons

Windows 8 and RT also offer the ability to add icons in the form of blocks on the screen “Home”. In Windows 8, these blocks are called Pin Icon.

Unlike iOS, which uses an element link, Windows 8 uses a meta-tag. Let’s look at an example.

1 <meta  name = “msapplication-TileColor”  content = “#000”  /> <meta  name = “msapplication-TileImage”  content = “icon.png”  />

The first meta-tag determines the color of the cell, and the second is responsible for the image of the icon. There is a website called Build My Pinned Site, which allows you to easily generate similar meta-tags. At the end of the Revolution of mobile devices has changed the way we, web developers create websites. And now you have to take into account at least the components that we discussed today.Of course, if you want to your sites looked well on devices running on iOS and Windows 8.

Hi, This is Itender Rawat and I am Editor-in-Chief of
I am 26 year tech lover, bike rider and thinker from Dehradun who writes about Technology, Mobiles, Android, Softwares and Internet


Please enter your comment!
Please enter your name here